// Shared chrome + scaffolding for legal pages (Privacy, Terms).
// Each page provides its own <Sections /> component as window.LEGAL_SECTIONS.

const LEGAL_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

const AppleLogoLegal = ({ size = 18, color = "currentColor" }) =>
  <svg width={size} height={size * 1.22} viewBox="0 0 384 470" fill={color} aria-hidden="true">
    <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C61.8 141.6 0 184.3 0 271.4c0 25.8 4.7 52.4 14.1 79.7 12.6 35.8 58 123.6 105.2 122.1 24.7-.6 42.1-17.5 74.3-17.5 31.2 0 47.4 17.5 75 17.5 47.6-.7 88.7-80.5 100.7-116.4-64.2-30.3-50.6-88.7-50.6-88.1z"/>
  </svg>;

const LegalNav = ({ tweaks, setTweak, current }) =>
  <nav className="nav">
    <div className="shell nav-inner">
      <a href="Never Forget.html" className="brand" style={{ textDecoration: "none", color: "inherit" }}>
        <img className="brand-icon" src="assets/app-icon.png" alt="Never Forget" />
        <span>Never Forget</span>
      </a>
      <div className="nav-links">
        <a href="Never Forget.html#science">The science</a>
        <a href="Never Forget.html#features">Features</a>
        <a href="privacy.html" style={current === "privacy" ? { color: "var(--text)", fontWeight: 600 } : null}>Privacy</a>
        <a href="Never Forget.html#premium">Premium</a>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <button
          onClick={() => setTweak("theme", tweaks.theme === "light" ? "dark" : "light")}
          aria-label="Toggle theme"
          style={{
            width: 36, height: 36, borderRadius: "50%",
            background: "transparent", border: "1px solid var(--line)",
            cursor: "pointer", display: "grid", placeItems: "center",
            color: "var(--text)", fontSize: 14
          }}>
          {tweaks.theme === "light" ? "☾" : "☀"}
        </button>
        <a href="https://apps.apple.com/us/app/never-forget-spaced-reminder/id1551467159" className="nav-cta">
          Get the app
        </a>
      </div>
    </div>
  </nav>;

const LegalFooter = () =>
  <footer style={{ borderTop: "1px solid var(--line)", padding: "56px 0 32px", background: "var(--bg)" }}>
    <div className="shell">
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 48, marginBottom: 40 }} className="footer-grid">
        <div>
          <div className="brand" style={{ marginBottom: 14 }}>
            <img className="brand-icon" src="assets/app-icon.png" alt="Never Forget" />
            <span style={{ fontSize: 17 }}>Never Forget</span>
          </div>
          <p style={{ fontSize: 14.5, color: "var(--text-soft)", maxWidth: "36ch", lineHeight: 1.55 }}>
            A simple spaced repetition reminder app for those who want to remember newly learned information that doesn't fit in flashcards.
          </p>
        </div>
        <div>
          <div style={{ fontSize: 12, color: "var(--muted)", letterSpacing: 1, textTransform: "uppercase", fontWeight: 700, marginBottom: 14 }}>Product</div>
          <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10, fontSize: 14.5 }}>
            <li><a href="Never Forget.html#science" style={{ color: "var(--text-soft)", textDecoration: "none" }}>The science</a></li>
            <li><a href="Never Forget.html#premium" style={{ color: "var(--text-soft)", textDecoration: "none" }}>Premium</a></li>
          </ul>
        </div>
        <div>
          <div style={{ fontSize: 12, color: "var(--muted)", letterSpacing: 1, textTransform: "uppercase", fontWeight: 700, marginBottom: 14 }}>Company</div>
          <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10, fontSize: 14.5 }}>
            <li><a href="privacy.html" style={{ color: "var(--text-soft)", textDecoration: "none" }}>Privacy</a></li>
            <li><a href="terms.html" style={{ color: "var(--text-soft)", textDecoration: "none" }}>Terms</a></li>
            <li><a href="mailto:hello@titansboost.app" style={{ color: "var(--text-soft)", textDecoration: "none" }}>Contact</a></li>
          </ul>
        </div>
      </div>
      <div style={{ paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, fontSize: 13, color: "var(--muted)" }}>
        <div>© 2026 Titans Boost Ltd.</div>
        <div>Made with care.</div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </div>
  </footer>;

// Scrollspy — highlights the TOC entry whose section is currently in view.
const useScrollspy = (ids, offset = 120) => {
  const [active, setActive] = React.useState(ids[0]);
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY + offset;
      let current = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        if (el.offsetTop <= y) current = id;
      }
      setActive(current);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [ids.join("|"), offset]);
  return active;
};

const LegalToc = ({ items }) => {
  const ids = items.map(i => i.id);
  const active = useScrollspy(ids);
  return (
    <aside className="legal-toc" aria-label="On this page">
      <div className="legal-toc-title">On this page</div>
      <ol>
        {items.map((it) => (
          <li key={it.id}>
            <a href={`#${it.id}`} className={active === it.id ? "is-active" : ""}>{it.title}</a>
          </li>
        ))}
      </ol>
    </aside>
  );
};

const LegalSection = ({ id, num, title, children }) => (
  <section id={id} className="legal-section">
    <h2><span className="legal-num">{num}</span><span>{title}</span></h2>
    {children}
  </section>
);

const LegalCallout = ({ icon = "i", title, children }) => (
  <div className="legal-callout">
    <div className="legal-callout-icon">{icon}</div>
    <div className="legal-callout-text">
      {title && <strong>{title}</strong>}
      {children}
    </div>
  </div>
);

const LegalCross = ({ to, label, title, desc }) => (
  <a href={to} className="legal-cross" style={{ textDecoration: "none", color: "inherit" }}>
    <div className="legal-cross-text">
      <strong>{title}</strong>
      {desc}
    </div>
    <span className="btn btn-ghost" style={{ pointerEvents: "none" }}>{label} →</span>
  </a>
);

const LegalPage = ({ eyebrow, title, lede, updated, sections, cross, current }) => {
  const [tweaks, setTweak] = useTweaks(LEGAL_TWEAK_DEFAULTS);
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
  }, [tweaks.theme]);

  return (
    <>
      <LegalNav tweaks={tweaks} setTweak={setTweak} current={current} />

      <header className="legal-hero">
        <div className="shell">
          <div className="legal-hero-inner">
            <div className="section-eyebrow">{eyebrow}</div>
            <h1>{title}</h1>
            <p className="lede">{lede}</p>
            <div className="legal-meta">
              <span className="legal-meta-dot" />
              Last updated {updated}
            </div>
          </div>
        </div>
      </header>

      <main className="legal-body">
        <div className="shell">
          <div className="legal-grid">
            <LegalToc items={sections.map((s) => ({ id: s.id, title: s.title }))} />
            <article className="legal-prose">
              {sections.map((s, i) => (
                <LegalSection key={s.id} id={s.id} num={String(i + 1).padStart(2, "0")} title={s.title}>
                  {s.body}
                </LegalSection>
              ))}
              {cross}
            </article>
          </div>
        </div>
      </main>

      <LegalFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Appearance">
          <TweakRadio
            value={tweaks.theme}
            options={[
              { value: "light", label: "Light" },
              { value: "dark", label: "Dark" }
            ]}
            onChange={(v) => setTweak("theme", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

Object.assign(window, { LegalPage, LegalCallout, LegalCross });