// 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 [, , tl] = window.useLang();

  const pillars = [
    { tag: 'P', title: 'Principles', desc: tl('Die Grundlagen — biblisch fundiert, kulturell relevant. Hier beginnt jede Multiplikation.', 'The foundations — biblically grounded, culturally relevant. Where every multiplication begins.'), items: [tl('Identität in Christus', 'Identity in Christ'), tl('Mission & Berufung', 'Mission & Calling'), tl('Entdecke deine Gaben', 'Explore your gifts')] },
    { tag: 'S', title: 'Skills', desc: tl('Praktische Fähigkeiten für moderne Leiter — Kommunikation, Coaching, Konfliktlösung.', 'Practical skills for modern leaders — communication, coaching, conflict resolution.'), items: [tl('Public Speaking', 'Public Speaking'), tl('Team Dynamics', 'Team Dynamics'), tl('Selbstorganisation im Management', 'Self-organization in management')] },
    { tag: 'S', title: 'Strategies', desc: tl('Methoden, die wirklich funktionieren — getestet, verfeinert, multipliziert.', 'Methods that actually work — tested, refined, multiplied.'), items: ['Harvest Circle', 'Pipeline Building', 'Ministry Multiplication'] },
    { tag: 'S', title: 'Systems', desc: tl('Strukturen, die skalieren — Prozesse, die Menschen befähigen statt einengen.', 'Structures that scale — processes that empower people rather than constrain them.'), items: ['Operations', 'Discipleship Tracks', 'Leadership Development'] },
  ];

  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={tl('Booster für Bibelschüler — Principles, Skills, Strategies, Systems. Vier Säulen, flexible Programme von einer oder zwei Wochen, ein Ziel: maximale Multiplikation.', 'Booster for Bible school students — Principles, Skills, Strategies, Systems. Four pillars, flexible one- or two-week programmes, one goal: maximum multiplication.')}
        meta={[{ k: tl('Bereich', 'Area'), v: 'Training' }, { k: 'Format', v: tl('1–2 Wochen', '1–2 Weeks') }, { k: tl('Sprache', 'Language'), v: 'DE / EN' }]}
      />

      {/* INTRO */}
      <section style={{ padding: `${pad(56)}px 56px 0` }}>
        <div className="vc-fade" style={{ maxWidth: 900, margin: '0 auto' }}>
          <p className="vc-serif" style={{ fontSize: 18, lineHeight: 1.7, color: c.muted, margin: 0 }}>
            {tl(
              'Unser PS3-Training ist der ultimative Booster für Bibelschüler in den letzten Monaten vor dem Abschluss. Wir liefern eine hochpraktische „Toolbox“, die auf die reale Welt vorbereitet — mit flexiblen Formaten von einer intensiven Woche bis zu einer zweiwöchigen Deep-Dive-Phase. Mit Fokus auf Systeme und Strategien kurz vor dem Start in den Dienst schaffen wir eine gesunde Grundlage, um eine starke und relevante Gemeinde aufzubauen — ohne Abkürzungen beim Erfolg, mit messbarer Wirkung von Tag eins.',
              'Our PS3 training is the ultimate booster for Bible school students in their final months before graduation. We provide a highly practical toolbox that prepares them for the real world, with flexible programmes from a one-week intensive to a two-week deep dive. By focusing on systems and strategies right before they begin ministry, we help them build a healthy foundation for a strong, relevant church—without shortcuts to success—and achieve real results from day one.'
            )}
          </p>
        </div>
      </section>

      {/* 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 }}>
              {tl('Vier', 'Four')} <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>{tl('Säulen.', 'Pillars.')}</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>

      {/* 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' }}>
            {tl('Bereit zu', 'Ready to')} <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>{tl('multiplizieren?', 'multiply?')}</span>
          </h2>
          <p className="vc-serif" style={{ fontSize: 18, color: c.muted, maxWidth: 560, margin: '0 auto 32px', lineHeight: 1.65 }}>
            {tl(
              'PS3 läuft als ein- oder zweiwöchiges Programm. Erzähl uns von deiner Bibelschule oder deinem Team — wir finden das passende Format mit dir.',
              'PS3 runs as a one- or two-week programme. Tell us about your Bible school or team—we will work with you to find the right format.'
            )}
          </p>
          <a href="Kontakt.html" className="vc-btn-p" style={{ textDecoration: 'none' }}>{tl('PS3 anfragen', 'Inquire about PS3')} →</a>
        </div>
      </section>

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