/* sections-a.jsx — Nav, Hero (2 styles), Mission intro, Section index → window */

const NAV_ITEMS = [
  { label: "Home", href: "#home", num: "00" },
  { label: "About", href: "#about", num: "01" },
  { label: "Art", href: "#art", num: "02" },
  { label: "Speaking", href: "#speaking", num: "03" },
  { label: "Consulting", href: "#consulting", num: "04" },
];

function Nav({ active }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const go = (e, href) => { setMenuOpen(false); };
  return (
    <React.Fragment>
      <nav className={"nav" + (scrolled ? " scrolled" : "")}>
        <a href="#home" className="brand" aria-label="Aditi — home">
          Aditi<span className="dot">.</span>
          <small>Monstrous&nbsp;Monk</small>
        </a>
        <div className="nav-links">
          {NAV_ITEMS.map((it) => (
            <a key={it.href} href={it.href} className={active === it.href.slice(1) ? "active" : ""}>{it.label}</a>
          ))}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <a href="#contact" className="nav-cta">Connect</a>
          <button className="nav-burger" aria-label="Menu" onClick={() => setMenuOpen((o) => !o)}>
            <span style={menuOpen ? { transform: "translateY(7px) rotate(45deg)" } : {}}></span>
            <span style={menuOpen ? { opacity: 0 } : {}}></span>
            <span style={menuOpen ? { transform: "translateY(-7px) rotate(-45deg)" } : {}}></span>
          </button>
        </div>
      </nav>
      <div className={"mobile-menu" + (menuOpen ? " open" : "")}>
        {NAV_ITEMS.concat([{ label: "Connect", href: "#contact", num: "05" }]).map((it) => (
          <a key={it.href} href={it.href} onClick={(e) => go(e, it.href)}>
            <span className="num">{it.num}</span>{it.label}
          </a>
        ))}
      </div>
    </React.Fragment>
  );
}

function Hero({ styleMode, motion }) {
  const D = window.ADITI;
  const [off, setOff] = React.useState(0);
  React.useEffect(() => {
    if (motion === "minimal" || window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setOff(0); return; }
    let raf;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setOff(Math.min(window.scrollY, 700)));
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
  }, [motion]);

  if (styleMode === "framed") {
    return (
      <header className="hero" data-style="framed" id="home" data-screen-label="Hero">
        <CornerMotif style={{ top: -10, right: -20 }} size={300} />
        <div className="wrap hero-framed">
          <div className="copy">
            <p className="eyebrow reveal in">Artist · Educator · Changemaker</p>
            <h1 className="hf-name reveal in">Aditi<span style={{ color: "var(--accent)" }}>.</span></h1>
            <p className="hf-tag reveal in d1">Bridging head, heart &amp; hands.</p>
            <p className="hf-intro reveal in d2">
              An Indian-born educator, researcher and visual artist in the Netherlands — reclaiming non-Western wisdom and painting the world we could still choose to build.
            </p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 28 }} className="reveal in d3">
              <a href="#art" className="btn btn-ink">See the work <Icon name="arrow" className="arr" /></a>
              <a href="#contact" className="btn btn-ghost">Connect</a>
            </div>
          </div>
          <div className="reveal in d2">
            <div className="hero-frame-img">
              <span className="hero-frame-deco"></span>
              <img src="images/portrait-close.jpg" alt="Aditi in a golden silk saree" />
            </div>
          </div>
        </div>
      </header>
    );
  }

  // gallery (full-bleed) default
  return (
    <header className="hero" data-style="gallery" id="home" data-screen-label="Hero">
      <div className="hero-photo" style={{ backgroundImage: "url(images/portrait-close.jpg)", transform: `translateY(${off * 0.18}px) scale(1.06)` }} />
      <div className="wrap hero-inner" style={{ transform: `translateY(${off * -0.06}px)` }}>
        <p className="eyebrow reveal in" style={{ color: "var(--saffron-soft)" }}>Welcome — come in</p>
        <h1 className="hero-name reveal in d1">Aditi</h1>
        <div className="hero-tag reveal in d2">
          {D.tagline.map((w, i) => (
            <React.Fragment key={w}>
              <span>{w}</span>
              {i < D.tagline.length - 1 && <span className="sep">·</span>}
            </React.Fragment>
          ))}
        </div>
      </div>
      <div className="hero-scroll reveal in d3"><span>Scroll</span><span className="line"></span></div>
    </header>
  );
}

function Intro() {
  const D = window.ADITI;
  return (
    <section className="section intro" id="intro">
      <CornerMotif style={{ bottom: -30, left: -30, transform: "scaleY(-1)" }} size={260} />
      <div className="wrap">
        <p className="intro-statement reveal">
          {D.mission.map((seg, i) => {
            if (seg.k === "b") return <b key={i}>{seg.t}</b>;
            if (seg.k === "hl") return <span className="hl" key={i}>{seg.t}</span>;
            return <React.Fragment key={i}>{seg.t}</React.Fragment>;
          })}
        </p>
        <div className="index-grid">
          {D.index.map((c, i) => (
            <a key={c.title} href={c.href} className={"index-card reveal d" + (i + 1)}>
              <img src={c.img} alt={c.title} />
              <span className="ic-label">
                <span className="ic-num">{c.num}</span>
                <span className="ic-title">{c.title}</span>
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

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