// pages2.jsx, safety subpages, welding subpages, contact, thank-you, privacy, 404
const U2 = window;

/* ---------------- SAFETY SUBPAGES ---------------- */
function PpePage() {
  const categories = [
    { code: "01", title: "Head Protection", image: "https://images.unsplash.com/photo-1622612023350-b15f063eabe6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#", description: "Industrial helmets and accessories." },
    { code: "02", title: "Eye & Face", image: "https://images.unsplash.com/photo-1507497806295-753c4108560c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#", description: "Safety eyewear and welding shields." },
    { code: "03", title: "Hearing Protection", image: "https://images.unsplash.com/photo-1681812508281-7589b75b2e46?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#", description: "Earmuffs and earplugs by exposure level." },
    { code: "04", title: "Respiratory", image: "https://images.unsplash.com/photo-1589939705384-5185137a7f0f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#", description: "Half-mask, full-face and powered systems." },
    { code: "05", title: "Hand Protection", image: "https://images.unsplash.com/photo-1730584474196-b0e8a29303e8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#", description: "Cut, chemical and thermal protection." },
    { code: "06", title: "Body Protection", image: "https://images.unsplash.com/photo-1672748341520-6a839e6c05bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#", description: "Coveralls, vests and chemical suits." },
  ];
  const brands = [
    { name: "Honeywell", tag: "PPE & Respiratory" },
    { name: "Edge", tag: "Safety Eyewear" },
    { name: "Ringers Gloves", tag: "Hand Protection" },
  ];
  return (
    <>
      <U2.PageHero
        eyebrow="Personal Protective Equipment"
        title={<>Advanced PPE for<br />Industrial and</>}
        accent="Hazardous Environments."
        subtitle="Leeden Thailand's PPE range covers the full spectrum of personal protective equipment required in industrial, chemical, and high-risk working environments, every product selected for its performance credentials, international certification, and proven reliability in the field."
        image="https://images.unsplash.com/photo-1622612023350-b15f063eabe6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "Safety", href: "#/safety" }, { label: "PPE" }]}
      />
      <section className="bg-slate-50 py-28">
        <div className="mx-auto max-w-[1300px] px-6">
          <div className="max-w-2xl mb-12">
            <U2.SectionEyebrow>What We Offer</U2.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
              Six specialised PPE categories.
            </h2>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {categories.map((c) => <U2.CategoryCard key={c.code} {...c} href="#/products?cat=ppe" />)}
          </div>
        </div>
      </section>
      <U2.ProductListing category="ppe" title="PPE products in our catalogue." />
      <U2.BrandGrid title="Brand highlights across PPE." brands={brands} />
      <U2.PageCta />
    </>
  );
}

function FootwearPage() {
  return (
    <>
      <U2.PageHero
        eyebrow="Protective Footwear"
        title="Premium Safety Footwear for"
        accent="Industrial Performance."
        subtitle="The right footwear is the foundation of every worker's protection. Leeden Thailand distributes safety footwear from two of the world's most trusted brands, engineered for the toughest industrial conditions and trusted by workforces across the globe."
        image="https://images.unsplash.com/photo-1593583810872-ddee4d6bd55a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "Safety", href: "#/safety" }, { label: "Protective Footwear" }]}
      />
      <section className="bg-white py-28">
        <div className="mx-auto max-w-[1300px] px-6 grid lg:grid-cols-2 gap-10">
          {[
            { name: "Red Wing Shoes", tag: "Premium industrial footwear", img: "https://images.unsplash.com/photo-1593583810872-ddee4d6bd55a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1600&q=85", body: "American-made safety boots engineered for oil & gas, petrochemical and heavy fabrication. ASTM F2413 compliant." },
            { name: "Dunlop", tag: "Industrial boots & wellingtons", img: "https://images.unsplash.com/photo-1681812508281-7589b75b2e46?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1600&q=85", body: "Chemical-resistant and slip-resistant boots designed for processing, food and outdoor industrial applications." },
          ].map((b) => (
            <div key={b.name} className="rounded-2xl overflow-hidden border border-slate-200">
              <U2.ImageWithFallback src={b.img} alt={b.name} className="w-full h-64 object-cover" />
              <div className="p-8">
                <div className="text-[#0A1628] tracking-tight" style={{ fontSize: 24, fontWeight: 700 }}>{b.name}</div>
                <div className="mt-1 text-slate-500 text-[14px]">{b.tag}</div>
                <p className="mt-4 text-slate-600 text-[15px]" style={{ lineHeight: 1.7 }}>{b.body}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
      <U2.ProductListing category="footwear" title="Safety footwear in our catalogue." dark />
      <U2.FeatureList
        eyebrow="Key Features"
        title="More than a boot. A safety program."
        intro="Every footwear deployment is backed by Leeden's fitting clinics, lifecycle tracking and on-demand replenishment, designed for fleets of 10 to 10,000 workers."
        image="https://images.unsplash.com/photo-1593313637552-29c2c0dacd35?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1600&q=85"
        features={[
          { title: "Onsite Fitting Clinics", desc: "Trained fitters visit your site to size workers correctly the first time." },
          { title: "ASTM, EN and TIS Certified", desc: "All footwear supplied with documentation suitable for audit." },
          { title: "Lifecycle Tracking", desc: "Replacement scheduling tied to actual wear and worker movements." },
          { title: "Subsidy Programs", desc: "Optional worker contribution programs administered through Leeden." },
        ]}
      />
      <U2.PageCta />
    </>
  );
}

function WorkwearPage() {
  const cats = [
    { code: "01", title: "Flame-Resistant", image: "https://images.unsplash.com/photo-1730584474196-b0e8a29303e8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#", description: "FR coveralls and shirts for hot work." },
    { code: "02", title: "High-Visibility", image: "https://images.unsplash.com/photo-1681812508281-7589b75b2e46?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#", description: "ANSI/EN-rated hi-vis garments." },
    { code: "03", title: "Chemical Protection", image: "https://images.unsplash.com/photo-1747999461210-a56f72294428?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#", description: "Limited-use and reusable chemical suits." },
    { code: "04", title: "Branded Workwear", image: "https://images.unsplash.com/photo-1672748341520-6a839e6c05bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#", description: "Embroidered and printed company workwear." },
  ];
  const industriesW = ["Oil & Gas", "Petrochemical", "Construction", "Manufacturing", "Shipbuilding", "Heavy Industry"];
  return (
    <>
      <U2.PageHero
        eyebrow="Industrial Workwear"
        title={<>Industrial Workwear<br />Built for</>}
        accent="Demanding Environments."
        subtitle="Leeden Thailand's workwear range delivers protection, durability, and comfort for workers operating in demanding industrial settings, engineered for the specific hazards of heavy manufacturing, petrochemical, construction, and utilities environments."
        image="https://images.unsplash.com/photo-1730584474196-b0e8a29303e8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "Safety", href: "#/safety" }, { label: "Workwear" }]}
      />
      <section className="bg-slate-50 py-28">
        <div className="mx-auto max-w-[1300px] px-6">
          <div className="mb-12">
            <U2.SectionEyebrow>What We Offer</U2.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight lg:whitespace-nowrap" style={{ fontSize: "clamp(1.5rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
              Workwear for every operational environment.
            </h2>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {cats.map((c) => <U2.CategoryCard key={c.code} {...c} href="#/products?cat=workwear" />)}
          </div>
        </div>
      </section>
      <U2.ProductListing category="workwear" title="Workwear in our catalogue." />
      <section className="bg-white py-24">
        <div className="mx-auto max-w-[1300px] px-6 grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          <div>
            <U2.SectionEyebrow>Industry Applications</U2.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.5rem, 2.6vw, 2.25rem)", lineHeight: 1.15, fontWeight: 700 }}>
              Specified by the industries we know best.
            </h2>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
            {industriesW.map((i) => (
              <span key={i} className="px-5 py-2.5 rounded-full bg-slate-50 border border-slate-200 text-[#0A1628] text-center" style={{ fontWeight: 600, fontSize: 14 }}>{i}</span>
            ))}
          </div>
        </div>
      </section>
      <U2.PageCta />
    </>
  );
}

function FallProtectionPage() {
  const cats = [
    { code: "01", title: "Full Body Harnesses", image: "https://images.unsplash.com/photo-1589939705384-5185137a7f0f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#" },
    { code: "02", title: "Lanyards & SRLs", image: "https://images.unsplash.com/photo-1593583810872-ddee4d6bd55a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#" },
    { code: "03", title: "Anchorage Systems", image: "https://images.unsplash.com/photo-1614326014420-1f0c741ca7e1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#" },
    { code: "04", title: "Rescue Equipment", image: "https://images.unsplash.com/photo-1672748341520-6a839e6c05bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#" },
  ];
  const brands = [
    { name: "SafetyLink", tag: "Lifelines & Ladder Stabilisers" },
    { name: "MSA", tag: "Fall Protection Systems" },
    { name: "Petzl", tag: "Industrial Access & Rescue" },
  ];
  return (
    <>
      <U2.PageHero
        eyebrow="Fall Protection"
        title="Advanced Fall Protection Systems for"
        accent="Working at Height."
        subtitle="Working at height demands equipment that performs without compromise. Our fall protection range covers harnesses, lanyards, self-retracting lifelines, rescue systems, and ladder stabilisers, designed to ensure safety and reliable performance across every working-at-height environment."
        image="https://images.unsplash.com/photo-1589939705384-5185137a7f0f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "Safety", href: "#/safety" }, { label: "Fall Protection" }]}
      />
      <section className="bg-slate-50 py-28">
        <div className="mx-auto max-w-[1300px] px-6">
          <div className="max-w-2xl mb-12">
            <U2.SectionEyebrow>What We Offer</U2.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
              A complete height safety system.
            </h2>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {cats.map((c) => <U2.CategoryCard key={c.code} {...c} href="#/products?cat=fall-protection" />)}
          </div>
        </div>
      </section>
      <U2.BrandGrid title="Engineered fall protection brands." brands={brands} />
      <U2.ProductListing category="fall-protection" title="Fall protection equipment in our catalogue." />
      <section className="bg-[#0A1628] text-white py-24">
        <div className="mx-auto max-w-[1300px] px-6 grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <U2.SectionEyebrow dark>Compliance</U2.SectionEyebrow>
            <h2 className="mt-4 tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
              Compliant with the world's height safety codes.
            </h2>
            <ul className="mt-6 space-y-3 text-slate-300 text-[15px]" style={{ lineHeight: 1.7 }}>
              <li>• ANSI Z359 family of fall protection standards</li>
              <li>• EN 361, EN 362, EN 354 personal fall protection</li>
              <li>• OSHA 1910 / 1926 walking-working surfaces</li>
              <li>• Engineered anchorage certified to manufacturer load ratings</li>
            </ul>
          </div>
          <div className="p-8 rounded-2xl bg-white/[0.06] border border-white/15">
            <div className="text-[12px] tracking-[0.18em] uppercase text-emerald-300">Service Add-on</div>
            <h3 className="mt-3 tracking-tight" style={{ fontSize: 22, fontWeight: 700 }}>Fall Protection Audits</h3>
            <p className="mt-3 text-slate-300 text-[14.5px]" style={{ lineHeight: 1.65 }}>
              Onsite hazard mapping, anchorage assessment and competent-person training delivered by Leeden's height safety engineers.
            </p>
          </div>
        </div>
      </section>
      <U2.PageCta />
    </>
  );
}

/* ---------------- WELDING SUBPAGES ---------------- */
function WeldingTemplate({ eyebrow, title, accent, subtitle, image, intro, brands, applications, breadcrumb, catSlug }) {
  return (
    <>
      <U2.PageHero
        eyebrow={eyebrow}
        title={title}
        accent={accent}
        subtitle={subtitle}
        image={image}
        breadcrumbs={[{ label: "Welding", href: "#/welding" }, { label: breadcrumb }]}
      />
      <section className="bg-slate-50 py-28">
        <div className="mx-auto max-w-[1300px] px-6 grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          <div>
            <U2.SectionEyebrow>Introduction</U2.SectionEyebrow>
            <p className="mt-6 text-slate-600" style={{ fontSize: 18, lineHeight: 1.75 }}>{intro}</p>
            <a href="#/contact" className="group mt-8 inline-flex items-center gap-2 px-7 py-3.5 rounded-full bg-blue-600 hover:bg-blue-500 text-white transition" style={{ fontWeight: 600, fontSize: 15.5 }}>
              Get in Touch
              <U2.ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
            </a>
          </div>
          <div className="rounded-2xl overflow-hidden border border-slate-200">
            <U2.ImageWithFallback src={image} alt={title} className="w-full h-[360px] object-cover" />
          </div>
        </div>
      </section>
      <U2.BrandGrid eyebrow="Brand Sections" title="Engineered by the world's welding leaders." brands={brands} />
      {catSlug && <U2.ProductListing category={catSlug} title="Equipment in our catalogue." />}
      <section className="bg-slate-50 py-28">
        <div className="mx-auto max-w-[1300px] px-6">
          <div className="mb-12">
            <U2.SectionEyebrow>Applications</U2.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
              Specified across Thailand's most demanding sectors.
            </h2>
          </div>
          <div className="grid md:grid-cols-3 gap-5">
            {applications.map((a) => (
              <div key={a.title} className="rounded-2xl overflow-hidden border border-slate-200 bg-white">
                <U2.ImageWithFallback src={a.img} alt={a.title} className="w-full h-52 object-cover" />
                <div className="p-6">
                  <div className="text-[#0A1628] tracking-tight" style={{ fontSize: 18, fontWeight: 700 }}>{a.title}</div>
                  <p className="mt-2 text-slate-600 text-[14.5px]" style={{ lineHeight: 1.65 }}>{a.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <U2.PageCta />
    </>
  );
}

function WeldingMachinesPage() {
  return (
    <WeldingTemplate
      eyebrow="Welding Machines"
      title="High-Performance Welding Machines"
      accent="for Industrial Applications."
      catSlug="machines"
      subtitle="MIG, TIG, MMA and multi-process welding equipment from Kemppi and other category leaders, sized and specified for Thai fabrication operations."
      image="https://images.unsplash.com/photo-1730584476141-232435a40c32?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
      breadcrumb="Welding Machines"
      intro="From single-operator MMA inverters to networked multi-process welding cells, Leeden supplies welding equipment that delivers consistent arc performance, traceable parameters and the productivity gains modern fabricators expect."
      brands={[
        { name: "Kemppi", tag: "Welding Machines" },
        { name: "Lincoln Electric", tag: "Welding Systems" },
        { name: "Auweld", tag: "Welding Consumables" },
      ]}
      applications={[
        { title: "Heavy Fabrication", desc: "High-duty cycle welding for structural and pressure-vessel work.", img: "https://images.unsplash.com/photo-1730584474196-b0e8a29303e8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85" },
        { title: "Pipe Shops", desc: "TIG and pulse-MIG systems for code-compliant pipe welding.", img: "https://images.unsplash.com/photo-1747999461210-a56f72294428?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85" },
        { title: "Maintenance & Repair", desc: "Portable inverter systems for plant maintenance teams.", img: "https://images.unsplash.com/photo-1730584475795-f0be0efd606e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85" },
      ]}
    />
  );
}

function CuttingPrepPage() {
  return (
    <WeldingTemplate
      eyebrow="Cutting & Preparation"
      title="Precision Cutting and Weld"
      accent="Preparation Equipment."
      catSlug="cutting"
      subtitle="Orbital cutting, beveling and end-prep systems that deliver consistent, machine-grade joint preparation, ready for code-quality welding."
      image="https://images.unsplash.com/photo-1747999461210-a56f72294428?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
      breadcrumb="Cutting & Preparation"
      intro="From pneumatic pipe cutters to CNC-precision orbital systems, Leeden supplies the cutting and end-prep equipment that converts raw stock into weldable assemblies, eliminating the hand-fitting rework that erodes shop productivity."
      brands={[
        { name: "Climax", tag: "Portable Machining" },
        { name: "Protem", tag: "Pipe Cutting & Bevelling" },
        { name: "Procut", tag: "Pipe Cutting" },
      ]}
      applications={[
        { title: "Pipe Spool Fabrication", desc: "Repeatable orbital cuts and bevels for high-volume spool shops.", img: "https://images.unsplash.com/photo-1730584474196-b0e8a29303e8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85" },
        { title: "Field Pipeline Work", desc: "Portable cutting and beveling for cross-country pipeline projects.", img: "https://images.unsplash.com/photo-1614326014420-1f0c741ca7e1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85" },
        { title: "Pressure Vessel Shops", desc: "Heavy-wall beveling and counter-boring for ASME vessel work.", img: "https://images.unsplash.com/photo-1747999461210-a56f72294428?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85" },
      ]}
    />
  );
}

function AutomationPage() {
  return (
    <WeldingTemplate
      eyebrow="Automation & Alignment"
      title="Welding Automation and Precision"
      accent="Alignment Solutions."
      catSlug="automation"
      subtitle="Orbital welding heads, pipe alignment clamps and integrated welding cells, deployed and supported by Leeden's automation engineers."
      image="https://images.unsplash.com/photo-1730584475795-f0be0efd606e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
      breadcrumb="Automation & Alignment"
      intro="Automation is the highest-leverage productivity move available to a modern fabrication shop. Leeden brings the equipment, the process development and the operator training that turn an automation investment into a measurable production gain."
      brands={[
        { name: "Magnatech", tag: "Orbital Welding" },
        { name: "Bortech", tag: "Bore Welding & Cladding" },
        { name: "Climax", tag: "Portable Machining" },
      ]}
      applications={[
        { title: "Cleanroom Tubing", desc: "Hygienic orbital welding for pharma and semiconductor.", img: "https://images.unsplash.com/photo-1747999461210-a56f72294428?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85" },
        { title: "Power & Process Piping", desc: "Code-compliant orbital welds in carbon and stainless.", img: "https://images.unsplash.com/photo-1730584476141-232435a40c32?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85" },
        { title: "Pipeline Construction", desc: "Mechanised welding for cross-country pipelines.", img: "https://images.unsplash.com/photo-1614326014420-1f0c741ca7e1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85" },
      ]}
    />
  );
}

function QualityControlPage() {
  return (
    <WeldingTemplate
      eyebrow="Quality Control"
      title="Quality Control and Inspection Tools"
      accent="for Consistent Weld Performance."
      catSlug="quality-control"
      subtitle="Weld inspection, NDT and data-traceability solutions that close the loop on weld quality, from procedure qualification to delivery records."
      image="https://images.unsplash.com/photo-1526634140919-468dc3ae3870?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
      breadcrumb="Quality Control"
      intro="Welding QC is no longer about a single inspector with a gauge. Leeden supplies the digital weld monitoring, NDT and documentation systems that satisfy modern QA/QC requirements and reduce the cost of non-conformance."
      brands={[
        { name: "Tempil", tag: "Temperature Indicators" },
        { name: "Flexovit", tag: "Abrasives" },
        { name: "Weiler", tag: "Surface Finishing" },
        { name: "Victor", tag: "Gas Cutting & Equipment" },
      ]}
      applications={[
        { title: "Procedure Qualification", desc: "PQR and WPS documentation and digital traceability.", img: "https://images.unsplash.com/photo-1730584474196-b0e8a29303e8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85" },
        { title: "Production Monitoring", desc: "Live arc data captured on every weld.", img: "https://images.unsplash.com/photo-1730584476141-232435a40c32?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85" },
        { title: "Final Inspection", desc: "Phased array UT, RT and dimensional inspection.", img: "https://images.unsplash.com/photo-1526634140919-468dc3ae3870?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85" },
      ]}
    />
  );
}

/* ---------------- CONTACT ---------------- */
const contactTrust = [
  { icon: U2.BadgeCheck, label: "Internationally certified" },
  { icon: U2.Building2, label: "Established distributor" },
  { icon: U2.LifeBuoy, label: "Full after-sales support" },
];

function ContactField({ label, placeholder, type = "text", required = false }) {
  return (
    <div>
      <label className="text-[13px] tracking-[0.12em] uppercase text-slate-500" style={{ fontWeight: 600 }}>
        {label}{required && <span className="text-emerald-600"> *</span>}
      </label>
      <input type={type} placeholder={placeholder} required={required} className="mt-2 w-full px-5 py-3.5 rounded-xl bg-slate-50 border border-slate-200 focus:border-emerald-400 focus:bg-white focus:outline-none transition" />
    </div>
  );
}
function ContactSelectField({ label, options }) {
  return (
    <div>
      <label className="text-[13px] tracking-[0.12em] uppercase text-slate-500" style={{ fontWeight: 600 }}>{label}</label>
      <select className="mt-2 w-full px-5 py-3.5 rounded-xl bg-slate-50 border border-slate-200 focus:border-emerald-400 focus:bg-white focus:outline-none transition">
        {options.map((o) => <option key={o}>{o}</option>)}
      </select>
    </div>
  );
}
function ContactItem({ 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 ContactPage() {
  return (
    <>
      <U2.PageHero
        eyebrow="Contact Us"
        title="Get in"
        accent="Touch."
        subtitle="Whether you need product advice, a competitive quote, or an on-site assessment, our team is ready to help. Complete the form below and we will respond within one business day."
        image="https://images.unsplash.com/photo-1672748341520-6a839e6c05bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "Contact" }]}
      />

      <section className="bg-white py-24">
        <div className="mx-auto max-w-[1300px] px-6 grid lg:grid-cols-[1.4fr_1fr] gap-12">
          <div>
            <U2.SectionEyebrow>Enquiry Form</U2.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.25rem)", lineHeight: 1.15, fontWeight: 700 }}>
              Tell us about your project.
            </h2>
            <form
              className="mt-10 grid sm:grid-cols-2 gap-5"
              onSubmit={(e) => { e.preventDefault(); window.location.hash = "#/thank-you"; }}
            >
              <ContactField label="Full Name" placeholder="Somchai Tan" required />
              <ContactField label="Company Name" placeholder="Acme Industrial" required />
              <ContactField label="Job Title" placeholder="HSE Manager" />
              <ContactField label="Phone Number" placeholder="+66 ..." required />
              <ContactField label="Email Address" placeholder="you@company.com" type="email" required />
              <ContactSelectField label="Industry" options={["Select your industry", "Oil & Gas", "Petrochemical", "Manufacturing", "Construction & Engineering", "Shipbuilding & Offshore", "Automotive & Fabrication", "Other"]} />
              <div className="sm:col-span-2">
                <label className="text-[13px] tracking-[0.12em] uppercase text-slate-500" style={{ fontWeight: 600 }}>I am interested in</label>
                <div className="mt-3 flex flex-wrap gap-3">
                  {["Safety Products", "Welding Equipment", "Services", "Machine Rental", "General Enquiry"].map((opt) => (
                    <label key={opt} className="inline-flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-slate-50 border border-slate-200 hover:border-emerald-400 cursor-pointer transition text-[14px] text-slate-700">
                      <input type="checkbox" name="interest" value={opt} className="w-4 h-4 accent-emerald-600" />
                      {opt}
                    </label>
                  ))}
                </div>
              </div>
              <div className="sm:col-span-2">
                <label className="text-[13px] tracking-[0.12em] uppercase text-slate-500" style={{ fontWeight: 600 }}>Message</label>
                <textarea rows={5} placeholder="Please describe your requirements or the products / services you are enquiring about." className="mt-2 w-full px-5 py-4 rounded-xl bg-slate-50 border border-slate-200 focus:border-emerald-400 focus:bg-white focus:outline-none transition" />
              </div>
              <button className="sm:col-span-2 group inline-flex items-center justify-center gap-2 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-lg shadow-emerald-900/30" style={{ fontWeight: 600 }}>
                Send Enquiry <U2.ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
              </button>
              <p className="sm:col-span-2 text-slate-500 text-[13.5px]" style={{ lineHeight: 1.6 }}>
                We typically respond within 1 business day. Your information is handled in accordance with our{" "}
                <a href="#/privacy" className="text-emerald-700 hover:text-emerald-800 underline underline-offset-2">Privacy Policy</a>.
              </p>
            </form>
          </div>

          <div className="space-y-5">
            <div className="p-7 rounded-2xl bg-gradient-to-br from-[#0A1628] to-[#0F2545] text-white">
              <div className="text-[12px] tracking-[0.18em] uppercase text-emerald-300 mb-5">Direct Contact</div>
              <div className="space-y-4">
                <ContactItem icon={U2.PhoneIcon} label="Phone" value="+66 (33) 048 041-4" />
                <ContactItem icon={U2.MailIcon} label="Email" value="enquiry.ldt@leedennox.com" />
                <ContactItem icon={U2.MapPinIcon} label="Office" value="Pinthong Estate 1, Sriracha, Chonburi" />
                <ContactItem icon={U2.ClockIcon} label="Hours" value="Mon–Fri · 08:00–18:00" />
              </div>
            </div>
            <div className="p-7 rounded-2xl bg-emerald-50 border border-emerald-100">
              <div className="text-[12px] tracking-[0.18em] uppercase text-emerald-700 mb-3">Connect with us</div>
              <div className="text-[#0A1628]" style={{ fontWeight: 700, fontSize: 18 }}>Reach us on LinkedIn or Line</div>
              <div className="mt-4 space-y-3">
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-lg bg-[#0A66C2] flex items-center justify-center">
                    <U2.LinkedInIcon className="w-4 h-4 text-white" />
                  </div>
                  <div>
                    <div className="text-[12px] tracking-wider uppercase text-slate-500">LinkedIn</div>
                    <div className="text-[#0A1628] text-[14.5px]" style={{ fontWeight: 600 }}>Leeden (Thailand) Co., Ltd.</div>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-lg bg-[#06C755] flex items-center justify-center">
                    <U2.LineIcon className="w-5 h-5 text-white" />
                  </div>
                  <div>
                    <div className="text-[12px] tracking-wider uppercase text-slate-500">Line ID</div>
                    <div className="text-[#0A1628] text-[14.5px]" style={{ fontWeight: 600 }}>@512sgltn</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="p-7 rounded-2xl bg-white border border-slate-200">
              <div className="text-[12px] tracking-[0.18em] uppercase text-slate-500 mb-4">Why choose Leeden</div>
              <ul className="space-y-3">
                {contactTrust.map((t) => {
                  const TIcon = t.icon;
                  return (
                    <li key={t.label} className="flex items-center gap-3">
                      <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
                        <TIcon className="w-4.5 h-4.5 text-white" />
                      </div>
                      <span className="text-[#0A1628]" style={{ fontWeight: 600, fontSize: 14.5 }}>{t.label}</span>
                    </li>
                  );
                })}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="bg-slate-50 py-20">
        <div className="mx-auto max-w-[1300px] px-6">
          <U2.SectionEyebrow>Location</U2.SectionEyebrow>
          <h2 className="mt-4 text-[#0A1628] tracking-tight mb-3" style={{ fontSize: "clamp(1.5rem, 2.6vw, 2rem)", lineHeight: 1.15, fontWeight: 700 }}>
            Find our Chonburi headquarters.
          </h2>
          <p className="text-slate-600 mb-8 max-w-2xl" style={{ fontSize: 15.5, lineHeight: 1.7 }}>
            789/152 Moo 1, Pinthong Estate 1, Nongkham, Sriracha, Chonburi 20230, Thailand
          </p>
          <div className="rounded-2xl overflow-hidden border border-slate-200 bg-[#0A1628] relative h-[420px]">
            <iframe
              title="Leeden (Thailand) Co., Ltd."
              src="https://www.google.com/maps?q=789%2F152+Moo+1+Pinthong+Estate+1+Nongkham+Sriracha+Chonburi+20230+Thailand&output=embed"
              className="w-full h-full"
              loading="lazy"
            />
          </div>
        </div>
      </section>
    </>
  );
}

/* ---------------- THANK YOU ---------------- */
function ThankYouPage() {
  return (
    <section className="relative min-h-[80vh] flex items-center bg-[#0A1628] text-white overflow-hidden">
      <div className="absolute inset-0">
        <U2.ImageWithFallback
          src="https://images.unsplash.com/photo-1730584476141-232435a40c32?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
          alt=""
          className="w-full h-full object-cover opacity-30"
        />
        <div className="absolute inset-0 bg-gradient-to-br from-[#0A1628] via-[#0A1628]/95 to-[#0A1628]/80" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_rgba(16,185,129,0.18),_transparent_55%)]" />
      </div>
      <div className="relative mx-auto max-w-[1300px] px-6 py-28 w-full">
        <div className="max-w-2xl mx-auto text-center">
          <div className="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center shadow-2xl shadow-emerald-900/40">
            <U2.CheckCircle2 className="w-10 h-10 text-white" />
          </div>
          <div className="mt-8 inline-flex items-center gap-2 text-emerald-300 text-[13px] tracking-[0.18em] uppercase">
            <span className="w-8 h-px bg-emerald-400" /> Enquiry Received <span className="w-8 h-px bg-emerald-400" />
          </div>
          <h1 className="mt-5 tracking-tight" style={{ fontSize: "clamp(2.25rem, 4.5vw, 3.5rem)", lineHeight: 1.08, fontWeight: 700 }}>
            Thank You, We've Received Your Enquiry.
          </h1>
          <p className="mt-6 text-slate-300" style={{ fontSize: 17, lineHeight: 1.7 }}>
            Your message has been sent successfully. A member of the Leeden Thailand team will review your enquiry and respond within one business day.
          </p>
          <p className="mt-3 text-slate-400" style={{ fontSize: 15.5, lineHeight: 1.7 }}>
            In the meantime, you are welcome to explore our product divisions and services below.
          </p>
          <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
            <a href="#/safety" className="inline-flex items-center gap-2 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-lg shadow-emerald-900/30">
              Explore Safety Products <U2.ArrowRight className="w-4 h-4" />
            </a>
            <a href="#/welding" className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/15 border border-white/20 text-white px-8 py-4 rounded-full transition">
              Explore Welding Equipment
            </a>
            <a href="#/services" className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/15 border border-white/20 text-white px-8 py-4 rounded-full transition">
              View Our Services
            </a>
            <a href="#/" className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/15 border border-white/20 text-white px-8 py-4 rounded-full transition">
              Return to Home
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- PRIVACY ---------------- */
const privacySections = [
  { title: "1. Introduction", body: "This Privacy Policy explains how Leeden Thailand collects, uses and protects personal data submitted through this website. By using this site you agree to the terms set out below." },
  { title: "2. Information We Collect", body: "We collect contact details and project information that you submit through our enquiry forms, as well as standard server log information such as IP address and browser type for security and analytics purposes." },
  { title: "3. How We Use Your Information", body: "Information is used to respond to enquiries, manage commercial relationships, deliver products and services you have requested, and to provide aftermarket support over the lifecycle of the equipment supplied." },
  { title: "4. Sharing & Disclosure", body: "We do not sell personal information. Information may be shared with our manufacturing partners or logistics providers only where required to fulfil your request, and only under appropriate confidentiality terms." },
  { title: "5. Data Retention", body: "Personal data is retained only as long as is necessary for the purposes for which it was collected, or as required by applicable Thai law." },
  { title: "6. Your Rights", body: "You may request access to, correction of, or deletion of your personal data at any time by contacting enquiry.ldt@leedennox.com." },
  { title: "7. Cookies", body: "This website uses essential cookies for site functionality and analytics cookies to understand how visitors use the site. You can disable non-essential cookies via your browser settings." },
  { title: "8. Contact", body: "For privacy queries, please contact Leeden Thailand at enquiry.ldt@leedennox.com or +66 (33) 048 041-4." },
];

function PrivacyPage() {
  return (
    <>
      <U2.PageHero
        eyebrow="Legal"
        title="Privacy"
        accent="Policy."
        subtitle="How Leeden Thailand handles the information you share with us. Last updated May 2026."
        image="https://images.unsplash.com/photo-1768564206500-5cddb1fea679?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "Privacy Policy" }]}
      />
      <section className="bg-white py-24">
        <div className="mx-auto max-w-[820px] px-6 space-y-10">
          {privacySections.map((s) => (
            <div key={s.title}>
              <h2 className="text-[#0A1628] tracking-tight" style={{ fontSize: 22, fontWeight: 700 }}>{s.title}</h2>
              <p className="mt-3 text-slate-600" style={{ fontSize: 16, lineHeight: 1.75 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

/* ---------------- 404 ---------------- */
function NotFoundPage() {
  return (
    <section className="relative min-h-[80vh] flex items-center bg-[#0A1628] text-white overflow-hidden">
      <div className="absolute inset-0">
        <U2.ImageWithFallback
          src="https://images.unsplash.com/photo-1747999461210-a56f72294428?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
          alt=""
          className="w-full h-full object-cover opacity-25"
        />
        <div className="absolute inset-0 bg-gradient-to-br from-[#0A1628] via-[#0A1628]/95 to-[#0A1628]/80" />
      </div>
      <div className="relative mx-auto max-w-[1300px] px-6 py-28 w-full">
        <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" /> Error 404
          </div>
          <div className="mt-6 tracking-tight bg-gradient-to-r from-emerald-300 via-teal-300 to-cyan-300 bg-clip-text text-transparent" style={{ fontSize: "clamp(5rem, 14vw, 11rem)", lineHeight: 0.95, fontWeight: 700 }}>
            404
          </div>
          <h1 className="mt-6 tracking-tight" style={{ fontSize: "clamp(2rem, 3.5vw, 2.75rem)", lineHeight: 1.1, fontWeight: 700 }}>
            Page Not Found.
          </h1>
          <p className="mt-5 text-slate-300" style={{ fontSize: 17, lineHeight: 1.7 }}>
            The page you are looking for may have been moved, removed, or the URL may be incorrect.
          </p>
          <p className="mt-3 text-slate-400" style={{ fontSize: 15.5, lineHeight: 1.7 }}>
            Return to one of the sections below or contact our team if you need assistance finding a specific product or service.
          </p>
          <div className="mt-10 flex flex-wrap gap-3">
            <a href="#/" className="inline-flex items-center gap-2 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">
              <U2.ArrowLeft className="w-4 h-4" /> Return to Home
            </a>
            <a href="#/safety" className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/15 border border-white/20 text-white px-7 py-4 rounded-full transition">Safety Division</a>
            <a href="#/welding" className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/15 border border-white/20 text-white px-7 py-4 rounded-full transition">Welding Division</a>
            <a href="#/services" className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/15 border border-white/20 text-white px-7 py-4 rounded-full transition">Services</a>
            <a href="#/contact" className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/15 border border-white/20 text-white px-7 py-4 rounded-full transition">Contact Us</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  PpePage, FootwearPage, WorkwearPage, FallProtectionPage,
  WeldingMachinesPage, CuttingPrepPage, AutomationPage, QualityControlPage,
  ContactPage, ThankYouPage, PrivacyPage, NotFoundPage,
});