function CheckoutPage() {
  const { go } = useRouter();
  const { showToast, user, authReady } = useApp();
  const initTerm = parseInt(sessionStorage.getItem('cg.term') || '12');
  // Rueckkehr von Stripe auswerten (?checkout=success / ?checkout=cancel)
  const urlParams = new URLSearchParams(window.location.search);
  const paidReturn = urlParams.get('checkout') === 'success';
  const [step, setStep] = useState(paidReturn ? 3 : 1);
  const [loading, setLoading] = useState(false);
  const [embed, setEmbed] = useState(null); // { clientSecret, publishableKey } fuer eingebettetes Bezahlfeld
  const [data, setData] = useState({
    domain: '',
    term: initTerm,
    customerType: 'company',
    first: '', last: '',
    company: '',
    street: '', zip: '', city: '', country: 'Deutschland',
    email: '', phone: '',
    techMode: 'credentials', // 'credentials' | 'remote'
    hoster: '', loginUrl: '', techUser: '', techPass: '',
    remoteTool: 'TeamViewer',
    agreeTerms: false, agreeRenew: false
  });
  const total = (14.50 * (data.term / 12)).toFixed(2).replace('.', ',');
  const update = (k, v) => setData((p) => ({ ...p, [k]: v }));

  const canSubmit = data.agreeTerms && data.agreeRenew && data.domain && data.email;

  // Nach Rueckkehr von Stripe: bestellte Daten aus sessionStorage holen + URL aufraeumen
  const savedOrder = (() => {
    try { return JSON.parse(sessionStorage.getItem('cg.order') || '{}'); }
    catch (e) { return {}; }
  })();

  useEffect(() => {
    const state = urlParams.get('checkout');
    if (state === 'cancel') {
      showToast('Zahlung abgebrochen — Sie können es jederzeit erneut versuchen.');
    }
    if (state === 'success' || state === 'cancel') {
      // Query-Parameter entfernen, damit ein Reload nicht erneut auslöst
      window.history.replaceState(null, '', window.location.pathname + window.location.hash);
    }
  }, []);

  // Kauf nur mit Konto: nicht eingeloggt -> zum Login
  useEffect(() => { if (authReady && !user.loggedIn) go('/login'); }, [authReady, user.loggedIn]);

  // Kundendaten aus dem Profil vorbelegen (nur leere Felder)
  useEffect(() => {
    if (!user.loggedIn) return;
    setData((p) => ({
      ...p,
      first: p.first || user.first,
      last: p.last || user.last,
      company: p.company || (user.company && user.company.name) || '',
      street: p.street || user.street,
      zip: p.zip || user.zip,
      city: p.city || user.city,
      country: user.country || p.country,
      email: p.email || user.email,
      phone: p.phone || user.phone,
    }));
  }, [user.loggedIn]);

  // Startet die Stripe-Checkout-Session und leitet zur gesicherten Bezahlseite weiter
  async function startCheckout() {
    if (!canSubmit || loading) return;
    setLoading(true);
    try {
      sessionStorage.setItem('cg.order', JSON.stringify({
        domain: data.domain, email: data.email, term: data.term
      }));
      const res = await fetch('/api/create-checkout-session', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          term: data.term,
          domain: data.domain,
          userId: user.id,
          email: data.email,
          name: `${data.first} ${data.last}`.trim(),
          company: data.company,
          customerType: data.customerType
        })
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || (!json.clientSecret && !json.url)) {
        throw new Error(json.error || 'Die Zahlung konnte nicht gestartet werden.');
      }
      if (json.clientSecret) {
        // Eingebettetes Bezahlfeld direkt auf der Seite anzeigen (kein Wechsel zu Stripe)
        setEmbed({ clientSecret: json.clientSecret, publishableKey: json.publishableKey });
        setLoading(false);
        window.scrollTo({ top: 0, behavior: 'instant' });
      } else {
        window.location.href = json.url; // Fallback: Weiterleitung
      }
    } catch (err) {
      setLoading(false);
      showToast(err.message || 'Die Zahlung konnte nicht gestartet werden.');
    }
  }

  if (!authReady) {
    return (
      <PublicPage>
        <section style={{ padding: '120px 0', textAlign: 'center' }}>
          <div className="container-narrow"><span className="muted">Lädt …</span></div>
        </section>
      </PublicPage>);
  }
  if (!user.loggedIn) return null; // Weiterleitung zum Login via useEffect

  if (embed) {
    return (
      <PublicPage noFooter>
        <section style={{ padding: '36px 0 80px' }}>
          <div className="container-narrow">
            <div className="mono" style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 6 }}>
              <Link to="/">Start</Link> &nbsp;/&nbsp; <Link to="/product">Produkt</Link> &nbsp;/&nbsp; Zahlung
            </div>
            <div className="row-between" style={{ alignItems: 'center', marginTop: 4 }}>
              <h1 style={{ fontSize: 32 }}>Sichere Zahlung</h1>
              <button className="btn btn-ghost" onClick={() => setEmbed(null)}>
                <Icon name="arrow-right" size={14} style={{ transform: 'rotate(180deg)' }} /> Zurück
              </button>
            </div>
            <p className="muted" style={{ marginTop: 6 }}>Bezahlung mit Kreditkarte oder SEPA-Lastschrift — Sie bleiben auf ready-ssl.com.</p>
            <div className="section-card" style={{ marginTop: 20, padding: 16 }}>
              <StripeEmbeddedCheckout
                clientSecret={embed.clientSecret}
                publishableKey={embed.publishableKey}
                onError={(m) => { showToast(m); setEmbed(null); }}
              />
            </div>
          </div>
        </section>
      </PublicPage>);
  }

  if (step === 3) {
    return (
      <PublicPage>
        <section style={{ padding: '80px 0' }}>
          <div className="container-narrow">
            <div className="card-elevated" style={{ padding: 48, textAlign: 'center' }}>
              <div style={{ width: 64, height: 64, borderRadius: 16, background: 'var(--green-soft)', color: 'var(--green-ink)', display: 'grid', placeItems: 'center', margin: '0 auto 22px' }}>
                <Icon name="check-circle" size={32} />
              </div>
              <h2>Vielen Dank — Ihre Zahlung war erfolgreich.</h2>
              <p className="lead muted" style={{ marginTop: 14, maxWidth: 540, margin: '14px auto 0' }}>
                Wir haben Ihre Zahlung und Buchung für <strong>{savedOrder.domain || data.domain}</strong> erhalten.
                Sie erhalten in Kürze eine Bestätigung an <strong>{savedOrder.email || data.email}</strong>.
                Unser Team meldet sich innerhalb von 24 Stunden zur Einrichtung.
              </p>
              <div className="mono" style={{ fontSize: 13, color: 'var(--muted)', marginTop: 16 }}>
                Auftragsnummer: CG-2026-05132
              </div>
              <div className="row" style={{ justifyContent: 'center', marginTop: 28 }}>
                <Link to="/dashboard" className="btn btn-primary">Zum Dashboard <Icon name="arrow-right" size={14} /></Link>
                <Link to="/dashboard/invoices" className="btn btn-secondary">Rechnung ansehen</Link>
              </div>
            </div>
          </div>
        </section>
      </PublicPage>);

  }

  return (
    <PublicPage noFooter>
      <section style={{ padding: '36px 0 80px' }}>
        <div className="container">
          <div className="mono" style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 6 }}>
            <Link to="/">Start</Link> &nbsp;/&nbsp; <Link to="/product">Produkt</Link> &nbsp;/&nbsp; Checkout
          </div>
          <h1 style={{ fontSize: 32 }}>Checkout</h1>
          <p className="muted" style={{ marginTop: 6 }}>Schritt {step} von 2 — {step === 1 ? 'Domain & Adressdaten' : 'Zahlung & Bestätigung'}</p>

          <div className="checkout-grid" style={{ marginTop: 28 }}>
            <div className="stack-6">
              {step === 1 ?
              <React.Fragment>
                  {/* Domain & term */}
                  <div className="section-card">
                    <h3>Domain &amp; Laufzeit</h3>
                    <p className="sub">Auf welcher Domain soll das SSL-Zertifikat eingerichtet werden?</p>

                    <div className="field">
                      <label className="label">Domainname</label>
                      <div className="input-prefix">
                        <span className="pfx">https://</span>
                        <input className="input" style={{ paddingLeft: 78 }} value={data.domain} onChange={(e) => update('domain', e.target.value)} placeholder="ihre-domain.de" />
                      </div>
                      <span className="help">Bitte geben Sie die Domain ohne Pfad an (z. B. <span className="mono">ihre-domain.de</span>).</span>
                    </div>

                    <div style={{ marginTop: 18 }}>
                      <label className="label">Vertragslaufzeit</label>
                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginTop: 8 }}>
                        {[12, 24, 36].map((t) =>
                      <label key={t} className={'radio-card' + (data.term === t ? ' selected' : '')}>
                            <span className="radio-dot" />
                            <span>
                              <div style={{ fontWeight: 500 }}>{t} Monate</div>
                              <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{(14.50 * (t / 12)).toFixed(2).replace('.', ',')} €</div>
                            </span>
                            <input type="radio" name="term-c" checked={data.term === t} onChange={() => update('term', t)} style={{ display: 'none' }} />
                          </label>
                      )}
                      </div>
                    </div>
                  </div>

                  {/* Customer */}
                  <div className="section-card">
                    <h3>Kundendaten</h3>
                    <p className="sub">Wir benötigen Ihre Daten für Vertrag und Rechnungsstellung.</p>

                    <div className="row" style={{ marginBottom: 14 }}>
                      <label className={'radio-card' + (data.customerType === 'private' ? ' selected' : '')} style={{ flex: 1 }}>
                        <span className="radio-dot" />
                        <span><div style={{ fontWeight: 500 }}>Privatkunde</div></span>
                        <input type="radio" checked={data.customerType === 'private'} onChange={() => update('customerType', 'private')} style={{ display: 'none' }} />
                      </label>
                      <label className={'radio-card' + (data.customerType === 'company' ? ' selected' : '')} style={{ flex: 1 }}>
                        <span className="radio-dot" />
                        <span><div style={{ fontWeight: 500 }}>Firma</div></span>
                        <input type="radio" checked={data.customerType === 'company'} onChange={() => update('customerType', 'company')} style={{ display: 'none' }} />
                      </label>
                    </div>

                    <div className="field-row cols-2">
                      <div className="field"><label className="label">Vorname</label><input className="input" value={data.first} onChange={(e) => update('first', e.target.value)} /></div>
                      <div className="field"><label className="label">Name</label><input className="input" value={data.last} onChange={(e) => update('last', e.target.value)} /></div>
                    </div>

                    <div className="field" style={{ marginTop: 14 }}>
                      <label className="label">Firma <span className="opt">optional</span></label>
                      <input className="input" value={data.company} onChange={(e) => update('company', e.target.value)} placeholder="Firmenname" />
                    </div>

                    <div className="field-row cols-2" style={{ marginTop: 14, gridTemplateColumns: '2fr 1fr' }}>
                      <div className="field"><label className="label">Straße &amp; Hausnummer</label><input className="input" value={data.street} onChange={(e) => update('street', e.target.value)} /></div>
                      <div className="field"><label className="label">PLZ</label><input className="input" value={data.zip} onChange={(e) => update('zip', e.target.value)} /></div>
                    </div>

                    <div className="field-row cols-2" style={{ marginTop: 14 }}>
                      <div className="field"><label className="label">Ort</label><input className="input" value={data.city} onChange={(e) => update('city', e.target.value)} /></div>
                      <div className="field"><label className="label">Land</label>
                        <select className="select" value={data.country} onChange={(e) => update('country', e.target.value)}>
                          <option>Deutschland</option><option>Österreich</option><option>Schweiz</option><option>Luxemburg</option>
                        </select>
                      </div>
                    </div>

                    <div className="field-row cols-2" style={{ marginTop: 14 }}>
                      <div className="field"><label className="label">E-Mail-Adresse</label><input className="input" type="email" value={data.email} onChange={(e) => update('email', e.target.value)} /></div>
                      <div className="field"><label className="label">Telefonnummer <span className="opt">optional</span></label><input className="input" value={data.phone} onChange={(e) => update('phone', e.target.value)} /></div>
                    </div>
                  </div>

                  {/* Technical access */}
                  <div className="section-card">
                    <h3>Zugang für die Einrichtung</h3>
                    <p className="sub">Wie sollen wir Zugriff auf Ihr Hosting erhalten? Sie können Daten übermitteln oder Fernwartung wählen.</p>

                    <div className="row" style={{ marginBottom: 14 }}>
                      <label className={'radio-card' + (data.techMode === 'credentials' ? ' selected' : '')} style={{ flex: 1 }}>
                        <span className="radio-dot" />
                        <span><div style={{ fontWeight: 500 }}>Zugangsdaten übermitteln</div><div style={{ fontSize: 12.5, color: 'var(--muted)' }}>verschlüsselt gespeichert</div></span>
                        <input type="radio" checked={data.techMode === 'credentials'} onChange={() => update('techMode', 'credentials')} style={{ display: 'none' }} />
                      </label>
                      <label className={'radio-card' + (data.techMode === 'remote' ? ' selected' : '')} style={{ flex: 1 }}>
                        <span className="radio-dot" />
                        <span><div style={{ fontWeight: 500 }}>Einrichtung per Fernwartung</div><div style={{ fontSize: 12.5, color: 'var(--muted)' }}>TeamViewer oder AnyDesk</div></span>
                        <input type="radio" checked={data.techMode === 'remote'} onChange={() => update('techMode', 'remote')} style={{ display: 'none' }} />
                      </label>
                    </div>

                    {data.techMode === 'credentials' ?
                  <div className="stack-4">
                        <div className="callout">
                          <Icon name="info" size={16} />
                          <div>Alle Angaben in diesem Block sind <strong>optional</strong> und werden verschlüsselt gespeichert. Sie können sie auch später im Dashboard nachreichen.</div>
                        </div>
                        <div className="field-row cols-2">
                          <div className="field"><label className="label">Hosting- / Domain-Anbieter <span className="opt">optional</span></label><input className="input" value={data.hoster} onChange={(e) => update('hoster', e.target.value)} placeholder="z. B. IONOS, Strato, all-inkl …" /></div>
                          <div className="field"><label className="label">Login-Link zum Anbieter <span className="opt">optional</span></label><input className="input" value={data.loginUrl} onChange={(e) => update('loginUrl', e.target.value)} placeholder="https://login.ionos.de" /></div>
                        </div>
                        <div className="field-row cols-2">
                          <div className="field"><label className="label">Benutzername <span className="opt">optional</span></label><input className="input" value={data.techUser} onChange={(e) => update('techUser', e.target.value)} /></div>
                          <div className="field"><label className="label">Passwort <span className="opt">optional</span></label><input className="input" type="password" value={data.techPass} onChange={(e) => update('techPass', e.target.value)} placeholder="•••••••••" /></div>
                        </div>
                      </div> :

                  <div className="stack-4">
                        <div className="callout">
                          <Icon name="info" size={16} />
                          <div>Falls Sie keine Zugangsdaten übermitteln möchten, kann die Einrichtung alternativ per Fernwartung über TeamViewer oder AnyDesk erfolgen. Wir vereinbaren dafür einen Termin.</div>
                        </div>
                        <div className="row" style={{ gap: 10 }}>
                          {['TeamViewer', 'AnyDesk'].map((t) =>
                      <label key={t} className={'radio-card' + (data.remoteTool === t ? ' selected' : '')} style={{ flex: 1 }}>
                              <span className="radio-dot" />
                              <span><div style={{ fontWeight: 500 }}>{t}</div></span>
                              <input type="radio" checked={data.remoteTool === t} onChange={() => update('remoteTool', t)} style={{ display: 'none' }} />
                            </label>
                      )}
                        </div>
                      </div>
                  }
                  </div>

                  <div className="row-between">
                    <Link to="/product" className="btn btn-ghost"><Icon name="arrow-right" size={14} style={{ transform: 'rotate(180deg)' }} /> Zurück zum Produkt</Link>
                    <button className="btn btn-primary btn-lg" onClick={() => setStep(2)}>Weiter zur Zahlung <Icon name="arrow-right" size={14} /></button>
                  </div>
                </React.Fragment> :

              <React.Fragment>
                  {/* Payment */}
                  <div className="section-card">
                    <h3>Zahlung</h3>
                    <p className="sub">Die Bezahlung erfolgt sicher über Stripe. Nach Klick auf „Kostenpflichtig bestellen" werden Sie zur gesicherten Stripe-Bezahlseite weitergeleitet.</p>

                    <div className="callout-success callout">
                      <Icon name="shield-check" size={16} />
                      <div style={{ fontSize: 13.5 }}>
                        Kreditkarte &amp; SEPA-Lastschrift · 3-D-Secure · Ihre Zahlungsdaten werden
                        ausschließlich von <strong>Stripe</strong> verarbeitet (PCI-DSS Level 1) und
                        berühren unsere Server nicht.
                      </div>
                    </div>

                    <div className="summary-row" style={{ marginTop: 16, paddingTop: 0 }}>
                      <span className="muted">Heute fällig ({data.term} Monate)</span>
                      <span style={{ fontWeight: 600 }}>{total} €</span>
                    </div>
                    <div className="summary-row" style={{ fontSize: 12.5, color: 'var(--muted)' }}>
                      <span>Danach automatische Verlängerung</span>
                      <span>14,50 € / Jahr</span>
                    </div>
                  </div>

                  {/* Confirmation */}
                  <div className="section-card">
                    <h3>Bestätigung</h3>
                    <p className="sub">Bitte bestätigen Sie folgende Punkte aktiv vor Abschluss der Bestellung.</p>

                    <label className="check">
                      <input type="checkbox" checked={data.agreeTerms} onChange={(e) => update('agreeTerms', e.target.checked)} />
                      <span>Ich akzeptiere die <Link to="/agb" style={{ textDecoration: 'underline' }}>AGB</Link> und bestätige, dass ich verstanden habe, dass es sich nicht um den Verkauf eines SSL-Zertifikates handelt, sondern um eine Dienstleistung zur Einrichtung und regelmäßigen Überwachung eines Let's Encrypt SSL-Zertifikates.</span>
                    </label>

                    <label className="check">
                      <input type="checkbox" checked={data.agreeRenew} onChange={(e) => update('agreeRenew', e.target.checked)} />
                      <span>Ich stimme der automatischen Verlängerung um weitere 12 Monate zu, sofern ich diese nicht vor Ablauf im Kundendashboard deaktiviere.</span>
                    </label>

                    <div className="callout" style={{ marginTop: 8 }}>
                      <Icon name="info" size={16} />
                      <div>Rechnung erfolgt <strong>ohne Ausweis von Umsatzsteuer</strong>, da die Abrechnung über die Vitalarista LLC (USA) erfolgt.</div>
                    </div>
                  </div>

                  <div className="row-between">
                    <button className="btn btn-ghost" onClick={() => setStep(1)} disabled={loading}><Icon name="arrow-right" size={14} style={{ transform: 'rotate(180deg)' }} /> Zurück</button>
                    <button className="btn btn-primary btn-lg" disabled={!canSubmit || loading} onClick={startCheckout}>
                      {loading
                        ? <React.Fragment>Weiterleitung zu Stripe … <Icon name="lock" size={14} /></React.Fragment>
                        : <React.Fragment>Kostenpflichtig bestellen ({total} €) <Icon name="lock" size={14} /></React.Fragment>}
                    </button>
                  </div>
                </React.Fragment>
              }
            </div>

            {/* Order summary */}
            <div className="checkout-sticky">
              <div className="summary">
                <div className="summary-head">
                  <div className="row" style={{ gap: 10 }}>
                    <span className="feature-icon" style={{ width: 36, height: 36, marginBottom: 0 }}><Icon name="lock-check" size={18} /></span>
                    <div>
                      <div style={{ fontWeight: 600, color: 'var(--navy-900)' }}>SSL Einrichtungs- &amp; Überwachungsservice</div>
                      <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>Let's Encrypt · CG-SSL-LE-01</div>
                    </div>
                  </div>
                </div>
                <div className="summary-body">
                  <div className="summary-row"><span className="muted">Domain</span><span className="mono" style={{ fontWeight: 500 }}>{data.domain || '—'}</span></div>
                  <div className="summary-row"><span className="muted">Laufzeit</span><span>{data.term} Monate</span></div>
                  <div className="summary-row"><span className="muted">Prüfintervall</span><span>alle 40 Tage</span></div>
                  <div className="summary-row"><span className="muted">Auto-Verlängerung</span><span>+12 Monate</span></div>
                  <div className="summary-row" style={{ borderTop: '1px dashed var(--border)', marginTop: 8, paddingTop: 12 }}>
                    <span className="muted">Preis ({data.term / 12} × 14,50 €)</span><span>{total} €</span>
                  </div>
                  <div className="summary-row" style={{ color: 'var(--muted)', fontSize: 12.5 }}>
                    <span>Danach</span><span>14,50 € / Jahr</span>
                  </div>
                  <div className="summary-row summary-total"><span>Heute fällig</span><span>{total} €</span></div>
                </div>
              </div>

              <div className="callout-success callout" style={{ marginTop: 14 }}>
                <Icon name="shield-check" size={16} />
                <div style={{ fontSize: 13 }}>Sichere Übertragung · TLS 1.3 · Daten verbleiben in der EU.</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </PublicPage>);

}

window.CheckoutPage = CheckoutPage;