import { motion } from "motion/react";
import { ShieldCheck, Target, Eye, Award, CheckCircle2 } from "lucide-react";
import { company, teamMembers, offices } from "../data/content";
import SectionHeader from "../components/SectionHeader";
export default function About() {
  return <div className="bg-slate-50 min-h-screen text-slate-900">
      
      {
    /* Page header banner with dark overlay */
  }
      <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-1541888946425-d81bb19240f5?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">
            About AKMEC Group
          </span>
          <h1 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5">
            Pioneering Technical Excellence
          </h1>
          <p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
            Providing vigor, tailorable facilities management, and ISO 9001:2015 approved non-destructive testing since 2021.
          </p>
        </div>
      </section>

      {
    /* Corporate Overview & Strengths */
  }
      <section className="py-20 max-w-7xl mx-auto px-5 md:px-8">
        <div className="grid lg:grid-cols-2 gap-12 items-start">
          <div className="space-y-6">
            <SectionHeader
    tag="Who We Are"
    title="Translating Integrity Into Every Engineered Project"
  />
            <div className="space-y-4 text-slate-500 text-sm leading-relaxed font-light">
              {company.about.map((p, idx) => <p key={idx}>{p}</p>)}
            </div>
          </div>

          <div className="bg-white border border-slate-100 rounded-2xl p-8 shadow-sm space-y-6">
            <h3 className="font-heading text-xl font-bold text-slate-900">Core Accreditation</h3>
            <p className="text-xs text-slate-500 leading-relaxed font-light">
              As a premier certified inspection organization, Masar NDT operates on strict internal quality control guidelines:
            </p>
            <ul className="space-y-4 text-xs font-medium text-slate-700">
              <li className="flex items-start gap-3">
                <span className="w-5 h-5 rounded-full bg-orange-500/10 text-orange-600 flex items-center justify-center shrink-0 mt-0.5"><ShieldCheck className="w-3.5 h-3.5" /></span>
                <span>ISO 9001:2015 approved Quality Management System.</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="w-5 h-5 rounded-full bg-orange-500/10 text-orange-600 flex items-center justify-center shrink-0 mt-0.5"><Award className="w-3.5 h-3.5" /></span>
                <span>Procedures qualified per ASME, ASTM and API standards.</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="w-5 h-5 rounded-full bg-orange-500/10 text-orange-600 flex items-center justify-center shrink-0 mt-0.5"><CheckCircle2 className="w-3.5 h-3.5" /></span>
                <span>Rigorous safety protocol for extreme or confined space locations.</span>
              </li>
            </ul>
          </div>
        </div>
      </section>

      {
    /* Vision & Mission Bento Blocks */
  }
      <section className="bg-slate-100 border-y border-slate-200 py-20">
        <div className="max-w-7xl mx-auto px-5 md:px-8 grid md:grid-cols-2 gap-8">
          <motion.div
    initial={{ opacity: 0, x: -20 }}
    whileInView={{ opacity: 1, x: 0 }}
    viewport={{ once: true }}
    className="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between"
  >
            <div>
              <div className="w-12 h-12 bg-orange-500/10 text-orange-600 flex items-center justify-center rounded-xl mb-6">
                <Target className="w-6 h-6" />
              </div>
              <h3 className="font-heading text-2xl font-bold text-slate-900">Our Mission</h3>
              <p className="text-xs text-slate-500 mt-4 leading-relaxed font-light">
                {company.mission} We are committed to rendering services reflective of our efficiency and provide our industrial clients with superior quality and compliance.
              </p>
            </div>
            <div className="h-2 bg-gradient-to-r from-orange-500/10 to-orange-500 rounded-full mt-8" />
          </motion.div>

          <motion.div
    initial={{ opacity: 0, x: 20 }}
    whileInView={{ opacity: 1, x: 0 }}
    viewport={{ once: true }}
    className="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between"
  >
            <div>
              <div className="w-12 h-12 bg-orange-500/10 text-orange-600 flex items-center justify-center rounded-xl mb-6">
                <Eye className="w-6 h-6" />
              </div>
              <h3 className="font-heading text-2xl font-bold text-slate-900">Our Vision</h3>
              <p className="text-xs text-slate-500 mt-4 leading-relaxed font-light">
                {company.vision} Exceeding expectations through personal attention, total dedication, and highly synchronized teamwork on shutdown, EPC, O&M and manufacturing programs.
              </p>
            </div>
            <div className="h-2 bg-gradient-to-r from-orange-500/10 to-orange-500 rounded-full mt-8" />
          </motion.div>
        </div>
      </section>

      {
    /* Leadership Profile Grid */
  }
      <section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
        <SectionHeader
    align="center"
    tag="Our Leadership"
    title="Experienced Engineering Experts"
    description="Combining over 60 cumulative years of industrial auditing, certified Level III consultancy, and shutdown planning across public and private sectors."
  />

        <div className="grid md:grid-cols-3 gap-8 mt-12">
          {teamMembers.map((member) => <div key={member.name} className="bg-white border border-slate-100 rounded-2xl overflow-hidden shadow-md flex flex-col justify-between group hover:border-orange-500/20 hover:-translate-y-1 transition-all duration-300">
              <div className="aspect-square bg-slate-100 overflow-hidden relative">
                <img
    src={member.photo}
    alt={member.name}
    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
    referrerPolicy="no-referrer"
  />
              </div>
              <div className="p-6 space-y-3">
                <h3 className="font-heading text-lg font-bold text-slate-900">{member.name}</h3>
                <p className="text-[11px] font-bold text-orange-500 uppercase tracking-wider">{member.position}</p>
                <p className="text-xs text-slate-500 leading-relaxed font-light pt-2 border-t border-slate-50">{member.bio}</p>
              </div>
            </div>)}
        </div>
      </section>

      {
    /* Offices Locations Block */
  }
      <section className="bg-slate-900 text-white border-t border-slate-950 py-20">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <SectionHeader
    dark
    align="center"
    tag="Global Reach"
    title="Our Corporate Network"
    description="With regional headquarters and representative facilities across Saudi Arabia and India, we support large shutdowns on demand."
  />

          <div className="grid md:grid-cols-2 gap-8 mt-12">
            {offices.map((office) => <div key={office.label} className="bg-slate-950 border border-slate-800 p-8 rounded-2xl space-y-4">
                <h3 className="font-heading text-xl font-bold text-white flex items-center gap-2">
                  <span className="w-2.5 h-2.5 bg-orange-500 rounded-full" />
                  {office.label}
                </h3>
                <div className="space-y-2 text-xs text-slate-300 font-light leading-relaxed">
                  {office.lines.map((l) => <p key={l}>{l}</p>)}
                </div>
                <div className="pt-4 border-t border-slate-800 grid gap-1 text-xs text-slate-400">
                  {office.mobile && <p>Mobile: <strong className="text-white">{office.mobile}</strong></p>}
                  <p>Email: <a href={`mailto:${office.email}`} className="text-orange-400 hover:underline">{office.email}</a></p>
                  <p>Web: <a href={`https://${office.website}`} target="_blank" rel="noopener noreferrer" className="text-orange-400 hover:underline">{office.website}</a></p>
                </div>
              </div>)}
          </div>
        </div>
      </section>

    </div>;
}
