function Packages() {
  const pkgs = [
    {
      id: 'pilot',
      featured: false,
      label: 'Bester Einstieg',
      icon: '🚀',
      name: 'Pilot',
      sub: 'Wir testen die Zusammenarbeit.',
      lead: 'Eine Kampagne. Ein Ziel. Kein Risiko für dich.',
      price: 'ab 2.500 €',
      priceSub: '1 Kampagne · einmalig',
      effort: '30 Min Briefing',
      features: [
        'Du gibst mir ein kurzes Briefing. Den Rest übernehme ich.',
        'Performance-Report nach der Kampagne',
        'Format-Optionen: Awareness · Lead-Gen · Thought-Leadership',
        'Kanal-Wahl: Newsletter · LinkedIn · Podcast · YouTube',
      ],
      proofs: [
        ['Cognizant', '60 Leads aus einer Awareness-Kampagne'],
        ['Continity-X', '129.000 Impressions bei der Zielgruppe'],
      ],
      cta: 'Pilot anfragen',
    },
    {
      id: 'partnership',
      featured: true,
      label: 'Beliebtester',
      icon: '🤝',
      name: 'Partnership',
      sub: '3 oder 6 Monate · max. 3 Partner gleichzeitig',
      lead: 'Top-of-Mind sein, wenn deine Entscheider entscheiden.',
      price: 'ab 16.000 €',
      priceSub: '3 Monate · 6 Monate ab 28.000 €',
      effort: '60 Min Monthly Review + kurze Briefings',
      features: [
        'Wettbewerbsschutz: Du nennst mir 3 Wettbewerber',
        'Gemeinsamer Kick-off: Positionierung, Ziele, roter Faden',
        'Monatlicher Mix: Awareness, Lead-Gen, optionale Story-Anchors',
        'Multi-Channel-Standard. Mix pro Kampagne konfigurierbar',
      ],
      proofs: [
        ['Exxeta', '250 Webinar-Anmeldungen · 108k LinkedIn-Impressions'],
        ['Berylls', '6 Monate Multi-Channel inkl. Thought-Leadership-Story'],
        ['Mobile.de', 'Partnership über LinkedIn, Newsletter und Podcast'],
      ],
      cta: 'Partnership anfragen',
    },
    {
      id: 'thought',
      icon: '🎙',
      name: 'Thought-Leadership-Story',
      sub: 'Premium-Format · Standalone oder integriert',
      lead: 'Du lieferst die Substanz. Ich liefere Angle, Produktion und Distribution.',
      price: 'ab 10.000 €',
      priceSub: 'Standalone · in Partnership integrierbar',
      effort: '60–120 Min Interview oder Daten-Briefing',
      features: [
        'Podcast-Episode (volle Länge) + YouTube-Video + Short',
        'Dedizierter Newsletter (DE + EN + CN via WeChat)',
        '2 LinkedIn Posts · 1 Story · 6 Assets · alle Kanäle',
        'Distribution + Focus Online (50k–150k) inklusive',
      ],
      proofs: [
        ['Thoughtworks', '~140k Impressions · 1.203 Klicks zur SDV-Studie'],
        ['Berylls', 'Beijing Auto Show als Story über alle Kanäle'],
      ],
      cta: 'Story besprechen',
    },
  ];

  return (
    <section id="pakete" style={{ padding: '120px 0', background: 'var(--bg-page)', borderTop: '1px solid var(--border-default)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 64px' }}>
          <div className="section-eyebrow" style={{ marginBottom: 20 }}>Pakete</div>
          <h2 className="section-title" style={{ fontSize: 56 }}>
            Drei Wege.<br/>
            <em style={{ color: 'var(--ap-blue)', fontWeight: 500 }}>Ein Ziel:</em> echte Entscheider-Gespräche.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, alignItems: 'stretch' }}>
          {pkgs.map(p => (
            <article key={p.id} className="card" style={{
              padding: 32,
              display: 'flex',
              flexDirection: 'column',
              background: p.featured ? 'var(--fg-1)' : '#fff',
              color: p.featured ? '#fff' : 'inherit',
              border: p.featured ? '1px solid var(--fg-1)' : '1px solid var(--border-default)',
              position: 'relative',
              transform: p.featured ? 'translateY(-12px)' : 'none',
              boxShadow: p.featured ? '0 24px 56px rgba(17,1,150,0.20)' : 'var(--shadow-sm)',
            }}>
              {p.label && (
                <div style={{
                  position: 'absolute',
                  top: -12,
                  left: '50%',
                  transform: 'translateX(-50%)',
                  background: p.featured ? 'var(--ap-blue)' : '#fff',
                  color: p.featured ? '#fff' : 'var(--ap-blue)',
                  border: p.featured ? 'none' : '1px solid var(--ap-blue)',
                  padding: '6px 14px',
                  borderRadius: 999,
                  fontFamily: 'var(--font-sans)',
                  fontSize: 11,
                  fontWeight: 700,
                  letterSpacing: '0.12em',
                  textTransform: 'uppercase',
                  whiteSpace: 'nowrap',
                }}>{p.label}</div>
              )}
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontSize: 28 }}>{p.icon}</span>
                <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 28, fontWeight: 500, margin: 0, letterSpacing: '-0.02em', color: p.featured ? '#fff' : 'var(--fg-1)' }}>{p.name}</h3>
              </div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: p.featured ? 'var(--ap-purple-medium)' : 'var(--ap-blue)', fontWeight: 500, marginTop: 6, letterSpacing: '0.02em' }}>{p.sub}</div>
              <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 18, lineHeight: 1.4, color: p.featured ? 'rgba(255,255,255,0.86)' : 'var(--fg-2)', margin: '20px 0 0' }}>{p.lead}</p>

              <div style={{ marginTop: 28, paddingTop: 20, borderTop: p.featured ? '1px solid rgba(255,255,255,0.18)' : '1px solid var(--border-default)' }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 36, fontWeight: 500, color: p.featured ? '#fff' : 'var(--fg-1)', letterSpacing: '-0.02em', lineHeight: 1 }}>{p.price}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: p.featured ? 'rgba(255,255,255,0.6)' : 'var(--fg-3)', marginTop: 6 }}>{p.priceSub}</div>
              </div>

              <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
                {p.features.map((f, i) => (
                  <li key={i} style={{ display: 'flex', gap: 10, fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.5, color: p.featured ? 'rgba(255,255,255,0.86)' : 'var(--fg-2)' }}>
                    <span style={{ color: p.featured ? 'var(--ap-pink)' : 'var(--ap-blue)', fontWeight: 700, flexShrink: 0 }}>✓</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>

              <div style={{ flex: 1 }}></div>

              <div style={{ marginTop: 24, fontFamily: 'var(--font-sans)', fontSize: 12, color: p.featured ? 'rgba(255,255,255,0.6)' : 'var(--fg-3)' }}>
                Dein Aufwand: {p.effort}
              </div>
              <a href="#kontakt" className={p.featured ? 'btn' : 'btn btn-primary'} style={{
                marginTop: 16,
                background: p.featured ? '#fff' : undefined,
                color: p.featured ? 'var(--fg-1)' : undefined,
                justifyContent: 'center',
              }}>{p.cta} →</a>
            </article>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <a href="#kontakt" style={{ fontFamily: 'var(--font-sans)', fontSize: 16, color: 'var(--ap-blue)', textDecoration: 'none', fontWeight: 500 }}>
            🧭 Unsicher welches Paket passt? Lass uns 30 Min sprechen →
          </a>
        </div>
      </div>
    </section>
  );
}
window.Packages = Packages;