// website/page-preise.jsx — /preise

function PagePreise() {
  const [yearly, setYearly] = React.useState(true);
  const [openFaq, setOpenFaq] = React.useState(0);

  const plans = [
    {
      id: 'starter',
      name: 'Starter',
      subtitle: 'Ideal für kleine Teams, die starten.',
      priceMo: 99,
      priceYr: 948,
      features: [
        'Bis 3 aktive Stellen',
        'Jobs veröffentlichen',
        'Multiposting',
        'Kandidaten-Pipeline',
        'E-Mail-Vorlagen',
        'Mitarbeiter-Dossiers bis 25 MA',
        'Dokumente anfordern',
      ],
      cta: 'Demo anfragen',
    },
    {
      id: 'wachstum',
      name: 'Wachstum',
      subtitle: 'Die beste Wahl für wachsende KMU.',
      priceMo: 179,
      priceYr: 1788,
      popular: true,
      features: [
        'Unbegrenzte Stellen',
        'Multiposting',
        'Team-Kollaboration',
        'Dokumente anfordern',
        'Mitarbeiter-Dossiers',
        'E-Mail-Automationen',
        'Aufgaben & Kommentare',
        'Team-Berechtigungen',
        'Karriereseite (BALD)',
      ],
      cta: 'Demo anfragen',
    },
    {
      id: 'enterprise',
      name: 'Enterprise',
      subtitle: 'Für grössere Teams mit individuellen Anforderungen.',
      custom: true,
      features: [
        'Alles aus Wachstum',
        'API-Zugang',
        'Dedizierter Support',
        'Custom-Onboarding',
        'SLA-Garantie',
      ],
      cta: 'Demo anfragen',
    },
  ];

  const matrix = [
    { sec: 'Recruiting', rows: [
      ['Aktive Stellenausschreibungen',         'Max. 3',      'Unbegrenzt',  'Unbegrenzt'],
      ['Multiposting (100+ Jobplattformen)',      true,          true,          true],
      ['Dokumente anfordern',                   true,          true,          true],
      ['E-Mail-Kommunikation mit Kandidaten',   true,          true,          true],
      ['Kandidatengespräche erfassen',           true,          true,          true],
      ['Karriereseite',                         false,         'bald',        'bald'],
    ]},
    { sec: 'Mitarbeiterverwaltung', rows: [
      ['Mitarbeiterdossiers',                   'Max. 25',     'Unbegrenzt',  'Unbegrenzt'],
      ['Dokumentenverwaltung',                  'Bis zu 5',    'Unbegrenzt',  'Unbegrenzt'],
      ['Mitarbeitergespräche erfassen',          true,          true,          true],
      ['Eigene Gesprächsarten erstellen',        false,         true,          true],
    ]},
    { sec: 'Kommunikation', rows: [
      ['Individuelle E-Mail-Vorlagen',          '3',           '10',          'Unbegrenzt'],
      ['E-Mail-Signatur',                       true,          true,          true],
      ['E-Mail-Automationen',                   false,         true,          true],
      ['Standard-Benachrichtigungen & Absagegründe', true,    true,          true],
      ['Individuelle Absagegründe',             false,         true,          true],
    ]},
    { sec: 'Team & Berechtigungen', rows: [
      ['Nutzer (exkl. erster Admin)',            '2',           '10',          'Unbegrenzt'],
      ['Individuelle Nutzerrollen',              false,         true,          true],
      ['Standard-Rollen (Admin / HR Manager)',   true,          true,          true],
      ['Team-Feedback',                         true,          true,          true],
      ['Team-Kollaboration (@mention)',          false,         true,          true],
      ['Aufgaben im Team verteilen',             false,         true,          true],
    ]},
    { sec: 'Berichte', rows: [
      ['Time-to-Hire',                                      true,          true,          true],
      ['Kandidaten pro Stage',                              true,          true,          true],
      ['Source Analytics (welcher Kanal bringt Kandidaten)', false,        true,          true],
      ['Mitarbeiter-Fluktuation & Headcount',               false,         true,          true],
      ['Benutzerdefinierte Berichte',                       false,         'bald',        true],
    ]},
    { sec: 'Support & Plattform', rows: [
      ['Hosting in der Schweiz',                true,          true,          true],
      ['nDSG / DSGVO konform',                  true,          true,          true],
      ['Datenexport bei Kündigung',             true,          true,          true],
      ['Custom-Onboarding',                     false,         true,          true],
      ['API-Zugang',                            false,         false,         true],
      ['Dedizierter Support',                   false,         false,         true],
      ['SLA-Garantie',                          false,         false,         true],
    ]},
  ];

  const faqs = [
    {
      q: 'Kann ich den Plan später wechseln?',
      a: 'Ja. Du kannst jederzeit upgraden — der neue Plan ist sofort aktiv, abgerechnet wird anteilig. Downgrades greifen zum Ende der laufenden Periode.',
    },
    {
      q: 'Was passiert nach einem Jahr?',
      a: 'Dein Abo verlängert sich automatisch um die gewählte Periode. Du kannst bis 30 Tage vor Ablauf kündigen oder den Plan anpassen — ohne Strafgebühr.',
    },
    {
      q: 'Wie viele Nutzer sind inbegriffen?',
      a: 'Im Starter-Plan sind bis zu 3 Nutzer:innen enthalten. Im Wachstum unbegrenzt — du kannst dein ganzes Team einbinden. Im Enterprise individuell.',
    },
    {
      q: 'Gibt es eine kostenlose Testphase?',
      a: 'Wir setzen auf eine persönliche Demo statt auf einen Selbstbedienungs-Trial — so können wir dir Xaduno mit deinem Use-Case zeigen und du startest sofort produktiv.',
    },
    {
      q: 'Was passiert mit meinen Daten bei Kündigung?',
      a: 'Du erhältst einen vollständigen Export aller Daten in strukturiertem Format. Kein Lock-in — deine Personalakte gehört dir.',
    },
  ];

  return (
    <main>
      {/* HERO */}
      <section className="section" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div style={{ display: 'inline-block', marginBottom: 24 }}>
            <SwissPill>Preise · transparent</SwissPill>
          </div>
          <h1 className="h-hero" style={{ maxWidth: 880, margin: '0 auto 20px', textWrap: 'pretty', fontSize: 64 }}>
            Funktionen die du liebst.<br/><span className="gradient-word">Preise die überzeugen.</span>
          </h1>
          <p className="lead" style={{ maxWidth: 600, margin: '0 auto 32px' }}>
            Drei Pläne. Schweizer Hosting. Keine versteckten Setup-Gebühren.
          </p>
          {/* Toggle */}
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <div style={{
              display: 'inline-flex', padding: 4, borderRadius: 999,
              background: '#F1F5F9', border: '1px solid var(--stroke-soft)',
            }}>
              {[
                { id: 'mo', label: 'Monatlich', on: !yearly },
                { id: 'yr', label: 'Jährlich',  on: yearly },
              ].map((b) => (
                <button key={b.id}
                  onClick={() => setYearly(b.id === 'yr')}
                  style={{
                    padding: '8px 18px', borderRadius: 999, border: 'none',
                    background: b.on ? '#FEFEFE' : 'transparent',
                    boxShadow: b.on ? 'var(--shadow-xs)' : 'none',
                    color: b.on ? 'var(--text-strong)' : 'var(--text-sub)',
                    fontFamily: 'Inter', fontWeight: 600, fontSize: 13,
                    cursor: 'pointer',
                  }}>
                  {b.label}
                </button>
              ))}
            </div>
            {yearly && (
              <div style={{
                padding: '6px 12px', borderRadius: 999,
                background: '#E5FCED', color: '#0D622C',
                fontFamily: 'Inter', fontWeight: 600, fontSize: 12,
              }}>2 Monate gratis</div>
            )}
          </div>
        </div>
      </section>

      {/* PRICING CARDS */}
      <section className="section tight" style={{ paddingTop: 16, paddingBottom: 64 }}>
        <div className="container">
          <div className="grid-3" style={{ alignItems: 'stretch', gap: 18 }}>
            {plans.map((p) => <PlanCard key={p.id} plan={p} yearly={yearly} />)}
          </div>
        </div>
      </section>

      {/* FEATURE MATRIX */}
      <section className="section weak">
        <div className="container">
          <div style={{ maxWidth: 720, marginBottom: 48 }}>
            <div className="eyebrow">plan-vergleich</div>
            <h2 className="h-section">Alle Features im Überblick.</h2>
          </div>
          <div className="matrix-scroll">
          <div className="card" style={{ padding: 0, overflow: 'hidden', minWidth: 640 }}>
            {/* Header */}
            <div style={{
              display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr',
              padding: '18px 24px',
              background: '#F8FAFC',
              borderBottom: '1px solid var(--stroke-soft)',
            }}>
              <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: 12, color: 'var(--text-sub)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                Feature
              </div>
              {['Starter', 'Wachstum', 'Enterprise'].map((n, i) => (
                <div key={n} style={{
                  textAlign: 'center',
                  fontFamily: 'Poppins', fontWeight: 600, fontSize: 14,
                  color: i === 1 ? '#0F172A' : 'var(--text-default)',
                }}>
                  {i === 1 ? (
                    <span className="gradient-word" style={{ fontWeight: 700 }}>{n}</span>
                  ) : n}
                </div>
              ))}
            </div>
            {matrix.map((g, gi) => (
              <div key={g.sec}>
                <div style={{
                  padding: '12px 24px',
                  background: '#FEFEFE',
                  borderBottom: '1px solid #F1F5F9',
                  fontFamily: 'Poppins', fontWeight: 600, fontSize: 11,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: 'var(--text-sub)',
                }}>{g.sec}</div>
                {g.rows.map((r, ri) => (
                  <div key={ri} style={{
                    display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr',
                    padding: '13px 24px',
                    borderBottom: gi === matrix.length - 1 && ri === g.rows.length - 1 ? 'none' : '1px solid #F1F5F9',
                    alignItems: 'center',
                  }}>
                    <div style={{ fontFamily: 'Inter', fontSize: 14, color: 'var(--text-default)' }}>{r[0]}</div>
                    {r.slice(1).map((v, i) => (
                      <div key={i} style={{ textAlign: 'center' }}>
                        {v === true  ? <Check size={16} color="#16A34A" />
                        : v === false ? <Dash  size={16} color="#CBD5E1" />
                        : v === 'bald' ? (
                          <span style={{
                            padding: '3px 8px', borderRadius: 999,
                            background: '#FEEADD', color: '#8B3F0A',
                            fontFamily: 'Inter', fontSize: 10, fontWeight: 700,
                            letterSpacing: '0.05em', textTransform: 'uppercase',
                          }}>bald</span>
                        ) : (
                          <span style={{ fontFamily: 'Inter', fontWeight: 600, fontSize: 14, color: 'var(--text-strong)' }}>{v}</span>
                        )}
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            ))}
          </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="container" style={{ maxWidth: 880 }}>
          <div style={{ maxWidth: 720, marginBottom: 40 }}>
            <div className="eyebrow">häufige fragen · preise</div>
            <h2 className="h-section">Wir sind transparent.</h2>
          </div>
          <div className="card" style={{ padding: '8px 8px' }}>
            {faqs.map((f, i) => (
              <div key={i} style={{
                borderBottom: i < faqs.length - 1 ? '1px solid #F1F5F9' : 'none',
              }}>
                <button
                  onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                  style={{
                    width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
                    padding: '18px 20px',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    textAlign: 'left',
                  }}>
                  <span style={{
                    fontFamily: 'Poppins', fontWeight: 600, fontSize: 17,
                    color: 'var(--text-strong)', letterSpacing: '-0.01em',
                  }}>{f.q}</span>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                    style={{ transform: openFaq === i ? 'rotate(180deg)' : 'none', transition: 'transform 200ms ease', flexShrink: 0 }}>
                    <polyline points="6 9 12 15 18 9"/>
                  </svg>
                </button>
                {openFaq === i && (
                  <div style={{
                    padding: '0 20px 18px',
                    fontFamily: 'Inter', fontSize: 15, lineHeight: 1.6,
                    color: 'var(--text-default)',
                  }}>{f.a}</div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <CTABlock
        headline="Noch unsicher?"
        accent="Sprich mit uns."
        sub="In 30 Minuten zeigen wir dir Xaduno an deinem konkreten Anwendungsfall — und welcher Plan zu dir passt."
      />
    </main>
  );
}

function PlanCard({ plan, yearly }) {
  const popular = plan.popular;
  const price = yearly && plan.priceYr ? plan.priceYr : plan.priceMo;
  return (
    <div style={{
      position: 'relative',
      background: popular ? '#0F172A' : 'var(--bg-white)',
      color: popular ? '#FEFEFE' : 'var(--text-strong)',
      border: popular ? '1px solid #0F172A' : '1px solid var(--stroke-soft)',
      borderRadius: 24, padding: '32px 28px',
      boxShadow: popular ? '0 24px 48px -16px rgba(180,94,232,0.25)' : 'var(--shadow-xs)',
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      {popular && (
        <>
          <div style={{
            position: 'absolute', top: -120, right: -120, width: 320, height: 320,
            borderRadius: '50%', filter: 'blur(100px)', opacity: 0.45,
            background: 'radial-gradient(circle, #B45EE8 0%, #E14A8D 50%, transparent 80%)',
          }}></div>
          <div style={{
            position: 'absolute', top: 16, right: 16,
            padding: '4px 10px', borderRadius: 999,
            background: BRAND_GRAD, color: '#FEFEFE',
            fontFamily: 'Inter', fontWeight: 700, fontSize: 10,
            letterSpacing: '0.06em', textTransform: 'uppercase',
            zIndex: 1,
          }}>★ Beliebtester Plan</div>
        </>
      )}
      <div style={{ position: 'relative' }}>
        <div style={{
          fontFamily: 'Poppins', fontWeight: 600, fontSize: 24,
          letterSpacing: '-0.02em', marginBottom: 4,
        }}>{plan.name}</div>
        <div style={{
          fontFamily: 'Inter', fontSize: 13,
          color: popular ? 'rgba(254,254,254,0.7)' : 'var(--text-sub)',
          marginBottom: 24, minHeight: 36,
        }}>{plan.subtitle}</div>

        {plan.custom ? (
          <div style={{ marginBottom: 24 }}>
            <div style={{
              fontFamily: 'Poppins', fontWeight: 600, fontSize: 32,
              letterSpacing: '-0.02em', marginBottom: 4,
            }}>Auf Anfrage</div>
            <div style={{
              fontFamily: 'Inter', fontSize: 12,
              color: popular ? 'rgba(254,254,254,0.65)' : 'var(--text-sub)',
            }}>Individuelles Angebot für dein Team</div>
          </div>
        ) : (
          <div style={{ marginBottom: 24 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <div style={{
                fontFamily: 'Poppins', fontWeight: 600, fontSize: 52,
                letterSpacing: '-0.03em', lineHeight: 1,
              }}>CHF {yearly ? Math.round(plan.priceYr / 12) : plan.priceMo}</div>
              <div style={{
                fontFamily: 'Inter', fontSize: 14,
                color: popular ? 'rgba(254,254,254,0.65)' : 'var(--text-sub)',
              }}>/mtl.</div>
            </div>
            <div style={{
              fontFamily: 'Inter', fontSize: 12,
              color: popular ? 'rgba(254,254,254,0.6)' : 'var(--text-sub)',
              marginTop: 4,
            }}>
              {yearly ? `jährlich abgerechnet · CHF ${plan.priceYr}/Jahr` : 'monatlich abgerechnet'}
            </div>
          </div>
        )}

        <button
          type="button"
          onClick={() => { window.location.hash = 'demo'; }}
          className="btn"
          style={{
            width: '100%', justifyContent: 'center',
            background: popular ? '#FEFEFE' : '#0F172A',
            color: popular ? '#0F172A' : '#FEFEFE',
            marginBottom: 28,
          }}>
          {plan.cta} <ArrowRight size={13} />
        </button>

        <div style={{
          fontFamily: 'Poppins', fontWeight: 500, fontSize: 11,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: popular ? 'rgba(254,254,254,0.55)' : 'var(--text-sub)',
          marginBottom: 14,
        }}>enthalten</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {plan.features.map((f) => (
            <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Check size={14} color={popular ? '#5FCAF9' : '#16A34A'} />
              <div style={{
                fontFamily: 'Inter', fontSize: 14,
                color: popular ? 'rgba(254,254,254,0.85)' : 'var(--text-default)',
              }}>{f}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.PagePreise = PagePreise;