import { Link } from "react-router-dom";
import { motion } from "motion/react";
import { ArrowRight, ShieldCheck, Award, Users, FileText, ChevronRight } from "lucide-react";
import { serviceCategories, company, stats, processSteps, blogPosts } from "../data/content";
import ServiceCategoryGrid from "../components/ServiceCategoryGrid";
import SectionHeader from "../components/SectionHeader";
export default function Home() {
  return <div className="bg-slate-50 min-h-screen text-slate-900">
      
      {
    /* 1. Hero Section with dynamic high-contrast design */
  }
      <section className="relative pt-32 pb-24 md:pt-44 md:pb-40 bg-slate-950 overflow-hidden text-white border-b border-slate-900">
        <div className="absolute inset-0 z-0 opacity-40">
          <img
    src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=80"
    alt="Refinery plant industrial inspection"
    className="w-full h-full object-cover object-center scale-105"
    referrerPolicy="no-referrer"
  />
          <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/80 to-transparent" />
        </div>

        {
    /* Decorative rotating cogs in background for engineered vibe */
  }
        <div className="absolute right-[-10%] bottom-[-10%] w-96 h-96 text-orange-500/5 select-none pointer-events-none animate-spin-slow hidden lg:block" aria-hidden="true">
          <svg fill="currentColor" viewBox="0 0 24 24" className="w-full h-full">
            <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" />
          </svg>
        </div>

        <div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
          <div className="max-w-3xl">
            <motion.div
    initial={{ opacity: 0, y: 15 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.5 }}
    className="inline-flex items-center gap-2 bg-orange-500/20 text-orange-400 border border-orange-500/30 px-3.5 py-1.5 rounded-full text-xs font-bold font-mono uppercase tracking-wider mb-6"
  >
              <ShieldCheck className="w-4 h-4" />
              <span>ISO 9001:2015 Approved Inspection Body</span>
            </motion.div>
            
            <motion.h1
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.6, delay: 0.1 }}
    className="font-heading text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.1]"
  >
              First-Time-Right <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-orange-500 to-amber-500">Inspection & Integrity</span>
            </motion.h1>
            
            <motion.p
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.6, delay: 0.2 }}
    className="mt-6 text-slate-300 text-sm sm:text-base md:text-lg max-w-2xl font-light leading-relaxed"
  >
              {company.intro} Fully calibrated advanced instruments, certified VT Level II/III & API inspectors, and 90,000+ strong personnel resume base for shutdowns across KSA and India.
            </motion.p>
            
            <motion.div
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.6, delay: 0.3 }}
    className="mt-10 flex flex-wrap gap-4 items-center"
  >
              <Link
    to="/contact"
    className="bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase shadow-lg hover:shadow-orange-500/20 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 flex items-center gap-2"
  >
                <span>Request Inspection Proposal</span>
                <ArrowRight className="w-4 h-4 text-white" />
              </Link>
              <Link
    to="/about"
    className="bg-slate-900 hover:bg-slate-800 text-white border border-slate-800 font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase transition-all duration-200"
  >
                Learn More
              </Link>
            </motion.div>
          </div>
        </div>
      </section>

      {
    /* 2. Key Stats Strip (High-contrast card grid overlay) */
  }
      <section className="relative z-10 -mt-10 max-w-7xl mx-auto px-5 md:px-8">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
          {stats.map((s, idx) => <motion.div
    key={s.label}
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ duration: 0.4, delay: idx * 0.05 }}
    className="bg-white border border-slate-100 p-5 sm:p-7 rounded-2xl shadow-xl flex flex-col justify-between"
  >
              <span className="font-heading text-2xl sm:text-3xl font-extrabold text-orange-500 block tracking-tight">
                {s.value}
              </span>
              <span className="text-xs text-slate-500 font-medium mt-1 leading-normal">
                {s.label}
              </span>
            </motion.div>)}
        </div>
      </section>

      {
    /* 3. Welcome / Executive Statement */
  }
      <section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <SectionHeader
    tag="Corporate Profile"
    title="ISO 9001:2015 Approved Engineering Services"
    description="A powerhouse of technical excellence supporting Upstream, Downstream, Marine, Power and Infrastructure developments with uncompromising compliance."
  />
            <div className="space-y-4 text-slate-500 font-light text-sm leading-relaxed">
              <p>{company.about[0]}</p>
              <p>{company.about[1]}</p>
            </div>
            <div className="mt-8">
              <Link
    to="/about"
    className="inline-flex items-center gap-2 text-xs font-bold text-orange-500 uppercase tracking-wider hover:text-orange-600 transition-colors"
  >
                <span>Read executive group statement</span>
                <ChevronRight className="w-4 h-4" />
              </Link>
            </div>
          </div>

          <div className="grid sm:grid-cols-2 gap-6">
            <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
              <div className="w-10 h-10 rounded-xl bg-orange-500/10 text-orange-600 flex items-center justify-center">
                <ShieldCheck className="w-5 h-5" />
              </div>
              <h3 className="font-heading text-lg font-bold text-slate-900">Total Quality</h3>
              <p className="text-xs text-slate-500 leading-relaxed font-light">
                Stringent code compliance per ASME Section V, API standards, NACE and ASTM guidelines.
              </p>
            </div>
            <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
              <div className="w-10 h-10 rounded-xl bg-orange-500/10 text-orange-600 flex items-center justify-center">
                <Award className="w-5 h-5" />
              </div>
              <h3 className="font-heading text-lg font-bold text-slate-900">First-Time-Right</h3>
              <p className="text-xs text-slate-500 leading-relaxed font-light">
                Specialized in reducing outside resources while preserving safety and data integrity.
              </p>
            </div>
            <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
              <div className="w-10 h-10 rounded-xl bg-orange-500/10 text-orange-600 flex items-center justify-center">
                <Users className="w-5 h-5" />
              </div>
              <h3 className="font-heading text-lg font-bold text-slate-900">Outsourcing database</h3>
              <p className="text-xs text-slate-500 leading-relaxed font-light">
                Access to over 90,000 vetted resumes, allowing quick shutdown mobilization.
              </p>
            </div>
            <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
              <div className="w-10 h-10 rounded-xl bg-orange-500/10 text-orange-600 flex items-center justify-center">
                <FileText className="w-5 h-5" />
              </div>
              <h3 className="font-heading text-lg font-bold text-slate-900">Reporting Accuracy</h3>
              <p className="text-xs text-slate-500 leading-relaxed font-light">
                Clear digital records, remaining life estimations, and post-turnaround evaluations.
              </p>
            </div>
          </div>
        </div>
      </section>

      {
    /* 4. Service Categories Grid */
  }
      <section className="bg-slate-100 border-y border-slate-200 py-24">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <SectionHeader
    align="center"
    tag="Inspection Scope"
    title="Our Engineering & Testing Specialties"
    description="Our divisions work independently or integrate seamlessly to deliver total asset assurance."
  />
          <ServiceCategoryGrid categories={serviceCategories} />
        </div>
      </section>

      {
    /* 5. Process Roadmap Section (staggered timeline) */
  }
      <section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
        <SectionHeader
    align="center"
    tag="Engagement Model"
    title="Engineered Process Lifecycle"
    description="How we prepare, execute, and deliver first-time-right assurance for complex structures."
  />
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
          {processSteps.map((step) => <motion.div
    key={step.step}
    initial={{ opacity: 0, y: 15 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ duration: 0.4 }}
    className="bg-white border border-slate-100 p-8 rounded-2xl shadow-sm relative group"
  >
              <span className="font-mono text-3xl font-bold text-orange-500/20 absolute top-6 right-8 group-hover:text-orange-500/35 transition-colors">
                {step.step}
              </span>
              <h3 className="font-heading text-lg font-bold text-slate-900 mt-2 flex items-center gap-2">
                <span className="w-1.5 h-6 bg-orange-500 rounded-full" />
                {step.title}
              </h3>
              <p className="text-xs text-slate-500 mt-4 leading-relaxed font-light">
                {step.description}
              </p>
            </motion.div>)}
        </div>
      </section>

      {
    /* 6. Technical Insights Block (Latest from blog) */
  }
      <section className="bg-slate-900 text-white border-t border-slate-950 py-24">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <div className="flex flex-col md:flex-row md:items-end justify-between mb-12">
            <SectionHeader
    dark
    tag="Technical Insights"
    title="Industry Standards & NDT Insights"
    description="Read detailed analysis and breakdown of industrial safety codes, API standards, and testing procedures from our Level III experts."
  />
            <Link
    to="/gallery"
    className="mt-4 md:mt-0 bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-6 py-3.5 rounded-xl uppercase tracking-wider transition-all duration-200"
  >
              View Media Gallery
            </Link>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {blogPosts.map((post) => <article key={post.id} className="bg-slate-950 border border-slate-800 rounded-2xl overflow-hidden shadow-xl hover:-translate-y-1 transition-all duration-300">
                <div className="aspect-[3/2] overflow-hidden relative">
                  <img
    src={post.image}
    alt={post.title}
    className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
    referrerPolicy="no-referrer"
  />
                  <span className="absolute top-4 left-4 bg-orange-500 text-white font-bold text-[9px] uppercase tracking-wider px-2.5 py-1 rounded">
                    {post.category}
                  </span>
                </div>
                <div className="p-6 space-y-4">
                  <div className="flex items-center gap-3 text-[10px] text-slate-400 font-mono">
                    <span>{post.date}</span>
                    <span>•</span>
                    <span>{post.readTime}</span>
                  </div>
                  <h3 className="font-heading text-base font-bold text-white hover:text-orange-400 transition-colors line-clamp-2">
                    {post.title}
                  </h3>
                  <p className="text-xs text-slate-400 font-light leading-relaxed line-clamp-3">
                    {post.excerpt}
                  </p>
                  <div className="pt-4 border-t border-slate-800 flex items-center justify-between text-[11px]">
                    <span className="text-slate-400">By <strong>{post.author}</strong></span>
                    <Link to="/contact" className="text-orange-400 hover:text-orange-300 font-bold uppercase tracking-wider flex items-center gap-1">
                      <span>Full Text</span>
                      <ArrowRight className="w-3.5 h-3.5" />
                    </Link>
                  </div>
                </div>
              </article>)}
          </div>
        </div>
      </section>

      {
    /* 7. Bottom CTA */
  }
      <section className="bg-orange-500 text-white py-16 relative overflow-hidden">
        <div className="max-w-5xl mx-auto px-5 md:px-8 text-center relative z-10 space-y-6">
          <h2 className="font-heading text-3xl sm:text-4xl font-extrabold tracking-tight leading-none text-white">
            Ready to secure your refinery turnaround or pipeline NDT scope?
          </h2>
          <p className="text-sm font-light max-w-2xl mx-auto text-orange-50">
            Let our planning engineers audit your NDT procedures or assist you in mobilizing highly qualified technical personnel. We deliver accurate results per ASME & API requirements.
          </p>
          <div className="pt-4 flex flex-wrap gap-4 justify-center">
            <Link
    to="/contact"
    className="bg-slate-950 hover:bg-slate-900 text-white font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase shadow-xl transition-all duration-200"
  >
              Get Technical Consultation
            </Link>
            <a
    href="tel:+966571033252"
    className="bg-white hover:bg-orange-50 text-orange-600 font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase transition-all duration-200 flex items-center gap-2 shadow-sm"
  >
              <span>Call Operations</span>
              <span>+966 57 103 3252</span>
            </a>
          </div>
        </div>
      </section>

    </div>;
}
