const PACKAGES_DATA = [
  {
    id: 'pilot',
    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',
    features: [
      'Format-Optionen: Awareness · Lead-Gen · Thought-Leadership',
      'Kanal-Wahl: Newsletter · LinkedIn · Podcast · YouTube',
      'Performance-Report nach der Kampagne',
    ],
  },
  {
    id: 'partnership',
    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 €',
    features: [
      'Wettbewerbsschutz: Du nennst mir 3 Wettbewerber',
      'Monatlicher Mix: Awareness, Lead-Gen, optionale Story-Anchors',
      'Multi-Channel-Standard, Mix pro Kampagne konfigurierbar',
    ],
  },
  {
    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',
    features: [
      'Podcast-Episode + YouTube-Video + Short',
      'Dedizierter Newsletter (DE + EN + CN via WeChat)',
      'Distribution + Focus Online (50k–300k) inklusive',
    ],
  },
];

function PackagesAccordion() {
  const [open, setOpen] = React.useState(false);
  return (
    <section id="pakete" style={{ padding: '40px 0 64px', background: 'var(--bg-page)', borderTop: '1px solid var(--border-default)' }}>
      <div className="container">
        {/* Risk-Reverser-Strip — surfaces existing promises at the pricing-decision moment.
            Per LP-Mode SOP: "Risiko-Reverser direkt am Preis, Limit nur wenn echt." */}
        <div className="packages-risk-strip" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 28, flexWrap: 'wrap', marginBottom: 32, fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-2)' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span aria-hidden="true">📊</span>Performance-Report nach jeder Kampagne
          </span>
          <span aria-hidden="true" style={{ color: 'var(--fg-3)' }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span aria-hidden="true">🛡</span>Wettbewerbsschutz im Partnership
          </span>
          <span aria-hidden="true" style={{ color: 'var(--fg-3)' }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span aria-hidden="true">🎯</span>Max. 3 Partner gleichzeitig
          </span>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 14 }}>
            Lieber selbst vergleichen?
          </div>
          <button
            onClick={() => setOpen(o => !o)}
            className="packages-accordion-toggle"
            aria-expanded={open}
            style={{
              background: '#fff',
              border: '1px solid var(--border-default)',
              borderRadius: 999,
              padding: '14px 24px',
              cursor: 'pointer',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 12,
              fontFamily: 'var(--font-sans)',
              fontSize: 15,
              fontWeight: 500,
              color: 'var(--fg-1)',
              transition: 'background 200ms, border-color 200ms, transform 150ms',
              boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
            }}>
            <span style={{ color: 'var(--fg-1)' }}>{open ? 'Übersicht schließen' : 'Alle Pakete im Vergleich'}</span>
            <span style={{
              display: 'inline-flex',
              width: 22,
              height: 22,
              borderRadius: 999,
              background: 'var(--ap-blue)',
              color: '#fff',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 12,
              transform: open ? 'rotate(180deg)' : 'rotate(0)',
              transition: 'transform 200ms',
            }}>↓</span>
          </button>
        </div>
        {open && (
          <div className="packages-accordion-grid" style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {PACKAGES_DATA.map(p => (
              <article key={p.id} style={{
                padding: 28,
                background: '#fff',
                border: '1px solid var(--border-default)',
                borderRadius: 12,
                display: 'flex',
                flexDirection: 'column',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ fontSize: 22 }}>{p.icon}</span>
                  <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, margin: 0, letterSpacing: '-0.01em', color: 'var(--fg-1)' }}>{p.name}</h3>
                </div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--ap-blue)', fontWeight: 500, marginTop: 4 }}>{p.sub}</div>
                <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 15, lineHeight: 1.45, color: 'var(--fg-2)', margin: '14px 0 0' }}>{p.lead}</p>
                <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--border-default)' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.02em', lineHeight: 1 }}>{p.price}</div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-3)', marginTop: 4 }}>{p.priceSub}</div>
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '16px 0 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {p.features.map((f, i) => (
                    <li key={i} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-sans)', fontSize: 13, lineHeight: 1.45, color: 'var(--fg-2)' }}>
                      <span style={{ color: 'var(--ap-blue)', fontWeight: 700, flexShrink: 0 }}>✓</span>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        )}
        <style>{`
          .packages-accordion-toggle:hover {
            background: var(--bg-page) !important;
            border-color: var(--ap-blue) !important;
            transform: translateY(-1px);
          }
          @media (max-width: 860px) {
            section#pakete .packages-accordion-grid {
              grid-template-columns: 1fr !important;
            }
            .packages-accordion-toggle {
              flex-wrap: wrap;
              text-align: center;
            }
          }
          @media (max-width: 640px) {
            section#pakete .packages-risk-strip {
              flex-direction: column;
              gap: 10px !important;
              align-items: center;
              text-align: center;
            }
            section#pakete .packages-risk-strip > span[aria-hidden="true"] {
              display: none;
            }
          }
        `}</style>
      </div>
    </section>
  );
}
window.PackagesAccordion = PackagesAccordion;