/* ============================================================
   Shared site index (Turinys overlay) for sub-pages
   Links point back to the main one-pager's sections.
   ============================================================ */
const HOME = "index.html";
const PAGE_INDEX = {
  lt: [
    { n: "01", t: "Apie", href: HOME + "#about", m: "Kas aš esu" },
    { n: "02", t: "Mintys", href: "blog.html", m: "Blogas" },
    { n: "03", t: "Kaip pradėti", href: HOME + "#how", m: "Procesas" },
    { n: "04", t: "Konsultacija", href: HOME + "#services", m: "Paslaugos" },
    { n: "05", t: "Atsiliepimai", href: HOME + "#voices", m: "Žmonės" },
    { n: "06", t: "Investicija", href: HOME + "#investment", m: "Kainos" },
    { n: "07", t: "Susisiekti", href: HOME + "#contact", m: "Pradžia" }
  ],
  en: [
    { n: "01", t: "About", href: HOME + "#about", m: "Who I am" },
    { n: "02", t: "Reflections", href: "blog.html", m: "Blog" },
    { n: "03", t: "How I Work", href: HOME + "#how", m: "The process" },
    { n: "04", t: "Sessions", href: HOME + "#services", m: "Services" },
    { n: "05", t: "Voices", href: HOME + "#voices", m: "People" },
    { n: "06", t: "Investment", href: HOME + "#investment", m: "Pricing" },
    { n: "07", t: "Get in touch", href: HOME + "#contact", m: "Begin" }
  ]
};

function SiteIndex({ lang }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]);
  React.useEffect(() => {
    const k = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("keydown", k);
    return () => document.removeEventListener("keydown", k);
  }, []);
  const items = PAGE_INDEX[lang] || PAGE_INDEX.lt;
  const overlay = (
    <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={() => setOpen(false)}>{lang === "lt" ? "Uždaryti" : "Close"} ✕</button>
      </div>
      <nav className="index-list">
        {items.map((it) => (
          <a key={it.n} className="index-item" href={it.href}>
            <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>
  );
  return (
    <React.Fragment>
      <button className="index-btn" onClick={() => setOpen(true)}>
        {lang === "lt" ? "Turinys" : "Index"}
        <span className="ix"><i></i><i></i><i></i></span>
      </button>
      {ReactDOM.createPortal(overlay, document.body)}
    </React.Fragment>
  );
}

function Colophon({ c, lang, setLang, base = "" }) {
  const f = c.footer;
  return (
    <footer className="colophon" data-screen-label="Footer">
      <div className="shell">
        <div className="col-grid">
          <div className="col">
            <p className="col-mark">Ema<span className="tld">.live</span></p>
            <p className="folio col-role">
              {f.role.split(" · ").map((r, i, arr) => (
                <React.Fragment key={i}>{r}{i < arr.length - 1 ? <br /> : null}</React.Fragment>
              ))}
            </p>
          </div>
          <div className="col">
            <h4>{lang === "lt" ? "Turinys" : "Index"}</h4>
            <ul>
              <li><a href={base + "#about"}>{c.nav.about}</a></li>
              <li><a href={base + "#how"}>{c.nav.how}</a></li>
              <li><a href={base + "#services"}>{c.nav.workshops}</a></li>
              <li><a href="blog.html">{c.nav.blog}</a></li>
            </ul>
          </div>
          <div className="col">
            <h4>{lang === "lt" ? "Sekti" : "Follow"}</h4>
            <ul>
              {f.social.map((s, i) => <li key={i}><a href="#">{s}</a></li>)}
            </ul>
          </div>
          <div className="col">
            <h4>{lang === "lt" ? "Kalba" : "Language"}</h4>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setLang && setLang("lt"); }} style={{ color: lang === "lt" ? "var(--accent)" : undefined }}>Lietuvių</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setLang && setLang("en"); }} style={{ color: lang === "en" ? "var(--accent)" : undefined }}>English</a></li>
            </ul>
          </div>

          <div className="col-news">
            <div className="news-head">
              <span className="news-ico">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="5" width="18" height="14"></rect><path d="M3.5 6.5 12 13l8.5-6.5"></path></svg>
              </span>
              <p className="news-text">{f.newsletter}</p>
            </div>
            <form className="news-form" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder={f.emailPlaceholder} aria-label="email" />
              <button type="submit">
                {f.subscribe}
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
              </button>
            </form>
          </div>
        </div>
        <div className="col-base">
          <span>{f.copy}</span>
          <span>{lang === "lt" ? "Sukurta su dėmesiu · Vilnius" : "Made with care · Vilnius"}</span>
          <a href="#" style={{ textDecoration: "none", color: "inherit" }}>{f.privacy}</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteIndex, Colophon });