// chrome.jsx, SiteHeader + SiteFooter
const { useState: useStateChrome } = React;
const { Menu, Search, ChevronDown, X, PhoneIcon, LinkedInIcon, MailIcon, MapPinIcon, LineIcon, LOGO_SRC } = window;

const navItems = [
  {
    label: "Safety",
    href: "#/safety",
    menu: [
      { label: "Safety Division", href: "#/safety" },
      { label: "PPE", href: "#/safety/ppe" },
      { label: "Protective Footwear", href: "#/safety/footwear" },
      { label: "Workwear", href: "#/safety/workwear" },
      { label: "Fall Protection", href: "#/safety/fall-protection" },
    ],
  },
  {
    label: "Welding",
    href: "#/welding",
    menu: [
      { label: "Welding Division", href: "#/welding" },
      { label: "Welding Machines", href: "#/welding/machines" },
      { label: "Cutting & Preparation", href: "#/welding/cutting" },
      { label: "Automation & Alignment", href: "#/welding/automation" },
      { label: "Quality Control", href: "#/welding/quality-control" },
    ],
  },
  { label: "Products", href: "#/products" },
  { label: "Services", href: "#/services" },
  { label: "Brands", href: "#/brands" },
  { label: "About", href: "#/about" },
  { label: "Certifications", href: "#/certifications" },
];

function SiteHeader() {
  const [openMenu, setOpenMenu] = useStateChrome(null);
  const [mobileOpen, setMobileOpen] = useStateChrome(false);
  const [mobileSub, setMobileSub] = useStateChrome(null);

  return (
    <header className="sticky top-0 z-50 w-full bg-white/95 backdrop-blur-md border-b border-slate-200/80">
      <div className="hidden lg:block bg-[#0A1628] text-slate-300 text-[13px]">
        <div className="mx-auto max-w-[1300px] px-6 flex items-center justify-between h-9">
          <div className="flex items-center gap-6">
            <span className="flex items-center gap-2">
              <PhoneIcon className="w-4 h-4 text-emerald-400" />
              +66 (33) 048 041-4
            </span>
            <span>ISO 9001:2015 Certified</span>
            <span>Serving Thailand &amp; Southeast Asia</span>
          </div>
          <div className="flex items-center gap-5">
            <a href="#/news" className="hover:text-white transition">News</a>
            <span className="text-slate-500">EN | TH</span>
          </div>
        </div>
      </div>
      <div className="mx-auto max-w-[1300px] px-6 flex items-center justify-between h-20">
        <a href="#/" className="flex items-center gap-3">
          <img src={LOGO_SRC} alt="Leeden Thailand" className="h-11 w-11 object-contain" />
          <div className="leading-tight">
            <div className="text-[#0A1628] tracking-tight" style={{ fontSize: 20, fontWeight: 700 }}>
              Leeden <span className="text-emerald-600">Thailand</span>
            </div>
            <div className="text-[11px] tracking-[0.18em] uppercase text-slate-500">
              Safety · Welding · Solutions
            </div>
          </div>
        </a>
        <nav className="hidden lg:flex items-center gap-1">
          {navItems.map((item) => (
            <div
              key={item.label}
              className="relative"
              onMouseEnter={() => item.menu && setOpenMenu(item.label)}
              onMouseLeave={() => setOpenMenu(null)}
            >
              <a
                href={item.href}
                className="flex items-center gap-1 px-4 py-2 text-[15px] text-slate-700 hover:text-[#0A1628] rounded-md hover:bg-slate-50 transition"
              >
                {item.label}
                {item.menu && <ChevronDown className="w-3.5 h-3.5 opacity-60" />}
              </a>
              {item.menu && openMenu === item.label && (
                <div className="absolute top-full left-0 pt-2 w-64 z-50">
                  <div className="bg-white rounded-xl border border-slate-200 shadow-xl shadow-slate-900/10 overflow-hidden py-2">
                    {item.menu.map((m) => (
                      <a key={m.label} href={m.href} className="block px-5 py-2.5 text-[14px] text-slate-700 hover:bg-emerald-50 hover:text-emerald-700 transition">
                        {m.label}
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ))}
        </nav>
        <div className="flex items-center gap-3">
          <button className="hidden md:flex w-10 h-10 items-center justify-center rounded-full hover:bg-slate-100 transition">
            <Search className="w-4 h-4 text-slate-700" />
          </button>
          <a href="#/contact" className="hidden md:inline-flex items-center gap-2 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white px-5 py-2.5 rounded-full transition shadow-sm shadow-emerald-900/20">
            Request a Quote
          </a>
          <button onClick={() => setMobileOpen(!mobileOpen)} className="lg:hidden w-10 h-10 flex items-center justify-center rounded-md hover:bg-slate-100">
            {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
          </button>
        </div>
      </div>
      {mobileOpen && (
        <div className="lg:hidden border-t border-slate-200 bg-white max-h-[calc(100vh-5rem)] overflow-y-auto">
          <div className="px-6 py-4 space-y-1">
            {navItems.map((item) => (
              item.menu ? (
                <div key={item.label}>
                  <button
                    onClick={() => setMobileSub(mobileSub === item.label ? null : item.label)}
                    className="w-full flex items-center justify-between px-3 py-2.5 text-[15px] text-slate-700 rounded-md hover:bg-slate-50"
                  >
                    {item.label}
                    <ChevronDown className={`w-4 h-4 opacity-60 transition-transform ${mobileSub === item.label ? "rotate-180" : ""}`} />
                  </button>
                  {mobileSub === item.label && (
                    <div className="pl-3 pb-1 space-y-0.5">
                      {item.menu.map((m) => (
                        <a key={m.label} href={m.href} onClick={() => setMobileOpen(false)} className="block px-3 py-2 text-[14px] text-slate-500 rounded-md hover:bg-emerald-50 hover:text-emerald-700">
                          {m.label}
                        </a>
                      ))}
                    </div>
                  )}
                </div>
              ) : (
                <a key={item.label} href={item.href} onClick={() => setMobileOpen(false)} className="block px-3 py-2.5 text-[15px] text-slate-700 rounded-md hover:bg-slate-50">
                  {item.label}
                </a>
              )
            ))}
            <a href="#/news" onClick={() => setMobileOpen(false)} className="block px-3 py-2.5 text-[15px] text-slate-700 rounded-md hover:bg-slate-50">
              News
            </a>
            <a href="#/contact" onClick={() => setMobileOpen(false)} className="mt-3 block text-center bg-gradient-to-r from-emerald-600 to-teal-600 text-white px-5 py-3 rounded-full">
              Request a Quote
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

function SiteFooter() {
  const cols = [
    {
      title: "Safety Solutions",
      links: [
        { label: "Safety Division", href: "#/safety" },
        { label: "PPE", href: "#/safety/ppe" },
        { label: "Protective Footwear", href: "#/safety/footwear" },
        { label: "Workwear", href: "#/safety/workwear" },
        { label: "Fall Protection", href: "#/safety/fall-protection" },
      ],
    },
    {
      title: "Welding Solutions",
      links: [
        { label: "Welding Division", href: "#/welding" },
        { label: "Welding Machines", href: "#/welding/machines" },
        { label: "Cutting & Prep", href: "#/welding/cutting" },
        { label: "Automation", href: "#/welding/automation" },
        { label: "Quality Control", href: "#/welding/quality-control" },
      ],
    },
    {
      title: "Services",
      links: [
        { label: "All Services", href: "#/services" },
        { label: "Consultation", href: "#/services" },
        { label: "Installation", href: "#/services" },
        { label: "After-Sales", href: "#/services" },
        { label: "Machine Rental", href: "#/services" },
      ],
    },
    {
      title: "Company",
      links: [
        { label: "About Leeden", href: "#/about" },
        { label: "Brands", href: "#/brands" },
        { label: "Certifications", href: "#/certifications" },
        { label: "News", href: "#/news" },
        { label: "Contact", href: "#/contact" },
      ],
    },
  ];

  return (
    <footer className="bg-[#06101E] text-slate-400">
      <div className="mx-auto max-w-[1300px] px-6 pt-20 pb-10">
        <div className="grid lg:grid-cols-[1.5fr_3fr] gap-14 mb-16">
          <div>
            <a href="#/" className="flex items-center gap-3">
              <img src={LOGO_SRC} alt="Leeden (Thailand) Co., Ltd." className="h-10 w-10" />
              <div className="text-white tracking-tight" style={{ fontSize: 17, fontWeight: 700, lineHeight: 1.2 }}>
                Leeden (Thailand) <br />Co., Ltd.
              </div>
            </a>
            <ul className="mt-6 space-y-3.5 text-slate-400 text-[14px]" style={{ lineHeight: 1.6 }}>
              <li className="flex gap-3">
                <MapPinIcon className="w-5 h-5 mt-0.5 text-emerald-400 shrink-0" />
                <span>789/152 Moo 1, Pinthong Estate 1,<br />Nongkham, Sriracha, Chonburi 20230, Thailand</span>
              </li>
              <li className="flex gap-3">
                <PhoneIcon className="w-5 h-5 mt-0.5 text-emerald-400 shrink-0" />
                <a href="tel:+6633048041" className="hover:text-emerald-300 transition">+66 (33) 048 041-4</a>
              </li>
              <li className="flex gap-3">
                <MailIcon className="w-5 h-5 mt-0.5 text-emerald-400 shrink-0" />
                <a href="mailto:enquiry.ldt@leedennox.com" className="hover:text-emerald-300 transition">enquiry.ldt@leedennox.com</a>
              </li>
              <li className="flex gap-3">
                <LineIcon className="w-6 h-6 -mt-0.5 text-emerald-400 shrink-0" />
                <span>Line ID: <span className="text-slate-200">@512sgltn</span></span>
              </li>
            </ul>
            <div className="mt-7 flex items-center gap-3">
              <a href="#" aria-label="LinkedIn" className="w-11 h-11 rounded-full bg-white/5 hover:bg-emerald-500 border border-white/10 flex items-center justify-center transition">
                <LinkedInIcon className="w-5 h-5 text-white" />
              </a>
              <a href="#" aria-label="Line" className="w-11 h-11 rounded-full bg-white/5 hover:bg-emerald-500 border border-white/10 flex items-center justify-center transition">
                <LineIcon className="w-7 h-7 text-white" />
              </a>
            </div>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-10">
            {cols.map((c) => (
              <div key={c.title}>
                <div className="text-white text-[13px] tracking-[0.16em] uppercase mb-5" style={{ fontWeight: 600 }}>
                  {c.title}
                </div>
                <ul className="space-y-3">
                  {c.links.map((l) => (
                    <li key={l.label}>
                      <a href={l.href} className="text-slate-400 hover:text-emerald-300 transition text-[14.5px]">{l.label}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <div className="pt-8 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-4 text-[13px]">
          <div>© {new Date().getFullYear()} Leeden (Thailand) Co., Ltd. All rights reserved.</div>
          <div className="flex items-center gap-6">
            <a href="#/privacy" className="hover:text-emerald-300 transition">Privacy</a>
            <a href="#/privacy" className="hover:text-emerald-300 transition">Terms</a>
            <a href="#/" className="hover:text-emerald-300 transition">Sitemap</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteHeader, SiteFooter });