/* Startseite — Sektionen */

const homeServices = [
  { icon: "shield-check", href: "leistungen.html#sicherheit", title: "Sicherheit im Internet", text: "Wir schützen Sie vor Betrug, Phishing und gefälschten Websites — damit Sie das Internet ohne Angst nutzen können." },
  { icon: "key-round", href: "leistungen.html#passwoerter", title: "Passwörter & Passwort-Manager", text: "Nie wieder Passwörter vergessen: Ein digitaler Tresor merkt sich alles — sicher und auf allen Geräten." },
  { icon: "sparkles", href: "leistungen.html#ki", title: "KI verstehen & anwenden", text: "Wir erklären, was Künstliche Intelligenz ist, wie sie Ihnen im Alltag hilft — und wie Sie Deepfakes und Betrug erkennen." },
  { icon: "credit-card", href: "leistungen.html#banking", title: "Banking & Einkaufen im Internet", text: "Wir begleiten Sie bei Überweisungen, PayPal und sicherem Einkaufen — und zeigen, woran Sie seriöse Shops erkennen." },
  { icon: "landmark", href: "leistungen.html#behoerden", title: "Digitale Behördengänge", text: "Ausweis online nutzen, Auto anmelden, Patientenakte einrichten — ohne Termin und Wartezeit. Wir richten alles mit Ihnen ein." },
  { icon: "cloud-upload", href: "leistungen.html#datensicherung", title: "Datensicherung & Cloud", text: "Ihre Fotos und Dokumente sicher aufbewahrt — in der Cloud und auf allen Geräten verfügbar." },
  { icon: "scan-line", href: "leistungen.html#digitalisierung", title: "Digitalisierung von Belegen & Fotos", text: "Papiere und Fotoalben werden digital: gut sortiert, sicher abgelegt und schnell wiederzufinden." },
  { icon: "users-round", href: "leistungen.html#kinder", title: "Schutz für Kinder", text: "Kindgerechte Einstellungen, Bildschirmzeiten und sichere Inhalte — sinnvolle Grenzen statt Verbote." },
];

const homeSteps = [
  { n: "1", title: "Kontaktaufnahme", text: "Der erste Schritt ist der einfachste: Rufen Sie uns an oder schreiben Sie uns eine kurze Nachricht. Wir hören zu, stellen keine komplizierten Fragen und vereinbaren gemeinsam einen unverbindlichen Termin — ganz ohne Druck." },
  { n: "2", title: "Bestandsaufnahme vor Ort", text: "Wir kommen zu Ihnen nach Hause und schauen uns gemeinsam an, welche Geräte Sie nutzen und wo der Schuh drückt. Keine Bewertung, kein Fachjargon — wir möchten einfach verstehen, wie wir Ihnen am besten helfen können." },
  { n: "3", title: "Konzeptionierung", text: "Auf Basis unseres Gesprächs stellen wir ein persönliches Paket zusammen, das genau zu Ihnen passt. Was brauchen Sie wirklich? Was macht Ihren Alltag einfacher? Sie entscheiden — wir begleiten." },
  { n: "4", title: "Übergabe & Schulung", text: "Jetzt wird es praktisch: Wir richten alles gemeinsam ein und erklären jeden Schritt so lange, bis er sitzt. An Ihren eigenen Geräten, in Ihrer gewohnten Umgebung — damit Sie danach wissen, was Sie tun, und sich dabei wohl fühlen." },
  { n: "5", title: "Nachhaltige Betreuung", text: "Auch nach unserer Zusammenarbeit sind wir für Sie da. Ob eine neue Frage auftaucht oder etwas nicht mehr funktioniert — Sie haben mit uns einen verlässlichen Ansprechpartner." },
];

function HomeHero() {
  const { Button } = window.SeevetalDigitalDesignSystem_7a23a1;
  return (
    <section style={{ background: "var(--surface-soft)" }}>
      <div className="sd-container" style={{ padding: "88px 24px 96px" }}>
        <window.Eyebrow>BERATUNG + COACHING</window.Eyebrow>
        <h1 style={{ fontSize: "var(--text-4xl)", maxWidth: 720, textWrap: "pretty", margin: 0 }}>Digitale Welt — einfach erklärt. Wir begleiten Sie persönlich.</h1>
        <p style={{ fontSize: "var(--text-lg)", maxWidth: 600, margin: "24px 0 32px" }}>
          Technik soll Ihr Leben leichter machen — nicht komplizierter. Wenn Computer, Handy oder Internet mal wieder machen, was sie wollen, sind wir zur Stelle: Wir lösen das Problem, erklären alles in Ruhe — und zeigen Ihnen, wie viel Freude die digitale Welt machen kann. Persönlich, geduldig, bei Ihnen zu Hause.
        </p>
        <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
          <Button size="lg" onClick={() => { window.location.href = "kontakt.html"; }}>Termin vereinbaren</Button>
          <Button size="lg" variant="secondary" onClick={() => { window.location.href = "leistungen.html"; }}>Leistungen ansehen</Button>
        </div>
      </div>
    </section>
  );
}

function HomeServices() {
  const { Card } = window.SeevetalDigitalDesignSystem_7a23a1;
  return (
    <section>
      <div className="sd-container" style={{ padding: "80px 24px" }}>
        <window.Eyebrow>WOMIT WIR HELFEN</window.Eyebrow>
        <h2 style={{ fontSize: "var(--text-2xl)", margin: "0 0 40px" }}>Unsere Themen im Überblick</h2>
        <div className="sd-grid-2 sd-cards">
          {homeServices.map((s, i) => (
            <a key={s.title} href={s.href} className="reveal" style={{ display: "block", textDecoration: "none", color: "inherit", transitionDelay: (i * 70) + "ms" }} aria-label={s.title + " — Details auf der Leistungsseite"}>
            <Card>
              <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", marginBottom: 16 }}>
                <i data-lucide={s.icon} style={{ width: 26, height: 26 }}></i>
              </span>
              <h3 style={{ fontSize: "var(--text-lg)", margin: "0 0 8px" }}>{s.title}</h3>
              <p style={{ margin: 0, fontSize: 17 }}>{s.text}</p>
            </Card>
            </a>
          ))}
        </div>
        <p style={{ marginTop: 32, fontSize: 18 }}>
          <a href="leistungen.html">Alle Leistungen im Detail ansehen</a>
        </p>
      </div>
    </section>
  );
}

function HomeSteps() {
  return (
    <section style={{ background: "var(--surface-soft)" }}>
      <div className="sd-container" style={{ padding: "80px 24px" }}>
        <window.Eyebrow>SO BEGLEITEN WIR SIE</window.Eyebrow>
        <h2 style={{ fontSize: "var(--text-2xl)", margin: "0 0 16px" }}>Schritt für Schritt — in Ihrem Tempo</h2>
        <p style={{ fontSize: 18, maxWidth: 680, margin: "0 0 48px" }}>
          Jeder Mensch ist anders — und jede Situation auch. Deshalb gehen wir von Anfang an auf Sie ein, schauen gemeinsam, was Sie brauchen, und begleiten Sie so lange, bis Sie sich wirklich sicher fühlen. Kein Stress, kein Fachjargon, kein Zeitdruck.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 32, maxWidth: 720 }}>
          {homeSteps.map((s, i) => (
            <div key={s.n} className="reveal" style={{ display: "flex", gap: 20, alignItems: "flex-start", transitionDelay: (i * 90) + "ms" }}>
              <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 22, color: "#fff", background: "var(--blue-500)", width: 44, height: 44, display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" }}>{s.n}</span>
              <div>
                <h3 style={{ fontSize: "var(--text-lg)", margin: "0 0 6px" }}>{s.title}</h3>
                <p style={{ margin: 0, fontSize: 17 }}>{s.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeContactBand() {
  const { Button, Card } = window.SeevetalDigitalDesignSystem_7a23a1;
  return (
    <section>
      <div className="sd-container" style={{ padding: "80px 24px" }}>
        <Card padding="var(--space-7)">
          <div className="reveal" style={{ display: "flex", gap: 40, alignItems: "center", flexWrap: "wrap" }}>
            <img src="assets/pierre.jpg" alt="Pierre-Frederik Augustiny" width="128" height="128" style={{ borderRadius: "50%", flex: "none" }} />
            <div style={{ flex: "1 1 320px" }}>
              <h2 style={{ fontSize: "var(--text-xl)", margin: "0 0 8px" }}>Sprechen Sie uns an</h2>
              <p style={{ fontSize: 18, margin: "0 0 20px", maxWidth: 560 }}>
                Ob kurze Frage oder konkreter Beratungswunsch — wir freuen uns, von Ihnen zu hören. Rufen Sie einfach an oder schreiben Sie uns eine Nachricht.
              </p>
              <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
                <Button size="lg" onClick={() => { window.location.href = "kontakt.html"; }}>Zur Kontaktseite</Button>
                <a href="tel:+4915146388214" style={{ fontSize: 18, fontWeight: 700 }}>0151 46388214</a>
              </div>
            </div>
          </div>
        </Card>
      </div>
    </section>
  );
}

Object.assign(window, { HomeHero, HomeServices, HomeSteps, HomeContactBand });