// Variant C — Cinematic Premium · Full Homepage with Tweaks
// Sections: Hero · Marquee · Mission · MAX Meaning · Areas (PS3, HOGC, United, YMC-D)
//           HOGC Iceberg · Founder · YouTube CTA · Final CTA · Footer

const { useState, useEffect, useRef } = React;

const FONT_OPTIONS = {
  bricolage: { display: "'Bricolage Grotesque', sans-serif", serif: "'Fraunces', serif", body: "'Inter', sans-serif" },
  spaceGrotesk: { display: "'Space Grotesk', sans-serif", serif: "'Fraunces', serif", body: "'Inter', sans-serif" },
  interTight: { display: "'Inter Tight', sans-serif", serif: "'Fraunces', serif", body: "'Inter', sans-serif" },
};

const HOMEPAGE_DEFAULTS = /*EDITMODE-BEGIN*/{
  "orange": "#EA6A1F",
  "darkMode": true,
  "fontPreset": "bricolage",
  "density": "regular",
  "heroVariant": "cinematic"
}/*EDITMODE-END*/;

function adjustColor(hex, amount) {
  if (typeof hex !== 'string' || !/^#[0-9A-Fa-f]{6}$/.test(hex)) return '#EA6A1F';
  const m = hex.replace('#', '');
  const num = parseInt(m, 16);
  if (Number.isNaN(num)) return '#EA6A1F';
  let r = (num >> 16) + amount;
  let g = ((num >> 8) & 0xff) + amount;
  let b = (num & 0xff) + amount;
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));
  return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
}

function VariantCFull() {
  const [t, setTweak] = window.useTweaks(HOMEPAGE_DEFAULTS);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [lang, setLang, tl] = window.useLang();
  const orange = (typeof t.orange === 'string' && /^#[0-9A-Fa-f]{6}$/.test(t.orange)) ? t.orange : '#EA6A1F';
  const orangeBright = adjustColor(orange, 20);
  const fonts = FONT_OPTIONS[t.fontPreset] || FONT_OPTIONS.bricolage;
  const dark = t.darkMode;

  const c = dark ? {
    bg: '#0A0908', bgAlt: '#13110F', fg: '#F5F2EC', muted: '#9A958A', line: '#26211C',
    glassBg: 'rgba(255,255,255,0.03)', glassBd: '#26211C',
  } : {
    bg: '#FAF8F3', bgAlt: '#F1ECE0', fg: '#171411', muted: '#6E6859', line: '#DDD5C4',
    glassBg: 'rgba(255,255,255,0.6)', glassBd: '#DDD5C4',
  };
  const glow = `${orange}33`;
  const dens = t.density === 'compact' ? 0.75 : t.density === 'comfy' ? 1.2 : 1;
  const pad = (px) => Math.round(px * dens);
  const navLinks = [
    { l: 'Home', href: '/' },
    { l: 'PS3', href: 'PS3.html' },
    { l: 'HOGC DNA', href: 'HOGC DNA.html' },
    { l: 'United', href: 'United.html' },
    { l: 'YMC-D', href: 'YMC-D.html' },
  ];

  // Cursor effect
  const cursorRef = useRef(null);
  useEffect(() => {
    const el = cursorRef.current;
    if (!el) return;
    const move = (e) => { el.style.transform = `translate(${e.clientX - 12}px, ${e.clientY - 12}px)`; };
    window.addEventListener('mousemove', move);
    return () => window.removeEventListener('mousemove', move);
  }, []);

  const styles = `
    .vc-root { background: ${c.bg}; color: ${c.fg}; font-family: ${fonts.body}; min-height: 100%; transition: background .4s, color .4s; }
    .vc-display { font-family: ${fonts.display}; letter-spacing: -0.03em; font-weight: 700; }
    .vc-serif { font-family: ${fonts.serif}; }
    .vc-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .vc-eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600; }
    .vc-eyebrow-line { display: inline-flex; align-items: center; gap: 14px; }
    .vc-eyebrow-line::before { content: ''; width: 32px; height: 1px; background: ${orange}; }
    .vc-btn-p { background: ${orange}; color: #fff; padding: 16px 32px; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border: none; cursor: none; transition: all .25s; display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; font-family: ${fonts.body}; }
    .vc-btn-p:hover { background: ${orangeBright}; box-shadow: 0 12px 32px ${glow}; transform: translateY(-2px); }
    .vc-btn-g { background: ${c.glassBg}; color: ${c.fg}; padding: 16px 32px; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid ${c.line}; cursor: none; transition: all .25s; display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; backdrop-filter: blur(12px); font-family: ${fonts.body}; }
    .vc-btn-g:hover { border-color: ${orange}; color: ${orange}; }
    .vc-glass { background: ${c.glassBg}; border: 1px solid ${c.line}; backdrop-filter: blur(20px); border-radius: 24px; transition: all .35s; }
    .vc-card-hover:hover { border-color: ${orange}; transform: translateY(-4px); box-shadow: 0 20px 40px ${glow}; }
    .vc-shimmer { background: linear-gradient(135deg, ${c.fg} 0%, ${c.fg} 40%, ${orange} 50%, ${c.fg} 60%, ${c.fg} 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: vc-sh 8s ease-in-out infinite; }
    @keyframes vc-sh { 0%,100% { background-position: 200% 0 } 50% { background-position: -200% 0 } }
    .vc-marquee { animation: vc-mq 30s linear infinite; }
    @keyframes vc-mq { from { transform: translateX(0) } to { transform: translateX(-50%) } }
    .vc-fade { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
    .vc-fade.in { opacity: 1; transform: translateY(0); }
    a, button { cursor: none; }
    body { cursor: none; }
    .vc-cursor { position: fixed; top:0; left:0; width: 24px; height: 24px; border: 1px solid ${orange}; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; transition: width .2s, height .2s; }
    .vc-cursor::after { content:''; position:absolute; inset: 9px; background: ${orange}; border-radius: 50%; }
    .vc-nav-link { position: relative; transition: color .2s ease; }
    .vc-nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: ${orange}; transform: scaleX(0); transform-origin: center; transition: transform .25s ease; }
    .vc-nav-link:hover { color: ${orange} !important; }
    .vc-nav-link:hover::after { transform: scaleX(1); }
    .vc-nav-link.is-active::after { transform: scaleX(1); }
    .vc-footer-link { cursor: pointer !important; transition: color .2s ease, text-decoration-color .2s ease, transform .2s ease; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
    .vc-footer-link:hover { color: ${orange} !important; text-decoration-color: ${orange}; transform: translateX(3px); }

    /* RESPONSIVE */
    @media (max-width: 1024px) {
      .vc-root section { padding-left: 32px !important; padding-right: 32px !important; }
      .vc-root h1, .vc-root h2 { font-size: clamp(40px, 8vw, 96px) !important; line-height: 0.95 !important; }
      .vc-root h3 { font-size: clamp(28px, 5vw, 56px) !important; }
      .vc-root [style*="grid-template-columns: 1fr 1fr"],
      .vc-root [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
      .vc-root [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
      .vc-root [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
      .vc-root [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
      .vc-root header { padding: 0 16px !important; }
      .vc-root header > div { padding: 10px 16px !important; gap: 12px !important; }
      .vc-root nav { display: none !important; }
      .vc-root .vc-glass[style*="padding: 48"] { padding: 32px !important; }
      .vc-cursor { display: none !important; }
      a, button, body { cursor: auto !important; }
      .vc-hide-mobile { display: none !important; }
      .vc-mobile-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
      .vc-home-hero { min-height: auto !important; align-items: flex-start !important; }
      .vc-home-hero-inner { padding: 96px 32px 72px !important; }
      .vc-home-hero-title { font-size: clamp(96px, 18vw, 150px) !important; line-height: 0.82 !important; }
      .vc-home-hero-subtitle { display: block !important; font-size: clamp(56px, 10vw, 92px) !important; line-height: 0.95 !important; margin-top: 8px !important; }
      .vc-home-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; margin-top: 42px !important; }
      .vc-home-hero-copy { font-size: 22px !important; max-width: 720px !important; }
      .vc-home-hero-actions { flex-wrap: wrap !important; margin-bottom: 24px !important; }
      .vc-home-hero-stats { max-width: 520px !important; }
      .vc-founder-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
      .vc-founder-image-col { max-width: 420px !important; }
      .vc-founder-title { font-size: clamp(56px, 10vw, 88px) !important; }
      .vc-founder-quote { font-size: 24px !important; }
    }
    @media (max-width: 640px) {
      .vc-root section { padding-left: 20px !important; padding-right: 20px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
      .vc-root h1 { font-size: clamp(48px, 14vw, 80px) !important; }
      .vc-root h2 { font-size: clamp(36px, 9vw, 56px) !important; }
      .vc-root h3 { font-size: clamp(24px, 6vw, 36px) !important; }
      .vc-root [style*="grid-template-columns: repeat(3"],
      .vc-root [style*="grid-template-columns: repeat(4"],
      .vc-root [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
      .vc-root .vc-glass { padding: 20px !important; border-radius: 16px !important; }
      .vc-root .vc-btn-p, .vc-root .vc-btn-g { padding: 12px 20px !important; font-size: 11px !important; }
      .vc-root footer { padding: 32px 20px !important; }
      .vc-root footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
      .vc-root footer [style*="justify-content: space-between"] { flex-direction: column; gap: 8px; align-items: flex-start; }
      .vc-home-hero { min-height: 100svh !important; }
      .vc-home-hero-bg { opacity: 0.38 !important; object-position: 58% center !important; }
      .vc-home-hero-inner { padding: 88px 20px 56px !important; }
      .vc-home-hero-kicker { margin-bottom: 20px !important; }
      .vc-home-hero-kicker::before { width: 24px !important; }
      .vc-home-hero-title { font-size: clamp(66px, 22vw, 92px) !important; line-height: 0.84 !important; letter-spacing: -0.04em !important; }
      .vc-home-hero-subtitle { font-size: clamp(38px, 12vw, 54px) !important; line-height: 0.98 !important; margin-top: 6px !important; }
      .vc-home-hero-grid { margin-top: 30px !important; gap: 24px !important; }
      .vc-home-hero-copy { font-size: 18px !important; line-height: 1.42 !important; }
      .vc-home-hero-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-bottom: 20px !important; }
      .vc-home-hero-actions .vc-btn-p, .vc-home-hero-actions .vc-btn-g { justify-content: center !important; width: 100% !important; }
      .vc-home-hero-stats { padding: 16px 10px !important; }
      .vc-home-hero-stat { padding: 0 8px !important; }
      .vc-home-hero-stat-value { font-size: 26px !important; }
      .vc-home-hero-stat-label { font-size: 9px !important; letter-spacing: 0.08em !important; }
      .vc-founder-section { padding-top: 72px !important; padding-bottom: 72px !important; }
      .vc-founder-grid { gap: 32px !important; }
      .vc-founder-image-col { max-width: 100% !important; }
      .vc-founder-image { border-radius: 18px !important; box-shadow: 0 0 44px ${glow} !important; }
      .vc-founder-badge { position: static !important; margin-top: 12px !important; width: 100% !important; justify-content: center !important; border-radius: 14px !important; padding: 12px 14px !important; font-size: 10px !important; letter-spacing: 0.12em !important; }
      .vc-founder-kicker { margin-bottom: 18px !important; }
      .vc-founder-title { font-size: clamp(44px, 14vw, 64px) !important; line-height: 0.95 !important; margin-bottom: 22px !important; }
      .vc-founder-quote { font-size: 20px !important; line-height: 1.35 !important; margin-bottom: 22px !important; }
      .vc-founder-body { font-size: 15px !important; line-height: 1.65 !important; margin-bottom: 24px !important; }
      .vc-founder-path { flex-wrap: wrap !important; gap: 10px 14px !important; margin-bottom: 24px !important; font-size: 11px !important; }
      .vc-founder-link { width: 100% !important; justify-content: center !important; }
    }
  `;

  // Scroll reveal
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.vc-fade').forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  const areas = [
    { num: '01', title: 'PS3 Academy', tag: tl('Training & Curriculum', 'Training & Curriculum'), desc: tl('Booster für Bibelschüler — Principles, Skills, Strategies, Systems. 1-Wochen-Intensiv oder 2-Wochen-Deep-Dive.', 'Booster for Bible school students — Principles, Skills, Strategies, Systems. 1-week intensive or 2-week deep dive.'), meta: tl('4 Säulen · 1–2 Wochen', '4 Pillars · 1–2 Weeks'), href: 'PS3.html' },
    { num: '02', title: 'HOGC DNA', tag: tl('Church Consulting', 'Church Consulting'), desc: tl('Inspiriert von Heart of God Church Singapur. Iceberg-Prinzip — gesündere und stärkere Gemeinden wachsen lassen.', 'Inspired by Heart of God Church Singapore. Iceberg principle — grow healthier, stronger churches.'), meta: tl('Singapur · 360°', 'Singapore · 360°'), href: 'HOGC DNA.html' },
    { num: '03', title: 'United', tag: tl('Open Resources', 'Open Resources'), desc: tl('Offenes Tool für Gemeinden — Minis, Kids, Teens, Youth. Volle Autonomie, geteilte Erfahrung.', 'Open tool for churches — Minis, Kids, Teens, Youth. Full autonomy, shared experience.'), meta: tl('4 Altersgruppen · 4–21 J.', '4 Age Groups · Ages 4–21'), href: 'United.html' },
    { num: '04', title: 'YMC-D', tag: tl('Mission Internship Asia', 'Mission Internship Asia'), desc: tl('Youth · Mission · Church Developer. Ein Praktikum über neun bis zwölf Monate in Asien — mit HOGC Singapur.', 'Youth · Mission · Church Developer. A nine- to twelve-month internship across Asia — with HOGC Singapore.'), meta: tl('9–12 Monate · Asien', '9–12 Months · Asia'), href: 'YMC-D.html' },
  ];

  const partnerLinks = [
    { label: tl('Heart of God Church', 'Heart of God Church'), href: 'https://heartofgodchurch.org/' },
    { label: tl('AVC Schweiz', 'AVC Switzerland'), href: 'https://www.avc-ch.org/' },
    { label: tl('AVC Deutschland', 'AVC Germany'), href: 'https://www.avc-de.org/de/' },
    { label: tl('Schule der Erweckung', 'Schule der Erweckung'), href: 'https://www.schuledererweckung.de/' },
    { label: tl('BfP Deutschland', 'BfP Germany'), href: 'https://www.bfp.de/' },
  ];

  const icebergSections = [
    { label: tl('Über der Oberfläche', 'Above the Surface'), sub: tl('Strategie & Ergebnisse', 'Strategy & Results'), items: [[tl('Harvest Circle', 'Harvest Circle'), tl('Workshop für effektive Jahresplanung', 'Workshop for effective annual planning')], [tl('Leadership Pipeline', 'Leadership Pipeline'), tl('Junge Leiter erkennen, trainieren, befähigen', 'Identify, train and empower young leaders')], [tl('School & Youth Revival', 'School & Youth Revival'), tl('Bewegung in Schulen und Nachbarschaft starten', 'Starting a movement in schools and neighborhoods')]], top: true },
    { label: tl('Unter der Oberfläche', 'Below the Surface'), sub: tl('Mindset & Kultur', 'Mindset & Culture'), items: [[tl('DNA-Mindset', 'DNA Mindset'), tl('Denken auf wachsende Gemeinde ausrichten', 'Aligning thinking toward a growing church')], [tl('Gemeinde als Heimat', 'Church as Home'), tl('Kultur, in der Menschen wirklich ankommen', 'A culture where people truly belong')], [tl('Junge Stimmen', 'Young Voices'), tl('Echte Verantwortung von Anfang an', 'Real responsibility from the very beginning')]], top: false },
  ];

  const ageGroups = [
    { name: 'Minis', range: '4–7', desc: tl('Erste Schritte im Glauben — spielerisch und altersgerecht.', 'First steps in faith — playful and age-appropriate.') },
    { name: 'Kids', range: '8–11', desc: tl('Bibel entdecken, Charakter formen, Gemeinschaft erleben.', 'Discovering the Bible, shaping character, experiencing community.') },
    { name: 'Teens', range: '12–14', desc: tl('Identität finden, Verantwortung übernehmen, leben lernen.', 'Finding identity, taking responsibility, learning to live.') },
    { name: 'Youth', range: '15–21', desc: tl('Berufung leben, Multiplikation üben, Leiter werden.', 'Living your calling, practicing multiplication, becoming a leader.') },
  ];

  return (
    <div className="vc-root">
      <style>{styles}</style>
      <div ref={cursorRef} className="vc-cursor" />

      {/* NAV */}
      <header style={{ position: 'sticky', top: 16, zIndex: 50, padding: '0 32px' }}>
        <div className="vc-glass" style={{ maxWidth: 1280, margin: '0 auto', padding: '14px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderRadius: 999 }}>
          <a href="/" className="vc-display" style={{ fontSize: 22, display: 'flex', alignItems: 'baseline', gap: 2, textDecoration: 'none', color: c.fg }}>
            <span>MA</span><span className="vc-serif" style={{ color: orange, fontStyle: 'italic', fontSize: 28, fontWeight: 500 }}>X</span>
            <span style={{ marginLeft: 10, fontSize: 11, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.2em', textTransform: 'uppercase', color: c.muted, fontWeight: 500 }}>Ministry</span>
          </a>
          <nav style={{ display: 'flex', gap: 28, fontSize: 13 }}>
            {navLinks.map((x, i) => (
              <a key={x.l} href={x.href} className={`vc-nav-link${i === 0 ? ' is-active' : ''}`} style={{ color: i === 0 ? orange : c.muted, textDecoration: 'none', fontWeight: 500 }}>{x.l}</a>
            ))}
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <button
              onClick={() => setTweak('darkMode', !dark)}
              aria-label="Toggle theme"
              style={{
                position: 'relative',
                width: 52, height: 26, borderRadius: 999,
                background: dark ? c.bgAlt : `${orange}22`,
                border: `1px solid ${c.line}`,
                padding: 0, cursor: 'none', transition: 'all .3s',
                display: 'inline-flex', alignItems: 'center',
              }}
            >
              <span
                style={{
                  position: 'absolute',
                  left: dark ? 3 : 28,
                  top: 2,
                  width: 20, height: 20, borderRadius: '50%',
                  background: dark ? c.fg : orange,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 11, color: dark ? c.bg : '#fff',
                  transition: 'left .3s, background .3s',
                  boxShadow: dark ? 'none' : `0 0 12px ${glow}`,
                }}
              >
                {dark ? '☾' : '☀'}
              </span>
            </button>
            <button
              onClick={() => setLang(lang === 'de' ? 'en' : 'de')}
              aria-label="Toggle language"
              className="vc-mono vc-hide-mobile"
              style={{
                fontSize: 11, letterSpacing: '0.12em', background: 'none',
                border: `1px solid ${c.line}`, borderRadius: 999,
                padding: '4px 10px', cursor: 'none', transition: 'all .2s',
                fontFamily: 'inherit', color: c.muted,
              }}
              onMouseEnter={(e) => { e.currentTarget.style.color = orange; e.currentTarget.style.borderColor = orange; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = c.muted; e.currentTarget.style.borderColor = c.line; }}
            >
              {lang.toUpperCase()}
            </button>
            <a href="Kontakt.html" className="vc-btn-p vc-hide-mobile" style={{ padding: '10px 20px', fontSize: 11, textDecoration: 'none' }}>{tl('Kontakt', 'Contact')} →</a>
            <button
              onClick={() => setMobileOpen(!mobileOpen)}
              aria-label="Menu"
              className="vc-mobile-toggle"
              style={{
                display: 'none', width: 36, height: 36, borderRadius: 999,
                border: `1px solid ${c.line}`, background: 'transparent',
                color: c.fg, fontSize: 16, cursor: 'pointer', padding: 0,
              }}
            >{mobileOpen ? '✕' : '☰'}</button>
          </div>
        </div>
        {mobileOpen && (
          <div className="vc-glass" style={{ maxWidth: 1280, margin: '8px auto 0', padding: 16, borderRadius: 16, display: 'flex', flexDirection: 'column', gap: 4 }}>
            {navLinks.map((x, i) => (
              <a key={x.l} href={x.href} style={{ color: i === 0 ? orange : c.fg, textDecoration: 'none', fontWeight: 500, padding: '12px 16px', borderRadius: 12, fontSize: 16 }}>{x.l}</a>
            ))}
            <a href="Kontakt.html" style={{ color: orange, textDecoration: 'none', fontWeight: 600, padding: '12px 16px', fontSize: 16, borderTop: `1px solid ${c.line}`, marginTop: 8 }}>{tl('Kontakt', 'Contact')} →</a>
          </div>
        )}
      </header>

      {/* HERO */}
      <HeroSection variant={t.heroVariant} c={c} orange={orange} fonts={fonts} glow={glow} tl={tl} />

      {/* MARQUEE */}
      <section style={{ padding: '32px 0', borderTop: `1px solid ${c.line}`, borderBottom: `1px solid ${c.line}`, overflow: 'hidden' }}>
        <div className="vc-marquee" style={{ display: 'flex', gap: 80, whiteSpace: 'nowrap' }}>
          {[...Array(2)].flatMap((_, j) =>
            ['MAXIMIZE', 'MULTIPLI×ATION', 'NEXT GEN', 'BUILDING CHURCHES', 'EMPOWERING LEADERS', 'CHIANG MAI', 'SINGAPORE'].map((tx, i) => (
              <span key={`${j}-${i}`} className="vc-serif" style={{ fontSize: 36, fontStyle: 'italic', fontWeight: 300, color: i % 2 ? orange : c.muted }}>
                {tx} <span style={{ margin: '0 32px' }}>·</span>
              </span>
            ))
          )}
        </div>
      </section>


      {/* MISSION */}
      <section style={{ padding: `${pad(160)}px 56px`, position: 'relative' }}>
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="vc-eyebrow-line" style={{ color: orange, marginBottom: 40, justifyContent: 'center', display: 'flex' }}>
            <span className="vc-eyebrow">{tl('Unsere Mission', 'Our Mission')}</span>
          </div>
          <h2 className="vc-display" style={{ fontSize: 96, lineHeight: 0.95, textAlign: 'center', margin: '0 auto 32px', maxWidth: 1100 }}>
            {tl('Drei Bereiche.', 'Three Areas.')}<br />
            <span className="vc-serif" style={{ fontWeight: 300, fontStyle: 'italic', color: orange }}>{tl('Eine', 'One')}</span> {tl('Vision.', 'Vision.')}<br />
            {tl('Maximaler Impact.', 'Maximum Impact.')}
          </h2>
          <p className="vc-serif" style={{ textAlign: 'center', fontSize: 22, lineHeight: 1.5, color: c.muted, maxWidth: 760, margin: '0 auto', fontWeight: 400 }}>
            {tl(
              'Max Ministry vereint Academy-Ausbildung, Gemeindeberatung und Jugendarbeit zu einer ganzheitlichen Bewegung. Jeder Bereich steht für sich — gemeinsam entfalten sie ihre volle Kraft.',
              'Max Ministry unites academy training, church consulting and youth ministry into one holistic movement. Each area stands on its own — together they unfold their full power.'
            )}
          </p>
        </div>
      </section>

      {/* MAX MEANING */}
      <section style={{ padding: `${pad(120)}px 56px`, background: c.bgAlt, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', fontSize: 700, color: orange, opacity: dark ? 0.04 : 0.06, fontFamily: fonts.serif, fontStyle: 'italic', fontWeight: 300, lineHeight: 1, pointerEvents: 'none', userSelect: 'none' }}>×</div>
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div style={{ textAlign: 'center', marginBottom: 80 }}>
            <div className="vc-eyebrow-line" style={{ color: orange, marginBottom: 24, display: 'inline-flex' }}>
              <span className="vc-eyebrow">{tl('Das Herz hinter dem Namen', 'The heart behind the name')}</span>
            </div>
            <h2 className="vc-display" style={{ fontSize: 120, lineHeight: 0.9, margin: 0 }}>
              {tl('Warum', 'Why')} MA<span className="vc-serif" style={{ color: orange, fontStyle: 'italic', fontWeight: 400 }}>X</span>?
            </h2>
            <p className="vc-serif" style={{ fontSize: 20, color: c.muted, maxWidth: 720, margin: '24px auto 0', lineHeight: 1.55 }}>
              {tl(
                <>Viele Leiter und Gemeinden arbeiten bei <em style={{ color: c.fg }}>60&nbsp;% ihres Potenzials</em>. Unser Ziel: die Lücke zu schließen und euren Dienst auf <em style={{ color: c.fg }}>100&nbsp;% seines wahren Potenzials</em> zu bringen.</>,
                <>Many leaders and churches operate at <em style={{ color: c.fg }}>60% of their potential</em>. Our goal: close the gap and accelerate your ministry to 100% of its true potential.</>
              )}
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            {[
              {
                tag: '01', t: 'MAXimize',
                sub: tl('100% Potenzial', '100% Potential'),
                body: tl('Jeder Mensch und jede Gemeinde hat eine einzigartige, gottgegebene Berufung, ihr maximales Potenzial zu erreichen.', 'Every person and every church has a unique, God-given calling to reach their maximum potential.'),
                points: [[tl('Optimierung', 'Optimization'), tl('Verfeinere deine Prozesse für maximale Effizienz und beste Ergebnisse.', 'Refine your processes for maximum efficiency and best results.')], [tl('Exzellenz', 'Excellence'), tl('Reich Gottes auf höchstem Niveau betreiben — Seine Herrlichkeit widerspiegeln.', 'Running God\'s kingdom at the highest level — reflecting His glory.')]],
              },
              {
                tag: '02', t: 'MultipliXation',
                sub: tl('Exponentielles Wachstum', 'Exponential Growth'),
                body: tl('Das „X" in unserem Logo ist größer — weil es für die Kraft der Multiplikation steht.', 'The "X" in our logo is larger — because it stands for the power of multiplication.'),
                points: [[tl('Über Addition', 'Beyond Addition'), tl('Wir lehren nicht 1+1. Wir coachen, wie du multiplizierst.', 'We don\'t teach 1+1. We coach how to multiply.')], [tl('Überproportional', 'Disproportionate'), tl('Explosives Wachstum. Leiter, die Leiter befähigen.', 'Explosive growth. Leaders who empower leaders.')]],
              },
            ].map((card, i) => (
              <div key={card.t} className="vc-glass" style={{ padding: 48, position: 'relative' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 24 }}>
                  <span className="vc-mono" style={{ fontSize: 12, color: orange, letterSpacing: '0.2em' }}>FIG. {card.tag}</span>
                  <div style={{ flex: 1, height: 1, background: c.line }} />
                </div>
                <h3 className="vc-display" style={{ fontSize: 64, margin: '0 0 4px', letterSpacing: '-0.03em' }}>
                  {card.t.includes('X') ? (<>
                    {card.t.split('X')[0]}<span className="vc-serif" style={{ color: orange, fontStyle: 'italic', fontWeight: 400 }}>X</span>{card.t.split('X')[1]}
                  </>) : card.t}
                </h3>
                <div className="vc-eyebrow" style={{ color: c.muted, marginBottom: 24 }}>{card.sub}</div>
                <p className="vc-serif" style={{ fontSize: 16, lineHeight: 1.65, color: c.muted, margin: '0 0 32px' }}>{card.body}</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  {card.points.map(([tt, d]) => (
                    <div key={tt} style={{ display: 'flex', gap: 16, paddingTop: 16, borderTop: `1px solid ${c.line}` }}>
                      <span style={{ color: orange, fontSize: 20, lineHeight: 1, fontFamily: fonts.serif, fontStyle: 'italic' }}>{i === 0 ? '+' : '×'}</span>
                      <div>
                        <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>{tt}</div>
                        <div style={{ fontSize: 13, color: c.muted, lineHeight: 1.6 }}>{d}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <p className="vc-serif" style={{ fontSize: 64, fontWeight: 300, fontStyle: 'italic', textAlign: 'center', margin: '80px 0 0', letterSpacing: '-0.02em' }}>
            {tl(<>Wachse nicht einfach. <span style={{ color: orange }}>Multipliziere.</span></>, <>{`Don't just grow. `}<span style={{ color: orange }}>Multiply.</span></>)}
          </p>
        </div>
      </section>

      {/* AREAS */}
      <section style={{ padding: `${pad(160)}px 56px` }}>
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 80 }}>
            <div>
              <div className="vc-eyebrow-line" style={{ color: orange, marginBottom: 16 }}>
                <span className="vc-eyebrow">{tl('Index — 04 Bereiche', 'Index — 04 Areas')}</span>
              </div>
              <h2 className="vc-display" style={{ fontSize: 80, lineHeight: 0.95, margin: 0 }}>
                {tl('Wo wir', 'Where we')} <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>{tl('arbeiten', 'work')}</span>.
              </h2>
            </div>
            <a href="PS3.html" style={{ color: c.muted, textDecoration: 'none', fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>{tl('Alle ansehen', 'View all')} →</a>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
            {areas.map((card, i) => (
              <a key={card.num} href={card.href} className="vc-glass vc-card-hover" style={{ padding: 48, cursor: 'none', position: 'relative', overflow: 'hidden', marginTop: i % 2 ? 48 : 0, textDecoration: 'none', color: 'inherit', display: 'block' }}>
                <div className="vc-serif" style={{ position: 'absolute', top: 12, right: 24, fontSize: 140, color: orange, opacity: 0.18, fontStyle: 'italic', fontWeight: 300, lineHeight: 1 }}>{card.num}</div>
                <div className="vc-mono" style={{ fontSize: 11, color: orange, letterSpacing: '0.2em', marginBottom: 16 }}>{card.tag.toUpperCase()}</div>
                <h3 className="vc-display" style={{ fontSize: 56, margin: '0 0 16px', letterSpacing: '-0.03em' }}>{card.title}</h3>
                <p className="vc-serif" style={{ fontSize: 16, lineHeight: 1.6, color: c.muted, margin: '0 0 24px', maxWidth: 440 }}>{card.desc}</p>
                <div className="vc-mono" style={{ fontSize: 11, color: c.muted, marginBottom: 24, letterSpacing: '0.1em' }}>{card.meta}</div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: c.fg, fontSize: 13, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', borderBottom: `1px solid ${orange}`, paddingBottom: 4 }}>
                  {tl('Mehr erfahren', 'Learn more')} <span style={{ color: orange }}>→</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* HOGC ICEBERG */}
      <section style={{ padding: `${pad(160)}px 56px`, background: c.bgAlt, position: 'relative', overflow: 'hidden' }}>
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div className="vc-eyebrow-line" style={{ color: orange, marginBottom: 24, display: 'inline-flex' }}>
              <span className="vc-eyebrow">{tl('HOGC DNA · Das Iceberg-Prinzip', 'HOGC DNA · The Iceberg Principle')}</span>
            </div>
            <h2 className="vc-display" style={{ fontSize: 80, lineHeight: 0.95, margin: '0 0 24px' }}>
              {tl('Erfolg beginnt mit einem', 'Success begins with a')}<br /><span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 300 }}>{tl('Wechsel des Mindsets.', 'Shift in Mindset.')}</span>
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            {icebergSections.map((sec) => (
              <div key={sec.label} className="vc-glass" style={{ padding: 48, position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: -40, right: -40, fontSize: 200, color: orange, opacity: 0.08, fontFamily: fonts.serif, fontStyle: 'italic', fontWeight: 300, lineHeight: 1, pointerEvents: 'none' }}>{sec.top ? '▲' : '▼'}</div>
                <div className="vc-mono" style={{ fontSize: 11, color: orange, letterSpacing: '0.2em', marginBottom: 12 }}>{sec.top ? 'ABOVE / VISIBLE' : 'BELOW / FOUNDATION'}</div>
                <h3 className="vc-display" style={{ fontSize: 40, margin: '0 0 4px', letterSpacing: '-0.02em' }}>{sec.label}</h3>
                <div className="vc-eyebrow" style={{ color: c.muted, marginBottom: 32 }}>{sec.sub}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  {sec.items.map(([tt, d]) => (
                    <div key={tt} style={{ paddingTop: 16, borderTop: `1px solid ${c.line}` }}>
                      <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{tt}</div>
                      <div style={{ fontSize: 14, color: c.muted, lineHeight: 1.6 }}>{d}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* UNITED AGE GROUPS */}
      <section style={{ padding: `${pad(160)}px 56px` }}>
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64 }}>
            <div>
              <div className="vc-eyebrow-line" style={{ color: orange, marginBottom: 16 }}>
                <span className="vc-eyebrow">United · Open Resources</span>
              </div>
              <h2 className="vc-display" style={{ fontSize: 72, lineHeight: 0.95, margin: 0 }}>
                {tl('Vier', 'Four')} <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>{tl('Altersgruppen.', 'Age Groups.')}</span><br />
                {tl('Eine Generation.', 'One Generation.')}
              </h2>
            </div>
          </div>
          <div className="vc-glass" style={{ padding: 40, marginBottom: 48, border: `1px solid ${c.line}` }}>
            <p className="vc-serif" style={{ fontSize: 17, lineHeight: 1.65, color: c.muted, margin: '0 0 20px' }}>
              {tl(
                'Als Teil unseres Consultings bieten wir das UNITED-Programm — ein kompletter Blueprint, der die volle DNA der Heart of God Church trägt. Wir empfehlen dieses bewährte System, aber die Entscheidung liegt ganz bei euch. Ihr könnt wählen, ob ihr UNITED implementiert oder euer eigenes Jugendprogramm mit den von uns vermittelten Prinzipien weiterentwickelt. Weitere Details zu Lehrplan und Struktur findet ihr im Bereich UNITED.',
                'As part of our consulting, we offer the UNITED program—a complete blueprint that already carries the full DNA of Heart of God Church. While we highly recommend this proven system, it is entirely up to you. You can choose to implement UNITED or continue developing your own youth program with the principles we provide. For more details on the curriculum and structure, please see the UNITED section.'
              )}
            </p>
            <a href="United.html" className="vc-btn-p" style={{ textDecoration: 'none', padding: '12px 24px', fontSize: 12 }}>{tl('Zu UNITED', 'See UNITED section')} →</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {ageGroups.map((g, i) => (
              <div key={g.name} className="vc-glass vc-card-hover" style={{ padding: 32, position: 'relative' }}>
                <div className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em', marginBottom: 8 }}>0{i + 1} / 04</div>
                <div className="vc-display" style={{ fontSize: 48, margin: '0 0 4px' }}>{g.name}</div>
                <div className="vc-serif" style={{ fontSize: 28, fontStyle: 'italic', color: orange, fontWeight: 400, marginBottom: 16 }}>{g.range}<span style={{ fontSize: 14, color: c.muted, marginLeft: 4 }}>{tl('Jahre', 'yrs')}</span></div>
                <p style={{ fontSize: 13, color: c.muted, lineHeight: 1.55, margin: 0 }}>{g.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FOUNDER / TEAM */}
      <section className="vc-founder-section" style={{ padding: `${pad(160)}px 56px`, background: c.bgAlt, position: 'relative' }}>
        <div className="vc-fade vc-founder-grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '440px 1fr', gap: 96, alignItems: 'start' }}>
          <div className="vc-founder-image-col" style={{ position: 'relative' }}>
            <div className="vc-founder-image" 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 vc-founder-badge" style={{ position: 'absolute', bottom: -24, left: -24, padding: '12px 20px', borderRadius: 999, fontSize: 11, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.18em', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ color: orange }}>●</span> {tl('Gründung · Basim Al-Safau', 'Founding · Basim Al-Safau')}
            </div>
          </div>
          <div>
            <div className="vc-eyebrow-line vc-founder-kicker" style={{ color: orange, marginBottom: 24 }}>
              <span className="vc-eyebrow">{tl('Max Ministry Gründerteam', 'Max Ministry founder team')}</span>
            </div>
            <h2 className="vc-display vc-founder-title" style={{ fontSize: 'clamp(48px, 5vw, 88px)', lineHeight: 0.95, margin: '0 0 28px' }}>
              {tl('Ein Team, eine Vision, ein Kontinent', 'One team, one vision, one continent')}
            </h2>
            <p className="vc-founder-body" style={{ fontSize: 17, lineHeight: 1.75, color: c.muted, margin: '0 0 28px' }}>
              {tl(
                'Max Ministry wurde 2025 mit einer klaren Berufung gegründet: Die nächste Generation in Asien nicht nur zu erreichen, sondern sie nachhaltig zu festigen. Wir sind keine Einzelkämpfer, sondern arbeiten konsequent als Team. Gemeinsam mit vielen Freiwilligen – von engagierten Bibelschülern bis hin zu befreundeten Gemeinden und Partnerorganisationen aus Deutschland, der Schweiz und Singapur – bauen wir die Arbeit vor Ort in Asien aktiv auf.',
                'Max Ministry was founded in 2025 with a clear calling: not only to reach the next generation in Asia, but to establish them for the long term. We are not lone fighters—we work consistently as a team. Together with many volunteers—from committed Bible school students to partner churches and organisations in Germany, Switzerland, and Singapore—we actively build the work on the ground across Asia.'
              )}
            </p>
            <div className="vc-eyebrow" style={{ color: orange, marginBottom: 12, letterSpacing: '0.2em' }}>{tl('HINTERGRUND & LEITUNG', 'BACKGROUND & LEADERSHIP')}</div>
            <p className="vc-founder-body" style={{ fontSize: 16, lineHeight: 1.75, color: c.muted, margin: '0 0 32px' }}>
              {tl(
                'Gegründet wurde Max Ministry von Basim Al-Safau. Unsere Arbeit vereint über 30 Jahre fundierte Erfahrung in der Jugendentwicklung und Leiterschaft mit der dynamischen Missionskraft Asiens. Nach 14 Jahren im Dienst als Jugendpastor in Deutschland zog Basim 2019 nach Singapur, um dort internationale Missionsprojekte zu leiten. Seit dieser Zeit ist er zudem fester Partner der Heart of God Church Singapore. Als Deutsch-Iraker versteht er die Bedeutung von Identität und kultureller Brückenbildung – Werte, die das Fundament unserer Arbeit bilden. Sein erklärtes Ziel ist es, durch Max Ministry eine ganzheitliche Gemeindeberatung anzubieten, die auf bewährten, internationalen Standards basiert.',
                'Max Ministry was founded by Basim Al-Safau. Our work combines over 30 years of grounded experience in youth development and leadership with the dynamic mission force of Asia. After 14 years serving as a youth pastor in Germany, Basim moved to Singapore in 2019 to lead international mission projects. Since then he has also been a committed partner of Heart of God Church Singapore. As a German Iraqi, he understands the importance of identity and building cultural bridges—values that form the foundation of our work. His stated goal is to offer holistic church consulting through Max Ministry, built on proven international standards.'
              )}
            </p>
            <div style={{ display: 'flex', gap: 24, marginBottom: 32, fontSize: 12, color: c.muted, letterSpacing: '0.1em' }} className="vc-mono vc-founder-path">
              <span>IRAK</span><span style={{ color: orange }}>→</span>
              <span>DE</span><span style={{ color: orange }}>→</span>
              <span>SG</span><span style={{ color: orange }}>→</span>
              <span>TH</span>
            </div>
            <a href="#" className="vc-btn-g vc-founder-link" style={{ textDecoration: 'none' }}>{tl('Den ganzen Weg lesen', 'Read the full journey')} →</a>
          </div>
        </div>
      </section>

      {/* YOUTUBE CTA */}
      <section style={{ padding: `${pad(120)}px 56px`, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 30% 50%, ${glow}, transparent 50%)` }} />
        <div className="vc-fade" style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 64, height: 64, borderRadius: '50%', background: `${orange}22`, marginBottom: 24 }}>
            <span style={{ color: orange, fontSize: 28 }}>▶</span>
          </div>
          <h2 className="vc-display" style={{ fontSize: 64, lineHeight: 1, margin: '0 0 16px' }}>
            {tl('Alle Bereiche auf', 'All areas on')} <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>{tl('einem Kanal.', 'one channel.')}</span>
          </h2>
          <p className="vc-serif" style={{ fontSize: 18, color: c.muted, maxWidth: 540, margin: '0 auto 12px', lineHeight: 1.5 }}>
            {tl(
              'Folge Max Ministry auf YouTube für Teachings, Updates und Einblicke in unsere Arbeit.',
              'Follow Max Ministry on YouTube for teachings, updates and insights into our work.'
            )}
          </p>
          <p className="vc-mono" style={{ fontSize: 12, color: orange, letterSpacing: '0.15em', margin: '0 auto 24px' }}>{tl('Demnächst', 'Coming soon')}</p>
          <span className="vc-btn-p" style={{ textDecoration: 'none', opacity: 0.55, cursor: 'default', pointerEvents: 'none' }} aria-disabled="true">▶ YouTube</span>
        </div>
      </section>

      {/* FINAL CTA */}
      <section style={{ padding: `${pad(160)}px 56px`, position: 'relative', overflow: 'hidden', background: c.bgAlt }}>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 50% 50%, ${glow}, transparent 60%)` }} />
        <div className="vc-fade" style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
          <div className="vc-eyebrow-line" style={{ color: orange, marginBottom: 32, display: 'inline-flex' }}>
            <span className="vc-eyebrow">{tl('Bereit für den nächsten Schritt?', 'Ready for the next step?')}</span>
          </div>
          <h2 className="vc-display" style={{ fontSize: 132, lineHeight: 0.92, margin: '0 0 48px' }}>
            {tl('Lass uns', "Let's")}<br /><span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 300 }}>{tl('multiplizieren.', 'multiply.')}</span>
          </h2>
          <p className="vc-serif" style={{ fontSize: 18, color: c.muted, maxWidth: 540, margin: '0 auto 40px', lineHeight: 1.5 }}>
            {tl(
              'Ob Academy, Gemeindeberatung oder Jugendarbeit — schreib uns und finde heraus, wie Max Ministry dich unterstützen kann.',
              'Whether academy, church consulting or youth ministry — write us and find out how Max Ministry can support you.'
            )}
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <a href="Kontakt.html" className="vc-btn-p" style={{ padding: '20px 40px', fontSize: 14, textDecoration: 'none' }}>{tl('Kontakt aufnehmen', 'Get in touch')} →</a>
            <span className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.12em' }}>{tl('YouTube: Demnächst', 'YouTube: Coming soon')}</span>
          </div>
        </div>
      </section>

      {/* PARTNERS */}
      <section style={{ padding: '64px 56px', borderTop: `1px solid ${c.line}`, background: c.bgAlt }}>
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto', textAlign: 'center' }}>
          <div className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 40 }}>
            {tl('Partner & Netzwerke', 'Partners & Networks')}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '32px 80px', alignItems: 'center' }}>
            {partnerLinks.map((p) => (
              <a
                key={p.href}
                href={p.href}
                target="_blank"
                rel="noopener noreferrer"
                className="vc-display"
                style={{ fontSize: 32, color: c.fg, opacity: 0.5, letterSpacing: '-0.02em', transition: 'all .3s', textDecoration: 'none' }}
                onMouseEnter={(e) => { e.currentTarget.style.opacity = 1; e.currentTarget.style.color = orange; }}
                onMouseLeave={(e) => { e.currentTarget.style.opacity = 0.5; e.currentTarget.style.color = c.fg; }}
              >
                {p.label}
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ padding: '64px 56px 32px', borderTop: `1px solid ${c.line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 }}>
            <div>
              <div className="vc-display" style={{ fontSize: 32, marginBottom: 12 }}>
                MA<span className="vc-serif" style={{ color: orange, fontStyle: 'italic', fontWeight: 400 }}>X</span> Ministry
              </div>
              <p style={{ fontSize: 13, color: c.muted, lineHeight: 1.6, maxWidth: 320 }}>Equipping leaders. Building churches. Empowering the next generation.</p>
            </div>
            {[
              { h: tl('Bereiche', 'Areas'), l: [['PS3 Academy', 'PS3.html'], ['HOGC DNA', 'HOGC DNA.html'], ['United', 'United.html'], ['YMC-D', 'YMC-D.html'], [tl('Media Hub', 'Media Hub'), 'Media.html']] },
              { h: tl('Über', 'About'), l: [[tl('Founder', 'Founder'), 'Founder.html'], [tl('Kontakt', 'Contact'), 'Kontakt.html'], [tl('YouTube (demnächst)', 'YouTube (coming soon)'), '#']] },
              { h: tl('Rechtliches', 'Legal'), l: [[tl('Impressum', 'Legal Notice'), 'Impressum.html'], [tl('Datenschutz', 'Privacy'), 'Datenschutz.html'], ['AGB', 'AGB.html']] },
            ].map((col) => (
              <div key={col.h}>
                <div className="vc-eyebrow" style={{ color: orange, marginBottom: 16 }}>{col.h}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
                  {col.l.map(([label, href]) =>
                    href === '#' ? (
                      <span key={label} style={{ color: c.muted }}>{label}</span>
                    ) : (
                      <a key={label} className="vc-footer-link" href={href} target={href.startsWith('http') ? '_blank' : undefined} rel={href.startsWith('http') ? 'noopener noreferrer' : undefined} style={{ color: c.muted }}>{label}</a>
                    )
                  )}
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, borderTop: `1px solid ${c.line}`, fontSize: 11, color: c.muted }} className="vc-mono">
            <span>© 2026 MAX MINISTRY</span>
            <a href="/login" style={{ color: c.muted, textDecoration: 'none', letterSpacing: '0.15em', transition: 'color .2s' }} onMouseEnter={e => e.target.style.color = orange} onMouseLeave={e => e.target.style.color = c.muted}>LOGIN</a>
            <span>BASIM@MAX-MINISTRY.COM</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

function HeroSection({ variant, c, orange, fonts, glow, tl }) {
  if (variant === 'minimal') {
    return (
      <section style={{ minHeight: '90vh', padding: '160px 56px 120px', display: 'flex', alignItems: 'center', position: 'relative' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', textAlign: 'center', width: '100%' }}>
          <div style={{ color: orange, marginBottom: 32, display: 'inline-flex', alignItems: 'center', gap: 14, fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', fontWeight: 600 }}>
            <span style={{ width: 32, height: 1, background: orange }} />
            Leadership · Church · Next Gen
            <span style={{ width: 32, height: 1, background: orange }} />
          </div>
          <h1 style={{ fontFamily: fonts.display, fontSize: 240, fontWeight: 700, lineHeight: 0.85, letterSpacing: '-0.05em', margin: 0 }}>
            MA<span style={{ color: orange, fontStyle: 'italic', fontFamily: fonts.serif, fontWeight: 500, textShadow: `0 0 60px ${glow}` }}>X</span>
          </h1>
          <p style={{ fontFamily: fonts.serif, fontSize: 28, lineHeight: 1.4, fontWeight: 300, fontStyle: 'italic', color: c.muted, margin: '32px auto 48px', maxWidth: 720 }}>
            {tl(
              <><em style={{ color: orange, fontStyle: 'italic' }}>Wir helfen dabei, starke und relevante Gemeinden zu bauen</em>, in denen junge Menschen ein Zuhause finden.</>,
              <><em style={{ color: orange, fontStyle: 'italic' }}>We help build strong and relevant churches</em> where young people find a home.</>
            )}
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'center', gap: 16 }}>
              <a href="Kontakt.html" className="vc-btn-p" style={{ textDecoration: 'none' }}>{tl('Kontakt aufnehmen', 'Get in touch')} →</a>
              <span className="vc-btn-g" style={{ textDecoration: 'none', opacity: 0.55, cursor: 'default', pointerEvents: 'none' }} aria-disabled="true">▶ YouTube</span>
            </div>
            <span className="vc-mono" style={{ fontSize: 11, color: orange, letterSpacing: '0.12em' }}>{tl('Demnächst', 'Coming soon')}</span>
          </div>
        </div>
      </section>
    );
  }
  if (variant === 'split') {
    return (
      <section style={{ minHeight: '100vh', display: 'grid', gridTemplateColumns: '1.1fr 1fr', position: 'relative' }}>
        <div style={{ padding: '120px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div className="vc-eyebrow-line" style={{ color: orange, marginBottom: 32 }}>
            <span className="vc-eyebrow">Leadership · Church · Next Gen</span>
          </div>
          <h1 style={{ fontFamily: fonts.display, fontSize: 156, fontWeight: 700, lineHeight: 0.85, letterSpacing: '-0.04em', margin: 0 }}>
            MA<span style={{ color: orange, fontStyle: 'italic', fontFamily: fonts.serif, fontWeight: 500 }}>X</span><br />
            <span style={{ fontFamily: fonts.serif, fontWeight: 300, fontStyle: 'italic', fontSize: 96, color: c.muted }}>ministry.</span>
          </h1>
          <p style={{ fontFamily: fonts.serif, fontSize: 22, lineHeight: 1.5, color: c.muted, maxWidth: 480, margin: '32px 0' }}>
            {tl('Wir helfen dabei, starke und relevante Gemeinden zu bauen, in denen junge Menschen ein Zuhause finden.', 'We help build strong and relevant churches where young people find a home.')}
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 10 }}>
            <div style={{ display: 'flex', gap: 12 }}>
              <a href="Kontakt.html" className="vc-btn-p" style={{ textDecoration: 'none' }}>{tl('Kontakt', 'Contact')} →</a>
              <span className="vc-btn-g" style={{ textDecoration: 'none', opacity: 0.55, cursor: 'default', pointerEvents: 'none' }} aria-disabled="true">▶ YouTube</span>
            </div>
            <span className="vc-mono" style={{ fontSize: 10, color: orange, letterSpacing: '0.12em' }}>{tl('Demnächst', 'Coming soon')}</span>
          </div>
        </div>
        <div style={{ position: 'relative', overflow: 'hidden' }}>
          <img src="assets/hero-bg.jpg" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(90deg, ${c.bg}cc 0%, transparent 30%)` }} />
        </div>
      </section>
    );
  }
  // cinematic (default)
  return (
    <section className="vc-home-hero" style={{ position: 'relative', minHeight: '100vh', overflow: 'hidden', display: 'flex', alignItems: 'center' }}>
      <img className="vc-home-hero-bg" src="assets/hero-bg.jpg" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.55 }} />
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse at 30% 50%, ${glow}, transparent 60%), linear-gradient(180deg, ${c.bg}66 0%, transparent 30%, ${c.bg} 100%)` }} />
      <div className="vc-home-hero-inner" style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '120px 56px', width: '100%' }}>
        <div className="vc-eyebrow-line vc-home-hero-kicker" style={{ color: orange, marginBottom: 32 }}>
          <span className="vc-eyebrow">Leadership · Church · Next Gen</span>
        </div>
        <h1 className="vc-home-hero-title" style={{ fontFamily: fonts.display, fontSize: 200, fontWeight: 700, lineHeight: 0.85, letterSpacing: '-0.05em', margin: 0 }}>
          <span className="vc-shimmer">MA</span><span style={{ color: orange, fontStyle: 'italic', fontFamily: fonts.serif, fontWeight: 500, textShadow: `0 0 60px ${glow}` }}>X</span>
          <br />
          <span className="vc-home-hero-subtitle" style={{ display: 'block', marginTop: '-0.15em', fontWeight: 300, fontStyle: 'italic', fontFamily: fonts.serif, fontSize: 140, letterSpacing: '-0.02em', color: c.muted }}>ministry.</span>
        </h1>
        <div className="vc-home-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginTop: 64, alignItems: 'end' }}>
          <p className="vc-home-hero-copy" style={{ fontFamily: fonts.serif, fontSize: 26, lineHeight: 1.35, fontWeight: 400, margin: 0, maxWidth: 560, color: c.fg }}>
            {tl(
              <>{`Wir helfen dabei, `}<em style={{ color: orange }}>starke und relevante Gemeinden zu bauen</em>{`, in denen junge Menschen ein Zuhause finden. Durch Beratung, Training und ein Konzept, das die nächste Generation zu Jüngern macht.`}</>,
              <>{`We help build `}<em style={{ color: orange }}>strong and relevant churches</em>{` where young people feel at home—by consulting churches, training their leaders, and providing a concept to disciple the next generation.`}</>
            )}
          </p>
          <div>
            <div className="vc-home-hero-actions" style={{ display: 'flex', gap: 12, marginBottom: 16, flexWrap: 'wrap', alignItems: 'center' }}>
              <a href="Kontakt.html" className="vc-btn-p" style={{ textDecoration: 'none' }}>{tl('Kontakt aufnehmen', 'Get in touch')} →</a>
              <span className="vc-btn-g" style={{ textDecoration: 'none', opacity: 0.55, cursor: 'default', pointerEvents: 'none' }} aria-disabled="true">▶ YouTube</span>
            </div>
            <div className="vc-mono" style={{ fontSize: 10, color: orange, letterSpacing: '0.12em', marginBottom: 24 }}>{tl('YouTube-Kanal: Demnächst', 'YouTube channel: Coming soon')}</div>
            <div className="vc-glass vc-home-hero-stats" style={{ padding: 20, borderRadius: 16, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }}>
              {[{ k: '33+', v: tl('Jahre', 'Years') }, { k: '4', v: tl('Bereiche', 'Areas') }, { k: '∞', v: 'Multipli×' }].map((s, i) => (
                <div className="vc-home-hero-stat" key={s.v} style={{ padding: '0 16px', borderRight: i < 2 ? `1px solid ${c.line}` : 'none', textAlign: 'center' }}>
                  <div className="vc-home-hero-stat-value" style={{ fontFamily: fonts.display, fontSize: 36, color: orange, lineHeight: 1, fontWeight: 700 }}>{s.k}</div>
                  <div className="vc-home-hero-stat-label" style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: c.muted, marginTop: 6 }}>{s.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.VariantCFull = VariantCFull;
