/* AutoVault — Nav + Hero (3 treatments). Exposed on window. */

function Brand({ size }) {
  return (
    <a className="brand" href="/" aria-label="AutoVault home">
      <Shield className="brand__crest" />
      <span className="brand__word">Auto<span className="vault">Vault</span><span className="brand__tld">.id</span></span>
    </a>
  );
}

function Nav({ onOpen }) {
  const [solid, setSolid] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
  }, [open]);

  return (
    <React.Fragment>
      <nav className={`nav ${solid ? "solid" : ""}`}>
        <div className="nav__in">
          <Brand />
          <div className="nav__links">
            {NAV_LINKS.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
          </div>
          <div className="nav__cta">
            <a className="btn btn--primary btn--tour" href="#contact">Reserve Your Space</a>
            <button className={`nav__burger ${open ? "open" : ""}`} onClick={() => setOpen((v) => !v)} aria-label="Menu">
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </nav>
      <div className={`mobile-menu ${open ? "open" : ""}`}>
        <div>
          {NAV_LINKS.map((l, i) => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)}>
              <span className="mi">0{i + 1}</span>{l.label}
            </a>
          ))}
        </div>
        <div className="mobile-menu__cta">
          <a className="btn btn--primary btn--lg" href={WA_LINK} target="_blank" rel="noopener"><WhatsAppIcon className="ico" /> WhatsApp Concierge</a>
          <a className="btn btn--ghost btn--lg" href="#contact" onClick={() => setOpen(false)}>Reserve Your Space</a>
        </div>
      </div>
    </React.Fragment>
  );
}

function TrustStrip() {
  return (
    <div className="hero__trust">
      <div className="hero__trust-in">
        {TRUST.map((t) => (
          <span className="trust-item" key={t}><span className="dot"></span>{t}</span>
        ))}
      </div>
    </div>
  );
}

function HeroCopy({ centered }) {
  return (
    <div className="hero__copy">
      <div className="hero__kicker">
        <span className="pin">◆</span> Jakarta · Indonesia's first private car vault
      </div>
      <h1 className="display">
        <span className="line"><span>Your car's</span></span>
        <span className="line"><span><em>private</em> sanctuary.</span></span>
      </h1>
      <p className="lede hero__sub">
        We don't store cars. We protect obsessions — climate-controlled, battery-tended,
        watched around the clock, and returned to you better than you left it.
      </p>
      <div className="hero__actions">
        <a className="btn btn--primary btn--lg" href="#contact">Reserve Your Space <Arrow className="ico" /></a>
        <a className="btn btn--ghost btn--lg btn--wa" href={WA_LINK} target="_blank" rel="noopener">
          <WhatsAppIcon className="ico" /> WhatsApp Concierge
        </a>
      </div>
    </div>
  );
}

/* ---- Treatment A: VAULT DOOR ---- */
function HeroVault() {
  return (
    <section className="hero hero--vault" id="top">
      <div className="vault-glow"></div>
      <div className="hero__bg-car"></div>
      <div className="wrap"><HeroCopy centered /></div>
      <div className="vault-stage" aria-hidden="true">
        <div className="vault-door vault-door--l"></div>
        <div className="vault-door vault-door--r"></div>
        <div className="vault-seam"></div>
      </div>
      <HeroScroll />
      <TrustStrip />
    </section>
  );
}

/* ---- Treatment B: EDITORIAL SPLIT ---- */
function HeroSplit() {
  return (
    <section className="hero hero--split" id="top">
      <div className="wrap">
        <div className="hero__grid">
          <HeroCopy />
          <div className="hero__media">
            <div className="hero__streak"></div>
            <Shot id="hero-split" label="Drop your Lamborghini · vertical" fill />
          </div>
        </div>
      </div>
      <HeroScroll />
      <TrustStrip />
    </section>
  );
}

/* ---- Treatment C: CINEMATIC FULL-BLEED ---- */
function HeroCine() {
  return (
    <section className="hero hero--cine" id="top">
      <div className="hero__media"><Shot id="hero-cine" label="Drop an exotic · cinematic, full-bleed" fill /></div>
      <div className="wrap"><HeroCopy /></div>
      <HeroScroll />
      <TrustStrip />
    </section>
  );
}

function HeroScroll() {
  return (
    <div className="hero__scroll" aria-hidden="true">
      <span>SCROLL</span>
      <span className="line"></span>
    </div>
  );
}

function Hero({ treatment }) {
  // key forces a remount on treatment change so the entrance animations replay.
  const H = treatment === "split" ? HeroSplit : treatment === "cinematic" ? HeroCine : HeroVault;
  return <H key={treatment} />;
}

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