// nav-hero.jsx — Kaya editorial homepage: Nav + Hero
// ----------------------------------------------------------------------
// Nav: fixed, transparent over hero, solidifies on scroll.
// Hero: full-bleed cinematic photo, oversized kaya wordmark, slow zoom.

const KAYA_NAV_ITEMS = [
  { id: "home",    label: "Home" },
  { id: "journal", label: "The Journal" },
  { id: "refined", label: "Refined" },
  { id: "ethos",   label: "Our Ethos" },
];

// noDark: pass true on pages with no dark hero (journal index) so nav stays dark-text always
const KayaNav = ({ active = "home", onNavigate, noDark = false }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [overDark, setOverDark] = React.useState(!noDark);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const handler = () => {
      const y = window.scrollY;
      setScrolled(y > 60);
      if (!noDark) setOverDark(y < window.innerHeight - 140);
    };
    handler();
    window.addEventListener("scroll", handler, { passive: true });
    return () => window.removeEventListener("scroll", handler);
  }, [noDark]);

  // mobile menu: lock page scroll while open, close on Escape
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); };
  }, [open]);

  const go = (id) => (e) => { e.preventDefault(); setOpen(false); onNavigate?.(id); };

  const cls = [
    "nav",
    scrolled ? "nav--scrolled" : "",
    overDark && !scrolled ? "nav--ivory" : "",
  ].filter(Boolean).join(" ");

  return (
    <React.Fragment>
      <nav className={cls}>
        <span className="nav__brand">
          <button className="nav__toggle" aria-label="Open menu" aria-expanded={open} onClick={() => setOpen(true)}>
            <span></span><span></span>
          </button>
        </span>
        <div className="nav__links">
          {KAYA_NAV_ITEMS.map(it => (
            <a key={it.id}
               className={active === it.id ? "active" : ""}
               href={`#${it.id}`}
               onClick={go(it.id)}>
              {it.label}
            </a>
          ))}
        </div>
        <a className="nav__right" href="#journal" onClick={go("journal")}>
          Subscribe
        </a>
      </nav>
      {open && (
        <div className="nav__menu" role="dialog" aria-modal="true" aria-label="Menu">
          <button className="nav__menu-close" aria-label="Close menu" onClick={() => setOpen(false)}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
              <line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/>
            </svg>
          </button>
          <div className="nav__menu-links">
            {KAYA_NAV_ITEMS.map(it => (
              <a key={it.id}
                 className={active === it.id ? "active" : ""}
                 href={`#${it.id}`}
                 onClick={go(it.id)}>
                {it.label}
              </a>
            ))}
          </div>
          <a className="nav__menu-sub" href="#journal" onClick={go("journal")}>Subscribe</a>
        </div>
      )}
    </React.Fragment>
  );
};

// ----------------------------------------------------------------------
// Hero
// ----------------------------------------------------------------------

const HERO_IMAGES = {
  twilight:  "assets/images/photo-patio-twilight.jpg",
  firepit:   "assets/images/photo-patio-firepit.jpg",
  living:    "assets/images/photo-living-room.jpg",
  marble:    "assets/images/photo-kitchen-marble.jpg",
  moody:     "assets/images/photo-dining-moody.jpg",
};

// The actual kaya wordmark, colorable (masked PNG — see .kaya-logo in styles.css)
const KayaLogo = ({ color = "var(--kaya-ivory)", className = "", ...rest }) => (
  <span
    className={["kaya-logo", className].filter(Boolean).join(" ")}
    style={{ backgroundColor: color }}
    role="img"
    aria-label="kaya"
    {...rest}
  />
);

// layout:
//  "fullbleed"        — full-bleed photo, logo centered over it (default)
//  "ivory-above"      — image centered on ivory, burgundy logo above the image
//  "burgundy-above"   — image centered on burgundy, ivory logo above the image
//  "ivory-overlay"    — image centered on ivory, burgundy logo overlaid on the image
//  "burgundy-overlay" — image centered on burgundy, ivory logo overlaid on the image
const KayaHero = ({ image = "twilight", softOverlay = false, layout = "fullbleed" }) => {
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setMounted(true), 80);
    return () => clearTimeout(t);
  }, []);

  const src = HERO_IMAGES[image] || HERO_IMAGES.twilight;
  const caption = (
    <p className={"hero__caption " + (mounted ? "is-in" : "")}>
      A cinematic editorial on the architecture of feeling — <em>refined, not timid.</em>
    </p>
  );

  if (layout !== "fullbleed") {
    const burgundyFrame = layout.startsWith("burgundy");
    const overlay = layout.endsWith("overlay");
    const logoColor = burgundyFrame ? "var(--kaya-ivory)" : "var(--kaya-burgundy)";
    const frameCls = burgundyFrame ? "hero--frame-burgundy" : "hero--frame-ivory";
    const logo = (
      <KayaLogo
        color={logoColor}
        className={["hero__logo", overlay ? "hero__logo--overlay" : "", mounted ? "is-in" : ""].filter(Boolean).join(" ")}
      />
    );
    return (
      <section className={["hero", "hero--framed", frameCls, overlay ? "hero--overlay" : ""].filter(Boolean).join(" ")} id="home" data-screen-label="01 Hero">
        <div className="hero__frame">
          {!overlay && logo}
          <div className="hero__frame-media">
            <img src={src} alt="" />
            {overlay && logo}
          </div>
          {caption}
        </div>
      </section>
    );
  }

  return (
    <section className="hero" id="home" data-screen-label="01 Hero">
      <div className={"hero__bg " + (mounted ? "is-in" : "")}>
        <img src={src} alt="" />
      </div>
      <div className={"hero__overlay" + (softOverlay ? " hero__overlay--soft" : "")}></div>

      <div className="hero__content">
        <div className="hero__center">
          <div className="hero__left">
            <span className={"hero__vol " + (mounted ? "is-in" : "")}>vol.01 — spring · summer</span>
            <h1 style={{ margin: 0, display: "contents" }}>
              <KayaLogo className={"hero__logo " + (mounted ? "is-in" : "")} />
            </h1>
          </div>
          {caption}
        </div>
      </div>
    </section>
  );
};

window.KayaNav = KayaNav;
window.KayaLogo = KayaLogo;
window.KayaHero = KayaHero;
window.KAYA_NAV_ITEMS = KAYA_NAV_ITEMS;