/* Report document mockup + Track Record */

/* ---------- Report document mockup ---------- */
function VizPanel() {
  const scenarios = [
    { pct: 35, label: 'Saubere Resolution', detail: '< 60 Tage', highlight: false },
    { pct: 15, label: 'Frozen Conflict',     detail: 'Chronischer Druck', highlight: false },
    { pct: 45, label: 'Messy Resolution',    detail: '90–180 Tage · Volatilitäts-Spikes', highlight: true },
    { pct: 5,  label: 'Akute Eskalation',    detail: 'Incident-getriggert', highlight: false },
  ];

  const findings = [
    {
      n: '01',
      title: 'Der Drohnen-Leak ist primär ein politisches Werkzeug.',
      body: 'Der Axios-Leak vom 14. Mai funktioniert nicht als Sicherheitswarnung, sondern als Erlaubnisstruktur für eine bereits vorbereitete eskalatorische Politik. Der Markt behandelt dies als Sicherheitsereignis; er sollte es als innenpolitisches Manöver behandeln.',
    },
    {
      n: '02',
      title: 'Die Resolution-Wahrscheinlichkeit ist real — aber der Pfad nicht.',
      body: 'Die Simulation gibt 98,8 % diplomatische Resolution aus. RICS revidiert: Saubere Resolution unter 60 Tagen ist nur das 35 %-Szenario. Das wahrscheinlichste Outcome ist Messy Resolution über 90–180 Tage. Der Markt preist das 35 %-Szenario mit 90 %+ Wahrscheinlichkeit — diese Fehlkalibrierung ist die Opportunität.',
    },
    {
      n: '03',
      title: 'Die Florida-Diaspora ist das strukturelle Veto auf jede Resolution.',
      body: 'Die kubanisch-amerikanische Gemeinschaft in Florida vollzog nach dem Leak einen +15-Punkte-Shift Richtung Hardliner. Sie besitzt Veto-Macht über jede Normalisierung — electorally gewichtet in einem Swing-State, den die Administration nicht verlieren kann.',
    },
  ];

  return (
    <div style={{ position: 'relative' }}>
      {/* Caption strip above */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 24, paddingBottom: 16, borderBottom: '1px solid var(--ghost-strong)',
      }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--on-surface-dim)' }}>
          Beispiel · Konflikt-Report · 12 Seiten · Mai 2026
        </div>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--on-surface-quiet)' }}>
          Auszug · Cover und Executive Summary
        </div>
      </div>

      {/* Two-page spread */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1,
        background: 'var(--ghost-strong)',
        boxShadow: '0 24px 80px rgba(0,0,0,0.45)',
      }}>
        {/* ============ PAGE 1 · COVER ============ */}
        <div style={{
          background: 'var(--surface-lowest)', padding: '48px 44px 36px',
          minHeight: 740, display: 'flex', flexDirection: 'column',
        }}>
          {/* Top brand line */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--on-surface-dim)' }}>
              Geopolitical Intelligence Report
            </div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--on-surface-quiet)' }}>
              RICS / 023
            </div>
          </div>

          {/* Hairline */}
          <div style={{ height: 1, background: 'var(--ghost-strong)', marginTop: 16, marginBottom: 56 }} />

          {/* Title */}
          <div>
            <h3 className="display-sm" style={{
              margin: 0, fontSize: 'clamp(30px, 3.4vw, 48px)', lineHeight: 1.02,
              letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--primary)',
            }}>
              Kuba–USA<br />
              <span style={{ color: 'var(--on-surface-variant)' }}>Drohnenkrise</span>
            </h3>
            <div className="mono" style={{ marginTop: 16, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--on-surface-dim)' }}>
              Strategische Lagebeurteilung · Mai–Juni 2026
            </div>
          </div>

          {/* Situation summary box */}
          <div style={{ marginTop: 36, paddingTop: 18, borderTop: '1px solid var(--ghost-strong)' }}>
            <div className="label" style={{ marginBottom: 12 }}>Situation</div>
            <p className="body-sm" style={{ margin: 0, fontSize: 12.5, lineHeight: 1.55, color: 'var(--on-surface-variant)' }}>
              Axios-Leak (14. Mai 2026) bestätigt 300+ militärische Drohnen (Shahed-136 / Geran-2/3) aus Russland und Iran seit 2023. CIA-Direktor reiste persönlich nach Havanna. Kuba simulierte Szenarien gegen Guantánamo Bay, US-Marineschiffe, Key West. Ölreserven nahezu aufgebraucht. Hapag-Lloyd und CMA-CGM haben Kuba-Routen ausgesetzt.
            </p>
          </div>

          {/* Scenario probability bars */}
          <div style={{ marginTop: 32 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
              <div className="label">Szenarien · 90 Tage</div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--on-surface-quiet)', textTransform: 'uppercase' }}>
                P(Outcome) · explizit
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {scenarios.map((s, i) => (
                <div key={i}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                    <div style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>
                      <span className="tnum" style={{
                        fontSize: 14, fontWeight: 500,
                        color: s.highlight ? 'var(--primary)' : 'var(--on-surface)',
                      }}>
                        {s.pct} %
                      </span>
                      <span style={{ fontSize: 12.5, color: s.highlight ? 'var(--on-surface)' : 'var(--on-surface-variant)' }}>
                        {s.label}
                      </span>
                    </div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--on-surface-quiet)', letterSpacing: '0.04em' }}>
                      {s.detail}
                    </div>
                  </div>
                  <div style={{ height: 4, background: 'var(--ghost-strong)', position: 'relative', borderRadius: 1 }}>
                    <div style={{
                      position: 'absolute', inset: 0, width: `${s.pct * 2}%`,
                      background: s.highlight ? '#FFFFFF' : 'var(--on-surface-dim)',
                      maxWidth: '100%',
                    }} />
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Footer metadata */}
          <div style={{
            marginTop: 'auto', paddingTop: 28,
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18,
            borderTop: '1px solid var(--ghost-strong)',
          }}>
            {[
              ['Investmentfokus', 'Rohöl · Defense / Drohnenabwehr · Schifffahrt · EM Karibik · USD'],
              ['Zeitrahmen',      '0–45 Tage politisches Fenster · 45–120 Tage Resolution-Zone'],
              ['ID',              'cuba_drone_7f3a9c · Mai 2026'],
            ].map(([l, v], i) => (
              <div key={i}>
                <div className="label" style={{ fontSize: 9.5, marginBottom: 8 }}>{l}</div>
                <div className="mono" style={{ fontSize: 11, lineHeight: 1.45, color: 'var(--on-surface-variant)' }}>
                  {v}
                </div>
              </div>
            ))}
          </div>

          {/* Bottom strip */}
          <div style={{ marginTop: 20, paddingTop: 14, borderTop: '1px solid var(--ghost)', display: 'flex', justifyContent: 'space-between' }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--on-surface-quiet)', letterSpacing: '0.14em' }}>
              RICS Analytics · ricsanalytics.de
            </div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--on-surface-quiet)', letterSpacing: '0.14em' }}>
              Cover · 1 / 12
            </div>
          </div>
        </div>

        {/* ============ PAGE 2 · EXECUTIVE SUMMARY ============ */}
        <div style={{
          background: 'var(--surface-lowest)', padding: '32px 44px 36px',
          minHeight: 740, display: 'flex', flexDirection: 'column',
        }}>
          {/* Running header */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--on-surface-quiet)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              RICS Intelligence Report · Kuba–USA Drohnenkrise · Mai 2026
            </div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--on-surface-quiet)', letterSpacing: '0.14em' }}>
              2 / 12
            </div>
          </div>
          <div style={{ height: 1, background: 'var(--ghost-strong)', marginTop: 16, marginBottom: 32 }} />

          {/* Section label */}
          <div className="label" style={{ color: 'var(--on-surface-dim)' }}>Executive Summary</div>

          {/* Page title */}
          <h4 style={{
            margin: '14px 0 18px', fontSize: 26, lineHeight: 1.1,
            letterSpacing: '-0.02em', fontWeight: 500, color: 'var(--primary)',
          }}>
            Kernbefunde auf einen Blick
          </h4>

          {/* Lede */}
          <p className="body-sm" style={{ margin: 0, fontSize: 12.5, lineHeight: 1.6, color: 'var(--on-surface-variant)', maxWidth: 460 }}>
            Drei Perspektiven: öffentliche Meinungsdynamiken, Entscheidungsträger-Verhalten, Marktimplikationen. Die zentrale These: Dies ist kein genuines Sicherheitsereignis, sondern ein politisches Instrument — und der Markt hat den Unterschied noch nicht eingepreist.
          </p>

          {/* Findings */}
          <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 22 }}>
            {findings.map((f) => (
              <div key={f.n} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 16, paddingTop: 18, borderTop: '1px solid var(--ghost-strong)' }}>
                <div className="tnum mono" style={{ fontSize: 22, letterSpacing: '-0.01em', color: 'var(--on-surface-dim)', lineHeight: 1 }}>
                  {f.n}
                </div>
                <div>
                  <div style={{ fontSize: 14, lineHeight: 1.35, fontWeight: 500, color: 'var(--on-surface)', letterSpacing: '-0.005em' }}>
                    {f.title}
                  </div>
                  <p className="body-sm" style={{ margin: '8px 0 0', fontSize: 11.5, lineHeight: 1.6, color: 'var(--on-surface-dim)' }}>
                    {f.body}
                  </p>
                </div>
              </div>
            ))}
          </div>

          {/* Footer continuation */}
          <div style={{ marginTop: 'auto', paddingTop: 18, borderTop: '1px solid var(--ghost)', display: 'flex', justifyContent: 'space-between' }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--on-surface-quiet)', letterSpacing: '0.12em' }}>
              Fortsetzung: Befunde 04 · 05 → Seite 3
            </div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--on-surface-quiet)', letterSpacing: '0.12em' }}>
              Vertraulich · WpHG-konform
            </div>
          </div>
        </div>
      </div>

      {/* Caption strip below */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 20 }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--on-surface-quiet)' }}>
          Folgekapitel: Meinungsdynamiken · Elite-Entscheidungsträger · Marktimplikationen · Anlegerbrief
        </div>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--on-surface-quiet)' }}>
          Beispiel — Daten anonymisiert
        </div>
      </div>
    </div>
  );
}

function VizSection() {
  return (
    <section className="section">
      <div className="container">
        <SectionHeader
          kicker="Arbeitsprobe"
          num="04"
          title={<>Wie ein Report<br /><span style={{ color: 'var(--on-surface-variant)' }}>bei uns aussieht.</span></>}
          intro="Auszug aus einem aktuellen Konflikt-Report: Cover mit Situation, expliziten Szenarienwahrscheinlichkeiten, Investmentfokus und Zeitrahmen — gefolgt von der Executive Summary mit nummerierten Kernbefunden. Der vollständige Report umfasst zwölf Seiten inkl. Akteur-Zwangslagen-Matrix, Szenarienbaum und Anlegerbrief."
        />
        <Reveal>
          <VizPanel />
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Track Record ---------- */
function TrackRecord() {
  const entries = [
    {
      date: '1962 · 09 → 11',
      label: 'Blind Prediction · Test 01',
      scenario: 'Cuba Missile Crisis',
      call: 'P(Quarantäne) > P(Luftangriff) > P(Invasion)',
      mechanism: 'Cutoff: 30. September 1962. Das System kennt zum Zeitpunkt der Prognose keinen Ausgang. Reine Zwangslagenableitung aus zeitgenössischen Quellen.',
      status: 'verifiziert',
      statusTone: 'ok',
    },
    {
      date: 'Q3 2026',
      label: 'Blind Prediction · Tests 02 – 08',
      scenario: 'Sieben weitere historische Szenarien',
      call: '—',
      mechanism: 'Yom-Kippur-Krieg, deutsche Wiedervereinigung, Asienkrise 1997, Eurokrise 2010–12, Brexit, weitere. Methodik wie Test 01.',
      status: 'in Vorbereitung',
      statusTone: 'pending',
    },
  ];

  const toneColor = (t) => ({
    live: 'var(--on-surface)',
    ok: 'var(--on-surface)',
    pending: 'var(--on-surface-dim)',
  }[t] || 'var(--on-surface-dim)');

  return (
    <section id="track-record" className="section" style={{ background: 'var(--surface-low)' }}>
      <div className="container">
        <SectionHeader
          kicker="Track Record"
          num="05"
          title={<>Falsifizierbar,<br /><span style={{ color: 'var(--on-surface-variant)' }}>nicht post hoc.</span></>}
          intro="Wir testen unsere Methodik systematisch an historischen Szenarien mit hartem Datums-Cutoff. Das System kennt zum Zeitpunkt der Prognose nichts über den tatsächlichen Ausgang. Das ist der Unterschied zu nachträglicher Rationalisierung."
        />

        {/* Ledger header */}
        <div className="mono" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1.6fr 2fr 4fr 1.4fr', gap: 24,
          padding: '14px 32px', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'var(--on-surface-quiet)', borderBottom: '1px solid var(--ghost-strong)',
        }}>
          <div>Zeitraum</div>
          <div>Szenario</div>
          <div>Call</div>
          <div>Mechanismus</div>
          <div style={{ textAlign: 'right' }}>Status</div>
        </div>

        {/* Ledger rows */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {entries.map((e, i) => (
            <Reveal key={i} delay={i * 80}>
              <article style={{
                display: 'grid', gridTemplateColumns: '1.4fr 1.6fr 2fr 4fr 1.4fr', gap: 24,
                padding: '36px 32px', borderBottom: '1px solid var(--ghost-strong)',
                alignItems: 'start', background: 'var(--surface-low)',
                transition: 'background 200ms ease',
              }}
              onMouseEnter={(ev) => ev.currentTarget.style.background = 'var(--surface-highest)'}
              onMouseLeave={(ev) => ev.currentTarget.style.background = 'var(--surface-low)'}>
                <div>
                  <div className="tnum" style={{ fontSize: 18, letterSpacing: '-0.015em', color: 'var(--on-surface)' }}>{e.date}</div>
                  <div className="mono" style={{ fontSize: 10, marginTop: 8, color: 'var(--on-surface-dim)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                    {e.label}
                  </div>
                </div>
                <div style={{ fontSize: 16, color: 'var(--on-surface)', letterSpacing: '-0.01em' }}>{e.scenario}</div>
                <div className="mono" style={{ fontSize: 13, color: 'var(--on-surface-variant)', lineHeight: 1.5 }}>
                  {e.call}
                </div>
                <div className="body-sm" style={{ fontSize: 13, color: 'var(--on-surface-dim)', lineHeight: 1.6 }}>
                  {e.mechanism}
                </div>
                <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-start' }}>
                  <span className="mono" style={{
                    fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
                    color: toneColor(e.statusTone),
                    padding: '6px 10px',
                    border: `1px solid ${e.statusTone === 'pending' ? 'var(--ghost-strong)' : 'var(--outline-variant)'}`,
                    borderRadius: 2,
                    whiteSpace: 'nowrap',
                  }}>
                    {e.status}
                  </span>
                </div>
              </article>
            </Reveal>
          ))}
        </div>

        <Reveal delay={400}>
          <div style={{ marginTop: 48, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 }}>
            <p className="body-sm" style={{ margin: 0, color: 'var(--on-surface-dim)', maxWidth: 560 }}>
              Marktanalysen des Gründers öffentlich auf TradingView unter @Phillipklh.
            </p>
            <a href="#contact" className="btn btn-tertiary">
              Vollständige Benchmark-Notiz anfragen <span className="arrow">→</span>
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { VizSection, TrackRecord });