// Founder Page
function FounderPage() {
  const [t, setTweak] = window.useTweaks(window.SHARED_DEFAULTS);
  const theme = window.useTheme(t);
  const { c, orange, glow, pad, fonts } = theme;

  const journey = [
    { y: '1985', l: 'Irak', t: 'Geboren', d: 'Sohn eines irakischen muslimischen Vaters und einer deutschen christlichen Mutter.' },
    { y: '1991', l: 'Irak → DE', t: 'Glaubensentscheidung', d: 'Mit sechs Jahren entschieden, Jesus zu folgen.' },
    { y: '2005', l: 'Deutschland', t: 'Erster Dienst', d: 'Beginn der hauptamtlichen Jugendarbeit. 14 Jahre intensiver Gemeindearbeit.' },
    { y: '2019', l: 'Singapur', t: 'HOGC Internship', d: 'Bei Heart of God Church — DNA-Mindset gelernt, gelebt, multipliziert.' },
    { y: '2022', l: 'Thailand', t: 'Max Ministry', d: 'Gründung von Max Ministry. Wirken von Bangkok aus, Reichweite Asien-weit.' },
    { y: 'Heute', l: 'Asien', t: 'Multiplikation', d: 'Vier Bereiche, hunderte Leiter, eine Mission: Reich Gottes auf 100% Potenzial.' },
  ];

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

      {/* HERO with portrait */}
      <section style={{ padding: '120px 56px 80px', position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse at 70% 30%, ${glow}, transparent 50%)` }} />
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 480px', gap: 96, alignItems: 'center', position: 'relative' }}>
          <div>
            <div className="vc-eyebrow-line" style={{ color: orange, marginBottom: 32 }}>
              <span className="vc-eyebrow">Founder · Pastor · Coach</span>
            </div>
            <h1 className="vc-display" style={{ fontSize: 156, lineHeight: 0.88, margin: 0, letterSpacing: '-0.04em' }}>
              Basim<br /><span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 300 }}>Al-Safau.</span>
            </h1>
            <p className="vc-serif" style={{ fontSize: 26, lineHeight: 1.4, color: c.muted, marginTop: 32, fontStyle: 'italic', fontWeight: 300, maxWidth: 540 }}>
              Vom Irak nach Deutschland. Von Singapur nach Thailand. Eine Geschichte über Multiplikation.
            </p>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{ borderRadius: 24, overflow: 'hidden', boxShadow: `0 0 80px ${glow}` }}>
              <img src="assets/founder-portrait.jpg" alt="Basim Al-Safau" style={{ width: '100%', display: 'block', filter: 'contrast(1.05) saturate(0.9)' }} />
            </div>
            <div className="vc-glass" style={{ position: 'absolute', bottom: -16, left: -16, padding: '12px 20px', borderRadius: 999, fontSize: 11, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.18em', textTransform: 'uppercase' }}>
              <span style={{ color: orange }}>●</span> Chiang Mai · 2026
            </div>
          </div>
        </div>
      </section>

      {/* QUOTE */}
      <section style={{ padding: `${pad(80)}px 56px`, background: c.bgAlt }}>
        <div className="vc-fade" style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontSize: 80, color: orange, fontFamily: fonts.serif, lineHeight: 0.5, marginBottom: 24 }}>"</div>
          <p className="vc-serif" style={{ fontSize: 44, lineHeight: 1.3, fontWeight: 300, fontStyle: 'italic', margin: 0 }}>
            Leadership beginnt nicht mit einem Titel — es beginnt mit einer<br />Entscheidung: <em style={{ color: orange }}>Ich will für andere da sein.</em>
          </p>
        </div>
      </section>

      {/* JOURNEY TIMELINE */}
      <section style={{ padding: `${pad(120)}px 56px` }}>
        <div className="vc-fade" style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div className="vc-eyebrow-line" style={{ color: orange, marginBottom: 24 }}>
            <span className="vc-eyebrow">Werdegang</span>
          </div>
          <h2 className="vc-display" style={{ fontSize: 80, lineHeight: 0.95, margin: '0 0 80px' }}>
            Eine <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>Reise</span> in vier Ländern.
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {journey.map((j, i) => (
              <div key={j.y + j.t} style={{ display: 'grid', gridTemplateColumns: '120px 200px 1fr', gap: 32, padding: '32px 0', borderTop: i === 0 ? `1px solid ${c.line}` : 'none', borderBottom: `1px solid ${c.line}`, alignItems: 'baseline', position: 'relative' }}>
                <div className="vc-serif" style={{ fontSize: 48, fontStyle: 'italic', color: orange, fontWeight: 300, lineHeight: 1 }}>{j.y}</div>
                <div>
                  <div className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.18em', marginBottom: 4 }}>{j.l.toUpperCase()}</div>
                  <h3 className="vc-display" style={{ fontSize: 32, margin: 0 }}>{j.t}</h3>
                </div>
                <p style={{ fontSize: 16, color: c.muted, lineHeight: 1.65, margin: 0, maxWidth: 560 }}>{j.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: `${pad(120)}px 56px`, position: 'relative' }}>
        <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: 80, lineHeight: 0.92, margin: '0 0 32px' }}>
            Sprich mit <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>Basim.</span>
          </h2>
          <a href="Kontakt.html" className="vc-btn-p" style={{ textDecoration: 'none' }}>Termin anfragen →</a>
        </div>
      </section>

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