/* ═══════════════ Closink · EN LEGAL SHELL (nav + footer + prose + sticky TOC) ═══════════════ */
/* Reuses all atoms/icons from shared.jsx; defines English-only nav, footer, shell + legal layout. */
/* Body content is passed as an HTML string per section (s.html) and rendered with dangerouslySetInnerHTML. */

/* ---- English back link (hero) ---- */
const BackHomeEN = () => (
  <a href={HOME} className="inline-flex items-center gap-1.5 text-[13.5px] font-semibold text-slate-400 hover:text-white transition-colors mono whitespace-nowrap">
    <IconArrowL s={15} c="currentColor" />HOME
  </a>
);

/* ---- English navbar ---- */
const NavbarEN = ({ trHref }) => {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const on = () => setSolid(window.scrollY > 40);
    on(); window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <header className="fixed top-0 left-0 right-0 z-[70] flex flex-col items-center px-4 pt-3.5 gap-2">
      <nav className={`glass glass-edge w-full max-w-6xl rounded-2xl flex items-center gap-3 px-4 sm:px-5 transition-all duration-300 ${solid ? 'py-2' : 'py-2.5'}`}
        style={{ border: '1px solid rgba(15,23,42,.07)', boxShadow: solid ? '0 12px 34px rgba(15,23,42,.12)' : '0 6px 20px rgba(15,23,42,.05)' }}>
        <a href={HOME + '#top'} className="shrink-0"><Logo s={26} /></a>
        <a href={HOME} className="hidden md:inline-flex items-center gap-1.5 ml-1 px-2.5 py-1.5 rounded-lg text-[13px] font-semibold text-slate-400 hover:text-white hover:bg-white/5 transition-colors whitespace-nowrap">
          <IconArrowL s={15} c="currentColor" />Home
        </a>
        <div className="flex-1"></div>
        {trHref && (
          <a href={trHref} className="inline-flex items-center gap-1.5 px-3 h-9 rounded-lg text-[13px] font-bold text-slate-500 hover:text-white hover:bg-white/5 transition-colors whitespace-nowrap" title="Türkçe">
            <IconGlobe s={15} c="currentColor" />TR
          </a>
        )}
        <a href={HOME + '#indir'} className="hidden sm:inline-flex items-center gap-2 rounded-xl px-4 h-10 text-[14px] font-bold text-white whitespace-nowrap transition-transform hover:-translate-y-0.5"
          style={{ background: 'linear-gradient(100deg,#1D4ED8,#3678F9)', color: '#fff', boxShadow: '0 8px 22px rgba(54,120,249,.42)' }}>
          Get the app<IconArrowR s={16} c="#fff" />
        </a>
      </nav>
    </header>
  );
};

/* ---- English footer ---- */
const FooterEN = () => (
  <footer className="relative pt-16 pb-10 border-t" style={{ borderColor: 'rgba(15,23,42,.08)', background: 'linear-gradient(#FFFFFF,#F8FAFC)' }}>
    <div className="max-w-6xl mx-auto px-5">
      <div className="grid sm:grid-cols-2 lg:grid-cols-[1.6fr_1fr_1fr] gap-10">
        <div>
          <a href={HOME}><Logo s={28} /></a>
          <p className="mt-4 text-slate-400 text-[14px] leading-relaxed max-w-xs">Peace of mind for your family, in your pocket. A privacy-first family safety app.</p>
        </div>
        <div>
          <div className="mono text-[11px] tracking-[0.16em] uppercase text-slate-500 font-semibold">Legal</div>
          <ul className="mt-4 space-y-2.5">
            {[['Privacy Policy', 'privacy.html'], ['Terms of Use', 'terms.html'], ['Cookies', 'cookies.html'], ['Security', 'security.html']].map(([t, h]) => (
              <li key={h}><a href={h} className="text-slate-400 hover:text-white text-[14px] transition-colors">{t}</a></li>
            ))}
          </ul>
        </div>
        <div>
          <div className="mono text-[11px] tracking-[0.16em] uppercase text-slate-500 font-semibold">Closink</div>
          <ul className="mt-4 space-y-2.5">
            <li><a href={HOME} className="text-slate-400 hover:text-white text-[14px] transition-colors">Home</a></li>
            <li><a href="mailto:support@closink.com" className="text-slate-400 hover:text-white text-[14px] transition-colors">support@closink.com</a></li>
            <li><a href="index.html" className="text-slate-400 hover:text-white text-[14px] transition-colors">Türkçe</a></li>
          </ul>
        </div>
      </div>
      <div className="mt-12 pt-6 border-t flex flex-col sm:flex-row items-center justify-between gap-4" style={{ borderColor: 'rgba(15,23,42,.08)' }}>
        <span className="text-slate-500 text-[13px]">© 2026 Closink · closink.com · All rights reserved.</span>
        <span className="flex items-center gap-2 text-slate-500 text-[13px]"><IconLock s={14} c="#7DD3FC" />We never sell your location data.</span>
      </div>
    </div>
  </footer>
);

const ShellEN = ({ children, trHref }) => (
  <div className="relative" style={{ background: 'var(--page-bg)' }}>
    <NavbarEN trHref={trHref} />
    <main>{children}</main>
    <FooterEN />
  </div>
);

/* ---- English legal shell (prose + sticky TOC); body = HTML string ---- */
const LegalShellEN = ({ icon, eyebrow, title, intro, updated, accent = '#3678F9', badge = 'Privacy-first', contactEmail = 'support@closink.com', sections }) => {
  const [active, setActive] = useState(sections[0] && sections[0].id);
  useEffect(() => {
    const ids = sections.map(s => s.id);
    const onScroll = () => {
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= 150) cur = id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      {/* HERO */}
      <section className="relative pt-32 pb-12 sm:pt-36 sm:pb-16 overflow-hidden" style={{ background: 'linear-gradient(180deg,#FFFFFF,#F0EEE9)' }}>
        <Aurora variant="blue" />
        <div className="relative max-w-3xl mx-auto px-5">
          <Reveal><BackHomeEN /></Reveal>
          <Reveal delay={1} className="mt-6 flex items-center gap-3">
            <span className="flex items-center justify-center rounded-2xl shrink-0" style={{ width: 52, height: 52, background: accent + '1f', border: `1px solid ${accent}40` }}>{icon}</span>
            <Eyebrow color={accent}>{eyebrow}</Eyebrow>
          </Reveal>
          <Reveal delay={2}>
            <h1 className="mt-5 font-extrabold text-white tracking-tight" style={{ fontSize: 'clamp(32px,5vw,52px)', lineHeight: 1.04 }}>{title}</h1>
          </Reveal>
          <Reveal delay={3}>
            <p className="mt-4 text-slate-400 leading-relaxed" style={{ fontSize: 17, maxWidth: 560 }}>{intro}</p>
          </Reveal>
          <Reveal delay={3} className="mt-6 flex flex-wrap items-center gap-3">
            <span className="inline-flex items-center gap-2 rounded-full px-3.5 py-1.5 text-[12.5px] font-semibold mono whitespace-nowrap" style={{ background: 'rgba(15,23,42,.04)', border: '1px solid rgba(15,23,42,.08)', color: '#64748B' }}>
              <IconClock s={14} c="#94A3B8" />LAST UPDATED · {updated}
            </span>
            <span className="inline-flex items-center gap-2 rounded-full px-3.5 py-1.5 text-[12.5px] font-semibold" style={{ background: 'rgba(34,197,94,.1)', border: '1px solid rgba(34,197,94,.28)', color: '#15803D' }}>
              <IconShieldOk s={14} c="#16A34A" />{badge}
            </span>
          </Reveal>
        </div>
      </section>

      {/* BODY */}
      <section className="relative py-12 sm:py-16" style={{ background: 'var(--page-bg)' }}>
        <div className="max-w-6xl mx-auto px-5 grid lg:grid-cols-[230px_1fr] gap-10 lg:gap-14">
          <aside className="hidden lg:block">
            <div className="sticky top-28">
              <div className="mono text-[11px] tracking-[0.16em] uppercase text-slate-500 font-semibold px-3 mb-2">Contents</div>
              <nav className="flex flex-col gap-0.5">
                {sections.map(s => (
                  <a key={s.id} href={'#' + s.id} className={`toc-link ${active === s.id ? 'active' : ''}`}>{s.title}</a>
                ))}
              </nav>
              <div className="mt-6 mx-3 p-4 rounded-2xl" style={{ background: 'rgba(54,120,249,.06)', border: '1px solid rgba(54,120,249,.16)' }}>
                <div className="flex items-center gap-2 text-[13px] font-bold text-[#1D4ED8] whitespace-nowrap"><IconLock s={15} c="#1D4ED8" />We never sell data</div>
                <p className="mt-1.5 text-[12.5px] text-slate-500 leading-relaxed">We never sell, rent, or use your location data for advertising.</p>
              </div>
            </div>
          </aside>

          <div className="min-w-0 max-w-[680px]">
            {sections.map((s, i) => (
              <Reveal key={s.id}>
                <section id={s.id} className="legal-sec mb-12">
                  <div className="flex items-baseline gap-3 mb-4">
                    <span className="mono text-[13px] font-bold" style={{ color: accent }}>{String(i + 1).padStart(2, '0')}</span>
                    <h2 className="font-extrabold text-white tracking-tight" style={{ fontSize: 'clamp(21px,2.6vw,27px)', lineHeight: 1.15 }}>{s.title}</h2>
                  </div>
                  <div className="prose" dangerouslySetInnerHTML={{ __html: s.html }} />
                </section>
              </Reveal>
            ))}

            <div className="mt-4 p-6 rounded-3xl glass glass-edge" style={{ border: '1px solid rgba(15,23,42,.07)' }}>
              <div className="flex items-start gap-3">
                <span className="flex items-center justify-center rounded-xl shrink-0" style={{ width: 40, height: 40, background: 'rgba(54,120,249,.12)' }}><IconMail s={19} c="#3678F9" /></span>
                <div>
                  <div className="font-bold text-white text-[15px]">Questions?</div>
                  <p className="mt-1 text-slate-400 text-[14px] leading-relaxed">For any questions about this document, reach us at <a href={'mailto:' + contactEmail} className="font-semibold text-[#1D4ED8]">{contactEmail}</a>.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { BackHomeEN, NavbarEN, FooterEN, ShellEN, LegalShellEN });