// home-sections.jsx, Hero, Brands, Divisions, Why, Services, Industries, Certifications, Cta
const {
  ImageWithFallback: IWF,
  ArrowRight: HArrowRight, ShieldCheck, Flame, PlayCircle, Award: HAward,
  Globe2, Layers, BadgeCheck, Headphones,
  HardHat, Footprints, Shirt, Mountain, Scissors, Cpu, CheckCircle2: HCheck,
  ClipboardCheck, Wrench, GraduationCap, LifeBuoy, Truck, KeyRound,
  ArrowUpRight: HArrowUpRight, MessageSquare: HMessageSquare, FileCheck, Gauge, ScrollText, Building2,
  PhoneIcon: HPhone, MailIcon: HMail, MapPinIcon: HMapPin,
  brandLogo,
} = window;

function HeroSection() {
  return (
    <section className="relative w-full overflow-hidden bg-[#0A1628] text-white">
      <div className="absolute inset-0">
        <IWF
          src="https://images.unsplash.com/photo-1730584476141-232435a40c32?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
          alt="Industrial welding operations"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-[#0A1628] via-[#0A1628]/75 to-transparent" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_rgba(16,185,129,0.18),_transparent_55%)]" />
      </div>

      <div className="absolute inset-y-0 left-0 w-px bg-gradient-to-b from-transparent via-emerald-500/30 to-transparent" />
      <div className="absolute top-32 left-[10%] w-32 h-32 border border-emerald-500/20 rounded-full" />
      <div className="absolute bottom-20 right-[8%] w-48 h-48 border border-cyan-500/10 rounded-full" />

      <div className="relative mx-auto max-w-[1300px] px-6 pt-24 pb-28 lg:pt-32 lg:pb-36">
        <div className="max-w-3xl">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-emerald-400/30 bg-emerald-500/10 backdrop-blur-sm text-emerald-300 text-[13px] tracking-wide">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
            Trusted by 1,200+ industrial operations across Southeast Asia
          </div>

          <h1 className="mt-7 text-white tracking-tight" style={{ fontSize: "clamp(2.5rem, 5.2vw, 4.5rem)", lineHeight: 1.05, fontWeight: 700 }}>
            Engineered Solutions for{" "}
            <span className="bg-gradient-to-r from-emerald-300 via-teal-300 to-cyan-300 bg-clip-text text-transparent">
              Safer, Stronger
            </span>
            <br />
            Operations
          </h1>

          <p className="mt-7 text-slate-300 max-w-2xl" style={{ fontSize: 18, lineHeight: 1.65 }}>
            Leeden Thailand is a complete solution ecosystem for safety and welding,
            delivering trusted global brands, technical expertise, and responsive support
            to industries across Thailand and the region.
          </p>

          <div className="mt-10 flex flex-wrap items-center gap-4">
            <a href="#safety" className="group inline-flex items-center gap-2.5 bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400 text-white px-7 py-4 rounded-full transition shadow-lg shadow-emerald-900/30">
              <ShieldCheck className="w-5 h-5" />
              Explore Safety Solutions
              <HArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
            </a>
            <a href="#welding" className="group inline-flex items-center gap-2.5 bg-white/10 hover:bg-white/15 backdrop-blur-sm border border-white/20 text-white px-7 py-4 rounded-full transition">
              <Flame className="w-5 h-5 text-amber-300" />
              Explore Welding Solutions
              <HArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
            </a>
            <button className="group inline-flex items-center gap-2 text-slate-200 hover:text-white px-2 py-4 transition">
              <PlayCircle className="w-6 h-6" />
              <span className="border-b border-slate-500 group-hover:border-white">Watch our story</span>
            </button>
          </div>

          <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 max-w-3xl">
            {[
              { v: "35+", l: "Years of expertise" },
              { v: "1,200+", l: "Industrial clients" },
              { v: "50+", l: "Global brand partners" },
              { v: "24/7", l: "Onsite support" },
            ].map((s) => (
              <div key={s.l} className="border-l border-emerald-400/40 pl-4">
                <div className="text-white" style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.02em" }}>{s.v}</div>
                <div className="text-slate-400 text-[13px] mt-1">{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-emerald-500/40 to-transparent" />
    </section>
  );
}

const heroBrands = [
  { name: "Kemppi", tag: "Welding Equipment", country: "Finland" },
  { name: "Red Wing", tag: "Protective Footwear", country: "USA" },
  { name: "Climax", tag: "Portable Machining", country: "USA" },
  { name: "3M", tag: "PPE & Respiratory", country: "USA" },
  { name: "Ansell", tag: "Hand Protection", country: "Australia" },
  { name: "Uvex", tag: "Eye & Head Protection", country: "Germany" },
  { name: "Axxair", tag: "Orbital Cutting", country: "France" },
  { name: "Dunlop", tag: "Industrial Boots", country: "UK" },
  { name: "Magnatech", tag: "Orbital Welding", country: "USA" },
];

function BrandsSection() {
  return (
    <section className="relative bg-white py-24">
      <div className="mx-auto max-w-[1300px] px-6">
        <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-14">
          <div className="max-w-2xl">
            <div className="inline-flex items-center gap-2 text-emerald-700 text-[13px] tracking-[0.18em] uppercase">
              <span className="w-8 h-px bg-emerald-600" />
              Global Brand Partners
            </div>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(2rem, 3.5vw, 3rem)", lineHeight: 1.1, fontWeight: 700 }}>
              World-class brands.<br />Delivered locally.
            </h2>
          </div>
          <p className="text-slate-600 max-w-md" style={{ fontSize: 16, lineHeight: 1.65 }}>
            We represent the industry's most respected manufacturers, bringing globally
            engineered safety and welding equipment to operations across Thailand.
          </p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-px bg-slate-200 border border-slate-200 rounded-2xl overflow-hidden">
          {heroBrands.map((b) => (
            <div key={b.name} className="group relative bg-white p-8 hover:bg-gradient-to-br hover:from-white hover:to-emerald-50/40 transition-all duration-300 cursor-pointer">
              <div className="flex items-start justify-between mb-6">
                <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-50 to-teal-50 flex items-center justify-center border border-emerald-100">
                  <HAward className="w-5 h-5 text-emerald-600" />
                </div>
                <span className="text-[11px] tracking-[0.15em] uppercase text-slate-400">{b.country}</span>
              </div>
              <div className="text-[#0A1628] tracking-tight" style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em" }}>{b.name}</div>
              <div className="mt-2 text-slate-500 text-[14px]">{b.tag}</div>
              <div className="mt-6 flex items-center gap-2 text-emerald-700 text-[13px] opacity-0 group-hover:opacity-100 transition-opacity">
                Explore brand
                <span className="transition-transform group-hover:translate-x-1">→</span>
              </div>
              <div className="absolute bottom-0 left-0 h-0.5 w-0 bg-gradient-to-r from-emerald-500 to-teal-500 group-hover:w-full transition-all duration-500" />
            </div>
          ))}
        </div>

        <div className="mt-10 text-center text-slate-500 text-[14px]">
          And 40+ more trusted international partners.{" "}
          <a href="#" className="text-emerald-700 hover:text-emerald-800 underline underline-offset-4">View all brands</a>
        </div>
      </div>
    </section>
  );
}

function DivisionCard({ id, tag, tagColor, title, description, image, items, accent, cta, href }) {
  const accentText = accent === "emerald" ? "text-emerald-300" : "text-amber-300";
  const accentRing = accent === "emerald" ? "ring-emerald-400/30" : "ring-amber-400/30";
  const btnGrad = accent === "emerald"
    ? "from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400"
    : "from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400";

  return (
    <div id={id} className="group relative overflow-hidden rounded-2xl bg-[#0A1628] text-white">
      <div className="absolute inset-0">
        <IWF src={image} alt={title} className="w-full h-full object-cover opacity-50 group-hover:opacity-60 group-hover:scale-105 transition-all duration-700" />
        <div className="absolute inset-0 bg-gradient-to-t from-[#0A1628] via-[#0A1628]/85 to-[#0A1628]/30" />
      </div>
      <div className="relative p-10 lg:p-12 flex flex-col h-full min-h-[560px]">
        <div className={`inline-flex w-fit items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 backdrop-blur-sm ring-1 ${accentRing}`}>
          <span className={`text-[12px] tracking-[0.18em] uppercase bg-gradient-to-r ${tagColor} bg-clip-text text-transparent`} style={{ fontWeight: 600 }}>
            {tag}
          </span>
        </div>

        <h3 className="mt-auto pt-12 tracking-tight" style={{ fontSize: "clamp(1.75rem, 2.4vw, 2.25rem)", lineHeight: 1.15, fontWeight: 700 }}>
          {title}
        </h3>
        <p className="mt-4 text-slate-300 max-w-md" style={{ fontSize: 15.5, lineHeight: 1.65 }}>
          {description}
        </p>

        <div className="mt-8 grid grid-cols-2 gap-3">
          {items.map((it) => {
            const ItIcon = it.icon;
            return (
              <div key={it.label} className="flex items-center gap-3 p-3.5 rounded-lg bg-white/5 backdrop-blur-sm border border-white/10 hover:border-white/25 hover:bg-white/10 transition">
                <div className={`w-9 h-9 rounded-md bg-white/5 flex items-center justify-center ${accentText}`}>
                  <ItIcon className="w-4.5 h-4.5" />
                </div>
                <span className="text-[14px] text-slate-200">{it.label}</span>
              </div>
            );
          })}
        </div>

        <a href={href} className={`mt-8 inline-flex w-fit items-center gap-2 bg-gradient-to-r ${btnGrad} text-white px-6 py-3.5 rounded-full transition shadow-lg shadow-black/30`}>
          {cta} <HArrowRight className="w-4 h-4" />
        </a>
      </div>
    </div>
  );
}

function DivisionsSection() {
  return (
    <section id="divisions" className="relative bg-slate-50 py-28">
      <div className="mx-auto max-w-[1300px] px-6">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <div className="inline-flex items-center gap-2 text-emerald-700 text-[13px] tracking-[0.18em] uppercase">
            <span className="w-8 h-px bg-emerald-600" />
            Specialist Divisions
            <span className="w-8 h-px bg-emerald-600" />
          </div>
          <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(2rem, 3.5vw, 3rem)", lineHeight: 1.1, fontWeight: 700 }}>
            Two divisions. One complete ecosystem.
          </h2>
          <p className="mt-5 text-slate-600" style={{ fontSize: 17, lineHeight: 1.65 }}>
            Specialised teams, dedicated technical experts, and purpose-built solutions
            for the demands of modern industrial operations.
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-8">
          <DivisionCard
            id="safety"
            tag="01 / Safety Division"
            tagColor="from-emerald-500 to-teal-500"
            title="Safety Division"
            cta="View Safety Products"
            href="#/safety"
            description="Integrated safety solutions covering PPE, protective footwear, workwear, and fall protection systems. Built for durability, safety, and reliable performance in the most demanding environments."
            image="https://images.unsplash.com/photo-1589939705384-5185137a7f0f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1600&q=85"
            items={[
              { icon: HardHat, label: "Personal Protective Equipment" },
              { icon: Footprints, label: "Protective Footwear" },
              { icon: Shirt, label: "Industrial Workwear" },
              { icon: Mountain, label: "Fall Protection Systems" },
            ]}
            accent="emerald"
          />
          <DivisionCard
            id="welding"
            tag="02 / Welding Division"
            tagColor="from-amber-500 to-orange-500"
            title="Welding Division"
            cta="View Welding Products"
            href="#/welding"
            description="Advanced welding solutions covering machines, cutting, preparation, alignment, automation, and quality control. Supporting precise fabrication, on-site repair, and consistent weld performance in industrial applications."
            image="https://images.unsplash.com/photo-1730584474196-b0e8a29303e8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1600&q=85"
            items={[
              { icon: Flame, label: "Welding Machines" },
              { icon: Scissors, label: "Cutting & Preparation" },
              { icon: Cpu, label: "Automation & Alignment" },
              { icon: HCheck, label: "Quality Control" },
            ]}
            accent="amber"
          />
        </div>
      </div>
    </section>
  );
}

const whyPillars = [
  { icon: Globe2, title: "Global Brands, Local Expertise", desc: "We represent over 20 of the world's leading safety and welding brands, backed by deep local knowledge of Thailand's industrial landscape.", metric: "20+ global brands" },
  { icon: Layers, title: "Complete Solution Ecosystem", desc: "From assessment and product selection through to installation, training, after-sales service, and machine rental, we support your operations at every stage.", metric: "End-to-end delivery" },
  { icon: BadgeCheck, title: "Internationally Certified", desc: "Our products and processes meet international quality and safety standards, giving you confidence in every solution we deliver.", metric: "International standards" },
  { icon: Headphones, title: "Responsive On-Site Support", desc: "We don't just supply, we integrate expertise, products, and services to ensure long-term performance, safety, and reliability at every stage of your operation.", metric: "On-site support" },
];

function WhySection() {
  return (
    <section className="relative bg-white py-28 overflow-hidden">
      <div className="mx-auto max-w-[1300px] px-6">
        <div className="grid lg:grid-cols-[1fr_1.4fr] gap-16 items-start">
          <div className="lg:sticky lg:top-32">
            <div className="inline-flex items-center gap-2 text-emerald-700 text-[13px] tracking-[0.18em] uppercase">
              <span className="w-8 h-px bg-emerald-600" />
              Why Leeden
            </div>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(2rem, 3.5vw, 3rem)", lineHeight: 1.1, fontWeight: 700 }}>
              Built for Performance.<br />Designed for Reliability.
            </h2>
            <p className="mt-5 text-slate-600" style={{ fontSize: 17, lineHeight: 1.7 }}>
              We engineer outcomes: safer worksites, more productive welding, lower
              total cost of ownership. That requires more than catalogue selling.
            </p>

            <div className="mt-8 rounded-xl overflow-hidden border border-slate-200 shadow-sm">
              <IWF
                src="https://images.unsplash.com/photo-1672748341520-6a839e6c05bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1200&q=85"
                alt="Leeden engineer on site"
                className="w-full h-[400px] object-cover"
              />
            </div>
          </div>

          <div className="grid sm:grid-cols-2 gap-5">
            {whyPillars.map((p, i) => {
              const PIcon = p.icon;
              return (
                <div key={p.title} className="group relative p-7 rounded-2xl bg-gradient-to-br from-slate-50 to-white border border-slate-200 hover:border-emerald-300 hover:shadow-xl hover:shadow-emerald-900/5 transition-all">
                  <div className="absolute -top-px left-7 right-7 h-px bg-gradient-to-r from-transparent via-emerald-400/60 to-transparent opacity-0 group-hover:opacity-100 transition" />
                  <div className="text-[12px] tracking-[0.2em] uppercase text-slate-400">0{i + 1}</div>
                  <div className="mt-4 w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center shadow-md shadow-emerald-900/20">
                    <PIcon className="w-6 h-6 text-white" />
                  </div>
                  <h3 className="mt-5 text-[#0A1628] tracking-tight" style={{ fontSize: 19, fontWeight: 700, lineHeight: 1.3 }}>{p.title}</h3>
                  <p className="mt-3 text-slate-600 text-[14.5px]" style={{ lineHeight: 1.65 }}>{p.desc}</p>
                  <div className="mt-5 pt-5 border-t border-slate-200 text-emerald-700 text-[13px] tracking-wide" style={{ fontWeight: 600 }}>{p.metric}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

const homeServices = [
  { num: "01", icon: ClipboardCheck, title: "Assessment & Consultation", desc: "Site evaluations, safety audits and welding process reviews from certified engineers." },
  { num: "02", icon: Wrench, title: "Installation & Implementation", desc: "Turnkey commissioning of equipment, fall-arrest systems and automated welding cells." },
  { num: "03", icon: GraduationCap, title: "Training & Technical Support", desc: "Manufacturer-accredited operator training and welder qualification programs." },
  { num: "04", icon: LifeBuoy, title: "After-Sales Service", desc: "Genuine parts, calibration and warranty service from factory-trained technicians." },
  { num: "05", icon: Truck, title: "Onsite Service", desc: "Field engineers dispatched across Thailand for repairs, inspections and emergency response." },
  { num: "06", icon: KeyRound, title: "Machine Rental", desc: "Short and long-term rental of welding, cutting and pipe-prep equipment with full support." },
];

function ServicesSection() {
  return (
    <section className="relative bg-[#0A1628] text-white py-28 overflow-hidden">
      <div className="absolute inset-0 opacity-[0.04]" style={{
        backgroundImage: "linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)",
        backgroundSize: "64px 64px",
      }} />
      <div className="absolute -top-32 -left-32 w-96 h-96 rounded-full bg-emerald-500/10 blur-3xl" />
      <div className="absolute -bottom-32 -right-32 w-96 h-96 rounded-full bg-cyan-500/10 blur-3xl" />

      <div className="relative mx-auto max-w-[1300px] px-6">
        <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-8 mb-16">
          <div className="max-w-2xl">
            <div className="inline-flex items-center gap-2 text-emerald-300 text-[13px] tracking-[0.18em] uppercase">
              <span className="w-8 h-px bg-emerald-400" />
              Solutions Partner
            </div>
            <h2 className="mt-4 tracking-tight" style={{ fontSize: "clamp(2rem, 3.5vw, 3rem)", lineHeight: 1.1, fontWeight: 700 }}>
              Beyond products. <br />
              <span className="bg-gradient-to-r from-emerald-300 to-cyan-300 bg-clip-text text-transparent">A complete service spectrum.</span>
            </h2>
          </div>
          <p className="text-slate-400 max-w-md" style={{ fontSize: 16, lineHeight: 1.7 }}>
            Six interconnected services that move with your operation, from first
            assessment through long-term maintenance and rental.
          </p>
        </div>

        <div className="relative">
          <div className="hidden lg:block absolute top-12 left-0 right-0 h-px bg-gradient-to-r from-transparent via-emerald-400/40 to-transparent" />
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {homeServices.map((s) => {
              const SIcon = s.icon;
              return (
                <div key={s.num} className="group relative p-7 rounded-2xl bg-white/[0.03] backdrop-blur-sm border border-white/10 hover:border-emerald-400/40 hover:bg-white/[0.06] transition-all">
                  <div className="flex items-start justify-between">
                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500/20 to-teal-500/10 border border-emerald-400/30 flex items-center justify-center">
                      <SIcon className="w-5.5 h-5.5 text-emerald-300" />
                    </div>
                    <span className="text-slate-500 tracking-tight" style={{ fontSize: 32, fontWeight: 700 }}>{s.num}</span>
                  </div>
                  <h3 className="mt-6 text-white tracking-tight" style={{ fontSize: 18.5, fontWeight: 700, lineHeight: 1.3 }}>{s.title}</h3>
                  <p className="mt-3 text-slate-400" style={{ fontSize: 14.5, lineHeight: 1.65 }}>{s.desc}</p>
                  <div className="mt-6 flex items-center gap-2 text-emerald-300 text-[13px] opacity-60 group-hover:opacity-100 transition">
                    Learn more
                    <HArrowRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-1" />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

const industries = [
  { name: "Oil & Gas", code: "01", img: "https://images.unsplash.com/photo-1768564206500-5cddb1fea679?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", tags: ["Upstream", "Midstream", "Refining"] },
  { name: "Petrochemical", code: "02", img: "https://images.unsplash.com/photo-1777915627530-fc3decb749cf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", tags: ["Plant maintenance", "Turnarounds"] },
  { name: "Manufacturing", code: "03", img: "https://images.unsplash.com/photo-1747999461210-a56f72294428?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", tags: ["Production lines", "Fabrication"] },
  { name: "Construction", code: "04", img: "https://images.unsplash.com/photo-1593313637552-29c2c0dacd35?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", tags: ["High-rise", "Infrastructure"] },
  { name: "Shipbuilding", code: "05", img: "https://images.unsplash.com/photo-1614326014420-1f0c741ca7e1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", tags: ["Offshore", "Marine"] },
  { name: "Automotive & Fabrication", code: "06", img: "https://images.unsplash.com/photo-1526634140919-468dc3ae3870?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", tags: ["OEM", "Tier suppliers"] },
];

function IndustriesSection() {
  return (
    <section className="bg-slate-50 py-28">
      <div className="mx-auto max-w-[1300px] px-6">
        <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-14">
          <div className="max-w-2xl">
            <div className="inline-flex items-center gap-2 text-emerald-700 text-[13px] tracking-[0.18em] uppercase">
              <span className="w-8 h-px bg-emerald-600" />
              Industries We Serve
            </div>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(2rem, 3.5vw, 3rem)", lineHeight: 1.1, fontWeight: 700 }}>
              Engineered for the industries<br /> that move Thailand forward.
            </h2>
          </div>
          <a href="#" className="inline-flex items-center gap-2 text-[#0A1628] hover:text-emerald-700 transition" style={{ fontWeight: 600 }}>
            View all industry solutions <HArrowUpRight className="w-4 h-4" />
          </a>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {industries.map((ind) => (
            <a key={ind.name} href="#" className="group relative overflow-hidden rounded-2xl bg-[#0A1628] aspect-[4/5] block">
              <IWF src={ind.img} alt={ind.name} className="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-75 group-hover:scale-110 transition-all duration-700" />
              <div className="absolute inset-0 bg-gradient-to-t from-[#0A1628] via-[#0A1628]/40 to-transparent" />
              <div className="absolute inset-0 ring-1 ring-inset ring-white/10 rounded-2xl" />
              <div className="relative h-full p-7 flex flex-col justify-between text-white">
                <div className="flex items-start justify-between">
                  <span className="text-[12px] tracking-[0.2em] uppercase text-emerald-300">{ind.code}</span>
                  <div className="w-9 h-9 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center group-hover:bg-emerald-500 transition">
                    <HArrowUpRight className="w-4 h-4" />
                  </div>
                </div>
                <div>
                  <h3 className="tracking-tight" style={{ fontSize: 26, fontWeight: 700, lineHeight: 1.15 }}>{ind.name}</h3>
                  <div className="mt-4 flex flex-wrap gap-2">
                    {ind.tags.map((t) => (
                      <span key={t} className="text-[12px] px-2.5 py-1 rounded-full bg-white/10 backdrop-blur-sm border border-white/15">{t}</span>
                    ))}
                  </div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const homeCerts = [
  { code: "ISO 9001:2015", title: "Quality Management", icon: HAward },
  { code: "ISO 45001", title: "Occupational H&S", icon: ShieldCheck },
  { code: "ANSI / OSHA", title: "Compliant Equipment", icon: FileCheck },
  { code: "EN Standards", title: "European Conformity", icon: ScrollText },
  { code: "AWS D1.1", title: "Welding Code Compliance", icon: Gauge },
  { code: "TIS Approved", title: "Thai Industrial Standard", icon: Building2 },
];

function CertificationsSection() {
  return (
    <section className="relative bg-white py-28 overflow-hidden">
      <div className="absolute inset-0 opacity-[0.025]" style={{
        backgroundImage: "linear-gradient(#0A1628 1px, transparent 1px), linear-gradient(90deg, #0A1628 1px, transparent 1px)",
        backgroundSize: "48px 48px",
      }} />
      <div className="relative mx-auto max-w-[1300px] px-6">
        <div className="grid lg:grid-cols-[1fr_1.5fr] gap-16 items-center">
          <div>
            <div className="inline-flex items-center gap-2 text-emerald-700 text-[13px] tracking-[0.18em] uppercase">
              <span className="w-8 h-px bg-emerald-600" />
              Certifications & Standards
            </div>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(2rem, 3.2vw, 2.75rem)", lineHeight: 1.1, fontWeight: 700 }}>
              Certified compliance.<br />Engineered credibility.
            </h2>
            <p className="mt-5 text-slate-600" style={{ fontSize: 16.5, lineHeight: 1.7 }}>
              Every product we supply and every service we deliver is benchmarked to
              international standards, so your operation meets regulatory, insurance
              and audit requirements without compromise.
            </p>

            <div className="mt-8 p-6 rounded-2xl bg-gradient-to-br from-[#0A1628] to-[#0F2545] text-white">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-xl bg-emerald-500/20 border border-emerald-400/40 flex items-center justify-center">
                  <ShieldCheck className="w-6 h-6 text-emerald-300" />
                </div>
                <div>
                  <div className="text-[12px] tracking-[0.18em] uppercase text-emerald-300">Compliance Promise</div>
                  <div className="mt-1" style={{ fontWeight: 600 }}>Full documentation with every delivery</div>
                </div>
              </div>
              <p className="mt-4 text-slate-300 text-[14px]" style={{ lineHeight: 1.65 }}>
                Certificates of conformity, test reports, MSDS and traceability records,
                provided as standard, not on request.
              </p>
            </div>
          </div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {homeCerts.map((c, i) => {
              const CIcon = c.icon;
              return (
                <div key={c.code} className="group p-6 rounded-xl bg-white border border-slate-200 hover:border-emerald-400 hover:shadow-lg hover:-translate-y-1 transition-all" style={{ transitionDelay: `${i * 30}ms` }}>
                  <div className="w-11 h-11 rounded-lg bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-100 flex items-center justify-center mb-5">
                    <CIcon className="w-5 h-5 text-emerald-700" />
                  </div>
                  <div className="text-[#0A1628] tracking-tight" style={{ fontSize: 16, fontWeight: 700 }}>{c.code}</div>
                  <div className="mt-1 text-slate-500 text-[13.5px]">{c.title}</div>
                  <div className="mt-5 pt-4 border-t border-slate-100 flex items-center justify-between text-[11px] tracking-[0.18em] uppercase">
                    <span className="text-slate-400">Certified</span>
                    <span className="text-emerald-600">●</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

function CtaContactRow({ icon: Icon, label, value }) {
  return (
    <div className="flex items-center gap-4">
      <div className="w-11 h-11 rounded-xl bg-emerald-500/15 border border-emerald-400/30 flex items-center justify-center shrink-0">
        <Icon className="w-4.5 h-4.5 text-emerald-300" />
      </div>
      <div>
        <div className="text-[12px] tracking-wider uppercase text-slate-400">{label}</div>
        <div className="text-white" style={{ fontWeight: 600 }}>{value}</div>
      </div>
    </div>
  );
}

function CtaSection() {
  return (
    <section className="relative overflow-hidden bg-[#0A1628] text-white">
      <div className="absolute inset-0">
        <IWF
          src="https://images.unsplash.com/photo-1507497806295-753c4108560c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
          alt="Industrial welder"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-[#0A1628] via-[#0A1628]/90 to-[#0A1628]/50" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(16,185,129,0.25),_transparent_60%)]" />
      </div>

      <div className="relative mx-auto max-w-[1300px] px-6 py-28">
        <div className="grid lg:grid-cols-[1.4fr_1fr] gap-14 items-center">
          <div>
            <div className="inline-flex items-center gap-2 text-emerald-300 text-[13px] tracking-[0.18em] uppercase">
              <span className="w-8 h-px bg-emerald-400" />
              Start the conversation
            </div>
            <h2 className="mt-5 tracking-tight" style={{ fontSize: "clamp(2.25rem, 4.5vw, 3.75rem)", lineHeight: 1.05, fontWeight: 700 }}>
              Ready to find the right<br />
              <span className="bg-gradient-to-r from-emerald-300 to-cyan-300 bg-clip-text text-transparent">solution for your operation?</span>
            </h2>
            <p className="mt-6 text-slate-300 max-w-2xl" style={{ fontSize: 17.5, lineHeight: 1.65 }}>
              Contact our team for product advice, technical consultation, site
              assessments, and competitive quotes.
            </p>

            <div className="mt-10 flex flex-wrap gap-4">
              <a href="#/contact" className="group inline-flex items-center gap-2.5 bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400 text-white px-8 py-4 rounded-full transition shadow-xl shadow-emerald-900/40">
                Get in Touch
                <HArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
              </a>
              <a href="#/contact" className="inline-flex items-center gap-2.5 bg-white text-[#0A1628] hover:bg-slate-100 px-8 py-4 rounded-full transition">
                <HMessageSquare className="w-4.5 h-4.5" />
                Contact Us
              </a>
            </div>
          </div>

          <div className="lg:pl-8">
            <div className="p-8 rounded-2xl bg-white/[0.06] backdrop-blur-md border border-white/15">
              <div className="text-[12px] tracking-[0.18em] uppercase text-emerald-300 mb-6">Direct Contact</div>
              <div className="space-y-5">
                <CtaContactRow icon={HPhone} label="Call our team" value="+66 (33) 048 041-4" />
                <CtaContactRow icon={HMail} label="Email enquiries" value="enquiry.ldt@leedennox.com" />
                <CtaContactRow icon={HMapPin} label="Head office" value="789/152 Moo 1, Pinthong Estate 1, Nongkham, Sriracha, Chonburi 20230, Thailand" />
              </div>
              <div className="mt-7 pt-6 border-t border-white/10 text-[13px] text-slate-300">
                Mon–Fri · 08:00–18:00 ICT<br />
                <span className="text-emerald-300">24/7 emergency onsite support</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const trustBrands = ["Kemppi", "Red Wing", "Climax", "Honeywell", "Lincoln Electric", "MSA", "Magnatech", "Dunlop", "Tempil"];

function TrustBar() {
  const row = [...trustBrands, ...trustBrands];
  return (
    <section className="bg-white border-b border-slate-200/80 py-8">
      <div className="mx-auto max-w-[1300px] px-6 flex items-center gap-8">
        <div className="text-[12px] leading-tight tracking-[0.18em] uppercase text-slate-400 shrink-0 hidden md:block" style={{ fontWeight: 600 }}>
          Trusted brands<br />we represent
        </div>
        <div className="lt-marquee-wrap relative flex-1 overflow-hidden lt-marquee-mask">
          <div className="lt-marquee flex items-center gap-x-14 w-max">
            {row.map((b, i) => (
              <img key={b + i} src={brandLogo(b)} alt={b} aria-hidden={i >= trustBrands.length} className="h-8 w-auto object-contain grayscale opacity-70 shrink-0" loading="lazy" />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const teaserServices = [
  { icon: ClipboardCheck, title: "Assessment & Consultation", desc: "We identify your needs through expert site evaluation and recommend the right products and systems for your environment." },
  { icon: Wrench, title: "Installation & Implementation", desc: "Proper setup and system integration by our certified team, ensuring every solution is configured and tested before handover." },
  { icon: GraduationCap, title: "Training & Technical Support", desc: "We build your team's skills and provide ongoing technical support throughout the product lifecycle." },
];

function ServicesTeaser() {
  return (
    <section className="relative bg-[#0A1628] text-white py-28 overflow-hidden">
      <div className="absolute inset-0 opacity-[0.04]" style={{
        backgroundImage: "linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)",
        backgroundSize: "64px 64px",
      }} />
      <div className="absolute -top-32 -left-32 w-96 h-96 rounded-full bg-emerald-500/10 blur-3xl" />
      <div className="relative mx-auto max-w-[1300px] px-6">
        <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-8 mb-14">
          <div className="max-w-2xl">
            <div className="inline-flex items-center gap-2 text-emerald-300 text-[13px] tracking-[0.18em] uppercase">
              <span className="w-8 h-px bg-emerald-400" />
              Services
            </div>
            <h2 className="mt-4 tracking-tight" style={{ fontSize: "clamp(2rem, 3.5vw, 3rem)", lineHeight: 1.1, fontWeight: 700 }}>
              Comprehensive Services,<br />
              <span className="bg-gradient-to-r from-emerald-300 to-cyan-300 bg-clip-text text-transparent">From Assessment to<br />After-Sales.</span>
            </h2>
          </div>
          <div className="lg:max-w-sm lg:pb-2">
            <p className="text-slate-400" style={{ fontSize: 16, lineHeight: 1.7 }}>
              Beyond supplying products, we partner with you across the full lifecycle, from on-site assessment and commissioning to operator training and after-sales support.
            </p>
            <a href="#/services" className="group mt-5 inline-flex items-center gap-2 text-emerald-300 hover:text-emerald-200 transition" style={{ fontWeight: 600 }}>
              View All Services
              <HArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
            </a>
          </div>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {teaserServices.map((s, i) => {
            const SIcon = s.icon;
            return (
              <div key={s.title} className="group relative p-7 rounded-2xl bg-white/[0.03] backdrop-blur-sm border border-white/10 hover:border-emerald-400/40 hover:bg-white/[0.06] transition-all">
                <div className="flex items-start justify-between">
                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500/20 to-teal-500/10 border border-emerald-400/30 flex items-center justify-center">
                    <SIcon className="w-5.5 h-5.5 text-emerald-300" />
                  </div>
                  <span className="text-slate-500 tracking-tight" style={{ fontSize: 32, fontWeight: 700 }}>0{i + 1}</span>
                </div>
                <h3 className="mt-6 text-white tracking-tight" style={{ fontSize: 18.5, fontWeight: 700, lineHeight: 1.3 }}>{s.title}</h3>
                <p className="mt-3 text-slate-400" style={{ fontSize: 14.5, lineHeight: 1.65 }}>{s.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

const teaserBrands = ["Kemppi", "Red Wing", "Climax", "Honeywell", "Lincoln Electric", "MSA", "Magnatech", "Dunlop", "Tempil", "Petzl", "Edge", "Victor"];

function BrandsTeaser() {
  return (
    <section className="bg-white py-28">
      <div className="mx-auto max-w-[1300px] px-6">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start mb-12">
          <div>
            <div className="inline-flex items-center gap-2 text-emerald-700 text-[13px] tracking-[0.18em] uppercase">
              <span className="w-8 h-px bg-emerald-600" />
              Global Brand Partners
            </div>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(2rem, 3.5vw, 3rem)", lineHeight: 1.1, fontWeight: 700 }}>
              Representing the World's Most Trusted Brands.
            </h2>
          </div>
          <div className="lg:pt-10">
            <p className="text-slate-600" style={{ fontSize: 16.5, lineHeight: 1.7 }}>
              We partner with leading global manufacturers to bring internationally
              certified safety and welding products to industries across Thailand.
            </p>
            <a href="#/brands" className="group mt-6 inline-flex items-center gap-2 text-[#0A1628] hover:text-emerald-700 transition" style={{ fontWeight: 600 }}>
              View All Brands
              <HArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
            </a>
          </div>
        </div>
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-px bg-slate-200 border border-slate-200 rounded-2xl overflow-hidden">
          {teaserBrands.map((b) => (
            <div key={b} className="bg-white px-6 py-8 flex items-center justify-center hover:bg-emerald-50/40 transition-colors">
              <img src={brandLogo(b)} alt={b} className="max-h-11 max-w-[130px] w-auto object-contain rounded" loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CertStrip() {
  return (
    <section className="bg-slate-50 border-y border-slate-200">
      <div className="mx-auto max-w-[1300px] px-6 py-8 flex flex-col sm:flex-row items-center justify-center gap-x-4 gap-y-3 text-center">
        <span className="inline-flex items-center justify-center w-11 h-11 rounded-xl bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-100 shrink-0">
          <ShieldCheck className="w-5 h-5 text-emerald-700" />
        </span>
        <p className="text-slate-600" style={{ fontSize: 15.5, lineHeight: 1.6 }}>
          Certified to international standards, ensuring quality, safety, and reliability you can trust.{" "}
          <a href="#/certifications" className="text-emerald-700 hover:text-emerald-800 underline underline-offset-4" style={{ fontWeight: 600 }}>View Certifications</a>
        </p>
      </div>
    </section>
  );
}

Object.assign(window, {
  HeroSection, BrandsSection, DivisionsSection, WhySection,
  ServicesSection, IndustriesSection, CertificationsSection, CtaSection,
  TrustBar, ServicesTeaser, BrandsTeaser, CertStrip,
});