// pages.jsx, all route pages + route table
const UI = window;

/* ---------------- HOME ---------------- */
function HomePage() {
  return (
    <>
      <UI.HeroSection />
      <UI.TrustBar />
      <UI.DivisionsSection />
      <UI.WhySection />
      <UI.ServicesTeaser />
      <UI.BrandsTeaser />
      <UI.CertificationsSection />
      <UI.CtaSection />
    </>
  );
}

/* ---------------- ABOUT ---------------- */
const aboutStats = [
  { v: "20+", l: "Global brands represented" },
  { v: "2", l: "Specialist divisions: Safety & Welding" },
  { v: "7", l: "Services across the lifecycle" },
  { v: "100%", l: "Certified to international standards" },
];
const aboutApproach = [
  { icon: UI.Compass, title: "Listen", desc: "Site walk-through, hazard mapping and process review with your operations team." },
  { icon: UI.Target, title: "Engineer", desc: "Specification by certified engineers, matched to standards and budget." },
  { icon: UI.HeartHandshake, title: "Deliver", desc: "Installation, training, documentation and certificates of conformity." },
  { icon: UI.Sparkles, title: "Sustain", desc: "Aftermarket support, calibration, parts and rental over the full lifecycle." },
];
const aboutValues = [
  { icon: UI.Globe2, title: "Global Brands, Local Expertise", desc: "We represent the world's leading safety and welding brands and combine that global reach with deep knowledge of Thailand's industrial environments, regulations, and operational requirements." },
  { icon: UI.Layers, title: "Integrated Solutions", desc: "Our model goes beyond distribution. We design, specify, supply, install, train, and support, ensuring every solution is optimised for your specific application and environment." },
  { icon: UI.BadgeCheck, title: "Certified Quality", desc: "Our products and processes are certified to international standards. We provide solutions you can trust in the most demanding, safety-critical environments." },
  { icon: UI.HeartHandshake, title: "Long-Term Partnership", desc: "We measure success by your operational performance, not by the transaction. Our after-sales service, training, and on-site support are designed to protect your investment and keep your operations running." },
];
const aboutCerts = ["ISO 9001:2015", "ISO 45001", "ANSI / OSHA", "EN Standards", "AWS D1.1", "TIS Approved"];

function AboutPage() {
  return (
    <>
      <UI.PageHero
        eyebrow="About Leeden Thailand"
        title={<>Your Partner for Safety<br />and Welding</>}
        accent={<>Solutions<br />in Thailand.</>}
        subtitle="Leeden Thailand is the Thai subsidiary of Leeden, a leading regional distributor of safety and welding solutions, serving industries across Thailand from our base in Sriracha, Chonburi."
        image="https://images.unsplash.com/photo-1768564206500-5cddb1fea679?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "About Us" }]}
      />

      <section className="bg-white py-28">
        <div className="mx-auto max-w-[1300px] px-6 grid lg:grid-cols-2 gap-16 items-center">
          <div>
            <UI.SectionEyebrow>Who We Are</UI.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(2rem, 3.5vw, 2.75rem)", lineHeight: 1.1, fontWeight: 700 }}>
              More than a supplier, a partner at every stage.
            </h2>
            <div className="mt-6 space-y-5 text-slate-600" style={{ fontSize: 16.5, lineHeight: 1.75 }}>
              <p>
                Leeden Thailand is the Thai subsidiary of Leeden, a leading regional distributor of safety and welding solutions with a presence across Southeast Asia. Operating from our base in Sriracha, Chonburi, we serve industries across Thailand and the wider region with a complete ecosystem of internationally certified products, expert technical services, and long-term operational support.
              </p>
              <p>
                We integrate expertise, products, and services into one seamless system, supporting customers from planning through to long-term operation. More than a supplier, we are a partner who ensures performance, safety, and reliability at every stage.
              </p>
            </div>
          </div>
          <div className="rounded-2xl overflow-hidden border border-slate-200 shadow-lg">
            <UI.ImageWithFallback
              src="https://images.unsplash.com/photo-1672748341520-6a839e6c05bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85"
              alt="Leeden engineer on site"
              className="w-full h-[520px] object-cover"
            />
          </div>
        </div>
      </section>

      <section className="bg-[#0A1628] text-white py-20">
        <div className="mx-auto max-w-[1300px] px-6 grid grid-cols-2 md:grid-cols-4 gap-10">
          {aboutStats.map((s) => (
            <div key={s.l} className="border-l border-emerald-400/40 pl-5">
              <div className="text-white tracking-tight" style={{ fontSize: 44, fontWeight: 700, letterSpacing: "-0.02em" }}>{s.v}</div>
              <div className="text-slate-400 text-[13.5px] mt-1">{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="bg-slate-50 py-28">
        <div className="mx-auto max-w-[1300px] px-6">
          <div className="grid lg:grid-cols-[1.1fr_0.9fr] gap-12 lg:gap-16 items-center">
            <div>
              <UI.SectionEyebrow>Our Approach</UI.SectionEyebrow>
              <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(2rem, 3.5vw, 2.75rem)", lineHeight: 1.1, fontWeight: 700 }}>
                A four-step engineering method.
              </h2>
              <p className="mt-5 text-slate-600" style={{ fontSize: 17, lineHeight: 1.7 }}>
                We believe the right solution is never just a product. It is the combination of the right product, correctly specified, properly installed, and supported throughout its working life, every engagement begins with assessment and ends only when you are fully satisfied.
              </p>
            </div>
            <div className="rounded-2xl overflow-hidden border border-slate-200">
              <UI.ImageWithFallback
                src="https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85"
                alt="Engineer assessing equipment on site"
                className="w-full object-cover"
                style={{ height: 300 }}
              />
            </div>
          </div>
          <div className="mt-14 grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {aboutApproach.map((a, i) => {
              const AIcon = a.icon;
              return (
                <div key={a.title} className="group relative p-7 rounded-2xl bg-white border border-slate-200 hover:border-emerald-300 hover:shadow-xl hover:shadow-emerald-900/5 transition-all">
                  <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">
                    <AIcon className="w-6 h-6 text-white" />
                  </div>
                  <h3 className="mt-5 text-[#0A1628] tracking-tight" style={{ fontSize: 19, fontWeight: 700 }}>{a.title}</h3>
                  <p className="mt-3 text-slate-600 text-[14.5px]" style={{ lineHeight: 1.65 }}>{a.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="bg-white py-28">
        <div className="mx-auto max-w-[1300px] px-6">
          <div className="max-w-2xl">
            <UI.SectionEyebrow>Core Values</UI.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(2rem, 3.5vw, 2.75rem)", lineHeight: 1.1, fontWeight: 700 }}>
              What we will not compromise on.
            </h2>
          </div>
          <div className="mt-14 grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {aboutValues.map((v) => {
              const VIcon = v.icon;
              return (
                <div key={v.title} className="p-7 rounded-2xl bg-gradient-to-br from-slate-50 to-white border border-slate-200">
                  <div className="w-12 h-12 rounded-xl bg-[#0A1628] flex items-center justify-center">
                    <VIcon className="w-6 h-6 text-emerald-300" />
                  </div>
                  <h3 className="mt-5 text-[#0A1628] tracking-tight" style={{ fontSize: 18.5, fontWeight: 700 }}>{v.title}</h3>
                  <p className="mt-3 text-slate-600 text-[14.5px]" style={{ lineHeight: 1.65 }}>{v.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="bg-slate-50 py-24">
        <div className="mx-auto max-w-[1300px] px-6">
          <div className="text-center max-w-2xl mx-auto">
            <UI.SectionEyebrow centered>Certifications</UI.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.1, fontWeight: 700 }}>
              Certified to International Standards.
            </h2>
          </div>
          <div className="mt-12 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">            {aboutCerts.map((c) => (
              <div key={c} className="p-5 rounded-xl bg-white border border-slate-200 text-center">
                <div className="text-[#0A1628] tracking-tight" style={{ fontSize: 15, fontWeight: 700 }}>{c}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <UI.PageCta />
    </>
  );
}

/* ---------------- CERTIFICATIONS ---------------- */
const certList = [
  { code: "ISO 9001:2015", title: "Quality Management Systems", icon: UI.Award, body: "Independently audited management system covering procurement, technical advisory and aftermarket service." },
  { code: "ISO 45001", title: "Occupational Health & Safety", icon: UI.ShieldCheck, body: "Demonstrated commitment to safe working practices across our offices, warehouses and field operations." },
  { code: "ANSI / OSHA", title: "US Compliant Equipment", icon: UI.FileCheck, body: "Equipment compliant with American National Standards and OSHA workplace safety regulations." },
  { code: "EN Standards", title: "European Conformity", icon: UI.ScrollText, body: "Personal protective equipment and welding equipment carrying valid CE marking and EN test reports." },
  { code: "AWS D1.1", title: "Welding Code Compliance", icon: UI.Gauge, body: "Welding processes, consumables and qualification programs aligned with AWS structural welding code." },
  { code: "TIS Approved", title: "Thai Industrial Standards", icon: UI.Building2, body: "Local TIS conformity for equipment supplied into regulated Thai industrial sectors." },
];
const certStandards = [
  { title: "Documentation & Traceability", desc: "Every delivery is accompanied by certificates of conformity, batch records, test reports and Material Safety Data Sheets." },
  { title: "Calibration & Inspection", desc: "Equipment that requires periodic calibration is supported by an in-country calibration network with traceable instruments." },
  { title: "Audit Support", desc: "We provide procurement, HSE and engineering teams with the records needed to satisfy internal audits and customer audits." },
  { title: "Insurance & Regulatory", desc: "Our compliance pack is built to satisfy insurer requirements and the documentation demands of regulated industries." },
];

function CertificationsPage() {
  return (
    <>
      <UI.PageHero
        eyebrow="Certifications & Standards"
        title="Certified to"
        accent="International Standards."
        subtitle="Quality and compliance are not optional in the industries we serve. Leeden Thailand is certified to internationally recognised standards, ensuring every product we supply and every service we deliver meets the rigorous requirements of Thailand's most safety-critical sectors."
        image="https://images.unsplash.com/photo-1747999461210-a56f72294428?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "Certifications" }]}
      />

      <section className="bg-white py-28">
        <div className="mx-auto max-w-[1300px] px-6">
          <div className="grid lg:grid-cols-[1fr_1.5fr] gap-16 items-start">
            <div>
              <UI.SectionEyebrow>Certification Overview</UI.SectionEyebrow>
              <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
                One compliance partner across your full supply chain.
              </h2>
              <p className="mt-5 text-slate-600" style={{ fontSize: 16.5, lineHeight: 1.7 }}>
                Procurement, HSE and engineering teams across Thailand and the region rely on Leeden's certification framework to qualify products quickly and stand up to audit scrutiny.
              </p>
              <div className="mt-7 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">
                    <UI.BadgeCheck 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, every delivery</div>
                  </div>
                </div>
              </div>
              <div className="mt-6 rounded-2xl overflow-hidden border border-slate-200">
                <UI.ImageWithFallback
                  src="https://images.unsplash.com/photo-1541888946425-d81bb19240f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85"
                  alt="Group of construction workers and engineers on site"
                  className="w-full object-cover"
                  style={{ height: 329 }}
                />
              </div>
            </div>
            <div className="grid sm:grid-cols-2 gap-4">
              {certList.map((c) => {
                const CIcon = c.icon;
                return (
                  <div key={c.code} className="p-6 rounded-xl bg-white border border-slate-200 hover:border-emerald-400 hover:shadow-lg transition-all">
                    <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: 17, fontWeight: 700 }}>{c.code}</div>
                    <div className="mt-1 text-slate-500 text-[13.5px]">{c.title}</div>
                    <p className="mt-3 text-slate-600 text-[14px]" style={{ lineHeight: 1.6 }}>{c.body}</p>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      <section className="bg-slate-50 py-28">
        <div className="mx-auto max-w-[1300px] px-6">
          <div className="max-w-2xl">
            <UI.SectionEyebrow>Standards Compliance</UI.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
              Built to satisfy the toughest audit.
            </h2>
          </div>
          <div className="mt-12 grid sm:grid-cols-2 gap-5">
            {certStandards.map((s, i) => (
              <div key={s.title} className="p-7 rounded-2xl bg-white border border-slate-200">
                <div className="text-[12px] tracking-[0.2em] uppercase text-slate-400">0{i + 1}</div>
                <h3 className="mt-3 text-[#0A1628] tracking-tight" style={{ fontSize: 19, fontWeight: 700 }}>{s.title}</h3>
                <p className="mt-3 text-slate-600 text-[14.5px]" style={{ lineHeight: 1.7 }}>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <UI.PageCta title="Need full compliance documentation?" accent="Request our cert pack." />
    </>
  );
}

/* ---------------- SAFETY DIVISION ---------------- */
const safetyCategories = [
  { code: "01", title: "PPE", description: "Advanced personal protective equipment covering hand protection, eye and face protection, and hearing protection, engineered for superior safety, comfort, and performance in demanding environments.", image: "https://images.unsplash.com/photo-1622612023350-b15f063eabe6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#/safety/ppe", tags: ["Hand", "Eye & Face", "Hearing"] },
  { code: "02", title: "Protective Footwear", description: "Premium safety footwear built for durability, protection, and all-day comfort. Engineered for demanding environments and trusted worldwide for reliable performance in industrial settings.", image: "https://images.unsplash.com/photo-1593583810872-ddee4d6bd55a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#/safety/footwear", tags: ["Red Wing", "Dunlop"] },
  { code: "03", title: "Workwear", description: "Premium workwear built for durability, protection, and all-day comfort. Engineered for demanding environments, ensuring safety and reliable performance for every shift.", image: "https://images.unsplash.com/photo-1681812508281-7589b75b2e46?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#/safety/workwear", tags: ["FR", "Hi-Vis"] },
  { code: "04", title: "Fall Protection", description: "Advanced fall protection systems including harnesses, lanyards, and rescue solutions. Designed to ensure safety and reliable performance across all working-at-height environments.", image: "https://images.unsplash.com/photo-1589939705384-5185137a7f0f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#/safety/fall-protection", tags: ["Harness", "Lanyards"] },
];
const safetyBrandsList = [
  { name: "Red Wing", tag: "Protective Footwear" },
  { name: "Dunlop", tag: "Protective Footwear" },
  { name: "Honeywell", tag: "PPE & Respiratory" },
  { name: "MSA", tag: "Fall Protection" },
  { name: "Petzl", tag: "Industrial Access & Rescue" },
  { name: "SafetyLink", tag: "Height Safety Systems" },
  { name: "Edge", tag: "Safety Eyewear" },
  { name: "Ringers Gloves", tag: "Hand Protection" },
  { name: "Haws", tag: "Emergency Safety Equipment" },
];
const safetyPillars = [
  { icon: UI.Globe2, title: "Certified Brands", desc: "ANSI, EN and OSHA-tested PPE you can stand up to audit." },
  { icon: UI.Layers, title: "Programs, Not Products", desc: "From hazard assessment through ongoing PPE management." },
  { icon: UI.BadgeCheck, title: "Sizing & Fit", desc: "Onsite fitting clinics for footwear and respiratory protection." },
  { icon: UI.Headphones, title: "Replenishment", desc: "Scheduled deliveries that keep workforce PPE in stock." },
];

function SafetyDivisionPage() {
  return (
    <>
      <UI.PageHero
        eyebrow="Safety Division"
        title="Integrated Safety Solutions for"
        accent="Demanding Environments."
        subtitle="PPE, protective footwear, workwear, and fall protection systems, from the world's most trusted safety brands, backed by expert assessment, installation, and technical support."
        image="https://images.unsplash.com/photo-1672748341520-6a839e6c05bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "Safety Division" }]}
      />

      <section className="bg-white py-28">
        <div className="mx-auto max-w-[1300px] px-6 grid lg:grid-cols-[1fr_1.4fr] gap-14 items-start">
          <div>
            <UI.SectionEyebrow>Our Safety Division</UI.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
              A complete worksite safety partner.
            </h2>
            <p className="mt-5 text-slate-600" style={{ fontSize: 16.5, lineHeight: 1.75 }}>
              The Leeden Thailand Safety Division delivers a comprehensive range of personal protective equipment and safety systems to industries where worker protection is non-negotiable. We represent globally recognised brands and provide the full spectrum of safety solutions, from product selection through to on-site training and after-sales support.
            </p>
            <div className="mt-8 grid grid-cols-3 gap-6 border-t border-slate-200 pt-7">
              <div>
                <div className="text-[#0A1628] tracking-tight" style={{ fontSize: 30, fontWeight: 700 }}>20+</div>
                <div className="mt-1 text-slate-500 text-[13.5px]" style={{ lineHeight: 1.4 }}>Global safety brands</div>
              </div>
              <div>
                <div className="text-[#0A1628] tracking-tight" style={{ fontSize: 30, fontWeight: 700 }}>4</div>
                <div className="mt-1 text-slate-500 text-[13.5px]" style={{ lineHeight: 1.4 }}>Specialised categories</div>
              </div>
              <div>
                <div className="text-[#0A1628] tracking-tight" style={{ fontSize: 30, fontWeight: 700 }}>40+</div>
                <div className="mt-1 text-slate-500 text-[13.5px]" style={{ lineHeight: 1.4 }}>Years in industry</div>
              </div>
            </div>
          </div>
          <div className="grid sm:grid-cols-2 gap-5">
            {safetyPillars.map((p) => {
              const PIcon = p.icon;
              return (
                <div key={p.title} className="p-7 rounded-2xl bg-gradient-to-br from-slate-50 to-white border border-slate-200">
                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
                    <PIcon className="w-6 h-6 text-white" />
                  </div>
                  <h3 className="mt-5 text-[#0A1628] tracking-tight" style={{ fontSize: 18, fontWeight: 700 }}>{p.title}</h3>
                  <p className="mt-3 text-slate-600 text-[14.5px]" style={{ lineHeight: 1.65 }}>{p.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <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-12">
            <div className="max-w-2xl">
              <UI.SectionEyebrow>What We Offer</UI.SectionEyebrow>
              <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
                Four specialised safety categories.
              </h2>
            </div>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {safetyCategories.map((c) => <UI.CategoryCard key={c.code} {...c} />)}
          </div>
        </div>
      </section>

      <UI.BrandGrid title="Safety Brands We Represent." brands={safetyBrandsList} />

      <UI.PageCta title="Need safety equipment for" accent="your site or workforce?" description="Request expert advice and a competitive quote from our safety specialists." primaryLabel="Request a Safety Quote" />
    </>
  );
}

/* ---------------- WELDING DIVISION ---------------- */
const weldingCategories = [
  { code: "01", title: "Welding Machines", description: "Advanced welding systems covering MIG, TIG, MMA, and multi-process applications for fabrication, pipeline, and heavy industrial work. Brands: Kemppi, B&S Summer, Sumner.", image: "https://images.unsplash.com/photo-1730584476141-232435a40c32?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#/welding/machines", tags: ["MIG", "TIG", "MMA"] },
  { code: "02", title: "Cutting & Preparation", description: "Precision pipe cutting, bevelling, and cold cutting equipment for accurate weld preparation in pipeline, petrochemical, and offshore applications. Brands: Axxair, PPM, Climax.", image: "https://images.unsplash.com/photo-1747999461210-a56f72294428?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#/welding/cutting", tags: ["Orbital", "Bevelling"] },
  { code: "03", title: "Automation & Alignment", description: "Automated welding systems, pipe alignment clamps, and fit-up tools for precision fabrication and repeatable weld quality across high-volume and critical applications. Brands: Magnatech, Bortech, Maus, Fit-Up Pro, Mathey Dearman.", image: "https://images.unsplash.com/photo-1730584475795-f0be0efd606e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#/welding/automation", tags: ["Orbital", "Alignment"] },
  { code: "04", title: "Quality Control", description: "Inspection, marking, and finishing tools for weld quality verification and surface preparation. Brands: Tempil, Markal, Flexovit, H&S Tool, SafIra, Tanaka, Blue Metals.", image: "https://images.unsplash.com/photo-1526634140919-468dc3ae3870?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1400&q=85", href: "#/welding/quality-control", tags: ["Inspection", "Marking"] },
];
const weldingBrandsList = [
  { name: "Kemppi", tag: "Welding Machines" },
  { name: "Lincoln Electric", tag: "Welding Systems" },
  { name: "Auweld", tag: "Welding Consumables" },
  { name: "Magnatech", tag: "Orbital Welding" },
  { name: "Bortech", tag: "Bore Welding & Cladding" },
  { name: "Climax", tag: "Portable Machining" },
  { name: "Protem", tag: "Pipe Cutting & Bevelling" },
  { name: "Procut", tag: "Pipe Cutting" },
  { name: "Tempil", tag: "Temperature Indicators" },
  { name: "Flexovit", tag: "Abrasives" },
  { name: "Weiler", tag: "Surface Finishing" },
  { name: "Victor", tag: "Gas Cutting & Equipment" },
  { name: "Hobart", tag: "Filler Metals" },
];

function WeldingDivisionPage() {
  return (
    <>
      <UI.PageHero
        eyebrow="Welding Division"
        title="Advanced Welding Solutions for"
        accent="Industrial Applications."
        subtitle="Machines, cutting, preparation, alignment, automation, and quality control, from globally trusted brands, supported by expert installation, on-site service, and machine rental."
        image="https://images.unsplash.com/photo-1730584476141-232435a40c32?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "Welding Division" }]}
      />

      <section className="bg-slate-50 py-28">
        <div className="mx-auto max-w-[1300px] px-6">
          <div className="mb-12">
            <UI.SectionEyebrow>Our Welding Division</UI.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
              Four specialist welding capability areas.
            </h2>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {weldingCategories.map((c) => <UI.CategoryCard key={c.code} {...c} />)}
          </div>
        </div>
      </section>

      <UI.BrandGrid title="Welding Brands We Represent." brands={weldingBrandsList} />

      <UI.PageCta title="Looking for welding equipment or" accent="on-site fabrication support?" description="Speak to our welding specialists for product advice, system design, on-site service, and machine rental." primaryLabel="Request a Welding Quote" />
    </>
  );
}

/* ---------------- SERVICES ---------------- */
const servicesList = [
  { num: "01", icon: UI.ClipboardCheck, title: "Assessment & Consultation", desc: "Site walks, hazard reviews and welding process audits from certified engineers." },
  { num: "02", icon: UI.PenTool, title: "Product Selection & System Design", desc: "Equipment, PPE and welding systems specified to suit operations, standards and budget." },
  { num: "03", icon: UI.Wrench, title: "Installation & Implementation", desc: "Turnkey commissioning of welding cells, fall-arrest systems and gas distribution." },
  { num: "04", icon: UI.GraduationCap, title: "Training & Technical Support", desc: "Manufacturer-accredited operator training and welder qualification programs." },
  { num: "05", icon: UI.LifeBuoy, title: "After-Sales Service", desc: "Genuine parts, calibration and warranty support from factory-trained technicians." },
  { num: "06", icon: UI.Truck, title: "Onsite Service", desc: "Field engineers dispatched across Thailand for repairs and emergency response." },
  { num: "07", icon: UI.KeyRound, title: "Machine Rental", desc: "Short and long-term rental of welding, cutting and pipe-prep equipment." },
];
const servicesProcess = [
  { icon: UI.MessageSquare, title: "Contact Us", desc: "Tell us about the operation, the project and the standards involved." },
  { icon: UI.MapPinned, title: "Site Assessment", desc: "Our engineers visit, walk the site and review the process." },
  { icon: UI.FileCheck, title: "Solution Proposal", desc: "Specification, commercial proposal and compliance documentation." },
  { icon: UI.Wrench, title: "Installation & Support", desc: "Delivery, commissioning, training and lifecycle aftermarket support." },
];

function ServicesPage() {
  return (
    <>
      <UI.PageHero
        eyebrow="Services"
        title="End-to-End Support at Every"
        accent="Stage of Your Operation."
        subtitle="We integrate expertise, products, and services into one seamless system, supporting customers from initial planning through to long-term operational performance."
        image="https://images.unsplash.com/photo-1593313637552-29c2c0dacd35?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "Services" }]}
      />

      <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="max-w-2xl mx-auto text-center mb-14">
            <UI.SectionEyebrow dark centered>Full Service Spectrum</UI.SectionEyebrow>
            <h2 className="mt-4 tracking-tight" style={{ fontSize: "clamp(2rem, 3.5vw, 3rem)", lineHeight: 1.1, fontWeight: 700 }}>
              Seven interconnected services.
            </h2>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-5">
            {servicesList.map((s, i) => {
              const SIcon = s.icon;
              const span = i < 3 ? "lg:col-span-4" : "lg:col-span-3";
              return (
                <div key={s.num} className={`${span} 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 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>

      <section className="bg-white py-28">
        <div className="mx-auto max-w-[1300px] px-6">
          <div className="max-w-2xl">
            <UI.SectionEyebrow>How We Work</UI.SectionEyebrow>
            <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
              A clear, four-step engagement.
            </h2>
          </div>
          <div className="mt-14 relative">
            <div className="hidden lg:block absolute top-12 left-[10%] right-[10%] h-px bg-gradient-to-r from-transparent via-emerald-400 to-transparent" />
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
              {servicesProcess.map((p, i) => {
                const PIcon = p.icon;
                return (
                  <div key={p.title} className="relative p-7 rounded-2xl bg-gradient-to-br from-slate-50 to-white border border-slate-200">
                    <div className="text-[12px] tracking-[0.2em] uppercase text-slate-400">Step 0{i + 1}</div>
                    <div className="mt-4 w-14 h-14 rounded-full 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: 18, fontWeight: 700 }}>{p.title}</h3>
                    <p className="mt-3 text-slate-600 text-[14.5px]" style={{ lineHeight: 1.65 }}>{p.desc}</p>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      <UI.PageCta />
    </>
  );
}

/* ---------------- BRANDS ---------------- */
const allSafetyBrands = [
  { name: "Red Wing", tag: "Protective Footwear" },
  { name: "Dunlop", tag: "Protective Footwear" },
  { name: "Honeywell", tag: "PPE & Respiratory" },
  { name: "MSA", tag: "Fall Protection" },
  { name: "Petzl", tag: "Industrial Access & Rescue" },
  { name: "SafetyLink", tag: "Height Safety Systems" },
  { name: "Edge", tag: "Safety Eyewear" },
  { name: "Ringers Gloves", tag: "Hand Protection" },
  { name: "Haws", tag: "Emergency Safety Equipment" },
];
const allWeldingBrands = [
  { name: "Kemppi", tag: "Welding Machines" },
  { name: "Lincoln Electric", tag: "Welding Systems" },
  { name: "Auweld", tag: "Welding Consumables" },
  { name: "Magnatech", tag: "Orbital Welding" },
  { name: "Bortech", tag: "Bore Welding & Cladding" },
  { name: "Climax", tag: "Portable Machining" },
  { name: "Protem", tag: "Pipe Cutting & Bevelling" },
  { name: "Procut", tag: "Pipe Cutting" },
  { name: "Tempil", tag: "Temperature Indicators" },
  { name: "Flexovit", tag: "Abrasives" },
  { name: "Weiler", tag: "Surface Finishing" },
  { name: "Victor", tag: "Gas Cutting & Equipment" },
  { name: "Hobart", tag: "Filler Metals" },
];

function BrandsPage() {
  return (
    <>
      <UI.PageHero
        eyebrow="Brand Partners"
        title="Global Brands."
        accent="Local Expertise."
        subtitle="We partner with the world's most respected safety and welding manufacturers to deliver internationally certified, field-proven products to industries across Thailand, through a single, trusted partner."
        image="https://images.unsplash.com/photo-1747999461210-a56f72294428?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "Brands" }]}
      />
      <UI.BrandGrid eyebrow="Safety Brands" title="Protecting people on every site." brands={allSafetyBrands} />
      <UI.BrandGrid eyebrow="Welding Brands" title="Engineering the welds that hold industry together." brands={allWeldingBrands} />
      <UI.PageCta />
    </>
  );
}

/* ---------------- NEWS ---------------- */
const newsFeatured = {
  category: "Industry Insight",
  date: "May 12, 2026",
  title: "How orbital welding is reshaping Thai pipe fabrication",
  excerpt: "A look at how leading fabricators across the Eastern Seaboard are deploying automated welding cells, and what it means for project schedules, weld quality and welder retention.",
  img: "https://images.unsplash.com/photo-1730584475795-f0be0efd606e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1800&q=85",
};
const newsArticles = [
  { category: "Safety", date: "Apr 28, 2026", title: "A practical guide to fall protection audits", img: "https://images.unsplash.com/photo-1589939705384-5185137a7f0f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1200&q=85" },
  { category: "Welding", date: "Apr 14, 2026", title: "Choosing between MIG, TIG and MMA for shop fabrication", img: "https://images.unsplash.com/photo-1730584476141-232435a40c32?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1200&q=85" },
  { category: "Compliance", date: "Mar 30, 2026", title: "What auditors are asking for in 2026", img: "https://images.unsplash.com/photo-1747999461210-a56f72294428?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1200&q=85" },
  { category: "Training", date: "Mar 18, 2026", title: "Inside Leeden's welder qualification program", img: "https://images.unsplash.com/photo-1526634140919-468dc3ae3870?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1200&q=85" },
  { category: "Industry", date: "Mar 02, 2026", title: "Shipyard maintenance: where safety meets uptime", img: "https://images.unsplash.com/photo-1614326014420-1f0c741ca7e1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1200&q=85" },
  { category: "Rental", date: "Feb 20, 2026", title: "When equipment rental beats capex", img: "https://images.unsplash.com/photo-1593313637552-29c2c0dacd35?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1200&q=85" },
];
const newsTags = ["All", "Safety", "Welding", "Compliance", "Training", "Industry", "Rental"];

function NewsPage() {
  return (
    <>
      <UI.PageHero
        eyebrow="News & Insights"
        title="News &"
        accent="Industry Updates."
        subtitle="Stay informed with the latest news from Leeden Thailand, new product launches, brand updates, service announcements, and industry developments relevant to safety and welding professionals across Thailand."
        image="https://images.unsplash.com/photo-1730584474196-b0e8a29303e8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85"
        breadcrumbs={[{ label: "News" }]}
      />

      <section className="bg-white py-24">
        <div className="mx-auto max-w-[1300px] px-6">
          <a href="#" className="group grid lg:grid-cols-[1.2fr_1fr] gap-10 items-center">
            <div className="rounded-2xl overflow-hidden border border-slate-200">
              <UI.ImageWithFallback src={newsFeatured.img} alt={newsFeatured.title} className="w-full h-[460px] object-cover group-hover:scale-105 transition-transform duration-700" />
            </div>
            <div>
              <UI.SectionEyebrow>Featured Article</UI.SectionEyebrow>
              <div className="mt-5 flex items-center gap-4 text-slate-500 text-[13px]">
                <span className="inline-flex items-center gap-1.5"><UI.Tag className="w-3.5 h-3.5" /> {newsFeatured.category}</span>
                <span className="inline-flex items-center gap-1.5"><UI.Calendar className="w-3.5 h-3.5" /> {newsFeatured.date}</span>
              </div>
              <h2 className="mt-4 text-[#0A1628] tracking-tight group-hover:text-emerald-700 transition" style={{ fontSize: "clamp(1.75rem, 2.8vw, 2.25rem)", lineHeight: 1.15, fontWeight: 700 }}>
                {newsFeatured.title}
              </h2>
              <p className="mt-4 text-slate-600" style={{ fontSize: 16, lineHeight: 1.7 }}>{newsFeatured.excerpt}</p>
              <div className="mt-7 inline-flex items-center gap-2 text-emerald-700" style={{ fontWeight: 600 }}>
                Read article <UI.ArrowUpRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
              </div>
            </div>
          </a>
        </div>
      </section>

      <section className="bg-slate-50 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-10">
            <div>
              <UI.SectionEyebrow>Latest Articles</UI.SectionEyebrow>
              <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
                Recent from the team.
              </h2>
            </div>
            <div className="flex flex-wrap gap-2">
              {newsTags.map((t, i) => (
                <button key={t} className={`px-4 py-1.5 rounded-full text-[13px] border transition ${i === 0 ? "bg-[#0A1628] text-white border-[#0A1628]" : "bg-white text-slate-600 border-slate-200 hover:border-emerald-400"}`}>{t}</button>
              ))}
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {newsArticles.map((a) => (
              <a key={a.title} href="#" className="group rounded-2xl overflow-hidden bg-white border border-slate-200 hover:border-emerald-300 hover:shadow-lg transition-all">
                <div className="overflow-hidden">
                  <UI.ImageWithFallback src={a.img} alt={a.title} className="w-full h-52 object-cover group-hover:scale-110 transition-transform duration-700" />
                </div>
                <div className="p-6">
                  <div className="flex items-center gap-3 text-slate-500 text-[12.5px]">
                    <span className="px-2 py-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-100" style={{ fontWeight: 600 }}>{a.category}</span>
                    <span>{a.date}</span>
                  </div>
                  <h3 className="mt-4 text-[#0A1628] tracking-tight group-hover:text-emerald-700 transition" style={{ fontSize: 18, fontWeight: 700, lineHeight: 1.3 }}>{a.title}</h3>
                </div>
              </a>
            ))}
          </div>

          <div className="mt-14 p-8 rounded-2xl bg-[#0A1628] text-white flex flex-col md:flex-row items-center justify-between gap-6">
            <div>
              <div className="text-[12px] tracking-[0.18em] uppercase text-emerald-300">Stay in the loop</div>
              <h3 className="mt-2 tracking-tight" style={{ fontSize: 22, fontWeight: 700 }}>Get Leeden insights in your inbox</h3>
            </div>
            <form className="flex gap-3 w-full md:w-auto">
              <input className="flex-1 md:w-72 px-5 py-3 rounded-full bg-white/10 border border-white/15 text-white placeholder:text-slate-400 focus:outline-none focus:border-emerald-400" placeholder="you@company.com" />
              <button className="px-6 py-3 rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400 transition" style={{ fontWeight: 600 }}>Subscribe</button>
            </form>
          </div>
        </div>
      </section>

      <UI.PageCta />
    </>
  );
}

Object.assign(window, {
  HomePage, AboutPage, CertificationsPage, SafetyDivisionPage,
  WeldingDivisionPage, ServicesPage, BrandsPage, NewsPage,
});