// PS3 Academy page
function PS3Page() {
  const [t, setTweak] = window.useTweaks(window.SHARED_DEFAULTS);
  const theme = window.useTheme(t);
  const { c, orange, glow, pad } = theme;

  const pillars = [
    { tag: 'P', title: 'Principles', desc: 'Die Grundlagen — biblisch fundiert, kulturell relevant. Hier beginnt jede Multiplikation.', items: ['Identität in Christus', 'Mission & Berufung', 'Charakter vor Gabe'] },
    { tag: 'S', title: 'Skills', desc: 'Praktische Fähigkeiten für moderne Leiter — Kommunikation, Coaching, Konfliktlösung.', items: ['Public Speaking', 'Mentoring', 'Team Dynamics'] },
    { tag: 'S', title: 'Strategies', desc: 'Methoden, die wirklich funktionieren — getestet, verfeinert, multipliziert.', items: ['Harvest Circle', 'Pipeline Building', 'Ministry Multiplication'] },
    { tag: 'S', title: 'Systems', desc: 'Strukturen, die skalieren — Prozesse, die Menschen befähigen statt einengen.', items: ['Operations', 'Discipleship Tracks', 'Leadership Development'] },
  ];
  const tracks = [
    { len: '1 Woche', title: 'Booster Week', desc: 'Kompakter Intensiv-Sprint für Bibelschüler. Fokus auf Principles und ersten Skills.', price: 'On request' },
    { len: '2 Wochen', title: 'Core Track', desc: 'Tiefer Einstieg in alle vier Säulen. Praxisprojekte und 1:1 Coaching inklusive.', price: 'On request' },
    { len: '4 Wochen', title: 'Deep Dive', desc: 'Komplette Ausbildung mit Praktikumsphase. Wer wirklich multiplizieren will.', price: 'On request' },
  ];

  return (
    <div className="vc-root">
      <window.ThemeStyles theme={theme} />
      <window.Cursor />
      <window.ScrollReveal />
      <window.NavBar active="PS3" theme={theme} dark={t.darkMode} setDark={(v) => setTweak('darkMode', v)} />

      <window.PageHero
        theme={theme}
        eyebrow="01 / 04 · Academy & Curriculum"
        title="PS3"
        titleAccent="Academy."
        subtitle="Booster für Bibelschüler — Principles, Skills, Strategies, Systems. Vier Säulen, drei Track-Längen, ein Ziel: maximale Multiplikation."
        meta={[{ k: 'Bereich', v: 'Training' }, { k: 'Format', v: '1–4 Wochen' }, { k: 'Sprache', v: 'DE / EN' }]}
      />

      {/* PILLARS */}
      <section style={{ padding: `${pad(120)}px 56px` }}>
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64 }}>
            <h2 className="vc-display" style={{ fontSize: 80, lineHeight: 0.95, margin: 0 }}>
              Vier <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>Säulen.</span>
            </h2>
            <span className="vc-mono" style={{ fontSize: 12, color: c.muted, letterSpacing: '0.2em' }}>P · S · S · S</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
            {pillars.map((p, i) => (
              <div key={p.title} className="vc-glass vc-card-hover" style={{ padding: 40, position: 'relative', overflow: 'hidden' }}>
                <div className="vc-display" style={{ position: 'absolute', top: -20, right: 24, fontSize: 200, color: orange, opacity: 0.12, lineHeight: 1, fontWeight: 800 }}>{p.tag}</div>
                <div className="vc-mono" style={{ fontSize: 11, color: orange, letterSpacing: '0.2em', marginBottom: 16 }}>0{i + 1} / 04</div>
                <h3 className="vc-display" style={{ fontSize: 56, margin: '0 0 16px' }}>{p.title}</h3>
                <p className="vc-serif" style={{ fontSize: 16, lineHeight: 1.6, color: c.muted, margin: '0 0 24px', maxWidth: 440 }}>{p.desc}</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {p.items.map((x) => (
                    <div key={x} style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 10, borderTop: `1px solid ${c.line}` }}>
                      <span style={{ color: orange }}>+</span>
                      <span style={{ fontSize: 14 }}>{x}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TRACKS */}
      <section style={{ padding: `${pad(120)}px 56px`, background: c.bgAlt }}>
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="vc-eyebrow-line" style={{ color: orange, marginBottom: 24 }}>
            <span className="vc-eyebrow">Wähle deinen Track</span>
          </div>
          <h2 className="vc-display" style={{ fontSize: 72, lineHeight: 0.95, margin: '0 0 64px' }}>
            Drei <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>Wege.</span> Eine Vision.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {tracks.map((tr, i) => (
              <div key={tr.title} className="vc-glass vc-card-hover" style={{ padding: 40, display: 'flex', flexDirection: 'column', gap: 24, ...(i === 1 ? { borderColor: orange, transform: 'translateY(-12px)' } : {}) }}>
                {i === 1 && <span className="vc-mono" style={{ fontSize: 10, color: orange, letterSpacing: '0.2em', alignSelf: 'flex-start', padding: '4px 12px', border: `1px solid ${orange}`, borderRadius: 999 }}>EMPFOHLEN</span>}
                <div className="vc-serif" style={{ fontSize: 56, fontStyle: 'italic', color: orange, fontWeight: 400, lineHeight: 1 }}>{tr.len}</div>
                <h3 className="vc-display" style={{ fontSize: 36, margin: 0 }}>{tr.title}</h3>
                <p style={{ fontSize: 14, color: c.muted, lineHeight: 1.65, margin: 0 }}>{tr.desc}</p>
                <div className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em', marginTop: 'auto', paddingTop: 16, borderTop: `1px solid ${c.line}` }}>{tr.price}</div>
                <a href="Kontakt.html" className="vc-btn-g" style={{ justifyContent: 'center', textDecoration: 'none' }}>Anfragen →</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: `${pad(120)}px 56px`, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 50% 50%, ${glow}, transparent 60%)` }} />
        <div className="vc-fade" style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
          <h2 className="vc-display" style={{ fontSize: 96, lineHeight: 0.92, margin: '0 0 32px' }}>
            Bereit zu <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>multiplizieren?</span>
          </h2>
          <p className="vc-serif" style={{ fontSize: 18, color: c.muted, maxWidth: 540, margin: '0 auto 32px' }}>Erzähl uns von deiner Bibelschule oder deinem Team — wir finden den passenden Track.</p>
          <a href="Kontakt.html" className="vc-btn-p" style={{ textDecoration: 'none' }}>PS3 anfragen →</a>
        </div>
      </section>

      <window.Footer theme={theme} />
      <window.Tweaks t={t} setTweak={setTweak} />
    </div>
  );
}
window.PS3Page = PS3Page;