/* sections-b.jsx — Universum, Daten, Partner, Final CTA, Footer */

const { useState: useStateB } = React;

/* 6 — EIN UNIVERSUM */
function Universum() {
  const live = [
    ['Personalausweis', 'Identität'], ['Wohnsitz ummelden', 'Behörden'],
    ['Kindergeld', 'Familie'], ['DE-Pay', 'Bezahlen'],
    ['Deutschland-Ticket', 'Mobilität'], ['eRezept', 'Gesundheit'],
    ['KFZ anmelden', 'Behörden'], ['Steuer-ID', 'Finanzen'],
  ];
  const soon = [['Wahl-Service', 'Bald'], ['BAföG', 'Bald'], ['Energie-Bonus', 'Bald'], ['+ dein Service', 'Bald']];
  return (
    <section className="section section--ink" data-screen-label="Universum">
      <div className="wrap">
        <div className="split-2">
          <div>
            <div className="eyebrow" data-reveal>Ein wachsendes Universum</div>
            <h2 className="display h-xl" data-reveal style={{ '--reveal-delay': '.05s', marginTop: '20px' }}>
              Heute ist es viel.<br /><span className="accent-text">Morgen ist es alles.</span>
            </h2>
          </div>
          <p className="body-lg dim" data-reveal style={{ '--reveal-delay': '.1s' }}>
            DE-eins wächst mit deinem Leben. Jeder neue Service ist einfach da –
            kein Download, kein neuer Account. Du entdeckst, du tippst, es läuft.
            Immer mehr, nie komplizierter.
          </p>
        </div>
        <div className="univ-grid">
          {live.map((t, i) => (
            <div key={i} className="univ-tile" data-reveal style={{ '--reveal-delay': (i * 0.03) + 's' }}>
              <div className="ut-dot" aria-hidden="true"></div>
              <div>
                <div className="ut-name">{t[0]}</div>
                <div className="ut-cat">{t[1]}</div>
              </div>
            </div>
          ))}
          {soon.map((t, i) => (
            <div key={'s' + i} className="univ-tile is-soon" data-reveal style={{ '--reveal-delay': ((live.length + i) * 0.03) + 's' }}>
              <div className="ut-dot" aria-hidden="true"></div>
              <div>
                <div className="ut-name">{t[0]}</div>
                <div className="ut-cat">{t[1]}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* 7 — DEINE DATEN */
function Daten() {
  const [rows, setRows] = useStateB([
    { label: 'Name & Adresse', sub: 'mit Behörden', on: true },
    { label: 'Zahlungsdaten', sub: 'nur bei Kauf', on: true },
    { label: 'Standort', sub: 'für Mobilität', on: false },
    { label: 'Gesundheitsdaten', sub: 'nur du', on: false },
  ]);
  const toggle = (i) => setRows(rows.map((r, j) => j === i ? { ...r, on: !r.on } : r));
  return (
    <section className="section section--paper" data-screen-label="Daten">
      <div className="wrap">
        <div className="privacy-grid">
          <div>
            <div className="eyebrow" data-reveal>Datenschutz</div>
            <h2 className="display h-xl" data-reveal style={{ '--reveal-delay': '.05s', marginTop: '20px', maxWidth: '15ch' }}>
              Wir bündeln dein Leben.<br /><span className="accent-text">Wir verkaufen's nicht.</span>
            </h2>
            <p className="body-lg dim mt-m maxw-md" data-reveal style={{ '--reveal-delay': '.1s' }}>
              Andere wollen deine Daten. Wir wollen, dass du sie behältst. DE-eins ist
              auf Sicherheit gebaut, nicht auf Datenhandel. Du entscheidest, was du
              teilst – mit wem, wann, wie viel. Der Rest bleibt deins. Immer.
            </p>
          </div>
          <div className="toggle-list" data-reveal style={{ '--reveal-delay': '.14s' }}>
            <div className="eyebrow" style={{ marginBottom: '4px' }}>Du entscheidest</div>
            {rows.map((r, i) => (
              <div key={i} className="toggle-row" onClick={() => toggle(i)} role="switch" aria-checked={r.on} tabIndex={0}
                   onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(i); } }}>
                <div>
                  <div className="tr-label">{r.label}</div>
                  <div className="tr-sub">{r.sub}</div>
                </div>
                <div className={"switch" + (r.on ? " on" : "")} aria-hidden="true"></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* 8 — FÜR PARTNER */
function Partner({ onPartner }) {
  const points = [
    ['Reichweite ohne Reibung', 'Millionen erledigen hier ihren digitalen Alltag. Deine Services sind sofort da, wo sie schon sind.'],
    ['Integration in Tagen', 'Bring deine Services als Mini-App rein – ohne eigene App-Schlacht, ohne bei null anzufangen.'],
    ['Direkt monetarisieren', 'Identität, Bezahlen und Vertrauen sind eingebaut. Du lieferst den Service, wir den Rest.'],
  ];
  return (
    <section id="partner" className="section section--ink" data-screen-label="Partner">
      <div className="wrap">
        <div className="split-2">
          <div>
            <div className="eyebrow" data-reveal>Für Unternehmen, Städte &amp; Partner</div>
            <h2 className="display h-xl" data-reveal style={{ '--reveal-delay': '.05s', marginTop: '20px', maxWidth: '15ch' }}>
              Deine Services. Da, wo <span className="accent-text">Deutschland schon ist.</span>
            </h2>
          </div>
          <p className="body-lg dim" data-reveal style={{ '--reveal-delay': '.1s' }}>
            DE-eins ist die Plattform, auf der Millionen ihren digitalen Alltag
            erledigen. Bring deine Services als Mini-App rein – ohne eigene
            App-Schlacht, ohne bei null anzufangen.
          </p>
        </div>
        <div className="partner-shot" data-reveal style={{ '--reveal-delay': '.08s' }}>
          <div className="partner-shot__glow" aria-hidden="true"></div>
          <img src="services.png" alt="Fünf Services als Mini-Apps in DE-eins: Bürgeramt-Termin, eRezept, ÖPNV-Ticket, Essens-Lieferung und Banking." loading="lazy" />
          <div className="partner-shot__tags" aria-hidden="true">
            <span>Bürgeramt</span><span>eRezept</span><span>ÖPNV</span><span>Lieferung</span><span>Banking</span>
          </div>
        </div>
        <div className="partner-points">
          {points.map((p, i) => (
            <div key={i} className="ppoint" data-reveal style={{ '--reveal-delay': (i * 0.06) + 's' }}>
              <div className="pp-no">0{i + 1}</div>
              <div className="pp-title">{p[0]}</div>
              <div className="pp-desc">{p[1]}</div>
            </div>
          ))}
        </div>
        <div data-reveal style={{ marginTop: '44px' }}>
          <button className="btn btn--primary btn--lg" onClick={onPartner}>
            Partner werden <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

/* 9 — FINAL CTA */
function FinalCTA({ onCta, onPartner }) {
  return (
    <section className="section section--ink" data-screen-label="Final CTA" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="flow-divider" style={{ background: 'var(--line-dark)', marginBottom: 'var(--section-y)' }}></div>
        <div className="eyebrow" data-reveal>Jetzt</div>
        <h2 className="display h-mega" data-reveal style={{ '--reveal-delay': '.05s', marginTop: '20px', maxWidth: '16ch' }}>
          Dein Deutschland. Endlich auf <span className="accent-text">deiner Seite.</span>
        </h2>
        <p className="lede dim mt-m" data-reveal style={{ '--reveal-delay': '.1s' }}>
          Heute startklar. Morgen unverzichtbar. Sei dabei, bevor alle anderen es sind.
        </p>
        <div className="hero__cta" data-reveal style={{ '--reveal-delay': '.14s', borderTop: 'none' }}>
          <button className="btn btn--primary btn--lg" onClick={onCta}>Jetzt kostenlos starten</button>
          <button className="btn btn--ghost btn--lg" onClick={onPartner}>Partner werden</button>
        </div>
        <div className="store-badges" data-reveal style={{ '--reveal-delay': '.18s' }}>
          <a className="store-badge" href="#" onClick={(e) => e.preventDefault()}>
            <span style={{ fontSize: '22px' }}></span>
            <span><div className="sb-small">Laden im</div><div className="sb-big">App Store</div></span>
          </a>
          <a className="store-badge" href="#" onClick={(e) => e.preventDefault()}>
            <span style={{ fontSize: '20px' }}>▶</span>
            <span><div className="sb-small">Jetzt bei</div><div className="sb-big">Google Play</div></span>
          </a>
        </div>
        <h3 className="final-claim" data-reveal style={{ '--reveal-delay': '.1s' }}>
          Ein Login.<br /><span className="accent-text">Dein ganzes Deutschland.</span>
        </h3>
      </div>
    </section>
  );
}

/* 10 — FOOTER */
function Footer() {
  const cols = [
    ['Produkt', ['Identität', 'Behörden', 'Bezahlen', 'Mobilität', 'Gesundheit']],
    ['Für Partner', ['Plattform', 'Mini-Apps', 'Integration', 'Partner werden']],
    ['Unternehmen', ['Über uns', 'Sicherheit', 'Datenschutz', 'Presse', 'Karriere']],
  ];
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="wrap">
        <div className="footer__tagline" data-reveal>
          <span className="logo" style={{ fontSize: 'inherit', gap: '0.3em' }}>
            <span style={{ color: 'inherit' }}>DE-<span className="accent-text">eins</span></span>
          </span>
          <div style={{ marginTop: '0.1em' }}>Alles wird eins.</div>
        </div>
        <div className="footer__cols">
          {cols.map((c, i) => (
            <div key={i} className="footer__col">
              <h5>{c[0]}</h5>
              {c[1].map((l, j) => <a key={j} href="#" onClick={(e) => e.preventDefault()}>{l}</a>)}
            </div>
          ))}
        </div>
        <div className="footer__bottom">
          <span>© 2026 DE-eins. Ein Login. Ein Leben.</span>
          <span>Made in Germany · 🇩🇪 dezent, aber stolz</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Universum, Daten, Partner, FinalCTA, Footer });