// 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 VariantCFull() {
  const [t, setTweak] = window.useTweaks(HOMEPAGE_DEFAULTS);
  const [mobileOpen, setMobileOpen] = useState(false);
  const orange = t.orange;
  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' },
    { l: 'Founder', href: 'Founder.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();
  }, []);

  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>
            <span className="vc-mono vc-hide-mobile" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.1em' }}>DE</span>
            <a href="Kontakt.html" className="vc-btn-p vc-hide-mobile" style={{ padding: '10px 20px', fontSize: 11, textDecoration: 'none' }}>Kontakt →</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 }}>Kontakt →</a>
          </div>
        )}
      </header>

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

      {/* 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', 'BANGKOK', '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">Unsere Mission</span>
          </div>
          <h2 className="vc-display" style={{ fontSize: 96, lineHeight: 0.95, textAlign: 'center', margin: '0 auto 32px', maxWidth: 1100 }}>
            Drei Bereiche.<br />
            <span className="vc-serif" style={{ fontWeight: 300, fontStyle: 'italic', color: orange }}>Eine</span> Vision.<br />
            Maximaler Impact.
          </h2>
          <p className="vc-serif" style={{ textAlign: 'center', fontSize: 22, lineHeight: 1.5, color: c.muted, maxWidth: 760, margin: '0 auto', fontWeight: 400 }}>
            Max Ministry vereint Academy-Ausbildung, Gemeindeberatung und Jugendarbeit zu einer ganzheitlichen Bewegung. Jeder Bereich steht für sich — gemeinsam entfalten sie ihre volle Kraft.
          </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">Das Herz hinter dem Namen</span>
            </div>
            <h2 className="vc-display" style={{ fontSize: 120, lineHeight: 0.9, margin: 0 }}>
              Warum 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: 640, margin: '24px auto 0', lineHeight: 1.5 }}>
              Viele Leiter und Gemeinden arbeiten bei <em style={{ color: c.fg }}>60% ihres Potenzials</em>. Unser Ziel: diese Lücke schließen.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            {[
              { tag: '01', t: 'MAXimize', sub: '100% Potenzial', body: 'Jeder Mensch und jede Gemeinde hat eine einzigartige, gottgegebene Berufung, ihr maximales Potenzial zu erreichen.', points: [['Optimierung', 'Verfeinere deine Prozesse für maximale Effizienz und beste Ergebnisse.'], ['Exzellenz', 'Reich Gottes auf höchstem Niveau betreiben — Seine Herrlichkeit widerspiegeln.']] },
              { tag: '02', t: 'MultipliXation', sub: 'Exponentielles Wachstum', body: 'Das „X" in unserem Logo ist größer — weil es für die Kraft der Multiplikation steht.', points: [['Über Addition', 'Wir lehren nicht 1+1. Wir coachen, wie du multiplizierst.'], ['Überproportional', 'Explosives Wachstum. Leiter, die Leiter befähigen.']] },
            ].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' }}>
            Wachse nicht einfach. <span style={{ color: orange }}>Multipliziere.</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">Index — 04 Areas</span>
              </div>
              <h2 className="vc-display" style={{ fontSize: 80, lineHeight: 0.95, margin: 0 }}>
                Wo wir <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>arbeiten</span>.
              </h2>
            </div>
            <a href="PS3.html" style={{ color: c.muted, textDecoration: 'none', fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>Alle ansehen →</a>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
            {[
              { num: '01', title: 'PS3 Academy', tag: 'Training & Curriculum', desc: 'Booster für Bibelschüler — Principles, Skills, Strategies, Systems. 1-Wochen-Intensiv bis 4-Wochen-Deep-Dive.', meta: '4 Säulen · 1–4 Wochen' },
              { num: '02', title: 'HOGC DNA', tag: 'Church Consulting', desc: 'Inspiriert von Heart of God Church Singapur. Iceberg-Prinzip — erst Mindset, dann Strategie.', meta: 'Singapur · 360°' },
              { num: '03', title: 'United', tag: 'Open Resources', desc: 'Offenes Tool für Gemeinden — Minis, Kids, Teens, Youth. Volle Autonomie, geteilte Erfahrung.', meta: '4 Altersgruppen · 4–21 J.' },
              { num: '04', title: 'YMC-D', tag: 'Mission Internship Asia', desc: 'Youth · Mission · Church Developer. 9–12 Monate in Thailand & Asien — mit HOGC Singapur.', meta: '9–12 Monate · Thailand' },
            ].map((card, i) => (
              <div key={card.num} className="vc-glass vc-card-hover" style={{ padding: 48, cursor: 'none', position: 'relative', overflow: 'hidden', marginTop: i % 2 ? 48 : 0 }}>
                <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 }}>
                  Mehr erfahren <span style={{ color: orange }}>→</span>
                </div>
              </div>
            ))}
          </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">HOGC DNA · Das Iceberg-Prinzip</span>
            </div>
            <h2 className="vc-display" style={{ fontSize: 80, lineHeight: 0.95, margin: '0 0 24px' }}>
              Erfolg beginnt mit einem<br /><span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 300 }}>Wechsel des Mindsets.</span>
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            {[
              { label: 'Über der Oberfläche', sub: 'Strategie & Ergebnisse', items: [['Harvest Circle', 'Workshop für effektive Jahresplanung'], ['Leadership Pipeline', 'Junge Leiter erkennen, trainieren, befähigen'], ['School & Youth Revival', 'Bewegung in Schulen und Nachbarschaft starten']], top: true },
              { label: 'Unter der Oberfläche', sub: 'Mindset & Kultur', items: [['DNA-Mindset', 'Denken auf wachsende Gemeinde ausrichten'], ['Gemeinde als Heimat', 'Kultur, in der Menschen wirklich ankommen'], ['Junge Stimmen', 'Echte Verantwortung von Anfang an']], top: false },
            ].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 }}>
                Vier <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>Altersgruppen.</span><br />
                Eine Generation.
              </h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {[
              { name: 'Minis', range: '4–7', desc: 'Erste Schritte im Glauben — spielerisch und altersgerecht.' },
              { name: 'Kids', range: '8–11', desc: 'Bibel entdecken, Charakter formen, Gemeinschaft erleben.' },
              { name: 'Teens', range: '12–14', desc: 'Identität finden, Verantwortung übernehmen, leben lernen.' },
              { name: 'Youth', range: '15–21', desc: 'Berufung leben, Multiplikation üben, Leiter werden.' },
            ].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 }}>Jahre</span></div>
                <p style={{ fontSize: 13, color: c.muted, lineHeight: 1.55, margin: 0 }}>{g.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FOUNDER */}
      <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: 'center' }}>
          <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> Founder · Basim Al-Safau
            </div>
          </div>
          <div>
            <div className="vc-eyebrow-line vc-founder-kicker" style={{ color: orange, marginBottom: 24 }}>
              <span className="vc-eyebrow">A letter from</span>
            </div>
            <h2 className="vc-display vc-founder-title" style={{ fontSize: 96, lineHeight: 0.92, margin: '0 0 32px' }}>
              Basim<br /><span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>Al-Safau.</span>
            </h2>
            <p className="vc-serif vc-founder-quote" style={{ fontSize: 26, lineHeight: 1.4, fontWeight: 300, fontStyle: 'italic', margin: '0 0 32px', color: c.fg }}>
              „Leadership beginnt nicht mit einem Titel — es beginnt mit einer Entscheidung: Ich will für andere da sein."
            </p>
            <p className="vc-founder-body" style={{ fontSize: 16, lineHeight: 1.7, color: c.muted, margin: '0 0 32px' }}>
              Geboren im Irak als Sohn eines irakischen muslimischen Vaters und einer deutschen christlichen Mutter. Mit sechs Jahren entschied ich mich, Jesus zu folgen. Nach 14 Jahren Dienst in Deutschland kam 2019 die Zeit für Singapur — Heart of God Church. Heute lebe und wirke ich von Thailand aus.
            </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="Founder.html" className="vc-btn-g vc-founder-link" style={{ textDecoration: 'none' }}>Den ganzen Weg lesen →</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' }}>
            Alle Bereiche auf <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>einem Kanal.</span>
          </h2>
          <p className="vc-serif" style={{ fontSize: 18, color: c.muted, maxWidth: 540, margin: '0 auto 32px', lineHeight: 1.5 }}>
            Folge Max Ministry auf YouTube für Teachings, Updates und Einblicke in unsere Arbeit.
          </p>
          <a href="https://youtube.com/@MaxMinistry" target="_blank" rel="noopener noreferrer" className="vc-btn-p" style={{ textDecoration: 'none' }}>▶ Zu YouTube</a>
        </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">Bereit für den nächsten Schritt?</span>
          </div>
          <h2 className="vc-display" style={{ fontSize: 132, lineHeight: 0.92, margin: '0 0 48px' }}>
            Lass uns<br /><span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 300 }}>multiplizieren.</span>
          </h2>
          <p className="vc-serif" style={{ fontSize: 18, color: c.muted, maxWidth: 540, margin: '0 auto 40px', lineHeight: 1.5 }}>
            Ob Academy, Gemeindeberatung oder Jugendarbeit — schreib uns und finde heraus, wie Max Ministry dich unterstützen kann.
          </p>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 16 }}>
            <a href="Kontakt.html" className="vc-btn-p" style={{ padding: '20px 40px', fontSize: 14, textDecoration: 'none' }}>Kontakt aufnehmen →</a>
            <a href="https://youtube.com/@MaxMinistry" target="_blank" rel="noopener noreferrer" className="vc-btn-g" style={{ padding: '20px 40px', fontSize: 14, textDecoration: 'none' }}>▶ YouTube ansehen</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: 'Bereiche', l: [['PS3 Academy', 'PS3.html'], ['HOGC DNA', 'HOGC DNA.html'], ['United', 'United.html'], ['YMC-D', 'YMC-D.html']] },
              { h: 'Über', l: [['Founder', 'Founder.html'], ['Kontakt', 'Kontakt.html'], ['YouTube', 'https://youtube.com/@MaxMinistry']] },
              { h: 'Rechtliches', l: [['Impressum', 'Impressum.html'], ['Datenschutz', 'Datenschutz.html'], ['AGB', 'AGB.html'], ['Login', '/login']] },
            ].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]) => (
                    <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', paddingTop: 24, borderTop: `1px solid ${c.line}`, fontSize: 11, color: c.muted }} className="vc-mono">
            <span>© 2026 MAX MINISTRY</span>
            <span>BASIM@MAX-MINISTRY.COM</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

function HeroSection({ variant, c, orange, fonts, glow }) {
  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 }}>
            Wir bauen <em style={{ color: orange, fontStyle: 'italic' }}>starke und relevante Gemeinden</em>, in denen junge Menschen ein Zuhause finden.
          </p>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 16 }}>
            <a href="Kontakt.html" className="vc-btn-p" style={{ textDecoration: 'none' }}>Kontakt aufnehmen →</a>
            <a href="https://youtube.com/@MaxMinistry" target="_blank" rel="noopener noreferrer" className="vc-btn-g" style={{ textDecoration: 'none' }}>▶ YouTube</a>
          </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' }}>
            Wir bauen starke und relevante Gemeinden, in denen junge Menschen ein Zuhause finden.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <a href="Kontakt.html" className="vc-btn-p" style={{ textDecoration: 'none' }}>Kontakt →</a>
            <a href="https://youtube.com/@MaxMinistry" target="_blank" rel="noopener noreferrer" className="vc-btn-g" style={{ textDecoration: 'none' }}>▶ YouTube</a>
          </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 · Est. 2019</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={{ 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 }}>
            Wir bauen <em style={{ color: orange }}>starke und relevante Gemeinden</em>, in denen junge Menschen ein Zuhause finden. Durch Beratung, Training und ein Konzept, das die nächste Generation zu Jüngern macht.
          </p>
          <div>
            <div className="vc-home-hero-actions" style={{ display: 'flex', gap: 12, marginBottom: 32 }}>
              <a href="Kontakt.html" className="vc-btn-p" style={{ textDecoration: 'none' }}>Kontakt aufnehmen →</a>
              <a href="https://youtube.com/@MaxMinistry" target="_blank" rel="noopener noreferrer" className="vc-btn-g" style={{ textDecoration: 'none' }}>▶ YouTube</a>
            </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: 'Jahre' }, { k: '4', v: 'Bereiche' }, { 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>
  );
}

function adjustColor(hex, amount) {
  const m = hex.replace('#', '');
  const num = parseInt(m, 16);
  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');
}

window.VariantCFull = VariantCFull;