/* ============================================================
   EDITORIAL INDEX — top sections
   ============================================================ */
const PORTRAIT = "images/ema-hero.jpg";

const INDEX_ITEMS = {
  lt: [
    { n: "01", t: "Apie", href: "#about", m: "Kas aš esu" },
    { n: "02", t: "Mintys", href: "#mintys", m: "Blogas" },
    { n: "03", t: "Kaip dirbu", href: "#how", m: "Procesas" },
    { n: "04", t: "Konsultacija", href: "#services", m: "Paslaugos" },
    { n: "05", t: "Atsiliepimai", href: "#voices", m: "Žmonės" },
    { n: "06", t: "Investicija", href: "#investment", m: "Kainos" },
    { n: "07", t: "Susisiekti", href: "#contact", m: "Pradžia" }
  ],
  en: [
    { n: "01", t: "About", href: "#about", m: "Who I am" },
    { n: "02", t: "Reflections", href: "#mintys", m: "Blog" },
    { n: "03", t: "How I Work", href: "#how", m: "The process" },
    { n: "04", t: "Sessions", href: "#services", m: "Services" },
    { n: "05", t: "Voices", href: "#voices", m: "People" },
    { n: "06", t: "Investment", href: "#investment", m: "Pricing" },
    { n: "07", t: "Get in touch", href: "#contact", m: "Begin" }
  ]
};

function RunningHead({ lang, setLang, onOpenIndex }) {
  const scrolled = useScrolled();
  return (
    <header className={"head" + (scrolled ? " scrolled" : "")}>
      <a href="#top" className="head-mark">ema.v2x.lt</a>
      <div className="head-center">
        <span className="folio">Vilnius · Zoom</span>
        <span className="folio">Nº 01 — 2026</span>
      </div>
      <div className="head-right">
        <span className="lang">
          <button className={lang === "lt" ? "active" : ""} onClick={() => setLang("lt")}>LT</button>
          <span>/</span>
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
        </span>
        <button className="index-btn" onClick={onOpenIndex}>
          {lang === "lt" ? "Turinys" : "Index"}
          <span className="ix"><i></i><i></i><i></i></span>
        </button>
      </div>
    </header>
  );
}

function IndexOverlay({ lang, open, onClose }) {
  const items = INDEX_ITEMS[lang];
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);
  return (
    <div className={"index-overlay" + (open ? " open" : "")}>
      <div className="index-overlay-top">
        <span className="folio">{lang === "lt" ? "Turinys — ema.v2x.lt" : "Index — ema.v2x.lt"}</span>
        <button className="index-close" onClick={onClose}>{lang === "lt" ? "Uždaryti" : "Close"} ✕</button>
      </div>
      <nav className="index-list">
        {items.map((it) => (
          <a key={it.n} className="index-item" href={it.href}
            onClick={() => { if (it.href.startsWith("#")) onClose(); }}>
            <span className="ix-num">{it.n}</span>
            <span className="ix-title">{it.t}</span>
            <span className="ix-meta">{it.m}</span>
          </a>
        ))}
      </nav>
      <div className="index-overlay-foot">
        <span>{lang === "lt" ? "Archetipai · Sąmoningumas · Savęs pažinimas" : "Archetypes · Consciousness · Self-knowledge"}</span>
        <span>Est. 10+ {lang === "lt" ? "metų" : "yrs"}</span>
      </div>
    </div>
  );
}

function Cover({ c, lang, variant }) {
  const h = c.hero;
  const mh = <h1 className="mh">Ema<span className="tld">.live</span></h1>;
  const statement = (
    <p className="cover-statement">
      {h.h1a} <span className="strike">{h.h1aItalic}</span><br />
      {h.h1b} <span className="em">{h.h1bRegular}</span>
    </p>
  );
  const actionsLight = (
    <div className="cover-actions">
      <a href="#contact" className="cta on-dark">{h.ctaPrimary} <Arw /></a>
      <a href="#about" className="ulink on-dark"><span className="bar"></span> {h.ctaSecondary}</a>
    </div>
  );
  const actionsDark = (
    <div className="cover-actions">
      <a href="#contact" className="cta">{h.ctaPrimary} <Arw /></a>
      <a href="#about" className="ulink"><span className="bar"></span> {h.ctaSecondary}</a>
    </div>
  );
  const lines = INDEX_ITEMS[lang].slice(1, 5);

  /* ---- FULL-BLEED COVER (Vogue) ---- */
  if (variant === "fullbleed") {
    return (
      <section className="cover-fb" id="top" data-screen-label="Cover">
        <div className="fb-photo"><img src={PORTRAIT} alt="Ema" className="fb-zoom" /></div>
        <div className="fb-scrim"></div>
        <div className="shell fb-inner">
          <div className="fb-top">
            <Reveal as="p" className="folio">Nº 01 — 2026 · Vilnius / Zoom</Reveal>
            <Reveal as="p" className="folio" delay={60} style={{ textAlign: "right" }}>{h.label}</Reveal>
          </div>
          <div className="fb-bottom">
            <Reveal className="fb-lines" delay={240}>
              {lines.map((l) => (
                <a key={l.n} href={l.href} className="cl"><span className="cl-n">{l.n}</span><span className="cl-t">{l.t}</span></a>
              ))}
            </Reveal>
            <Reveal className="masthead">{mh}</Reveal>
            <div className="fb-foot">
              <Reveal delay={140}>{statement}</Reveal>
              <Reveal delay={240}>{actionsLight}</Reveal>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ---- SPREAD (editorial split) ---- */
  if (variant === "spread") {
    return (
      <section className="cover-spread shell" id="top" data-screen-label="Cover">
        <Reveal className="cs-photo" delay={80}>
          <img src={PORTRAIT} alt="Ema" />
          <span className="cs-cap folio">Ema — Fig. 01</span>
        </Reveal>
        <div className="cs-text">
          <Reveal as="div" className="cs-edge">
            <span className="folio">Nº 01 — 2026</span>
            <span className="folio">{h.label}</span>
          </Reveal>
          <Reveal delay={80} className="masthead"><h2 className="mh cs-mh">Ema<span className="tld">.live</span></h2></Reveal>
          <Reveal delay={160}>{statement}</Reveal>
          <Reveal delay={220}><p className="cover-sub">{h.sub.split("\n\n")[0]}</p></Reveal>
          <Reveal delay={280}>{actionsDark}</Reveal>
          <Reveal delay={340} className="cs-creds">
            {c.about.credentials.map((cr, i) => <span key={i} className="folio">{cr}</span>)}
          </Reveal>
        </div>
      </section>
    );
  }

  /* ---- MASTHEAD (logotype lockup) ---- */
  return (
    <section className="cover shell" id="top" data-screen-label="Cover">
      <div className="cover-edge">
        <Reveal as="p" className="folio">{h.label.replace(/ · /g, "  ·  ")}</Reveal>
        <Reveal as="p" className="folio" delay={60} style={{ textAlign: "right" }}>
          {lang === "lt" ? "Individualios konsultacijos" : "Individual practice"}<br />
          {lang === "lt" ? "Jungo analitinė perspektyva" : "Jungian perspective"}
        </Reveal>
      </div>
      <div className="masthead">
        <Reveal><h1 className="mh l1">Ema<span className="tld">.live</span></h1></Reveal>
      </div>
      <div className="cover-body">
        <Reveal className="cover-deck" delay={200}>
          {statement}
          <p className="cover-sub">{h.sub.split("\n\n")[0]}</p>
          {actionsDark}
          <p className="cover-micro">{h.micro}</p>
        </Reveal>
        <Reveal className="cover-portrait" delay={120}>
          <img src={PORTRAIT} alt="Ema" />
        </Reveal>
        <span className="vlabel">{lang === "lt" ? "Slink žemyn — 01" : "Scroll — 01"}</span>
      </div>
    </section>
  );
}

function CredentialMarquee({ c }) {
  return <Marquee items={c.manifesto} sep="✳" />;
}

function About({ c, lang }) {
  const a = c.about;
  return (
    <section className="ed-sec about shell" id="about" data-screen-label="About">
      <Reveal as="div" className="sec-head">
        <span className="sec-folio">Nº 01</span>
        <div className="sec-title">
          <p className="kick accent sec-kick">{a.label}</p>
          <h2>{a.h2a} <span className="it">{a.h2bItalic}</span></h2>
        </div>
      </Reveal>

      <div className="about-feature">
        <Reveal className="about-photo-main" delay={80}>
          <img src="images/ema-about.jpg" alt="Ema" />
          <div className="pcap">
            <span>Ema</span>
            <span>Fig. 02</span>
          </div>
        </Reveal>
        <Reveal className="about-prose" delay={150}>
          {a.story.map((b, i) => {
            if (b.t === "lead") return <p key={i} className="about-lead">{b.x}</p>;
            if (b.t === "ask") return <p key={i} className="about-ask">{b.x}</p>;
            if (b.t === "emph") return <p key={i} className="about-emph">{b.x}</p>;
            if (b.t === "leadin") return <p key={i} className="about-leadin">{b.x}</p>;
            if (b.t === "bigq") return <blockquote key={i} className="about-bigq">{b.x}</blockquote>;
            return <p key={i} className="about-p">{b.x}</p>;
          })}
        </Reveal>
      </div>

      <Reveal className="about-cred" delay={120}>
        {a.credentials.map((cr, i) => <span key={i} className="cred">{cr}</span>)}
      </Reveal>
    </section>
  );
}

function PullQuote({ c, lang }) {
  const a = c.about;
  const parts = a.quote.split(/(?<=\.)\s+/);
  return (
    <section className="dark pullquote" data-screen-label="Pull quote">
      <div className="shell pq2">
        <span className="pq2-mark">“</span>
        <Reveal as="p" className="pq2-text">
          {parts.map((p, i) => i === parts.length - 1
            ? <span key={i} className="accent">{p}</span>
            : <React.Fragment key={i}>{p} </React.Fragment>)}
        </Reveal>
        <div className="pq2-foot">
          <span>{lang === "lt" ? "Mano požiūris" : "My approach"}</span>
          <span>Ema · ema.v2x.lt</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { RunningHead, IndexOverlay, Cover, CredentialMarquee, About, PullQuote });