// ============================================================
//  Noble Design Asia — Top: Nav + Hero
// ============================================================

// ------------- NAV -------------
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);
  const links = [
    ["Home", "#top"],
    ["Materials", "#materials"],
    ["Services", "#services"],
    ["Portfolio", "#portfolio"],
    ["Voices", "#voices"],
    ["Contact", "#contact"],
  ];
  return (
    <>
      <header role="banner"
        className={`fixed top-0 left-0 right-0 z-40 transition-all duration-500 shadow-none ${scrolled ? 'bg-paper/95 backdrop-blur border-b border-purple/10 py-3' : 'py-5 md:py-6'}`}>
        <div className="max-w-[1400px] mx-auto px-5 md:px-10 flex items-center justify-between">
          <a href="#top" aria-label="Noble Design Asia home"
             className={`whitespace-nowrap text-[13px] md:text-[14px] lg:text-[15px] tracking-[0.22em] uppercase font-[500] ${scrolled ? 'text-purple' : 'text-paper'}`}>
            NOBLE <span className="font-[400]">Design</span> Asia
          </a>
          <nav role="navigation" aria-label="Primary" className="hidden lg:flex items-center gap-7 xl:gap-9">
            {links.map(([label, href]) => (
              <a key={label} href={href} className={`eyebrow link-u ${scrolled ? 'text-purple' : 'text-paper'}`}>{label}</a>
            ))}
          </nav>
          <a href="#contact" className={`hidden lg:inline-flex items-center gap-2 eyebrow link-u whitespace-nowrap ${scrolled ? 'text-green' : 'text-gold'}`}>
            Design My Space <IconArrow width="14" height="14" />
          </a>
          <button onClick={() => setOpen(true)} aria-label="Open menu" className={`lg:hidden ${scrolled ? 'text-purple' : 'text-paper'}`}>
            <IconMenu />
          </button>
        </div>
      </header>

      <div role="dialog" aria-modal="true" aria-label="Menu"
        className={`fixed inset-0 z-50 bg-purple text-paper transition-all duration-500 shadow-none ${open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}>
        <div className="absolute top-5 right-5">
          <button onClick={() => setOpen(false)} aria-label="Close menu"><IconClose /></button>
        </div>
        <div className="h-full flex flex-col justify-center px-8 gap-5">
          {links.map(([label, href]) => (
            <a key={label} href={href} onClick={() => setOpen(false)} className="text-4xl font-[500]">{label}</a>
          ))}
          <a href="#contact" onClick={() => setOpen(false)} className="eyebrow text-gold mt-6">Design My Space →</a>
        </div>
      </div>
    </>
  );
}

// ------------- HERO -------------
function Hero() {
  return (
    <section id="top" aria-labelledby="hero-h" className="relative min-h-[100svh] bg-purple text-paper overflow-hidden grain shadow-none">
      <div className="absolute inset-0">
        <img
          src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=2400&q=90"
          alt="Contemporary Jakarta residence living room designed by Noble Design Asia, featuring teak joinery and natural light"
          className="w-full h-full object-cover slow-zoom"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-purple/80 via-purple/40 to-purple/90" />
      </div>

      <div className="absolute top-24 md:top-28 left-0 right-0 px-5 md:px-10 z-10">
        <div className="max-w-[1400px] mx-auto flex items-center justify-between eyebrow text-paper/70">
          <span>Jakarta · Bali · Est. 2014</span>
          <span className="hidden md:block">Interior · Renovation · Fit-Out</span>
        </div>
      </div>

      <div className="relative z-10 max-w-[1400px] mx-auto px-5 md:px-10 pt-40 md:pt-56 pb-28 md:pb-40">
        <p className="h-body max-w-xl text-paper/70 italic">
          complete, quietly premium interior design service for homes and offices.
        </p>
        <h1 id="hero-h" className="h-display mt-6 md:mt-8 max-w-[18ch]">
          Turn-Key Design, Renovation &amp; Fit-Out in <span className="text-gold italic">Jakarta &amp; Bali</span>
        </h1>
        <div className="mt-8 md:mt-10 grid md:grid-cols-12 gap-8 items-end">
          <p className="md:col-span-6 md:col-start-7 h-sub text-paper/80 max-w-lg">
            A calm, end-to-end design service for homes and offices. Designed with restraint, built with care, and delivered fully finished.
          </p>
        </div>
        <div className="mt-10 flex flex-wrap gap-3">
          <a href={waLink("Hi Noble Asia, I'd like to design my space.")}
             target="_blank" rel="noopener"
             className="btn btn-primary rounded-none shadow-none border border-gold" aria-label={`Chat with Noble Asia on WhatsApp at ${WA_DISPLAY}`}>
            Design My Space <IconArrow width="16" height="16" />
          </a>
          <a href="#portfolio" className="btn btn-light rounded-none shadow-none">View Projects <IconArrow width="16" height="16" /></a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero });