/* Leistungen — Detailsektionen */

const leistungenDetail = [
  {
    icon: "shield-check",
    id: "sicherheit", title: "Sicherheit im Internet",
    paras: [
      "Betrug im Internet wird immer raffinierter — gefälschte E-Mails sehen heute täuschend echt aus, und auch gefälschte Websites sind kaum noch zu erkennen. Wir zeigen Ihnen, worauf Sie achten müssen, wie Sie sicher surfen und wie Sie sich mit einfachen Mitteln zuverlässig schützen — damit Sie das Internet ohne Angst nutzen können.",
    ],
  },
  {
    icon: "key-round",
    id: "passwoerter", title: "Passwörter & Passwort-Manager",
    paras: [
      "Jeder kennt das Problem: Für jede Website ein anderes Passwort — und dann vergisst man es doch wieder. Viele behelfen sich mit demselben Passwort überall oder schreiben sie auf einen Zettel. Das ist verständlich, aber leider unsicher.",
      "Wir zeigen Ihnen einen einfacheren Weg: Ein Passwort-Manager ist so etwas wie ein digitaler Tresor. Sie merken sich nur noch ein einziges Passwort — alles andere erledigt das Programm für Sie. Automatisch, sicher und auf allen Ihren Geräten verfügbar.",
      "Außerdem erklären wir Ihnen, was ein wirklich sicheres Passwort ausmacht — und was Passkeys sind: eine neue Methode, bei der Sie sich künftig ganz ohne Passwort anmelden können, zum Beispiel einfach mit Ihrem Fingerabdruck.",
    ],
  },
  {
    icon: "sparkles",
    id: "ki", title: "KI verstehen & anwenden",
    paras: [
      "Künstliche Intelligenz ist in aller Munde — und viele fragen sich: Was ist das eigentlich? Muss mich das interessieren? Wir erklären Ihnen verständlich und ohne Fachjargon, was hinter dem Begriff steckt und wie Ihnen KI im Alltag ganz praktisch helfen kann — zum Beispiel beim Formulieren von Briefen, beim Beantworten von Fragen oder beim Planen einer Reise.",
      "Genauso wichtig ist die andere Seite: Mit KI lassen sich heute täuschend echte Bilder, Stimmen und Videos erzeugen — sogenannte Deepfakes. Betrüger nutzen das aus, etwa mit gefälschten Anrufen von vermeintlichen Verwandten. Wir zeigen Ihnen, woran Sie solche Fälschungen erkennen und wie Sie sich mit einfachen Regeln zuverlässig schützen.",
    ],
  },
  {
    icon: "credit-card",
    id: "banking", title: "Banking & sicher einkaufen im Internet",
    paras: [
      "Online-Banking spart Wege und Zeit — wenn man ihm vertraut. Wir richten es gemeinsam mit Ihnen ein und üben in Ruhe, was Sie brauchen: Überweisungen, Daueraufträge, das Bezahlen mit PayPal oder der Bankkarte im Internet. Schritt für Schritt, bis Sie sich sicher fühlen.",
      "Auch beim Einkaufen zögern viele Menschen — aus gutem Grund. Gefälschte Shops, zu günstige Angebote und betrügerische Verkäufer machen es nicht leicht zu erkennen, wem man vertrauen kann. Diese Unsicherheit kennen wir — und sie ist absolut verständlich.",
      "Wir zeigen Ihnen, woran Sie einen seriösen Shop erkennen, welche Warnsignale Sie aufhorchen lassen sollten und wie Betrüger im Internet typischerweise vorgehen. Denn wer die Tricks kennt, tappt nicht in die Falle.",
      "Unser Ziel: dass Sie sich im Internet frei und sicher bewegen können — ohne ständig das Gefühl zu haben, einen Fehler zu machen.",
    ],
  },
  {
    icon: "landmark",
    id: "behoerden", title: "Digitale Behördengänge",
    paras: [
      "Immer mehr Behördengänge lassen sich heute bequem von zu Hause erledigen — ganz ohne Termin, ohne Wartenummer und ohne Fahrtwege. Was viele nicht wissen: Ihr Personalausweis kann das schon. Seit 2017 ist die Online-Ausweisfunktion (eID) bei neuen Ausweisen standardmäßig aktiviert — zusammen mit der kostenlosen AusweisApp wird Ihr Smartphone zum sicheren Ausweislesegerät.",
      "Wir richten gemeinsam mit Ihnen alles ein, was Sie dafür brauchen: die Online-Ausweisfunktion mit PIN, die BundID (Ihr zentrales Bürgerkonto für Behörden-Anliegen, über das Sie Bescheide künftig digital statt per Brief erhalten) und auf Wunsch die elektronische Patientenakte (ePA) Ihrer Krankenkasse, in der Befunde, Medikamente und Arztbriefe sicher an einem Ort liegen.",
      "Und dann üben wir das, was Sie wirklich brauchen: das Auto online an-, um- oder abmelden, eine Meldebescheinigung oder ein Führungszeugnis beantragen, den Wohnsitz ummelden oder Anträge wie Wohngeld digital stellen. Schritt für Schritt, an Ihren eigenen Geräten — bis Sie es allein können.",
    ],
  },
  {
    icon: "hard-drive-download",
    id: "datensicherung", title: "Ihre Daten sicher aufbewahren",
    paras: [
      "Stellen Sie sich vor, Ihr Computer geht kaputt — und mit ihm alle Fotos der letzten Jahre, wichtige Dokumente, Erinnerungen. Was dann? Für viele Menschen ist genau das irgendwann Realität. Dabei lässt es sich mit ein bisschen Vorbereitung ganz einfach verhindern.",
      "Wir sensibilisieren Sie für das Thema Datensicherung und zeigen Ihnen, wie eine einfache Backup-Strategie aussieht — also wie und wo Sie Ihre wichtigen Daten regelmäßig sichern, damit im Ernstfall nichts verloren geht.",
      "Ein großes Thema dabei ist die Cloud. Viele verbinden damit Unsicherheit — dabei bietet die Cloud in Sachen Datensicherheit enorme Vorteile: Ihre Daten sind nicht nur auf einem einzigen Gerät gespeichert, das kaputtgehen oder gestohlen werden kann. Stattdessen liegen sie sicher gesichert auf externen Servern — und sind gleichzeitig auf all Ihren Geräten verfügbar, jederzeit und überall.",
      "Wir erklären Ihnen verständlich, wie die Cloud funktioniert, welcher Dienst zu Ihnen passt und wie Sie Ihre Fotos, Dokumente und Erinnerungen dauerhaft sicher aufbewahren.",
    ],
  },
  {
    icon: "scan-line",
    id: "digitalisierung", title: "Digitalisierung von Belegen & Fotos",
    paras: [
      "Alte Fotoalben, wichtige Unterlagen, Belege in Ordnern — vieles davon existiert nur ein einziges Mal auf Papier. Wir zeigen Ihnen, wie Sie Ihre Papiere und Bilder ganz einfach digitalisieren: mit dem Smartphone oder einem Scanner, gut sortiert und sicher abgelegt. So bleibt alles erhalten und ist schnell wiederzufinden.",
    ],
  },
  {
    icon: "users-round",
    id: "kinder", title: "Schutz für Kinder",
    paras: [
      "Wenn Kinder Smartphone und Tablet nutzen, möchte man sie schützen, ohne alles zu verbieten. Wir richten gemeinsam mit Ihnen sinnvolle Grenzen ein — kindgerechte Einstellungen, Bildschirmzeiten und sichere Inhalte. Verständlich erklärt, damit Sie die Kontrolle behalten.",
    ],
  },
];

function LeistungenHero() {
  return (
    <section style={{ background: "var(--surface-soft)" }}>
      <div className="sd-container" style={{ padding: "72px 24px" }}>
        <window.Eyebrow>LEISTUNGEN</window.Eyebrow>
        <h1 style={{ fontSize: "var(--text-3xl)", maxWidth: 680, margin: 0, textWrap: "pretty" }}>Womit wir Ihnen helfen</h1>
        <p style={{ fontSize: "var(--text-lg)", maxWidth: 640, margin: "20px 0 0" }}>
          Jeder Mensch hat andere Fragen, andere Geräte und andere Ziele. Deshalb passen wir uns an Sie an — nicht umgekehrt. Die folgenden Themen geben Ihnen einen ersten Eindruck davon, womit wir Ihnen helfen können.
        </p>
      </div>
    </section>
  );
}

function LeistungenList() {
  return (
    <section>
      <div className="sd-container" style={{ padding: "72px 24px", display: "flex", flexDirection: "column", gap: 56, maxWidth: 800 }}>
        {leistungenDetail.map((l) => (
          <article key={l.title} id={l.id} className="reveal" style={{ scrollMarginTop: 100 }}>
            <div style={{ display: "flex", gap: 16, alignItems: "center", marginBottom: 16 }}>
              <span style={{ width: 48, height: 48, borderRadius: "var(--radius-md)", background: "var(--blue-100)", color: "var(--blue-600)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
                <i data-lucide={l.icon} style={{ width: 26, height: 26 }}></i>
              </span>
              <h2 style={{ fontSize: "var(--text-xl)", margin: 0 }}>{l.title}</h2>
            </div>
            {l.paras.map((p, i) => (
              <p key={i} style={{ fontSize: 18, lineHeight: 1.6, margin: "0 0 14px" }}>{p}</p>
            ))}
          </article>
        ))}
      </div>
    </section>
  );
}

function LeistungenCta() {
  const { Button } = window.SeevetalDigitalDesignSystem_7a23a1;
  return (
    <section style={{ background: "var(--surface-soft)" }}>
      <div className="sd-container" style={{ padding: "64px 24px", display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap", justifyContent: "space-between" }}>
        <div>
          <h2 style={{ fontSize: "var(--text-xl)", margin: "0 0 8px" }}>Ihr Thema war nicht dabei?</h2>
          <p style={{ fontSize: 18, margin: 0, maxWidth: 560 }}>Fragen Sie einfach — wir schauen gemeinsam, ob und wie wir Ihnen helfen können.</p>
        </div>
        <Button size="lg" onClick={() => { window.location.href = "kontakt.html"; }}>Termin vereinbaren</Button>
      </div>
    </section>
  );
}

Object.assign(window, { LeistungenHero, LeistungenList, LeistungenCta });