// ════════════════════════════════════════════════════════════════════
// FeaturesPage — Hero + Sticky TOC + 6 kategori section
// ════════════════════════════════════════════════════════════════════

function FeaturesPage() {
  const [activeId, setActiveId] = React.useState('dosya');

  // Scroll spy — hangi section viewport'un üst yarısında, TOC'ta highlight
  React.useEffect(() => {
    const ids = SECTIONS_META.map(s => s.id);
    const sections = ids.map(id => document.getElementById(id)).filter(Boolean);
    if (sections.length === 0) return;

    const onScroll = () => {
      const scrollY = window.scrollY + 120; // TOC yüksekliği offset
      let current = ids[0];
      for (const sec of sections) {
        if (sec.offsetTop <= scrollY) current = sec.id;
        else break;
      }
      if (current !== activeId) setActiveId(current);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [activeId]);

  return (
    <>
      <FpHero />
      <FpToc activeId={activeId} />
      <FpDosyaSection />
      <FpIsSection />
      <FpTakvimSection />
      <FpUyapSection />
      <FpAiSection />
      <FpYonetimSection />
      <FpClosingCta />
    </>
  );
}

// ─── Hero ────────────────────────────────────────────────────────────
function FpHero() {
  return (
    <section className="fp-hero">
      <div className="container">
        <a href="/" className="fp-hero-back">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
          Ana sayfa
        </a>
        <span className="kicker">Özellikler · 6 modül · 30 ekran</span>
        <h1>Türk hukuk büronuzun tüm iş akışı, baştan sona</h1>
        <p className="lede">
          Dosyadan içtihada, tebligattan e-imzaya, bütçeden denetim kayıtlarına — Titan'ın tüm yetenekleri tek sayfada.
          Her modül bağımsız çalışır, hep birlikte ise bir sistemdir.
        </p>
        <div className="fp-hero-stats">
          <div className="fp-stat"><span className="fp-stat-n">6</span><span className="fp-stat-l">ana modül</span></div>
          <div className="fp-stat"><span className="fp-stat-n">30+</span><span className="fp-stat-l">ekran ve özellik</span></div>
          <div className="fp-stat"><span className="fp-stat-n">13+</span><span className="fp-stat-l">yargı veritabanı</span></div>
          <div className="fp-stat"><span className="fp-stat-n">3</span><span className="fp-stat-l">rol katmanı</span></div>
        </div>
      </div>
    </section>
  );
}

// ─── Sticky TOC ──────────────────────────────────────────────────────
function FpToc({ activeId }) {
  return (
    <div className="fp-toc">
      <div className="container fp-toc-inner">
        <div className="fp-toc-list">
          {SECTIONS_META.map(s => (
            <a
              key={s.id}
              href={`#${s.id}`}
              className={`fp-toc-item ${activeId === s.id ? 'active' : ''}`}
            >
              <span className="fp-toc-num">{s.n}</span>
              <span className="fp-toc-label">{s.label}</span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Closing CTA ─────────────────────────────────────────────────────
function FpClosingCta() {
  return (
    <section className="fp-closing">
      <div className="container">
        <span className="kicker" style={{ marginBottom: 14, display: 'inline-block' }}>Demo talebi</span>
        <h2>Bunların hepsini kendi dosyalarınızla görün</h2>
        <p className="lede">
          15 dakikalık canlı tanıtım — Titan'ın gerçek arayüzü, sizin örnek dosyalarınız.
          Beğenirseniz kurulum + veri taşıma desteği bizden, ücretsiz.
        </p>
        <div className="fp-closing-ctas">
          <a className="btn btn-primary" href="/#demo">Demo talep et</a>
        </div>
      </div>
    </section>
  );
}

window.FeaturesPage = FeaturesPage;