/* slides-b.jsx — Image, Video, Compare, Timeline, Table, Chart, Team, CTA-Templates */

/* ============================================================
   9. Text + Image
   ============================================================ */

window.SlideTextImage = function SlideTextImage({ ctx }) {
  return (
    <div className="slide">
      <div className="frame" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, padding: '88px 120px' }}>
        <div className="anim-in" style={{ display: 'flex', flexDirection: 'column', gap: 32, justifyContent: 'center' }}>
          <div className="eyebrow">Mein Hintergrund</div>
          <h2>Zehn Jahre an der Schnittstelle von Finanzen und Software.</h2>
          <SigLine />
          <p className="body body--lg" style={{ color: 'var(--fg-muted)' }}>
            Ich habe Portfolios in Banken aufgesetzt und Datenpipelines in FinTechs gebaut. Diese Doppelperspektive — die Sorgfalt der Banker, die Werkzeuge der Engineers — fließt in jedes Mandat ein.
          </p>
          <div style={{ display: 'flex', gap: 32, marginTop: 16 }}>
            {[
              { n: '10+', l: 'Jahre Praxis' },
              { n: '€340M', l: 'begleitete AUM' },
              { n: '4', l: 'CFA-Module' },
            ].map(s => (
              <div key={s.l}>
                <div style={{ fontFamily: 'var(--font-headline)', fontSize: 'calc(40px * var(--fs-scale))', fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--accent)' }}>{s.n}</div>
                <div className="body--sm" style={{ color: 'var(--fg-muted)' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="anim-in" style={{ position: 'relative' }}>
          <Placeholder label="Portrait Stefan, warm/natürlich" icon="IMG · 4:5" style={{ width: '100%', height: '100%', minHeight: 720 }} />
          <div style={{
            position: 'absolute', bottom: 24, right: 24,
            background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 'var(--r-md)',
            padding: '14px 18px', boxShadow: 'var(--sh-md)',
            fontFamily: 'var(--font-mono)', fontSize: 'calc(12px * var(--fs-scale))',
            color: 'var(--fg-muted)', letterSpacing: '0.04em',
          }}>
            STEFAN · HAMBURG · 2025
          </div>
        </div>
      </div>
      <Chrome index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="Über mich" />
    </div>
  );
};

/* ============================================================
   10. Full-bleed Image
   ============================================================ */

window.SlideImageFull = function SlideImageFull({ ctx }) {
  return (
    <div className="slide" data-mode="dark">
      <Placeholder label="Hafen Hamburg bei Sonnenaufgang, ruhig" icon="IMG · 16:9 · FULL-BLEED"
        style={{ position: 'absolute', inset: 0, borderRadius: 0 }} />
      {/* Overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(24,39,58,0.05) 0%, rgba(24,39,58,0.55) 70%, rgba(24,39,58,0.85) 100%)',
      }} />
      <div className="frame anim-in" style={{
        position: 'relative', justifyContent: 'flex-end', padding: '0 120px 140px', gap: 24,
      }}>
        <div className="eyebrow" style={{ color: 'var(--c-gold)' }}>Bildbühne</div>
        <h2 style={{ maxWidth: 1300, fontSize: 'calc(80px * var(--fs-scale))' }}>
          Wer den Hafen kennt, fürchtet die See nicht.
        </h2>
        <p className="lead" style={{ maxWidth: 900 }}>
          Volle Bildfläche, Text als Counterweight unten links — für Kapitelopener mit Atmosphäre.
        </p>
      </div>
      <Chrome mode="dark" index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="03 · Prozess" />
    </div>
  );
};

/* ============================================================
   11. Text + Video
   ============================================================ */

window.SlideTextVideo = function SlideTextVideo({ ctx }) {
  return (
    <div className="slide">
      <div className="frame" style={{ display: 'grid', gridTemplateColumns: '480px 1fr', gap: 80, padding: '88px 120px', alignItems: 'center' }}>
        <div className="anim-in" style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <div className="eyebrow">Im Gespräch</div>
          <h2 style={{ fontSize: 'calc(56px * var(--fs-scale))' }}>Wie ein Erstgespräch tatsächlich abläuft.</h2>
          <SigLine />
          <p className="body" style={{ color: 'var(--fg-muted)' }}>
            45 Minuten, ohne Verkauf. Wir hören zu, ordnen ein und geben am Ende eine ehrliche Empfehlung — auch wenn die heißt: noch nicht.
          </p>
          <div className="mono" style={{ fontSize: 'calc(13px * var(--fs-scale))', color: 'var(--fg-soft)', letterSpacing: '0.06em' }}>
            03:42 MIN · DEUTSCH · 2025
          </div>
        </div>
        <div className="anim-in">
          <VideoPlaceholder label="Erstgespräch — Originalmitschnitt" style={{ width: '100%', aspectRatio: '16 / 9' }} />
        </div>
      </div>
      <Chrome index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="03 · Prozess" />
    </div>
  );
};

/* ============================================================
   12. Full-bleed Video
   ============================================================ */

window.SlideVideoFull = function SlideVideoFull({ ctx }) {
  return (
    <div className="slide" data-mode="dark">
      <div style={{ position: 'absolute', inset: 0 }}>
        <VideoPlaceholder label="Hero-Video — Schiff fährt aus dem Hafen" style={{ width: '100%', height: '100%', borderRadius: 0 }} />
      </div>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(24,39,58,0.05) 0%, rgba(24,39,58,0.20) 60%, rgba(24,39,58,0.85) 100%)',
        pointerEvents: 'none',
      }} />
      <div className="frame anim-in" style={{
        position: 'relative', justifyContent: 'flex-end', padding: '0 120px 120px',
      }}>
        <div className="mono pill" style={{ alignSelf: 'flex-start', marginBottom: 20, background: 'rgba(248,246,242,0.08)', borderColor: 'rgba(248,246,242,0.18)' }}>
          <span style={{ width: 8, height: 8, background: '#fff', borderRadius: '50%' }} />
          LIVE-AUFNAHME
        </div>
        <h2 style={{ fontSize: 'calc(72px * var(--fs-scale))', maxWidth: 1300 }}>
          Eine Minute Hafen, dreißig Jahre Plan.
        </h2>
      </div>
      <Chrome mode="dark" index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="Intro" />
    </div>
  );
};

/* ============================================================
   13. Compare A/B (Vorher/Nachher)
   ============================================================ */

window.SlideCompare = function SlideCompare({ ctx }) {
  const before = [
    { l: 'Anzahl Depots', v: '7', t: 'Banken & Broker' },
    { l: 'Effektive Kosten', v: '1.84%', t: 'p.a. inkl. Fonds' },
    { l: 'Klumpenrisiko', v: '46%', t: 'in Tech-Einzelwerten' },
    { l: 'Notfall-Polster', v: '< 2 Monate', t: 'liquide verfügbar' },
  ];
  const after = [
    { l: 'Anzahl Depots', v: '2', t: 'konsolidiert' },
    { l: 'Effektive Kosten', v: '0.42%', t: 'p.a. transparent' },
    { l: 'Klumpenrisiko', v: '12%', t: 'pro Position max.' },
    { l: 'Notfall-Polster', v: '8 Monate', t: 'in Tagesgeld' },
  ];
  return (
    <div className="slide">
      <div className="frame">
        <div className="slide-head anim-in">
          <div className="eyebrow">Fallbeispiel · Familie M., 41 / 39</div>
          <h2 style={{ marginTop: 12 }}>Sechs Monate Aufräumen — gleiche Familie, gleiche Ziele.</h2>
          <SigLine />
        </div>
        <div className="anim-in" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
          <div style={{ padding: '40px 48px', background: 'var(--surface-2)' }}>
            <div className="pill" style={{ marginBottom: 24 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--sem-negative)' }} />
              Vorher
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              {before.map((x, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'baseline', borderTop: i ? '1px solid var(--line)' : 'none', paddingTop: i ? 24 : 0 }}>
                  <div>
                    <div style={{ fontSize: 'calc(18px * var(--fs-scale))', fontWeight: 500 }}>{x.l}</div>
                    <div className="body--sm" style={{ color: 'var(--fg-muted)' }}>{x.t}</div>
                  </div>
                  <div style={{ fontFamily: 'var(--font-headline)', fontSize: 'calc(40px * var(--fs-scale))', fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--sem-negative)' }}>{x.v}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ padding: '40px 48px', borderLeft: '1px solid var(--line)' }}>
            <div className="pill pill--accent" style={{ marginBottom: 24 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)' }} />
              Nachher
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              {after.map((x, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'baseline', borderTop: i ? '1px solid var(--line)' : 'none', paddingTop: i ? 24 : 0 }}>
                  <div>
                    <div style={{ fontSize: 'calc(18px * var(--fs-scale))', fontWeight: 500 }}>{x.l}</div>
                    <div className="body--sm" style={{ color: 'var(--fg-muted)' }}>{x.t}</div>
                  </div>
                  <div style={{ fontFamily: 'var(--font-headline)', fontSize: 'calc(40px * var(--fs-scale))', fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--accent)' }}>{x.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <Chrome index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="04 · Ergebnisse" />
    </div>
  );
};

/* ============================================================
   14. Timeline / Process
   ============================================================ */

window.SlideTimeline = function SlideTimeline({ ctx }) {
  const steps = [
    { n: '01', t: 'Erstgespräch', d: '45 Minuten Zuhören. Keine Folien, kein Verkauf.', when: 'Woche 1' },
    { n: '02', t: 'Bestandsaufnahme', d: 'Konten, Verträge, Ziele — sortiert auf einer Seite.', when: 'Woche 2-3' },
    { n: '03', t: 'Strategiepapier', d: 'Schriftlicher Plan — Annahmen, Allokation, Pfad.', when: 'Woche 4' },
    { n: '04', t: 'Umsetzung', d: 'Schrittweise. Steuerlich getaktet. Kein Stichtag-Stress.', when: 'Monat 2-4' },
    { n: '05', t: 'Begleitung', d: 'Quartalsweiser Check-in, jährliche Strategie-Review.', when: 'Laufend' },
  ];
  return (
    <div className="slide">
      <div className="frame">
        <div className="slide-head anim-in">
          <div className="eyebrow">Wie wir arbeiten</div>
          <h2 style={{ marginTop: 12 }}>Vom Erstgespräch zur laufenden Begleitung — in fünf Schritten.</h2>
          <SigLine />
        </div>
        <div className="anim-stagger" style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32, marginTop: 24 }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{ display: 'flex', flexDirection: 'column', gap: 16, position: 'relative', paddingTop: 8 }}>
              {/* segment of connector to next step — sits at the circle's vertical center */}
              {i < steps.length - 1 && (
                <div style={{
                  position: 'absolute',
                  top: 'calc(8px + 18px)', /* paddingTop + half circle */
                  left: 36, /* end of this step's circle */
                  right: -32, /* extend through the gap to next column */
                  height: 1,
                  background: 'var(--grad-signature)',
                  zIndex: 0,
                }} />
              )}
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: 'var(--bg)', border: '2px solid var(--accent)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-mono)', fontSize: 'calc(13px * var(--fs-scale))', fontWeight: 600,
                color: 'var(--accent)', position: 'relative', zIndex: 1,
              }}>
                {s.n}
              </div>
              <div className="body--sm mono" style={{ color: 'var(--fg-soft)', letterSpacing: '0.06em', textTransform: 'uppercase', fontSize: 'calc(11px * var(--fs-scale))' }}>{s.when}</div>
              <h3 style={{ fontSize: 'calc(22px * var(--fs-scale))' }}>{s.t}</h3>
              <p className="body" style={{ color: 'var(--fg-muted)', fontSize: 'calc(16px * var(--fs-scale))', lineHeight: 1.45 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
      <Chrome index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="03 · Prozess" />
    </div>
  );
};

/* ============================================================
   15. Table
   ============================================================ */

window.SlideTable = function SlideTable({ ctx }) {
  const rows = [
    ['Liquiditätsschicht',  'Tagesgeld, kurze Anleihen', '6-12 Monate Ausgaben', 'Stabilität',  'pos'],
    ['Stabilitätsschicht',  'Globale Anleihen, Gold',     '15-25%',               'Glättung',    'pos'],
    ['Wachstumsschicht',    'Globaler Aktien-ETF, Faktor', '50-70%',              'Rendite',     'pos'],
    ['Optionalitätsschicht', 'Themen, Unternehmens­beteiligung', '0-15%',         'Asymmetrie',  'warn'],
  ];
  const tag = (kind) => kind === 'pos' ? 'var(--accent)' : kind === 'warn' ? 'var(--c-gold)' : 'var(--sem-negative)';
  return (
    <div className="slide">
      <div className="frame">
        <div className="slide-head anim-in">
          <div className="eyebrow">Allokation</div>
          <h2 style={{ marginTop: 12 }}>Vier Schichten — eine klare Aufgabe pro Schicht.</h2>
          <SigLine />
        </div>
        <div className="anim-in" style={{ marginTop: 8 }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 'calc(20px * var(--fs-scale))' }}>
            <thead>
              <tr style={{ borderBottom: '2px solid var(--line-strong)' }}>
                {['Schicht', 'Beispiel-Bausteine', 'Zielanteil', 'Funktion', 'Status'].map(h => (
                  <th key={h} style={{
                    textAlign: 'left', padding: '20px 16px',
                    fontFamily: 'var(--font-body)', fontSize: 'calc(13px * var(--fs-scale))',
                    fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase',
                    color: 'var(--fg-muted)',
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} style={{ borderBottom: '1px solid var(--line)' }}>
                  <td style={{ padding: '24px 16px', fontWeight: 600 }}>{r[0]}</td>
                  <td style={{ padding: '24px 16px', color: 'var(--fg-muted)' }}>{r[1]}</td>
                  <td style={{ padding: '24px 16px', fontFamily: 'var(--font-mono)', fontFeatureSettings: '"tnum" 1' }}>{r[2]}</td>
                  <td style={{ padding: '24px 16px', color: 'var(--fg-muted)' }}>{r[3]}</td>
                  <td style={{ padding: '24px 16px' }}>
                    <span style={{
                      display: 'inline-flex', alignItems: 'center', gap: 8,
                      padding: '4px 12px', borderRadius: 'var(--r-pill)',
                      fontSize: 'calc(13px * var(--fs-scale))', fontWeight: 500,
                      color: tag(r[4]),
                      background: `color-mix(in oklab, ${tag(r[4])} 12%, transparent)`,
                    }}>
                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: tag(r[4]) }} />
                      {r[4] === 'pos' ? 'Kernbaustein' : 'Optional'}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      <Chrome index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="02 · Strategie" />
    </div>
  );
};

/* ============================================================
   16. Chart (Bar)
   ============================================================ */

window.SlideChart = function SlideChart({ ctx }) {
  const bars = [
    { l: '2018', v: 4.2 },
    { l: '2019', v: 6.8 },
    { l: '2020', v: 5.1 },
    { l: '2021', v: 8.4 },
    { l: '2022', v: 2.6 },
    { l: '2023', v: 7.9 },
    { l: '2024', v: 9.6 },
  ];
  const max = 10;
  return (
    <div className="slide">
      <div className="frame">
        <div className="slide-head anim-in">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', width: '100%' }}>
            <div>
              <div className="eyebrow">Real-Renditen p.a. nach Steuern und Inflation</div>
              <h2 style={{ marginTop: 12 }}>Sieben Jahre, ein konsistenter Plan.</h2>
            </div>
            <div style={{ display: 'flex', gap: 24 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 14, height: 14, background: 'var(--accent)', borderRadius: 3 }} />
                <span className="body--sm" style={{ color: 'var(--fg-muted)' }}>Mandats­durchschnitt</span>
              </div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 14, height: 2, background: 'var(--c-gold)' }} />
                <span className="body--sm" style={{ color: 'var(--fg-muted)' }}>Benchmark-Mix</span>
              </div>
            </div>
          </div>
          <SigLine />
        </div>
        <div className="anim-in" style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 20, marginTop: 24 }}>
          <div style={{ position: 'relative', flex: 1, display: 'grid', gridTemplateColumns: `60px repeat(${bars.length}, 1fr)`, gap: 24, alignItems: 'end' }}>
            {/* y-axis labels */}
            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%', paddingBottom: 8 }}>
              {[10, 8, 6, 4, 2, 0].map(n => (
                <div key={n} className="mono" style={{ fontSize: 'calc(12px * var(--fs-scale))', color: 'var(--fg-soft)', letterSpacing: '0.04em' }}>{n}%</div>
              ))}
            </div>
            {bars.map((b) => (
              <div key={b.l} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, height: '100%', justifyContent: 'flex-end' }}>
                <div style={{
                  width: '100%', maxWidth: 96,
                  height: `${(b.v / max) * 100}%`,
                  background: 'var(--accent)',
                  borderRadius: 'var(--r-md) var(--r-md) 0 0',
                  position: 'relative',
                }}>
                  <div className="mono" style={{
                    position: 'absolute', top: -28, left: 0, right: 0, textAlign: 'center',
                    fontSize: 'calc(15px * var(--fs-scale))', color: 'var(--fg)', fontWeight: 600,
                  }}>
                    {b.v.toFixed(1)}
                  </div>
                </div>
                <div className="body--sm mono" style={{ color: 'var(--fg-muted)' }}>{b.l}</div>
              </div>
            ))}
            {/* benchmark line — gold */}
            <div style={{
              position: 'absolute', left: 60 + 24, right: 0,
              top: `${(1 - 5.4 / max) * 100}%`,
              height: 2, background: 'var(--c-gold)', opacity: 0.85,
            }} />
          </div>
          <div className="body--sm mono" style={{ color: 'var(--fg-soft)', letterSpacing: '0.04em', borderTop: '1px solid var(--line)', paddingTop: 16 }}>
            QUELLE: Eigene Mandantsperformance, gewichteter Median · Stichtag 31.12.2024
          </div>
        </div>
      </div>
      <Chrome index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="04 · Ergebnisse" />
    </div>
  );
};

/* ============================================================
   17. Team
   ============================================================ */

window.SlideTeam = function SlideTeam({ ctx }) {
  const team = [
    { n: 'Max Mustermann',    r: 'Gründer · Strategie',           tag: 'Finance & Tech' },
    { n: 'Mareike Sander',     r: 'Mandantenbetreuung',            tag: 'Family Office' },
    { n: 'Jonas Pfaff',        r: 'Research & Daten',              tag: 'Datenarchitektur' },
    { n: 'Ines Voß',           r: 'Steuern & Operations',          tag: 'Steuerberaterin' },
  ];
  return (
    <div className="slide">
      <div className="frame">
        <div className="slide-head anim-in">
          <div className="eyebrow">Das Team</div>
          <h2 style={{ marginTop: 12 }}>Klein, erfahren, persönlich erreichbar.</h2>
          <SigLine />
        </div>
        <div className="anim-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, marginTop: 16 }}>
          {team.map(p => (
            <div key={p.n} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Placeholder label={p.n.split(' ')[0]} icon="PORTRAIT · 1:1" style={{ aspectRatio: '1 / 1', width: '100%' }} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, paddingTop: 4 }}>
                <h3 style={{ fontSize: 'calc(24px * var(--fs-scale))' }}>{p.n}</h3>
                <div className="body--sm" style={{ color: 'var(--fg-muted)' }}>{p.r}</div>
                <div style={{ marginTop: 8 }}>
                  <span className="pill" style={{ fontSize: 'calc(12px * var(--fs-scale))' }}>{p.tag}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <Chrome index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="Über uns" />
    </div>
  );
};

/* ============================================================
   18. Call to action / Closing
   ============================================================ */

window.SlideCTA = function SlideCTA({ ctx }) {
  return (
    <div className="slide" data-mode="dark">
      {/* Committed: Teal-Wash links/oben, Gold-Glow bleibt unten rechts als Siegel */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(1300px 850px at 15% 25%, rgba(13,148,136,0.42), rgba(13,148,136,0.10) 55%, transparent 80%)',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(900px 600px at 80% 80%, rgba(212,168,83,0.14), transparent 60%)',
      }} />
      <div className="frame anim-stagger" style={{ justifyContent: 'space-between', padding: '120px 120px 160px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div className="eyebrow" style={{ color: 'var(--c-gold)' }}>Nächste Schritte</div>
          {ctx.logoOn && (
            <img src={window.LOGO('logo-dark.svg')} alt="Logo" style={{ height: 'calc(48px * var(--fs-scale))', width: 'auto', display: 'block', opacity: 0.9 }} />
          )}
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 32, maxWidth: 1500 }}>
          <h1 style={{ fontSize: 'calc(120px * var(--fs-scale))' }}>
            Lass uns sprechen<span className="gold-dot" />
          </h1>
          <p className="lead" style={{ maxWidth: 1100 }}>
            45 Minuten, kostenfrei, ohne Verkauf. Du bringst deine Fragen — ich bringe Erfahrung und ehrliche Antworten.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 64, alignItems: 'flex-end' }}>
          {[
            { l: 'Direkt anrufen',    v: '+49 40 — 555 09 84',         t: 'Mo – Fr · 9 – 18 Uhr' },
            { l: 'Per E-Mail',        v: 'stefan@lehnisch.de',         t: 'Antwort innerhalb 24 h' },
            { l: 'Termin buchen',     v: 'lehnisch.de/erstgespraech',  t: 'Online-Kalender' },
          ].map(c => (
            <div key={c.l} style={{ display: 'flex', flexDirection: 'column', gap: 8, paddingTop: 24, borderTop: '1px solid var(--line-strong)' }}>
              <div className="mono eyebrow" style={{ color: 'var(--fg-soft)', fontSize: 'calc(12px * var(--fs-scale))' }}>{c.l}</div>
              <div style={{ fontFamily: 'var(--font-headline)', fontSize: 'calc(28px * var(--fs-scale))', fontWeight: 600, letterSpacing: '-0.015em' }}>{c.v}</div>
              <div className="body--sm" style={{ color: 'var(--fg-soft)' }}>{c.t}</div>
            </div>
          ))}
        </div>
      </div>
      <Chrome mode="dark" index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="05 · Kontakt" />
    </div>
  );
};
