// United Pakete Page — alles kostenlos & open
function UnitedPaketePage() {
  const [t, setTweak] = window.useTweaks(window.SHARED_DEFAULTS);
  const theme = window.useTheme(t);
  const { c, orange, glow, pad } = theme;
  const [, , tl] = window.useLang();

  const packages = [
    {
      name: 'Starter',
      tag: tl('EINSTIEG', 'ENTRY'),
      desc: tl('Für Gemeinden, die United kennenlernen wollen — eine Altersgruppe deiner Wahl.', 'For churches that want to discover United — one age group of your choice.'),
      features: [
        tl('Curriculum Sample (4 Wochen)', 'Curriculum Sample (4 Weeks)'),
        tl('Eine Altersgruppe', 'One age group'),
        tl('Community Forum Zugang', 'Community Forum Access'),
        tl('Quartals-Update per E-Mail', 'Quarterly update by email'),
      ],
      cta: tl('Starter anfragen', 'Inquire Starter'),
    },
    {
      name: 'Church',
      tag: tl('EMPFOHLEN', 'RECOMMENDED'),
      featured: true,
      desc: tl('Volles Paket für Gemeinden, die alle vier Altersgruppen aktiv begleiten.', 'Full package for churches actively accompanying all four age groups.'),
      features: [
        tl('Alle Altersgruppen (Minis–Youth)', 'All age groups (Minis–Youth)'),
        tl('Komplette Curricula (52 Wochen)', 'Complete curricula (52 weeks)'),
        tl('Leiter-Trainings (4× pro Jahr)', 'Leader trainings (4× per year)'),
        tl('Direkter Coaching-Kanal', 'Direct coaching channel'),
        tl('Regio-Treffen', 'Regional meetings'),
        tl('Custom Adaption Support', 'Custom adaptation support'),
      ],
      cta: tl('Church Paket anfragen', 'Inquire Church Package'),
    },
    {
      name: 'Network',
      tag: tl('PARTNER', 'PARTNER'),
      desc: tl('Für Verbünde, Bewegungen und Multi-Site-Gemeinden.', 'For networks, movements and multi-site churches.'),
      features: [
        tl('Alles aus Church', 'Everything from Church'),
        tl('Multi-Standort-Support', 'Multi-location support'),
        tl('White-Label Option', 'White-label option'),
        tl('Strategie-Workshops', 'Strategy workshops'),
        tl('Quartals-Visite', 'Quarterly visit'),
        tl('Co-Development Resourcen', 'Co-development resources'),
      ],
      cta: tl('Partner-Gespräch buchen', 'Book partner call'),
    },
  ];

  const comparisonRows = [
    [tl('Curriculum (Wochen)', 'Curriculum (weeks)'), '4', '52', '52'],
    [tl('Altersgruppen', 'Age groups'), '1', '4', '4'],
    [tl('Leiter-Trainings', 'Leader trainings'), '—', tl('4× / Jahr', '4× / year'), tl('4× + Workshops', '4× + Workshops')],
    [tl('Coaching', 'Coaching'), 'Forum', tl('Direkt', 'Direct'), tl('Quartalsbesuch', 'Quarterly visit')],
    [tl('Multi-Site Support', 'Multi-site support'), '—', '—', '✓'],
    [tl('White-Label', 'White-label'), '—', '—', '✓'],
  ];

  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={tl('United · Pakete', 'United · Packages')}
        title={tl('Wähle dein', 'Choose your')}
        titleAccent={tl('Paket.', 'Package.')}
        subtitle={tl('Drei Wege, United für deine Gemeinde nutzbar zu machen — vom Einstieg bis zur Netzwerk-Partnerschaft. Alles 100% kostenlos und open.', 'Three ways to make United work for your church — from entry level to network partnership. All 100% free and open.')}
        meta={[{ k: tl('Modell', 'Model'), v: 'Open Source' }, { k: tl('Optionen', 'Options'), v: tl('3 Pakete', '3 Packages') }, { k: tl('Preis', 'Price'), v: tl('Kostenlos', 'Free') }]}
      />

      {/* PROMISE BANNER */}
      <section style={{ padding: `${pad(40)}px 56px 0` }}>
        <div className="vc-fade vc-glass" style={{ maxWidth: 1100, margin: '0 auto', padding: 32, textAlign: 'center', borderColor: orange }}>
          <div className="vc-mono" style={{ fontSize: 11, color: orange, letterSpacing: '0.2em', marginBottom: 12 }}>{tl('UNSER VERSPRECHEN', 'OUR PROMISE')}</div>
          <h2 className="vc-display" style={{ fontSize: 36, margin: 0, lineHeight: 1.2 }}>
            United {tl('ist und bleibt', 'is and remains')} <span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 400 }}>{tl('kostenlos.', 'free.')}</span>
          </h2>
          <p style={{ fontSize: 14, color: c.muted, margin: '12px 0 0', lineHeight: 1.6 }}>
            {tl('Keine Lizenzkosten. Keine versteckten Gebühren. Kein Lock-in. Nur Resourcen, die wirken.', 'No licensing costs. No hidden fees. No lock-in. Just resources that work.')}
          </p>
        </div>
      </section>

      {/* PACKAGES */}
      <section style={{ padding: `${pad(60)}px 56px ${pad(120)}px` }}>
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, alignItems: 'stretch' }}>
            {packages.map((p, i) => (
              <div key={p.name} className="vc-glass vc-card-hover" style={{
                padding: 40, display: 'flex', flexDirection: 'column', gap: 20,
                ...(p.featured ? { borderColor: orange, transform: 'translateY(-12px)', boxShadow: `0 24px 60px ${glow}` } : {}),
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span className="vc-mono" style={{ fontSize: 10, color: orange, letterSpacing: '0.2em', padding: '4px 12px', border: `1px solid ${orange}`, borderRadius: 999 }}>{p.tag}</span>
                  <span className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.15em' }}>0{i + 1} / 03</span>
                </div>
                <h3 className="vc-display" style={{ fontSize: 56, margin: 0, letterSpacing: '-0.03em' }}>{p.name}</h3>
                <div className="vc-serif" style={{ fontSize: 28, fontStyle: 'italic', color: orange, fontWeight: 400, lineHeight: 1 }}>{tl('Kostenlos', 'Free')}</div>
                <p style={{ fontSize: 14, color: c.muted, lineHeight: 1.65, margin: 0 }}>{p.desc}</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, paddingTop: 16, borderTop: `1px solid ${c.line}`, marginTop: 8 }}>
                  {p.features.map((f) => (
                    <div key={f} style={{ display: 'flex', gap: 12, fontSize: 13, lineHeight: 1.45 }}>
                      <span style={{ color: orange, marginTop: 1 }}>+</span>
                      <span>{f}</span>
                    </div>
                  ))}
                </div>
                <a href="Kontakt.html" className={p.featured ? 'vc-btn-p' : 'vc-btn-g'} style={{ justifyContent: 'center', textDecoration: 'none', marginTop: 'auto' }}>
                  {p.cta} →
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* COMPARISON */}
      <section style={{ padding: `${pad(120)}px 56px`, background: c.bgAlt }}>
        <div className="vc-fade" style={{ maxWidth: 1100, margin: '0 auto' }}>
          <h2 className="vc-display" style={{ fontSize: 64, lineHeight: 0.95, margin: '0 0 48px', textAlign: 'center' }}>
            {tl('Wofür entscheidest du dich?', 'What will you choose?')}
          </h2>
          <div className="vc-glass" style={{ overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', padding: '20px 32px', borderBottom: `1px solid ${c.line}` }}>
              <span className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{tl('Feature', 'Feature')}</span>
              <span className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.18em', textAlign: 'center' }}>Starter</span>
              <span className="vc-mono" style={{ fontSize: 11, color: orange, letterSpacing: '0.18em', textAlign: 'center' }}>Church</span>
              <span className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.18em', textAlign: 'center' }}>Network</span>
            </div>
            {comparisonRows.map((row, i) => (
              <div key={row[0]} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', padding: '16px 32px', borderBottom: i < comparisonRows.length - 1 ? `1px solid ${c.line}` : 'none', fontSize: 14 }}>
                <span style={{ color: c.muted }}>{row[0]}</span>
                <span style={{ textAlign: 'center' }}>{row[1]}</span>
                <span style={{ textAlign: 'center', color: orange, fontWeight: 600 }}>{row[2]}</span>
                <span style={{ textAlign: 'center' }}>{row[3]}</span>
              </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%)`, pointerEvents: 'none' }} />
        <div className="vc-fade" style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
          <h2 className="vc-display" style={{ fontSize: 80, lineHeight: 0.92, margin: '0 0 32px' }}>
            {tl('Unsicher, was passt?', 'Not sure what fits?')}
          </h2>
          <p className="vc-serif" style={{ fontSize: 18, color: c.muted, maxWidth: 540, margin: '0 auto 32px' }}>{tl('15 Minuten Gespräch — wir finden gemeinsam das richtige Paket für deine Gemeinde.', '15-minute call — we\'ll find the right package for your church together.')}</p>
          <a href="Kontakt.html" className="vc-btn-p" style={{ textDecoration: 'none' }}>{tl('Beratungstermin buchen', 'Book a consultation')} →</a>
        </div>
      </section>

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