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

  const groups = [
    { name: 'Minis', range: '4–7', tag: 'EARLY YEARS', desc: tl('Erste Schritte im Glauben — spielerisch, sensorisch, beziehungsorientiert. Eltern-Pakete inklusive.', 'First steps in faith — playful, sensory, relationship-oriented. Parent packages included.'), focus: [tl('Storytelling', 'Storytelling'), tl('Worship Basics', 'Worship Basics'), tl('Family Rhythms', 'Family Rhythms')] },
    { name: 'Kids', range: '8–11', tag: 'EXPLORATION', desc: tl('Bibel entdecken, Charakter formen, Gemeinschaft erleben. Mission als Abenteuer.', 'Discovering the Bible, shaping character, experiencing community. Mission as adventure.'), focus: [tl('Bible Quests', 'Bible Quests'), tl('Character Builders', 'Character Builders'), tl('Mission Trips', 'Mission Trips')] },
    { name: 'Teens', range: '12–14', tag: 'IDENTITY', desc: tl('Identität finden, Verantwortung übernehmen, Glauben für sich beanspruchen.', 'Finding identity, taking responsibility, claiming faith for themselves.'), focus: [tl('Identity Series', 'Identity Series'), tl('Peer Mentoring', 'Peer Mentoring'), tl('Service Projects', 'Service Projects')] },
    { name: 'Youth', range: '15–21', tag: 'MULTIPLICATION', desc: tl('Berufung leben, Multiplikation üben, Leiter werden. Vorbereitung auf das Leben — nicht nur den Sonntag.', 'Living your calling, practicing multiplication, becoming a leader. Preparation for life — not just Sunday.'), focus: [tl('Leadership Lab', 'Leadership Lab'), tl('Mission Internships', 'Mission Internships'), tl('Career Coaching', 'Career Coaching')] },
  ];

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

      <window.PageHero
        theme={theme}
        eyebrow="03 / 04 · Open Resources"
        title="United"
        titleAccent="generation."
        subtitle={tl('Offenes Tool für Gemeinden, die Kinder, Teens und Jugendliche gemeinsam erreichen wollen — vier Altersgruppen, ein Curriculum-System, volle Autonomie.', 'Open tool for churches that want to reach children, teens and youth together — four age groups, one curriculum system, full autonomy.')}
        meta={[{ k: tl('Altersgruppen', 'Age Groups'), v: '4' }, { k: tl('Bandbreite', 'Range'), v: tl('4–21 J.', 'Ages 4–21') }, { k: tl('Modell', 'Model'), v: 'Open' }]}
      />

      {/* AGE TIMELINE */}
      <section style={{ padding: `${pad(120)}px 56px` }}>
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 64 }}>
            <h2 className="vc-display" style={{ fontSize: 72, lineHeight: 0.95, margin: 0 }}>
              {tl('Eine', 'One')} <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>{tl('Reise.', 'Journey.')}</span><br />
              {tl('Vier Phasen.', 'Four Phases.')}
            </h2>
            <div className="vc-mono" style={{ fontSize: 12, color: c.muted, letterSpacing: '0.18em' }}>04 GROUPS / 17 YEARS</div>
          </div>

          {/* Timeline visual */}
          <div style={{ position: 'relative', marginBottom: 80, marginTop: 40, height: 160 }}>
            {/* The horizontal line centered vertically */}
            <div style={{ position: 'absolute', top: 40, left: 0, right: 0, height: 2, background: c.line }}>
              <div style={{ width: '100%', height: '100%', background: orange }} />
            </div>
            
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', position: 'absolute', inset: 0 }}>
              {groups.map((g, i) => (
                <div key={g.name} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  {/* Text above the line */}
                  <div className="vc-mono" style={{ height: 40, display: 'flex', alignItems: 'flex-end', paddingBottom: 16, fontSize: 11, color: c.muted, letterSpacing: '0.18em' }}>
                    {g.range} {tl('J.', 'yrs')}
                  </div>
                  
                  {/* Dot precisely centered on the line (height 16 + border 2*4 = 24. 24/2 = 12. Move up by 11px to center on the 2px line) */}
                  <div style={{ width: 16, height: 16, borderRadius: '50%', background: orange, border: `4px solid ${c.bg}`, marginTop: -11, zIndex: 2 }} />
                  
                  {/* Name below the line */}
                  <div className="vc-display" style={{ fontSize: 32, marginTop: 24 }}>{g.name}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Group cards */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
            {groups.map((g, i) => (
              <div key={g.name} className="vc-glass vc-card-hover" style={{ padding: 40, position: 'relative', overflow: 'hidden' }}>
                <div className="vc-serif" style={{ position: 'absolute', top: 16, right: 32, fontSize: 120, fontStyle: 'italic', color: orange, opacity: 0.15, fontWeight: 300, lineHeight: 1 }}>{g.range}</div>
                <div className="vc-mono" style={{ fontSize: 11, color: orange, letterSpacing: '0.2em', marginBottom: 12 }}>{g.tag}</div>
                <h3 className="vc-display" style={{ fontSize: 56, margin: '0 0 16px' }}>{g.name}</h3>
                <p style={{ fontSize: 15, color: c.muted, lineHeight: 1.6, margin: '0 0 24px', maxWidth: 440 }}>{g.desc}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {g.focus.map((f) => (
                    <span key={f} className="vc-mono" style={{ fontSize: 11, padding: '6px 12px', borderRadius: 999, background: c.glassBg, border: `1px solid ${c.line}`, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{f}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PRINCIPLES */}
      <section style={{ padding: `${pad(120)}px 56px`, background: c.bgAlt }}>
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
          <h2 className="vc-display" style={{ fontSize: 64, lineHeight: 0.95, margin: '0 0 64px', textAlign: 'center' }}>
            {tl('Drei', 'Three')} <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>{tl('Versprechen.', 'Promises.')}</span>
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { t: 'Open Source', d: tl('Volle Autonomie. Du adaptierst, was zu deiner Gemeinde passt — keine Lizenzkosten, kein Lock-in.', 'Full autonomy. You adapt what fits your church — no licensing costs, no lock-in.') },
              { t: tl('Erfahrung geteilt', 'Experience shared'), d: tl('Praxis aus 14+ Jahren Jugendarbeit. Was funktioniert, was nicht — wir teilen alles.', 'Practice from 14+ years of youth ministry. What works, what doesn\'t — we share everything.') },
              { t: 'Generation 360°', d: tl('Von 4 bis 21 — durchgängige Sprache, kohärente Werte, smoothe Übergänge zwischen Phasen.', 'From 4 to 21 — consistent language, coherent values, smooth transitions between phases.') },
            ].map((p, i) => (
              <div key={p.t} className="vc-glass" style={{ padding: 32 }}>
                <div className="vc-mono" style={{ fontSize: 11, color: orange, letterSpacing: '0.2em', marginBottom: 16 }}>0{i + 1}</div>
                <h3 className="vc-display" style={{ fontSize: 32, margin: '0 0 12px' }}>{p.t}</h3>
                <p style={{ fontSize: 14, color: c.muted, lineHeight: 1.65, margin: 0 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: `${pad(120)}px 56px`, position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 50% 50%, ${glow}, transparent 60%)` }} />
        <div className="vc-fade" style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
          <h2 className="vc-display" style={{ fontSize: 96, lineHeight: 0.92, margin: '0 0 32px' }}>
            {tl('Resourcen', 'Request')} <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>{tl('anfordern.', 'resources.')}</span>
          </h2>
          <a href="United Pakete.html" className="vc-btn-p" style={{ textDecoration: 'none' }}>{tl('United Pakete', 'United Packages')} →</a>
        </div>
      </section>

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