function ProductPage() {
  const [term, setTerm] = useState(12);
  const { go } = useRouter();
  const { user } = useApp();
  const total = (14.50 * (term / 12)).toFixed(2).replace('.', ',');

  return (
    <PublicPage>
      <section style={{ padding: '40px 0 16px' }}>
        <div className="container">
          <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>
            <Link to="/">Start</Link> &nbsp;/&nbsp; <Link to="/product">Produkt</Link>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 64 }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.9fr', gap: 56, alignItems: 'start' }}>
          {/* Left: product details */}
          <div className="stack-6">
            <div>
              <div className="eyebrow"><Icon name="lock" size={12} /> &nbsp;Dienstleistung</div>
              <h1 style={{ marginTop: 14, fontSize: 42 }}>Let's Encrypt SSL Einrichtungs- &amp; Überwachungsservice</h1>
              <p className="lead" style={{ marginTop: 16 }}>
                Einrichtung eines Let's Encrypt SSL-Zertifikates auf Ihrer Domain inklusive regelmäßiger Prüfung
                alle 40 Tage, ob das Zertifikat weiterhin aktiv, aktuell und korrekt erreichbar ist.
              </p>
            </div>

            <div className="callout">
              <Icon name="info" size={16} />
              <div>
                <strong>Hinweis:</strong> Es wird ausdrücklich kein SSL-Zertifikat verkauft. Verkauft wird die
                technische Dienstleistung der Einrichtung und Überwachung. Let's Encrypt Zertifikate sind kostenlos
                erhältlich.
              </div>
            </div>

            <div>
              <h3 style={{ marginBottom: 14 }}>Im Service enthalten</h3>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                {[
                  'Einrichtung eines Let\'s Encrypt SSL-Zertifikates',
                  'Prüfung alle 40 Tage',
                  'Kontrolle auf Gültigkeit und Erreichbarkeit',
                  'Technische Basisüberwachung der HTTPS-Antwort',
                  'Statushistorie im Dashboard',
                  'Benachrichtigung bei Problemen',
                  'Support per Ticket-System',
                  'Wahl: Zugangsdaten oder Fernwartung',
                ].map((t) => (
                  <div key={t} className="row" style={{ padding: '8px 0' }}>
                    <span style={{ color: 'var(--green-ink)' }}><Icon name="check-circle" size={16} /></span>
                    <span style={{ fontSize: 14 }}>{t}</span>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <h3 style={{ marginBottom: 14 }}>So läuft die Einrichtung ab</h3>
              <ol style={{ paddingLeft: 22, color: 'var(--ink-2)', lineHeight: 1.7, fontSize: 15 }}>
                <li>Sie buchen den Service, geben Ihre Domain und gewünschte Laufzeit an.</li>
                <li>Sie wählen, wie wir Zugriff erhalten: Hosting-Zugangsdaten oder Fernwartung (TeamViewer / AnyDesk).</li>
                <li>Unser Team richtet das Let's Encrypt Zertifikat auf Ihrer Domain ein.</li>
                <li>Sie erhalten eine Bestätigung mit allen relevanten Informationen.</li>
                <li>Alle 40 Tage prüfen wir automatisiert, ob das Zertifikat weiterhin korrekt funktioniert.</li>
              </ol>
            </div>

            <div>
              <h3 style={{ marginBottom: 14 }}>Vertragsdetails</h3>
              <div className="table-wrap">
                <table className="table">
                  <tbody>
                    <tr><td style={{ width: '36%', color: 'var(--muted)' }}>Preis</td><td>14,50 € pro Jahr</td></tr>
                    <tr><td style={{ color: 'var(--muted)' }}>Vertragslaufzeit</td><td>12 Monate (wahlweise 24 oder 36 Monate beim Kauf)</td></tr>
                    <tr><td style={{ color: 'var(--muted)' }}>Automatische Verlängerung</td><td>Verlängert sich um 12 Monate, sofern nicht im Dashboard deaktiviert</td></tr>
                    <tr><td style={{ color: 'var(--muted)' }}>Prüfintervall</td><td>Alle 40 Tage</td></tr>
                    <tr><td style={{ color: 'var(--muted)' }}>Zahlungsarten</td><td>Kreditkarte (Visa, Mastercard, Amex), SEPA-Lastschrift</td></tr>
                    <tr><td style={{ color: 'var(--muted)' }}>Abrechnung</td><td>Über Vitalarista LLC (USA) — Rechnung ohne Ausweis von Umsatzsteuer</td></tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div>
              <h3 style={{ marginBottom: 14 }}>Einrichtung – auf Ihre Art</h3>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <div className="card">
                  <div className="row" style={{ marginBottom: 10 }}>
                    <span className="feature-icon" style={{ marginBottom: 0 }}><Icon name="user" size={18} /></span>
                    <h4 style={{ margin: 0 }}>Mit Zugangsdaten</h4>
                  </div>
                  <p className="muted" style={{ fontSize: 14 }}>
                    Sie übermitteln Login-Daten Ihres Hosting-Anbieters – wir richten alles im Hintergrund ein.
                  </p>
                </div>
                <div className="card">
                  <div className="row" style={{ marginBottom: 10 }}>
                    <span className="feature-icon" style={{ marginBottom: 0 }}><Icon name="eye" size={18} /></span>
                    <h4 style={{ margin: 0 }}>Per Fernwartung</h4>
                  </div>
                  <p className="muted" style={{ fontSize: 14 }}>
                    Sie möchten keine Daten teilen? Wir machen es gemeinsam per TeamViewer oder AnyDesk.
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Right: sticky buy box */}
          <div style={{ position: 'sticky', top: 88 }}>
            <div className="card-elevated" style={{ padding: 24, borderRadius: 18 }}>
              <div className="row" style={{ marginBottom: 14 }}>
                <span className="badge badge-green"><Icon name="lock" size={11} /> SSL-Service</span>
                <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>Art-Nr. CG-SSL-LE-01</span>
              </div>

              <div style={{ fontSize: 13, color: 'var(--muted)' }}>Laufzeit auswählen</div>
              <div className="stack-3" style={{ marginTop: 10 }}>
                {[
                  { v: 12, label: '12 Monate', sub: '14,50 € · jährlich' },
                  { v: 24, label: '24 Monate', sub: '29,00 € · für 2 Jahre' },
                  { v: 36, label: '36 Monate', sub: '43,50 € · für 3 Jahre' },
                ].map((o) => (
                  <label key={o.v} className={'radio-card' + (term === o.v ? ' selected' : '')}>
                    <span className="radio-dot" />
                    <span style={{ flex: 1 }}>
                      <div style={{ fontWeight: 500 }}>{o.label}</div>
                      <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{o.sub}</div>
                    </span>
                    <input
                      type="radio"
                      name="term"
                      value={o.v}
                      checked={term === o.v}
                      onChange={() => setTerm(o.v)}
                      style={{ display: 'none' }}
                    />
                  </label>
                ))}
              </div>

              <div className="divider" />

              <div className="row-between">
                <div>
                  <div style={{ fontSize: 13, color: 'var(--muted)' }}>Gesamtbetrag</div>
                  <div style={{ fontSize: 32, fontWeight: 600, color: 'var(--navy-900)', letterSpacing: '-0.02em' }}>
                    {total}&nbsp;€
                  </div>
                </div>
                <div style={{ textAlign: 'right', fontSize: 12, color: 'var(--muted)' }}>
                  ohne MwSt.<br />(US LLC)
                </div>
              </div>

              <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 18 }} onClick={() => { sessionStorage.setItem('cg.term', term); go(user.loggedIn ? '/checkout' : '/register'); }}>
                Jetzt Einrichtung beauftragen <Icon name="arrow-right" size={14} />
              </button>

              <div style={{ marginTop: 12, fontSize: 12, color: 'var(--muted)', textAlign: 'center' }}>
                Automatische Verlängerung — jederzeit im Dashboard deaktivierbar.
              </div>

              <div className="divider" />

              <ul style={{ listStyle: 'none', padding: 0, margin: 0, fontSize: 13.5, color: 'var(--ink-2)' }}>
                <li className="row" style={{ padding: '5px 0' }}><Icon name="shield-check" size={14} /> Sichere Zahlungsabwicklung</li>
                <li className="row" style={{ padding: '5px 0' }}><Icon name="refresh" size={14} /> Prüfung alle 40 Tage</li>
                <li className="row" style={{ padding: '5px 0' }}><Icon name="support" size={14} /> Support per Ticket-System</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </PublicPage>
  );
}

window.ProductPage = ProductPage;