import { Link } from "react-router-dom";
import { motion } from "motion/react";
import { ArrowRight, CheckCircle2 } from "lucide-react";
import { industries } from "../data/content";
import SectionHeader from "../components/SectionHeader";
export default function Industries() {
  return <div className="bg-slate-50 min-h-screen text-slate-900">
      
      {
    /* Page Header Banner */
  }
      <section
    className="relative pt-32 pb-20 md:pt-40 md:pb-28 bg-cover bg-center text-white border-b border-slate-900"
    style={{ backgroundImage: "url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=1600&q=80')" }}
  >
        <div className="absolute inset-0 bg-slate-950/80 pointer-events-none" />
        <div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
          <span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
            Sector Coverage
          </span>
          <h1 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5">
            Industries We Serve
          </h1>
          <p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
            Providing custom non-destructive testing, ASME code compliance, and specialized technical inspectors across 30+ sectors.
          </p>
        </div>
      </section>

      {
    /* Grid of Sectors */
  }
      <section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
        <SectionHeader
    tag="Full Catalog"
    title="Industrial Markets Supported"
    description="From high-pressure upstream refining to duplex structural offshore welds, our procedures fit perfectly into any quality-assurance program."
  />

        <div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-12">
          {industries.map((industry, idx) => <motion.div
    key={industry}
    initial={{ opacity: 0, y: 15 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ duration: 0.3, delay: idx * 0.02 }}
    className="bg-white border border-slate-100 p-6 rounded-2xl shadow-sm hover:shadow-md hover:border-orange-500/20 hover:-translate-y-0.5 transition-all duration-350 flex items-center gap-3.5"
  >
              <span className="w-5 h-5 rounded-full bg-orange-500/10 text-orange-600 flex items-center justify-center shrink-0">
                <CheckCircle2 className="w-3.5 h-3.5" />
              </span>
              <span className="text-sm font-semibold text-slate-800 leading-normal">
                {industry}
              </span>
            </motion.div>)}
        </div>
      </section>

      {
    /* Standard compliance block */
  }
      <section className="bg-slate-100 border-y border-slate-200 py-16">
        <div className="max-w-4xl mx-auto px-5 md:px-8 text-center space-y-4">
          <h3 className="font-heading text-lg font-bold text-slate-900">Strict Standards Compatibility</h3>
          <p className="text-xs text-slate-500 leading-relaxed font-light">
            All inspectors undergo on-going theoretical training to maintain updated knowledge regarding specific industrial standard amendments—including ASME B31.3 for piping, ASME Section VIII for pressure vessels, API 510/570/653 inspections, and AWS/ASNT Level II / III code requirements.
          </p>
        </div>
      </section>

      {
    /* Bottom CTA */
  }
      <section className="max-w-4xl mx-auto px-5 md:px-8 py-20 text-center relative z-10">
        <p className="text-slate-500 font-light text-xs sm:text-sm">Need help evaluating code compliance or outlining test procedures for your sector?</p>
        <Link
    to="/contact"
    className="inline-flex items-center gap-2 mt-6 bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase shadow-md transition-all duration-200 group"
  >
          <span>Ask An Estimating Engineer</span>
          <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform text-white" />
        </Link>
      </section>

    </div>;
}
