/* Page-level sections — extracted from monolithic App so each page can compose what it needs */

/* ---------- HOME: HERO ---------- */
function HomeHero() {
  const [open, setOpen] = React.useState(false);
  return (
    <section className="hero" id="top">
      <div className="hero-grid-bg" />
      <div className="hero-glow" />
      <div className="container hero-content">
        <div>
          <span className="eyebrow"><span className="dot" />Cyber-Versicherbarkeit · IT-Compliance</span>
          <h1>
            Wir machen Ihre IT <span style={{ color: 'rgb(251, 183, 2)' }}>ready für Cyberversicherung</span>.
          </h1>
          <div className={`hero-disclosure ${open ? 'is-open' : ''}`}>
            <button
              type="button"
              className="hero-disclosure-trigger"
              aria-expanded={open}
              onClick={() => setOpen((v) => !v)}>
              <h2>Wie wir Ihre IT versicherungsfähig machen</h2>
              <span className="hero-disclosure-icon" aria-hidden="true">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="6 9 12 15 18 9" />
                </svg>
              </span>
            </button>
            <div className="hero-disclosure-panel" role="region">
              <div className="hero-disclosure-panel-inner">
                <p>
                  Viele Unternehmen beschäftigen sich erst mit Cybersecurity, wenn der Cyberversicherer kritische Fragen zu MFA, Backups, Patchmanagement, Rechtekonzepten oder Notfallplänen stellt.
                </p>
                <p>
                  Genau hier setzen wir an: Wir planen und betreuen IT-Infrastrukturen so, dass sie nicht nur sicher und sauber dokumentiert sind, sondern auch die Anforderungen moderner Cyberversicherer <strong>erfüllen oder übertreffen</strong>.
                </p>
                <p>
                  Dadurch reduzieren Unternehmen ihre tatsächlichen Risiken und erhalten Zugang zu hochwertigen Cyberversicherungs&shy;lösungen und Sonderkonzepten, die vielen Unternehmen sonst nicht offenstehen.
                </p>
              </div>
            </div>
          </div>
          <div className="hero-cta-row">
            <a href="kontakt.html" className="btn btn-primary btn-lg">
              Kostenlosen Cyber-Check sichern <Icon.Arrow />
            </a>
            <a href="funnel.html" className="btn btn-ghost btn-lg">
              Risiko in 60 Sek. berechnen
            </a>
          </div>
          <div className="hero-trust">
            <div className="stat"><div className="stat-value">99,9%</div><div className="stat-label">Uptime (SLA)</div></div>
            <div className="stat"><div className="stat-value">{"< 30 Min"}</div><div className="stat-label">Ø Reaktionszeit</div></div>
            <div className="stat"><div className="stat-value">Audit-Ready</div><div className="stat-label">DOKUMENTATION</div></div>
            <div className="stat"><div className="stat-value">10+ J.</div><div className="stat-label">Erfahrung im Team</div></div>
          </div>
        </div>

        <ComplianceStatusCard />
      </div>
    </section>);

}

/* ─── Compliance Status Card mit Animation ──────────────────────────────
   Beim ersten Sichtbarwerden:
   - Alle Reihen starten als "Kritisch" (rot)
   - Nacheinander wechseln sie zu "Review" (gelb) und dann "Erfüllt" (grün)
   - Letzte Reihe bleibt absichtlich bei "Review"
   - Score zählt parallel von 0 auf 94 hoch */
function ComplianceStatusCard() {
  const ROWS = [
  { icon: <Icon.Mfa size={18} />, label: '2FA · alle Konten', finalState: 'pass' },
  { icon: <Icon.Database size={18} />, label: 'Tägliche Backups', finalState: 'pass' },
  { icon: <Icon.Refresh size={18} />, label: 'Patch-Management', finalState: 'pass' },
  { icon: <Icon.Network size={18} />, label: <>Endpoint Security<br />+ 24/7 Monitoring</>, finalState: 'pass' },
  { icon: <Icon.Document size={18} />, label: 'Incident Response Plan', finalState: 'warn' }];

  const FINAL_SCORE = 94;

  const cardRef = React.useRef(null);
  const [started, setStarted] = React.useState(false);
  const [states, setStates] = React.useState(() => ROWS.map(() => 'fail')); // 'fail' | 'warn' | 'pass'
  const [score, setScore] = React.useState(0);

  // Intersection Observer: Animation startet erst wenn die Karte sichtbar wird
  React.useEffect(() => {
    if (!cardRef.current) return;
    if (started) return;
    const el = cardRef.current;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setStarted(true);
          io.disconnect();
        }
      });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, [started]);

  // Reihen-Übergänge: erst fail→warn (für alle, gestaffelt), dann warn→pass (außer letzte Reihe)
  React.useEffect(() => {
    if (!started) return;
    const timers = [];
    ROWS.forEach((row, i) => {
      // Phase 1: fail → warn (200ms Initial-Delay + 180ms staggered)
      timers.push(setTimeout(() => {
        setStates((s) => s.map((v, idx) => idx === i ? 'warn' : v));
      }, 200 + i * 180));

      // Phase 2: warn → pass (alle bis auf die letzte)
      if (row.finalState === 'pass') {
        timers.push(setTimeout(() => {
          setStates((s) => s.map((v, idx) => idx === i ? 'pass' : v));
        }, 1100 + i * 180));
      }
    });
    return () => timers.forEach(clearTimeout);
  }, [started]);

  // Score-Counter: hochzählen über ~1.8s mit easing
  React.useEffect(() => {
    if (!started) return;
    const duration = 1800;
    const start = performance.now();
    let raf;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      // easeOutCubic
      const eased = 1 - Math.pow(1 - t, 3);
      setScore(Math.round(FINAL_SCORE * eased));
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [started]);

  const BADGE_LABEL = { fail: 'Kritisch', warn: 'Review', pass: 'Erfüllt' };
  const scoreClass = score >= 95 ? 'score-good' : score >= 50 ? 'score-warn' : 'score-bad';

  return (
    <div className="hero-card" ref={cardRef}>
      <div className="hero-card-header">
        <span>COMPLIANCE STATUS</span>
        <span className="live">Live-Audit</span>
      </div>
      {ROWS.map((row, i) =>
      <div key={i} className="audit-row">
          <div className="check">{row.icon} {row.label}</div>
          <span className={`badge badge-${states[i]} badge-animated`}>{BADGE_LABEL[states[i]]}</span>
        </div>
      )}
      <div className="hero-card-footer">
        <span style={{ color: 'var(--color-text-muted)' }}>Readiness-Score</span>
        <span className={`score ${scoreClass}`}>{score}<span style={{ fontSize: 18, color: 'var(--color-text-muted)' }}>/100</span></span>
      </div>
    </div>);

}

/* ---------- HOME: PROBLEM ---------- */
function ProblemSection() {
  return (
    <section className="section problem-section" id="problem">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><Icon.AlertTriangle size={14} /> &nbsp;Die unbequeme Wahrheit</span>
          <h2>Warum viele Cyber-Schäden <em style={{ color: 'var(--color-gold)', fontStyle: 'normal' }}>
nicht bezahlt</em> werden</h2>
          <p>Sie zahlen Prämien aber im Ernstfall lehnt der Versicherer ab.<br/>Nicht aus Willkür: Weil Ihre IT die vertraglich zugesicherten Anforderungen nicht erfüllte.</p>
        </div>

        <div className="problem-grid">
          <div className="problem-card">
            <div className="num">01</div>
            <h3>Das MFA-Versehen</h3>
            <p>Multi-Faktor-Authentifizierung greift bei den Mitarbeitern, aber nicht bei Service-Konten oder Dienstleisterzugängen. Genau dort, wo Angreifer einsteigen.</p>
            <div className="quote">Beispielhafte Begründung einer Leistungsablehnung: „MFA war für Mitarbeiter aktiv, nicht aber für den Dienstleister-Zugang." (anonymisiertes Praxisbeispiel)</div>
          </div>
          <div className="problem-card">
            <div className="num">02</div>
            <h3>Das Backup-Problem</h3>
            <p>Backups laufen, aber netzwerkverbunden. Ransomware verschlüsselt die Sicherungen gleich mit. Ohne Air-Gap oder Immutability lehnen viele Versicherer Leistungen ab.</p>
            <div className="quote">Beispielhafte Begründung einer Leistungsablehnung: „Die Backups waren vorhanden, aber durch die Ransomware genauso verschlüsselt wie die Originale." (anonymisiertes Praxisbeispiel)</div>
          </div>
          <div className="problem-card">
            <div className="num">03</div>
            <h3>Das Patch-Defizit</h3>
            <p>Die 14-Tage-Regel der meisten Policen wird nicht eingehalten. Kritische Sicherheitsupdates bleiben Wochen ungepatcht und das Schadensereignis hängt genau daran.</p>
            <div className="quote">Beispielhafte Begründung einer Leistungsablehnung: „Die ausgenutzte Schwachstelle war 6 Wochen alt — Leistung wegen Obliegenheitsverletzung verweigert." (anonymisiertes Praxisbeispiel)</div>
          </div>
        </div>

        <div className="problem-banner">
          <div className="text">
            Die größte Schwachstelle ist <strong>nicht die Police</strong>,<br/>sondern die IT, die deren Anforderungen nicht erfüllt.
          </div>
          <a href="funnel.html" className="btn btn-ghost">Was kostet mich das? <Icon.Arrow /></a>
        </div>
      </div>
    </section>);
}

/* ---------- HOME: POSITIONING ---------- */
function PositioningSection() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><Icon.Shield size={14} />Positionierung</span>
          <h2>Was unsere <span style={{ color: 'var(--color-gold)' }}>Expertise ausmacht</span></h2>
          <p>Klassische IT-Dienstleister kennen die Anforderungen der Versicherer nicht.
Wir setzen Ihre IT exakt nach den gängigen Cyber-Policen-Obliegenheiten auf
— für die Police selbst arbeiten wir mit unserem Makler-Partner zusammen.</p>
        </div>

        <div className="vs-grid">
          <div className="vs-cell vs-head">Kriterium</div>
          <div className="vs-cell vs-divider" />
          <div className="vs-cell vs-malitech vs-head">MaliTech</div>
          <div className="vs-cell vs-head">Klassischer IT-Dienstleister</div>

          <div className="vs-cell vs-feature">Versicherungs-Anforderungen kennen & umsetzen</div>
          <div className="vs-cell vs-divider" />
          <div className="vs-cell vs-malitech"><Icon.Check size={18} className="vs-icon yes" /> Standard-Lieferumfang</div>
          <div className="vs-cell"><Icon.X size={18} className="vs-icon no" /> Nicht im Scope</div>

          <div className="vs-cell vs-feature">Audit-Ready Dokumentation für Versicherer</div>
          <div className="vs-cell vs-divider" />
          <div className="vs-cell vs-malitech"><Icon.Check size={18} className="vs-icon yes" /> Zertifikat inklusive</div>
          <div className="vs-cell"><Icon.X size={18} className="vs-icon no" /> Nicht vorgesehen</div>

          <div className="vs-cell vs-feature">Setup nach Versicherer-Obliegenheiten</div>
          <div className="vs-cell vs-divider" />
          <div className="vs-cell vs-malitech"><Icon.Check size={18} className="vs-icon yes" /> Ansprechpartner im Haus + Makler-Partner</div>
          <div className="vs-cell"><Icon.X size={18} className="vs-icon no" /> Kennt Versicherer-Anforderungen meist nicht</div>

          <div className="vs-cell vs-feature">{"24/7 Monitoring & < 30 Min Reaktion"}</div>
          <div className="vs-cell vs-divider" />
          <div className="vs-cell vs-malitech"><Icon.Check size={18} className="vs-icon yes" /> Enthalten</div>
          <div className="vs-cell"><Icon.Minus size={18} className="vs-icon partial" /> Häufig optional</div>

          <div className="vs-cell vs-feature">Compliance: DSGVO, ISO-27001 & GoBD</div>
          <div className="vs-cell vs-divider" />
          <div className="vs-cell vs-malitech"><Icon.Check size={18} className="vs-icon yes" /> Anforderungen erfüllt</div>
          <div className="vs-cell"><Icon.Minus size={18} className="vs-icon partial" /> Teilweise</div>

          <div className="vs-cell vs-feature">Ransomware-Recovery</div>
          <div className="vs-cell vs-divider" />
          <div className="vs-cell vs-malitech"><Icon.Check size={18} className="vs-icon yes" /> Im Leistungspaket fixiert</div>
          <div className="vs-cell"><Icon.X size={18} className="vs-icon no" /> Keine Zusicherung</div>
        </div>
      </div>
    </section>);}

/* ---------- HOME: SOLUTION ---------- */
function SolutionSection() {
  return (
    <section className="section" id="loesung">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><Icon.Bolt size={14} />Was Sie bekommen</span>
          <h2>Unsere Lösungen</h2>
          <p>Wir liefern messbare Zustände, die Sie Ihrer Versicherung, Ihrer Bank und Ihrem Auditor zeigen können.</p>
        </div>

        <div className="solution-grid">
          <div className="solution-card">
            <div className="solution-icon"><Icon.Shield size={28} /></div>
            <h3>Compliance & Versicherbarkeit</h3>
            <p className="desc">MFA, EDR, Backups, Patchmanagement
exakt nach den Anforderungen führender
Cyber-Versicherer aufgesetzt.</p>
            <ul className="outcome-list">
              <li>Sie bestehen jedes Audit ohne Nachjustieren</li>
              <li>Ihre Versicherung zahlt im Ernstfall </li>
              <li>Audit-Ready Zertifikat als Nachweis</li>
            </ul>
          </div>
          <div className="solution-card">
            <div className="solution-icon"><Icon.Server size={28} /></div>
            <h3>Managed IT Services</h3>
            <p className="desc">Rundum-sorglos-Paket mit 24/7 Monitoring, proaktiver Wartung, vereinbarter Reaktionszeit und geprüften Hardware-Standards.</p>
            <ul className="outcome-list">
              <li>Stabile IT mit bis zu 99,9% Uptime (SLA)</li>
              <li>Ø Reaktionszeit unter 30 Minuten</li>
              <li>Ein Ansprechpartner statt Ticket-Pingpong</li>
            </ul>
          </div>
          <div className="solution-card">
            <div className="solution-icon"><Icon.Bot size={28} /></div>
            <h3>Prozess-Automatisierung</h3>
            <p className="desc">Digitale Garantie-Abwicklung, papierlose Prozesse, automatisierte Workflows. Speziell für prozesslastige Betriebe </p>
            <ul className="outcome-list">
              <li>Bis zu −40% manueller Aufwand in 4 Wochen</li>
              <li>Schnellere Prozess-Abwicklung (typ. +25%)</li>
              <li>GoBD-konforme Dokumentation</li>
            </ul>
          </div>
        </div>
      </div>
    </section>);}
/* ---------- HOME: PROCESS ---------- */
function ProcessSection() {
  return (
    <section className="section process-section" id="prozess">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><Icon.Lock size={14} />Audit-to-Policy System</span>
          <h2>In 5 Schritten von „unsicher“ zu <span style={{ color: 'var(--color-gold)' }}>Audit-Ready</span></h2>
          <p>4 Wochen. Klare Meilensteine. Keine Überraschungen.</p>
        </div>

        <div className="process-track">
          <div className="process-step"><div className="num-circle">01</div><h4>Pre-Check</h4><p>15-min Erstanalyse Ihrer bestehenden IT.</p><span className="duration">Tag 1</span></div>
          <div className="process-step"><div className="num-circle">02</div><h4>Deep Audit</h4><p>Automatisierter Netzwerk- &amp; Infrastruktur-Scan.</p><span className="duration">Woche 1</span></div>
          <div className="process-step"><div className="num-circle">03</div><h4>Gap Analysis</h4><p>Ist-Zustand vs. Versicherungs-Obliegenheiten.</p><span className="duration">Woche 2</span></div>
          <div className="process-step"><div className="num-circle">04</div><h4>Integration</h4><p>Schließen der Lücken: MFA, EDR, Backups, Patching.</p><span className="duration">Woche 2–4</span></div>
          <div className="process-step"><div className="num-circle">05</div><h4>Zertifizierung</h4><p>Audit-Ready Zertifikat — vorzeigbar für Versicherer und Makler-Partner.</p><span className="duration">Woche 4</span></div>
        </div>
      </div>
    </section>);

}

/* ---------- HOME: STATS + TESTIMONIALS ---------- */
function StatsSection() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><Icon.Check size={14} />Trust &amp; Performance</span>
          <h2>Zahlen, die Sie Ihrem Vorstand zeigen können</h2>
        </div>

        <div className="stats-strip">
          <div className="stat-card"><div className="v">Ø 100%</div><div className="l">Anforderungserfüllung der gängigen Cyber-Versicherer-Obliegenheiten in unseren bisherigen Setups</div></div>
          <div className="stat-card"><div className="v">24/7</div><div className="l">Echtzeit-Monitoring gegen Ransomware &amp; Ausfälle</div></div>
          <div className="stat-card"><div className="v">4 Wo.</div><div className="l">Typische Dauer bis zur Audit-Readiness inkl. Doku</div></div>
          <div className="stat-card"><div className="v">99,9%</div><div className="l">Systemverfügbarkeit gemäß SLA</div></div>
        </div>

        <div className="testimonial-grid">
          <GoogleReviews />
        </div>
      </div>
    </section>);

}

/* ---------- INLINE CTA STRIP (used between pages to push to next funnel step) ---------- */
function CtaStrip({ heading, sub, primary, primaryHref, secondary, secondaryHref }) {
  return (
    <section className="section" style={{ paddingTop: 60, paddingBottom: 60 }}>
      <div className="container">
        <div className="problem-banner" style={{ marginTop: 0, background: 'linear-gradient(90deg, rgba(255, 183, 3, 0.1), rgba(15, 82, 186, 0.1))' }}>
          <div>
            <div className="text" style={{ marginBottom: 6 }}>{heading}</div>
            <div style={{ color: 'var(--color-text-muted)', fontFamily: 'var(--font-ui)', fontSize: 14 }}>{sub}</div>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            {secondary && <a href={secondaryHref} className="btn btn-ghost">{secondary}</a>}
            <a href={primaryHref} className="btn btn-primary">{primary} <Icon.Arrow /></a>
          </div>
        </div>
      </div>
    </section>);

}

window.HomeHero = HomeHero;
window.ProblemSection = ProblemSection;
window.PositioningSection = PositioningSection;
window.SolutionSection = SolutionSection;
window.ProcessSection = ProcessSection;
window.StatsSection = StatsSection;
window.CtaStrip = CtaStrip;