function HomePage() {
  return (
    <PublicPage>
      {/* Hero */}
      <section className="hero">
        <div className="container hero-grid">
          <div>
            <div className="eyebrow"><Icon name="shield-check" size={12} /> &nbsp;Let's Encrypt · Einrichtung & Überwachung</div>
            <h1 style={{ marginTop: 18 }}>
              SSL für Ihre Domain – <span className="accent">eingerichtet,&nbsp;überwacht,&nbsp;vergessen.</span>
            </h1>
            <p className="lead" style={{ marginTop: 18, maxWidth: 540 }}>Wir richten ein Let's Encrypt SSL-Zertifikat auf Ihrer Domain ein und prüfen alle 40 Tage, ob es weiterhin aktiv, gültig und korrekt eingebunden ist. 



            </p>

            <div className="hero-cta">
              <Link to="/checkout" className="btn btn-primary btn-lg">
                Für 14,50&nbsp;€ pro Jahr starten <Icon name="arrow-right" size={14} />
              </Link>
              <Link to="/product" className="btn btn-secondary btn-lg">Service-Details ansehen</Link>
            </div>

            <div className="hero-trust">
              <span className="row"><Icon name="check-circle" size={16} /> 12 Monate Laufzeit</span>
              <span className="row"><Icon name="check-circle" size={16} /> Prüfung alle 40 Tage</span>
              <span className="row"><Icon name="check-circle" size={16} /> Jederzeit kündbar im Dashboard</span>
            </div>
          </div>

          {/* Certificate visual */}
          <div className="cert-visual">
            <div className="cert-browser-bar">
              <Icon name="lock" size={13} />
              <span className="url"><span style={{ color: 'var(--green-ink)' }}>https://</span>meine-firma.de</span>
              <span className="badge badge-green" style={{ fontSize: 11 }}>
                <Icon name="check" size={11} /> sicher
              </span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <div style={{ width: 44, height: 44, borderRadius: 11, background: 'var(--green-soft)', display: 'grid', placeItems: 'center', color: 'var(--green-ink)' }}>
                <Icon name="shield-check" size={22} />
              </div>
              <div>
                <div style={{ fontWeight: 600, color: 'var(--navy-900)' }}>SSL-Zertifikat aktiv</div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>Let's Encrypt R11 · gültig</div>
              </div>
            </div>
            <div className="cert-row"><span className="k">Domain</span><span className="v">meine-firma.de</span></div>
            <div className="cert-row"><span className="k">Aussteller</span><span className="v">Let's Encrypt</span></div>
            <div className="cert-row"><span className="k">Gültig bis</span><span className="v">17.04.2026</span></div>
            <div className="cert-row"><span className="k">Letzte Prüfung</span><span className="v">04.05.2026 · 03:21</span></div>
            <div className="cert-row"><span className="k">Nächste Prüfung</span><span className="v">12.08.2026</span></div>
            <div className="cert-check-bar">
              <div style={{ color: 'var(--green-ink)' }}><Icon name="check-circle" size={18} /></div>
              <div style={{ fontSize: 13.5, color: 'var(--green-ink)' }}>
                <strong>Alle Prüfungen bestanden.</strong> Kein Eingreifen erforderlich.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Trust strip */}
      <section style={{ padding: '36px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
        <div className="container trust-row">
          <span>EU-DSGVO-konform</span>
          <span>·</span>
          <span>TLS 1.3</span>
          <span>·</span>
          <span>Kreditkarte · SEPA-Lastschrift</span>
          <span>·</span>
          <span>Support per Ticket-System</span>
          <span>·</span>
          <span>2-Faktor-Login</span>
        </div>
      </section>

      {/* What you get */}
      <section className="block">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">Was Sie buchen</div>
            <h2 style={{ marginTop: 12 }}>Eine Dienstleistung — kein Zertifikatsverkauf.</h2>
            <p className="lead muted" style={{ marginTop: 14 }}>
              Let's Encrypt Zertifikate sind kostenlos. Sie bezahlen uns ausschließlich für die saubere Einrichtung
              und die regelmäßige technische Kontrolle.
            </p>
          </div>

          <div className="feature-grid">
            <div className="feature">
              <div className="feature-icon"><Icon name="cog" size={20} /></div>
              <h4>Saubere Einrichtung</h4>
              <p>Ausstellung, Installation und korrekte Einbindung des Zertifikates auf Ihrer Domain – durch uns oder per Fernwartung mit Ihnen.</p>
            </div>
            <div className="feature">
              <div className="feature-icon"><Icon name="refresh" size={20} /></div>
              <h4>Prüfung alle 40 Tage</h4>
              <p>Automatisierte Kontrolle, ob Ihr Zertifikat gültig, korrekt eingebunden und über HTTPS erreichbar ist.</p>
            </div>
            <div className="feature">
              <div className="feature-icon"><Icon name="bell" size={20} /></div>
              <h4>Benachrichtigung bei Problemen</h4>
              <p>Falls etwas nicht stimmt – z. B. das Zertifikat abgelaufen ist – informieren wir Sie per E-Mail und im Dashboard.</p>
            </div>
            <div className="feature">
              <div className="feature-icon"><Icon name="shield" size={20} /></div>
              <h4>Keine Zugangsdaten nötig</h4>
              <p>Sie können Login-Daten übermitteln – oder einfach Fernwartung via TeamViewer oder AnyDesk wählen.</p>
            </div>
            <div className="feature">
              <div className="feature-icon"><Icon name="doc" size={20} /></div>
              <h4>Transparente Abrechnung</h4>
              <p>Rechnungen bequem per Kreditkarte oder SEPA-Lastschrift.</p>
            </div>
            <div className="feature">
              <div className="feature-icon"><Icon name="user" size={20} /></div>
              <h4>Kontrolle im Dashboard</h4>
              <p>Verträge, Rechnungen, Support-Tickets und die automatische Verlängerung – alles an einem Ort.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Two ways we work */}
      <section className="block bg-tint">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">So arbeiten wir</div>
            <h2 style={{ marginTop: 12 }}>Zwei Wege, wie wir Ihr SSL-Zertifikat einrichten.</h2>
            <p className="lead muted" style={{ marginTop: 14 }}>
              Sie entscheiden, wie wir vorgehen – mit verschlüsselt übermittelten Zugangsdaten
              oder ganz ohne Datenweitergabe per Fernwartung. Das Ergebnis ist identisch.
            </p>
          </div>

          <div className="ways-grid">
            <div className="way-card">
              <div className="way-head">
                <div className="way-icon"><Icon name="key" size={22} /></div>
                <div>
                  <div className="way-num">Weg 1</div>
                  <h3>Mit Zugangsdaten</h3>
                </div>
              </div>
              <p className="muted" style={{ fontSize: 14.5 }}>
                Sie übermitteln uns Ihre Hosting-Zugangsdaten verschlüsselt. Wir loggen uns ein,
                stellen das Let's Encrypt Zertifikat aus und binden es korrekt auf Ihrer Domain ein.
              </p>
              <ul className="way-steps">
                <li><span className="n">1</span><div><strong>Zugang verschlüsselt übermitteln</strong> – sicher über das Dashboard, nie per E-Mail.</div></li>
                <li><span className="n">2</span><div><strong>Wir richten alles ein</strong> – Ausstellung, Installation und HTTPS-Weiterleitung.</div></li>
                <li><span className="n">3</span><div><strong>Daten auf Wunsch gelöscht</strong> – nach Abschluss entfernen wir Ihre Zugangsdaten.</div></li>
              </ul>
              <div className="way-foot">
                <span className="badge badge-green"><Icon name="check" size={12} /> Schnellste Variante</span>
              </div>
            </div>

            <div className="way-card">
              <div className="way-head">
                <div className="way-icon"><Icon name="monitor" size={22} /></div>
                <div>
                  <div className="way-num">Weg 2</div>
                  <h3>Per Fernwartung</h3>
                </div>
              </div>
              <p className="muted" style={{ fontSize: 14.5 }}>
                Sie möchten keine Zugangsdaten herausgeben? Wir richten das Zertifikat gemeinsam
                mit Ihnen per Fernwartung über TeamViewer oder AnyDesk ein – Sie behalten die volle Kontrolle.
              </p>
              <ul className="way-steps">
                <li><span className="n">1</span><div><strong>Termin vereinbaren</strong> – Sie wählen einen passenden Zeitpunkt aus.</div></li>
                <li><span className="n">2</span><div><strong>Fernwartung starten</strong> – Verbindung über TeamViewer oder AnyDesk.</div></li>
                <li><span className="n">3</span><div><strong>Gemeinsam einrichten</strong> – Sie sehen jeden Schritt live mit.</div></li>
              </ul>
              <div className="way-foot">
                <span className="badge badge-blue"><Icon name="shield" size={12} /> Ohne Datenweitergabe</span>
              </div>
            </div>
          </div>

          <div className="row" style={{ justifyContent: 'center', marginTop: 30 }}>
            <Link to="/checkout" className="btn btn-primary btn-lg">Jetzt SSL-Service buchen <Icon name="arrow-right" size={14} /></Link>
            <Link to="/product" className="btn btn-secondary btn-lg">Ablauf im Detail</Link>
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section className="block">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36, alignItems: 'center' }}>
          <div>
            <div className="eyebrow">Preis</div>
            <h2 style={{ marginTop: 12 }}>Ein klarer Preis. Eine Dienstleistung.</h2>
            <p className="lead muted" style={{ marginTop: 14 }}>14,50 € pro Jahr, jährlich abgerechnet. Die Vertragslaufzeit beträgt
12 Monate und verlängert sich automatisch um weitere 12 Monate – sofern Sie die Verlängerung nicht im Kundendashboard deaktivieren.

            </p>

            <div className="callout" style={{ marginTop: 22 }}>
              <Icon name="info" size={16} />
              <div>
                <strong>Wichtig:</strong> Das SSL-Zertifikat selbst ist von Let's Encrypt kostenlos. Sie bezahlen ausschließlich die Einrichtung und das laufende Monitoring.
              
              </div>
            </div>
          </div>

          <div className="price-box">
            <div className="row" style={{ marginBottom: 8 }}>
              <span className="badge badge-green" style={{ background: 'oklch(0.32 0.08 155)', color: 'var(--green)' }}>
                <Icon name="lock" size={11} /> SSL-Service
              </span>
              <span className="mono" style={{ fontSize: 12, color: 'oklch(0.78 0.02 250)' }}>Standard-Vertrag</span>
            </div>
            <div className="price-amount">
              <span className="val">14,50&nbsp;€</span>
              <span className="per">/ Jahr</span>
            </div>
            <div style={{ fontSize: 13, color: 'oklch(0.78 0.02 250)', marginTop: 6 }}>Laufzeit 12 / 24 / 36 Monate 

            </div>

            <ul className="price-bullets">
              <li><Icon name="check" size={14} /> Einrichtung des Let's Encrypt Zertifikates</li>
              <li><Icon name="check" size={14} /> Technische Prüfung alle 40 Tage</li>
              <li><Icon name="check" size={14} /> Status &amp; Verlauf im Dashboard</li>
              <li><Icon name="check" size={14} /> Benachrichtigung bei Problemen</li>
              <li><Icon name="check" size={14} /> Fernwartung als Alternative</li>
              <li><Icon name="check" size={14} /> Support per Ticket-System</li>
            </ul>

            <Link to="/checkout" className="btn btn-success btn-block btn-lg" style={{ marginTop: 24 }}>
              Jetzt SSL-Service buchen <Icon name="arrow-right" size={14} />
            </Link>
            <div style={{ textAlign: 'center', marginTop: 12, fontSize: 12.5, color: 'oklch(0.74 0.02 250)' }}>
              Automatische Verlängerung jederzeit im Dashboard deaktivierbar.
            </div>
          </div>
        </div>
      </section>

      {/* FAQ teaser */}
      <section className="block bg-tint">
        <div className="container">
          <div className="faq-head">
            <div>
              <div className="eyebrow">Häufige Fragen</div>
              <h2 style={{ marginTop: 12, maxWidth: 620 }}>Die wichtigsten Antworten vorab.</h2>
            </div>
            <Link to="/faq" className="btn btn-secondary faq-head-cta">Alle Fragen ansehen <Icon name="arrow-right" size={14} /></Link>
          </div>
          <FAQPreview />
        </div>
      </section>

      {/* CTA */}
      <section className="block">
        <div className="container">
          <div style={{ background: 'var(--navy-900)', color: 'white', borderRadius: 20, padding: '56px 48px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 36, alignItems: 'center' }}>
            <div>
              <h2 style={{ color: 'white' }}>Domain absichern lassen – ohne sich um Erneuerung zu kümmern.</h2>
              <p className="lead" style={{ color: 'oklch(0.85 0.02 250)', marginTop: 14 }}>
                Buchen Sie heute und wir kümmern uns um Einrichtung, Monitoring und alle Folgeprüfungen.
              </p>
            </div>
            <div className="row" style={{ justifyContent: 'flex-end', gap: 12 }}>
              <Link to="/product" className="btn btn-secondary btn-lg" style={{ background: 'transparent', borderColor: 'oklch(0.45 0.04 250)', color: 'white' }}>Details ansehen</Link>
              <Link to="/checkout" className="btn btn-success btn-lg">Jetzt buchen</Link>
            </div>
          </div>
        </div>
      </section>
    </PublicPage>);

}

function FAQPreview() {
  const items = [
  { tag: 'Service', q: 'Verkaufen Sie ein SSL-Zertifikat?', a: 'Nein. Wir verkaufen ausschließlich die Dienstleistung – also die Einrichtung und die regelmäßige Prüfung eines Let\'s Encrypt SSL-Zertifikates. Das Zertifikat selbst ist von Let\'s Encrypt kostenlos verfügbar.' },
  { tag: 'Preis', q: 'Was genau bezahle ich?', a: 'Sie bezahlen die fachgerechte Einrichtung des Zertifikates auf Ihrer Domain sowie die automatisierte technische Prüfung alle 40 Tage, ob das Zertifikat gültig, aktiv und korrekt eingebunden ist.' },
  { tag: 'Technik', q: 'Warum wird alle 40 Tage geprüft?', a: 'Let\'s Encrypt Zertifikate sind 90 Tage gültig und werden automatisch erneuert. Mit einem Prüfintervall von 40 Tagen erkennen wir innerhalb eines Zyklus mindestens zweimal, ob die Erneuerung sauber durchgelaufen ist – Probleme fallen früh auf, bevor das Zertifikat abläuft.' },
  { tag: 'Einrichtung', q: 'Muss ich Zugangsdaten übermitteln?', a: 'Nein. Sie können wahlweise Hosting-Zugangsdaten bereitstellen – oder die Einrichtung gemeinsam per Fernwartung über TeamViewer oder AnyDesk durchführen.' }];

  return (
    <div className="faq-grid">
      {items.map((it, i) =>
      <article key={i} className="faq-card">
          <div className="faq-card-head">
            <span className="faq-num mono">Q.0{i + 1}</span>
            <span className="faq-tag">{it.tag}</span>
          </div>
          <h4 className="faq-card-q">{it.q}</h4>
          <p className="faq-card-a">{it.a}</p>
        </article>
      )}
    </div>);

}

window.HomePage = HomePage;
window.FAQPreview = FAQPreview;