/* ============================================================================
 * LEGAL LAYOUT — Gemeinsames Layout für Impressum, Datenschutz, AGB
 * ----------------------------------------------------------------------------
 * Props:
 *   - title:     Seitentitel ("Impressum", "Datenschutzerklärung", "AGB")
 *   - eyebrow:   Eyebrow über dem Titel ("Rechtliches", "§ 5 TMG", …)
 *   - intro:     Optional, kurzer Intro-Text (string oder JSX)
 *   - sections:  Array { id, title, content (JSX) }
 *   - lastUpdated: "Mai 2026"
 * ========================================================================= */

const { useState: useStateL, useEffect: useEffectL } = React;

function LegalLayout({ title, eyebrow, intro, sections, lastUpdated, activeNav }) {
  const [activeSec, setActiveSec] = useStateL(sections[0]?.id);

  // Scroll-Spy: aktive Section in der TOC markieren
  useEffectL(() => {
    const handler = () => {
      const scrollPos = window.scrollY + 220;
      let active = sections[0]?.id;
      for (const s of sections) {
        const el = document.getElementById(s.id);
        if (el && el.offsetTop <= scrollPos) active = s.id;
      }
      setActiveSec(active);
    };
    handler();
    window.addEventListener('scroll', handler, { passive: true });
    return () => window.removeEventListener('scroll', handler);
  }, [sections]);

  return (
    <React.Fragment>
      <SiteHeader active={activeNav}/>

      {/* Hero */}
      <section className="legal-hero">
        <div className="hero-grid-bg"/>
        <div className="container">
          <span className="eyebrow"><Icon.Document size={14}/> &nbsp;{eyebrow}</span>
          <h1 className="legal-h1">{title}</h1>
          {intro && <p className="legal-intro">{intro}</p>}
          {lastUpdated && <div className="legal-stand">Stand: {lastUpdated}</div>}
        </div>
      </section>

      {/* Body: Sidebar-TOC + Content */}
      <section className="legal-body">
        <div className="container legal-grid">
          {/* Sidebar TOC */}
          <aside className="legal-toc">
            <div className="legal-toc-label">Inhalt</div>
            <ol>
              {sections.map((s) => (
                <li key={s.id} className={activeSec === s.id ? 'active' : ''}>
                  <a href={`#${s.id}`}>{s.title}</a>
                </li>
              ))}
            </ol>
          </aside>

          {/* Content */}
          <article className="legal-content">
            {sections.map((s) => (
              <section key={s.id} id={s.id} className="legal-section">
                <h2>{s.title}</h2>
                <div className="legal-section-body">{s.content}</div>
              </section>
            ))}

            <div className="legal-footer-note">
              <strong>MaliTech Solutions UG (haftungsbeschränkt)</strong><br/>
              Uthmannstraße 10, 33647 Bielefeld · HRB 46175 (Amtsgericht Bielefeld) · USt-IdNr. DE454799746<br/>
              Geschäftsführer: Mark Smith
            </div>
          </article>
        </div>
      </section>

      <SiteFooter/>
    </React.Fragment>
  );
}

window.LegalLayout = LegalLayout;