/* slides-a.jsx — Cover, Section, Text-, Bullet-, Two-Column-, Agenda-, Quote-, BigStat-Templates */

/* ---------- Reusable atoms ---------- */

/* Wordmark — uses brand SVG. variant: 'primary' (dark on light), 'dark' (light on dark), 'with-claim' (cover/CTA). size sets pixel HEIGHT. */
// Logo-Pfad: window.LOGO_BASE wird vom HTML gesetzt (Vault-Master vs. exportierte Präsentation).
// Default 'assets/' für selbst-enthaltene Exports.
// Auf window gehängt, damit slides-b.js denselben Helper nutzt.
window.LOGO = window.LOGO || ((file) => (window.LOGO_BASE || 'assets/') + file);
const LOGO = window.LOGO;

const Wordmark = ({ size = 'md', variant = 'primary', showLogo = true, style }) => {
  if (!showLogo) return null;
  const heights = {
    sm: 'calc(28px * var(--fs-scale))',
    md: 'calc(44px * var(--fs-scale))',
    lg: 'calc(72px * var(--fs-scale))',
    xl: 'calc(112px * var(--fs-scale))',
  };
  const src = variant === 'with-claim' ? LOGO('logo-with-claim.svg')
    : variant === 'dark' ? LOGO('logo-dark.svg')
    : LOGO('logo-primary.svg');
  return (
    <img src={src} alt="Logo" style={{ height: heights[size] || heights.md, width: 'auto', display: 'block', ...style }} />
  );
};

const Chrome = ({ index, total, sectionLabel, footerOn = true, logoOn = true, mode }) => {
  if (!footerOn) return null;
  // Inline logo SVG flips fill-color via CSS filter when on dark mode
  const inlineSrc = mode === 'dark' ? LOGO('logo-inline-dark.svg') : LOGO('logo-inline.svg');
  return (
    <div className="chrome">
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14 }}>
        {logoOn && (
          <img src={inlineSrc} alt="Logo" style={{ height: 'calc(22px * var(--fs-scale))', width: 'auto', display: 'block' }} />
        )}
        {sectionLabel && (
          <>
            <span style={{ width: 1, height: 12, background: 'var(--line)' }} />
            <span style={{ letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 'calc(12px * var(--fs-scale))' }}>
              {sectionLabel}
            </span>
          </>
        )}
      </div>
      <div className="pageno">
        <span>{String(index).padStart(2, '0')}</span>
        <span className="sep">/</span>
        <span>{String(total).padStart(2, '0')}</span>
      </div>
    </div>
  );
};

const Placeholder = ({ label = 'Bild', icon = 'IMG', style }) => (
  <div className="placeholder" style={style}>
    <div className="placeholder__icon">{icon}</div>
    <div className="placeholder__label">Hier kommt: {label}</div>
  </div>
);

const VideoPlaceholder = ({ label = 'Video', style }) => (
  <div className="placeholder" style={style}>
    <div className="placeholder__icon">VIDEO · 16:9</div>
    <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
      <div style={{
        width: 88, height: 88, borderRadius: '50%',
        background: 'var(--bg)', border: '1px solid var(--line)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{
          width: 0, height: 0,
          borderLeft: '22px solid var(--fg)',
          borderTop: '14px solid transparent',
          borderBottom: '14px solid transparent',
          marginLeft: 6,
        }} />
      </div>
      <div className="placeholder__label">Hier kommt: {label}</div>
    </div>
  </div>
);

const SigLine = ({ width = 120, style }) => (
  <div className="sig-line" style={{ width, ...style }} />
);

/* EyebrowDot — Indikator-Punkt im Eyebrow-Text (z.B. Ampel fuer Befund-Schwere).
 * Wird als inline-block DIREKT im Eyebrow-Text platziert, nicht als Flex-Sibling daneben.
 * Sitzt damit auf der Schrift-Mittelachse statt auf der Flex-Box-Mitte. Loest das Problem,
 * dass alignItems:center bei Uppercase-Eyebrow mit line-height 1.4 den Punkt zu tief setzt.
 *
 * Verwendung:
 *   <div className="eyebrow"><EyebrowDot tone="red" /> Beobachtung 01 · §92 AktG</div>
 *
 * Tone-Varianten: red (Default) / orange / gold / green.
 * CSS-Klasse .eyebrow-dot ist in theme.css definiert. */
const EyebrowDot = ({ tone = 'red' }) => (
  <span className="eyebrow-dot" data-tone={tone} aria-hidden="true" />
);

/* ============================================================
   1. Cover
   ============================================================ */

window.SlideCover = function SlideCover({ ctx }) {
  return (
    <div className="slide" data-mode="dark" style={{ background: 'var(--c-deep-sea)' }}>
      {/* Background tone shift — Committed: Teal trägt großflächig */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(1400px 900px at 80% 20%, rgba(13,148,136,0.42), rgba(13,148,136,0.10) 55%, transparent 75%)',
      }} />
      <div className="frame anim-stagger" style={{ justifyContent: 'space-between', padding: '160px 120px 96px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          {ctx.logoOn && (
            <img src={LOGO('logo-dark.svg')} alt="Logo" style={{ height: 'calc(56px * var(--fs-scale))', width: 'auto', display: 'block' }} />
          )}
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 32, maxWidth: 1400 }}>
          <div className="eyebrow" style={{ color: 'var(--c-gold)' }}>Pitch · {new Date().toLocaleDateString('de-DE', { month: 'long', year: 'numeric' })}</div>
          <h1>
            Vom Kapital&shy;markt&shy;rauschen zur klaren Navigation.
          </h1>
          <SigLine width={220} />
          <p className="lead" style={{ maxWidth: 1100 }}>
            Wie strukturierte Beratung, klare Daten und ein verlässlicher Prozess Vermögen über Zyklen hinweg navigieren.
          </p>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <div className="eyebrow" style={{ fontSize: 'calc(12px * var(--fs-scale))' }}>Vorgestellt von</div>
            <div style={{ fontSize: 'calc(20px * var(--fs-scale))', fontWeight: 500 }}>Max Mustermann</div>
            <div className="body--sm">Independent Financial Navigator</div>
          </div>
          <div className="mono" style={{ fontSize: 'calc(13px * var(--fs-scale))', color: 'var(--fg-soft)', letterSpacing: '0.06em' }}>
            01 / VERTRAULICH
          </div>
        </div>
      </div>
    </div>
  );
};

/* ============================================================
   2. Section divider
   ============================================================ */

window.SlideSection = function SlideSection({ ctx }) {
  return (
    <div className="slide" data-mode="dark">
      {/* Committed: Teal-Band hinter der Kapitel-Headline */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: '22%', height: '52%',
        background: 'rgba(13,148,136,0.40)',
      }} />
      <div className="frame" style={{ justifyContent: 'center', gap: 40, position: 'relative' }}>
        <div className="eyebrow anim-in" style={{ color: 'var(--c-gold)' }}>Kapitel 02</div>
        <h1 className="anim-in" style={{ fontSize: 'calc(140px * var(--fs-scale))', maxWidth: 1500 }}>
          Strategie<br/>statt Spekulation.
        </h1>
        <div className="anim-in" style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <SigLine width={180} />
          <span className="body" style={{ color: 'var(--fg-soft)', fontSize: 'calc(28px * var(--fs-scale))' }}>
            Vier Bausteine eines belastbaren Portfolios
          </span>
        </div>
      </div>
      <Chrome mode="dark" index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="02 · Strategie" />
    </div>
  );
};

/* ============================================================
   3. Text-only / Fließtext
   ============================================================ */

window.SlideText = function SlideText({ ctx }) {
  return (
    <div className="slide">
      <div className="frame">
        <div className="slide-head anim-in">
          <div className="eyebrow">Grundsatz · 01</div>
          <h2 style={{ maxWidth: 1400 }}>
            Vermögen entsteht selten durch Brillanz. Es entsteht durch Disziplin.
          </h2>
          <SigLine />
        </div>
        <div className="anim-stagger body body--lg" style={{ maxWidth: 1300, columnCount: 2, columnGap: 80, color: 'var(--fg-muted)' }}>
          <p style={{ marginBottom: '1em' }}>
            Die meisten Anleger verlieren nicht, weil sie die falschen Aktien kaufen. Sie verlieren, weil sie die richtigen zur falschen Zeit verkaufen — getrieben von Schlagzeilen, kurzfristigen Verlusten und der berechtigten Angst, etwas zu verpassen.
          </p>
          <p style={{ marginBottom: '1em' }}>
            Mein Ansatz dreht diese Reihenfolge um: Wir definieren zuerst deinen Lebensplan, leiten daraus eine Strategie ab und entscheiden erst dann über einzelne Positionen. So wird die Börse zum Werkzeug — nicht zum Glücksspiel.
          </p>
          <p>
            Das klingt unspektakulär. Genau das ist der Punkt. <span style={{ color: 'var(--accent)', fontWeight: 500 }}>Substanz schlägt Effekt</span> — über jeden ernstzunehmenden Zeitraum.
          </p>
        </div>
      </div>
      <Chrome index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="01 · Fundament" />
    </div>
  );
};

/* ============================================================
   4. Bullets / Aufzählung
   ============================================================ */

window.SlideBullets = function SlideBullets({ ctx }) {
  const items = [
    { k: 'Klarheit', v: 'Wir definieren messbare Ziele, bevor wir über Produkte sprechen.' },
    { k: 'Struktur', v: 'Vermögen wird in Schichten geplant — Liquidität, Stabilität, Wachstum, Optionalität.' },
    { k: 'Transparenz', v: 'Jede Position ist begründbar; jede Gebühr ist offen ausgewiesen.' },
    { k: 'Konsequenz', v: 'Ein Plan, der nicht durchgehalten wird, ist kein Plan. Wir bauen Routinen.' },
  ];
  return (
    <div className="slide">
      <div className="frame">
        <div className="slide-head anim-in">
          <div className="eyebrow">Vier Prinzipien</div>
          <h2 style={{ maxWidth: 1300 }}>So arbeiten wir — unabhängig vom Marktumfeld.</h2>
          <SigLine />
        </div>
        <div className="anim-stagger" style={{ display: 'flex', flexDirection: 'column', gap: 28, maxWidth: 1500 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '72px 220px 1fr',
              alignItems: 'flex-start',
              gap: 32,
              paddingBottom: 24,
              borderBottom: i < items.length - 1 ? '1px solid var(--line)' : 'none',
            }}>
              <div className="mono" style={{
                color: 'var(--accent)', fontSize: 'calc(15px * var(--fs-scale))', fontWeight: 600,
                background: 'rgba(13,148,136,0.10)',
                width: 56, height: 56, borderRadius: '50%',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginTop: 4,
              }}>
                {String(i + 1).padStart(2, '0')}
              </div>
              <h3 style={{ fontSize: 'calc(32px * var(--fs-scale))' }}>{it.k}</h3>
              <p className="body" style={{ color: 'var(--fg-muted)' }}>{it.v}</p>
            </div>
          ))}
        </div>
      </div>
      <Chrome index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="01 · Fundament" />
    </div>
  );
};

/* ============================================================
   5. Two-column (Text + Text)
   ============================================================ */

window.SlideTwoCol = function SlideTwoCol({ ctx }) {
  return (
    <div className="slide">
      <div className="frame">
        <div className="slide-head anim-in">
          <div className="eyebrow">Gegenüberstellung</div>
          <h2 style={{ maxWidth: 1500 }}>Zwei Wege durch denselben Markt.</h2>
          <SigLine />
        </div>
        <div className="anim-stagger" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginTop: 8 }}>
          <div>
            <div className="pill" style={{ marginBottom: 24 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--sem-negative)' }} />
              Reaktiv
            </div>
            <h3 style={{ marginBottom: 20 }}>Getrieben von Schlagzeilen</h3>
            <p className="body" style={{ color: 'var(--fg-muted)', marginBottom: 16 }}>
              Entscheidungen folgen der Stimmung des Tages. Verluste werden realisiert, Gewinne werden abgeschnitten. Die Strategie passt sich permanent dem Markt an — was heißt: es gibt keine.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Hohe Umschichtungs­quote', 'Steuerlich ineffizient', 'Emotional belastend'].map(x => (
                <li key={x} className="body--sm" style={{ display: 'flex', gap: 12, alignItems: 'center', color: 'var(--fg-muted)' }}>
                  <span style={{ width: 18, height: 1, background: 'var(--line-strong)' }} />
                  {x}
                </li>
              ))}
            </ul>
          </div>
          <div style={{ borderLeft: '1px solid var(--line)', paddingLeft: 64 }}>
            <div className="pill pill--accent" style={{ marginBottom: 24 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)' }} />
              Navigiert
            </div>
            <h3 style={{ marginBottom: 20 }}>Geführt von einem Plan</h3>
            <p className="body" style={{ color: 'var(--fg-muted)', marginBottom: 16 }}>
              Die Marschrichtung steht. Marktbewegungen werden im Rahmen eines klaren Prozesses interpretiert — nicht in der Panik des Moments. Anpassungen sind Ausnahme, nicht Regel.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Geringer Umschlag', 'Steuerlich optimiert', 'Mental tragfähig'].map(x => (
                <li key={x} className="body--sm" style={{ display: 'flex', gap: 12, alignItems: 'center', color: 'var(--fg-muted)' }}>
                  <span style={{ width: 18, height: 1, background: 'var(--accent)' }} />
                  {x}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <Chrome index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="02 · Strategie" />
    </div>
  );
};

/* ============================================================
   6. Agenda / Inhaltsverzeichnis
   ============================================================ */

window.SlideAgenda = function SlideAgenda({ ctx }) {
  const chapters = [
    { n: '01', t: 'Fundament',  d: 'Was wir glauben — und warum es funktioniert' },
    { n: '02', t: 'Strategie',  d: 'Vier Bausteine eines belastbaren Portfolios' },
    { n: '03', t: 'Prozess',    d: 'Wie wir gemeinsam arbeiten' },
    { n: '04', t: 'Ergebnisse', d: 'Belege aus zehn Jahren Begleitung' },
    { n: '05', t: 'Nächste Schritte', d: 'Wie der Einstieg konkret aussieht' },
  ];
  return (
    <div className="slide">
      <div className="frame">
        <div className="slide-head anim-in">
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', width: '100%' }}>
            <div>
              <div className="eyebrow">Inhalt</div>
              <h2 style={{ marginTop: 16 }}>Worüber wir sprechen.</h2>
            </div>
            <div className="mono" style={{ fontSize: 'calc(14px * var(--fs-scale))', color: 'var(--fg-soft)', letterSpacing: '0.06em' }}>
              5 KAPITEL · 35 MIN
            </div>
          </div>
          <SigLine />
        </div>
        <div className="anim-stagger" style={{ display: 'flex', flexDirection: 'column' }}>
          {chapters.map((c, i) => (
            <div key={c.n} style={{
              display: 'grid',
              gridTemplateColumns: '120px 1fr auto',
              alignItems: 'baseline',
              gap: 32,
              padding: '28px 0',
              borderTop: '1px solid var(--line)',
              borderBottom: i === chapters.length - 1 ? '1px solid var(--line)' : 'none',
            }}>
              <div className="mono" style={{ fontSize: 'calc(28px * var(--fs-scale))', color: 'var(--fg-soft)' }}>{c.n}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <h3 style={{ fontSize: 'calc(34px * var(--fs-scale))' }}>{c.t}</h3>
                <p className="body--sm" style={{ color: 'var(--fg-muted)' }}>{c.d}</p>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 32, height: 1, background: 'var(--line-strong)' }} />
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="var(--fg-muted)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 3l5 5-5 5"/></svg>
              </div>
            </div>
          ))}
        </div>
      </div>
      <Chrome index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} />
    </div>
  );
};

/* ============================================================
   7. Quote / Pull Quote
   ============================================================ */

window.SlideQuote = function SlideQuote({ ctx }) {
  return (
    <div className="slide" data-mode="dark">
      {/* Committed: Teal-Wash diagonal als Backplate hinter dem Zitat */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(120deg, rgba(13,148,136,0.45) 0%, rgba(13,148,136,0.12) 55%, transparent 90%)',
      }} />
      <div className="frame" style={{ justifyContent: 'center', alignItems: 'flex-start', maxWidth: 1500, margin: '0 auto', padding: '120px 160px', position: 'relative' }}>
        <div className="anim-in" style={{ fontFamily: 'var(--font-headline)', fontSize: 'calc(220px * var(--fs-scale))', lineHeight: 0.6, color: 'var(--c-gold)', marginBottom: 32 }}>
          &ldquo;
        </div>
        <h2 className="anim-in" style={{ fontSize: 'calc(72px * var(--fs-scale))', lineHeight: 1.2, fontWeight: 500, letterSpacing: '-0.02em', maxWidth: 1500 }}>
          Risiko ist nicht das, was sich an der Börse bewegt. Risiko ist, am Ende deines Lebens nicht das gemacht zu haben, was dir wichtig war.
        </h2>
        <div className="anim-in" style={{ marginTop: 56, display: 'flex', alignItems: 'center', gap: 20 }}>
          <SigLine width={56} />
          <div>
            <div style={{ fontSize: 'calc(20px * var(--fs-scale))', fontWeight: 500 }}>Max Mustermann</div>
            <div className="body--sm" style={{ color: 'var(--fg-soft)' }}>Eröffnungsrede, Kapitalmarkt-Forum 2025</div>
          </div>
        </div>
      </div>
      <Chrome mode="dark" index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="Zwischenruf" />
    </div>
  );
};

/* ============================================================
   8. Big Number / Statistik

   Letter-Spacing-Falle: Der Eltern-Container hat letter-spacing: -0.05em
   für die große Zahl. Wer ein zweites Span mit kleinerer Schriftgröße
   einbaut (z.B. "statt 8 Wochen", "verlinkte Notizen"), MUSS dort das
   letter-spacing auf etwa -0.015em zurücksetzen, sonst kleben die Buchstaben.
   CSS-Helper-Klassen: .stat-big plus .stat-sublabel (siehe theme.css).
   ============================================================ */

window.SlideStat = function SlideStat({ ctx }) {
  return (
    <div className="slide">
      <div className="frame">
        <div className="slide-head anim-in">
          <div className="eyebrow">Eine Zahl, die alles erklärt</div>
          <div className="slide-head__title-placeholder" aria-hidden="true" />
          <SigLine />
        </div>
        <div className="anim-in" style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 480px', gap: 80, alignItems: 'center' }}>
          <div className="stat-big stat-big--xxl">
            87<span style={{ color: 'var(--accent)' }}>%</span>
            {/* Beispiel mit Sub-Label, falls gewünscht:
                <br/><span className="stat-sublabel">Sub-Label-Text</span>
                Dann klebt nichts. Niemals einfach ein zweites span ohne
                eigenes letter-spacing in den .stat-big-Block packen. */}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <h3 style={{ fontSize: 'calc(36px * var(--fs-scale))' }}>
              der aktiven Privatanleger schlagen den Markt langfristig <em style={{ fontStyle: 'normal', color: 'var(--sem-negative)' }}>nicht</em>.
            </h3>
            <p className="body" style={{ color: 'var(--fg-muted)' }}>
              Studie: Dalbar QAIB 2024, 30-Jahres-Vergleich realisierter Anlegerrenditen vs. S&amp;P 500.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 8 }}>
              <span className="pill">30 Jahre</span>
              <span className="pill">Realdaten</span>
              <span className="pill">Brutto vor Steuern</span>
            </div>
          </div>
        </div>
      </div>
      <Chrome index={ctx.index} total={ctx.total} footerOn={ctx.footerOn} logoOn={ctx.logoOn} sectionLabel="01 · Fundament" />
    </div>
  );
};

Object.assign(window, { Wordmark, Chrome, Placeholder, VideoPlaceholder, SigLine, EyebrowDot });
