/* Methodology (GeoStrat), Reports catalog, Manifesto */

function SectionHeader({ kicker, num, title, intro }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 24, marginBottom: 80, alignItems: 'end' }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 32 }}>
          <span className="label">{kicker}</span>
          <span className="label" style={{ color: 'var(--on-surface-quiet)' }}>/ {num}</span>
        </div>
        <h2 className="display-md" style={{ margin: 0, color: 'var(--primary)' }}>{title}</h2>
      </div>
      <div>
        {intro && <p className="body" style={{ fontSize: 17, lineHeight: 1.55, maxWidth: 540, margin: 0 }}>{intro}</p>}
      </div>
    </div>
  );
}

/* ---------- Methodology · GeoStrat Framework ---------- */
function Methodology() {
  const frames = [
    {
      tag: '01',
      name: 'Makrostrukturelle Zyklen',
      body: 'Schuldenzyklen, Machtübergänge, Regimewechsel. Innere und äußere Ordnung. Kapitalflüsse. Die Grundlage für jede langfristige makrostrukturelle Einschätzung.',
      bullets: ['Schulden- und Reservewährungszyklus', 'Innere Ordnung · politische Stabilität', 'Externe Ordnung · Machtbalance'],
    },
    {
      tag: '02',
      name: 'Zwangslagen-Geopolitik',
      body: 'Strukturelle Zwangslagen statt Akteurspsychologie. Material-basierte Analyse: was Akteure tatsächlich tun können — nicht, was sie sagen.',
      bullets: ['Strukturelle Zwänge als Ausgangspunkt', 'Akteur-Material-Matrix', 'Rhetorik klar von Handlungsspielraum getrennt'],
    },
  ];
  return (
    <section id="methodology" className="section" style={{ background: 'var(--surface-low)' }}>
      <div className="container">
        <SectionHeader
          kicker="Methodik"
          num="02"
          title={<>Zwei Frameworks.<br /><span style={{ color: 'var(--on-surface-variant)' }}>Ein Prozess.</span></>}
          intro="Das GeoStrat-Framework verbindet zwei etablierte Analysetraditionen: die makrostrukturelle Tiefe langfristiger Schulden- und Machtzyklen mit der analytischen Härte einer zwangslagenbasierten Geopolitik. Unsere eigene IP liegt in der Verknüpfung, der Operationalisierung und der Übersetzung in Portfolio-Entscheidungen."
        />

        {/* Two framework cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: 'var(--ghost-strong)' }}>
          {frames.map((f, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{ background: 'var(--surface-low)', padding: '48px 44px 44px', minHeight: 340 }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--on-surface-quiet)', textTransform: 'uppercase' }}>
                  /{f.tag} &nbsp; Analysetradition
                </div>
                <h3 className="headline" style={{ marginTop: 28, marginBottom: 20, fontSize: 30, letterSpacing: '-0.02em', fontWeight: 500 }}>
                  {f.name}
                </h3>
                <p className="body" style={{ maxWidth: 460, marginBottom: 32 }}>{f.body}</p>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {f.bullets.map((b, bi) => (
                    <li key={bi} className="mono" style={{ fontSize: 12, color: 'var(--on-surface-dim)', letterSpacing: '0.02em' }}>
                      — {b}
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>

        {/* The combination — one wide tonal slab below */}
        <Reveal delay={200}>
          <div style={{ background: 'var(--surface-highest)', padding: '56px 56px 52px', marginTop: 1, position: 'relative' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 48, alignItems: 'start' }}>
              <div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--on-surface-dim)', textTransform: 'uppercase', marginBottom: 14 }}>
                  /03 &nbsp; Kombination
                </div>
                <h3 className="display-sm" style={{ margin: 0, fontSize: 'clamp(28px, 3vw, 40px)', letterSpacing: '-0.025em', lineHeight: 1.08, fontWeight: 500, color: 'var(--primary)' }}>
                  GeoStrat
                </h3>
              </div>
              <div>
                <p className="body" style={{ fontSize: 16, lineHeight: 1.6, maxWidth: 560, margin: 0 }}>
                  Unser Beitrag liegt in der Ontologie, der Multi-Agenten-Simulation strukturierter Entscheidungsräume — War Room, Zentralbankmeeting, Politbüro — und der konsequenten Übersetzung in Marktimplikationen für Vermögensverwalter, Family Offices und Privatanleger.
                </p>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, marginTop: 36 }}>
                  {[
                    ['Multi-Agenten-Simulation', 'Planner · Section · Orchestrator · Production. Strukturierte Entscheidungen, keine Social-Media-Simulation.'],
                    ['Knowledge Graph',         'Graphiti + FalkorDB. Persistentes Weltbild und Kontextgedächtnis aus Primärquellen.'],
                    ['Falsifizierbarkeit',      'Explizite Wahrscheinlichkeiten. Blind-Prediction-Benchmarks mit hartem Datums-Cutoff.'],
                  ].map(([t, b], i) => (
                    <div key={i}>
                      <div className="label" style={{ color: 'var(--on-surface)', marginBottom: 12 }}>{t}</div>
                      <div className="body-sm" style={{ fontSize: 12, color: 'var(--on-surface-dim)', lineHeight: 1.55 }}>{b}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Reports catalog ---------- */
function Reports() {
  const reports = [
    {
      n: '01',
      name: 'Makro-Regime',
      tag: 'Jährlich',
      summary: 'Makrostruktureller Großzyklus. Übergeordnetes Regimebild. Position im Schulden- und Machtzyklus.',
      output: 'Executive Summary · Regime-Karte · Anlegerbrief',
    },
    {
      n: '02',
      name: 'Geo-Reports',
      tag: 'On-Demand',
      summary: 'Länder-, Regions- und Bündnisanalysen. Strukturelle Zwänge, Machtbalance, Eskalationsraum.',
      output: 'Akteur-Zwangslagen-Matrix · Szenarienbaum · Marktimplikationen',
    },
    {
      n: '03',
      name: 'Konflikt-Reports',
      tag: 'Premium · Zeitkritisch',
      summary: 'Eskalationsszenarien mit höchster Simulationstiefe. Aktuelle Schwerpunkte: Russland-Ukraine, Iran-Israel-USA, Taiwan-Strait.',
      output: 'War-Room-Simulation · Szenarien mit Wahrscheinlichkeiten · Tail-Risk-Bewertung',
    },
    {
      n: '04',
      name: 'Infrastruktur & Lieferketten',
      tag: 'Demnächst',
      summary: 'Handelsrouten, Engpässe, strukturelle Risiken. Direkte Industrieanwendung — von Halbleitern bis Energie.',
      output: 'Engpasskarte · Substitutionsanalyse · Anlegerbrief',
      soon: true,
    },
    {
      n: '05',
      name: 'Asset-Reports',
      tag: 'Demnächst',
      summary: 'Assetklassen-Implikationen. Trade-Ideen mit explizitem Mechanismus, nicht Heuristik.',
      output: 'Konsensabweichung · Trade-Logik · Trigger und Stops',
      soon: true,
    },
  ];

  return (
    <section id="reports" className="section">
      <div className="container">
        <SectionHeader
          kicker="Reports"
          num="03"
          title={<>Fünf Kategorien.<br /><span style={{ color: 'var(--on-surface-variant)' }}>Ein Berichtsformat.</span></>}
          intro="Jeder Report folgt derselben Struktur: Executive Summary, Akteur-Zwangslagen-Matrix, Szenarienbaum mit Wahrscheinlichkeiten, Konsensabweichung mit Mechanismus, Marktimplikationen. Auf Wunsch im White-Label-Format."
        />

        <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: 'var(--ghost-strong)' }}>
          {reports.map((r, i) => (
            <Reveal key={r.n} delay={i * 60}>
              <article
                style={{
                  background: 'var(--surface)', padding: '36px 40px',
                  display: 'grid', gridTemplateColumns: '0.7fr 3fr 5fr 3fr', gap: 32, alignItems: 'center',
                  transition: 'background 200ms ease', cursor: 'default',
                  opacity: r.soon ? 0.5 : 1,
                }}
                onMouseEnter={(e) => e.currentTarget.style.background = 'var(--surface-low)'}
                onMouseLeave={(e) => e.currentTarget.style.background = 'var(--surface)'}
              >
                <div className="display-sm tnum" style={{ fontSize: 36, lineHeight: 1, letterSpacing: '-0.03em', color: 'var(--on-surface-quiet)' }}>
                  {r.n}
                </div>
                <div>
                  <h3 className="title" style={{ margin: 0, fontSize: 22, letterSpacing: '-0.015em', fontWeight: 500, color: r.soon ? 'var(--on-surface-variant)' : 'var(--primary)' }}>
                    {r.name}
                  </h3>
                  <div className="mono" style={{ fontSize: 10, marginTop: 8, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--on-surface-dim)' }}>
                    {r.tag}
                  </div>
                </div>
                <p className="body-sm" style={{ margin: 0, fontSize: 14, color: 'var(--on-surface-variant)', lineHeight: 1.55 }}>
                  {r.summary}
                </p>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.04em', color: 'var(--on-surface-dim)', lineHeight: 1.6 }}>
                  {r.output}
                </div>
              </article>
            </Reveal>
          ))}
        </div>

        {/* Footer note — addresses pricing without prices */}
        <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: 540 }}>
              Reports werden einzeln bestellt oder im Rahmen einer laufenden Plattformbeziehung bezogen. Konditionen auf Anfrage — wir besprechen sie im ersten Gespräch.
            </p>
            <a href="#contact" className="btn btn-secondary">
              Konditionen anfragen <span className="arrow">→</span>
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Manifesto ---------- */
function Manifesto() {
  return (
    <section className="section-tight" style={{ background: 'var(--surface-low)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 10fr', gap: 24, alignItems: 'start' }}>
          <div className="label">Eine Haltung</div>
          <div>
            <p className="display-sm" style={{ margin: 0, color: 'var(--on-surface)', fontWeight: 500, letterSpacing: '-0.025em', fontSize: 'clamp(28px, 3.2vw, 44px)', lineHeight: 1.18, textWrap: 'pretty' }}>
              <span style={{ color: 'var(--on-surface-dim)' }}>„You can't see the forest for the trees."</span> Die geopolitische Analyselandschaft erstickt an Detailbeobachtung ohne strukturelles Gerüst. Wir liefern nicht die nächste Beobachtung. Wir zeichnen die Karte.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 40 }}>
              <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--surface-high)', flex: '0 0 36px' }} />
              <div>
                <div style={{ fontSize: 13, color: 'var(--on-surface)' }}>Phillip Kölsche</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--on-surface-dim)', letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 4 }}>
                  Gründer, RICS Analytics
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionHeader, Methodology, Reports, Manifesto });