/* ═══════════════ Closink · LEGAL SHELL (prose layout + sticky TOC) ═══════════════ */

const LegalShell = ({ icon, eyebrow, title, intro, updated, accent = '#3678F9', 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><BackHome /></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" />SON GÜNCELLEME · {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" />KVKK uyumlu
            </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">
          {/* TOC */}
          <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">İçindekiler</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" />0₺ veri satışı</div>
                <p className="mt-1.5 text-[12.5px] text-slate-500 leading-relaxed">Konum verini asla satmaz, kiralamaz, reklam için kullanmayız.</p>
              </div>
            </div>
          </aside>

          {/* content */}
          <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">{s.body}</div>
                </section>
              </Reveal>
            ))}

            {/* footer note */}
            <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]">Sorularınız mı var?</div>
                  <p className="mt-1 text-slate-400 text-[14px] leading-relaxed">Bu metinle ilgili her türlü soru için <a href="mailto:destek@closink.com" className="font-semibold text-[#1D4ED8]">destek@closink.com</a> adresinden bize ulaşabilirsiniz. Detaylı bilgi için <a href="iletisim.html" className="font-semibold text-[#1D4ED8]">İletişim</a> sayfamıza göz atın.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { LegalShell });