// Comparison page sections — expandAI vs WinCan KI (WinCan AI)
// Factual, fair comparison. WinCan is the established market leader (since 1990, largest
// installed base, broadest standard coverage, full asset-management ecosystem). That is
// stated honestly. The differentiation is positioning, not bashing:
// expandAI = leichtgewichtige, herstellerunabhängige Web-Plattform mit Hausanschluss-Fokus,
// nativem Isybau2017 und EU-Hosting — ohne WinCan-Ökosystem/Lizenz.

// ----- Hero -----
const CompareHero = () => (
  <section style={{ padding: "120px 0 56px", position: "relative", overflow: "hidden" }}>
    <div aria-hidden style={{
      position: "absolute", left: "50%", top: -240,
      width: 1000, height: 640, transform: "translateX(-50%)",
      background: "radial-gradient(ellipse at center, rgba(167,139,250,0.16), rgba(167,139,250,0) 60%)",
      pointerEvents: "none"
    }} />
    <div className="container" style={{ position: "relative" }}>
      <div className="eyebrow" style={{ marginBottom: 24 }}>
        <span className="dot" />
        Vergleich · KI Kanalinspektion
      </div>

      <h1 className="h1 gradient-text" style={{ marginBottom: 24, maxWidth: 980, marginTop: 28 }}>
        expandAI vs. WinCan KI:<br />
        welche KI passt zur deutschen Kanalinspektion?
      </h1>
      <p className="lead" style={{ maxWidth: 780, marginBottom: 36 }}>
        Beide Anbieter automatisieren die Auswertung von TV-Befahrungen mit KI –
        gehen das Thema aber unterschiedlich an. WinCan ist der etablierte Marktführer
        mit einem kompletten Software-Ökosystem und globaler Reichweite. expandAI ist die
        deutsche Self-Service-Plattform: eine reine Web-App mit Hausanschluss-Fokus,
        nativem Isybau2017-Export und DWA-M 149-2-Klassifikation – ohne zusätzliche
        Software, Lizenz oder Hardware-Bindung.
      </p>

      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <a href="https://app.expandai.de/register" target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-lg">
          expandAI kostenlos testen
        </a>
        <a href="#tabelle" className="btn btn-ghost btn-lg">Zur Vergleichstabelle</a>
      </div>

      {/* Quick facts row */}
      <div style={{
        marginTop: 64,
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
        gap: 16
      }}>
        {[
          { k: "Markt-Fokus", a: "Deutschland / DACH", b: "Global (Marktführer)" },
          { k: "Inspektionstyp", a: "Hausanschlüsse", b: "Generalist (Kanal, Schacht)" },
          { k: "Plattform", a: "Reine Web-App, keine Lizenz", b: "WinCan-Ökosystem" },
          { k: "Pricing", a: "Pay-per-Use ab 0 €", b: "Credits + Lizenz" }
        ].map((f, i) => (
          <div key={i} style={{
            background: "var(--surface)",
            border: "1px solid var(--border)",
            borderRadius: "var(--radius)",
            padding: "16px 18px"
          }}>
            <div style={{
              fontSize: 11, color: "var(--text-3)",
              textTransform: "uppercase", letterSpacing: "0.12em",
              marginBottom: 10
            }}>{f.k}</div>
            <div style={{
              fontSize: 14, color: "var(--accent)",
              fontWeight: 500, marginBottom: 4
            }}>expandAI · {f.a}</div>
            <div style={{ fontSize: 13, color: "var(--text-3)" }}>
              WinCan KI · {f.b}
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ----- Verdict / TL;DR -----
const CompareVerdict = () => {
  const items = [
    {
      title: "Wann expandAI passt",
      tone: "accent",
      points: [
        "Du wertest TV-Befahrungen von Hausanschlüssen aus",
        "Du willst eine reine Web-App ohne Installation & Lizenz",
        "Du brauchst nativen Isybau2017-Export nach DE-Standard",
        "Deine Daten sollen ausschließlich in der EU bleiben"
      ]
    },
    {
      title: "Wann WinCan passt",
      tone: "neutral",
      points: [
        "Du nutzt bereits WinCan VX / WinCan Web im Alltag",
        "Du brauchst ein komplettes Asset-Management-Ökosystem",
        "Du arbeitest international mit vielen Norm-Standards",
        "Du willst KI-Coding tief in iPEK-/Hardware-Workflows"
      ]
    },
    {
      title: "Was beide leisten",
      tone: "muted",
      points: [
        "Automatische Schadenserkennung per KI",
        "Klassifikation nach Norm-Codes",
        "Transparentes, nutzungsbasiertes Abrechnungsmodell",
        "Web-basierte Auswertung im Browser"
      ]
    }
  ];

  return (
    <section className="section section-divider">
      <div className="container">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Auf einen Blick
          </div>
          <h2 className="h2 gradient-text">Die ehrliche Kurzfassung.</h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {items.map((it, i) => {
            const accent = it.tone === "accent";
            return (
              <div key={i} className="card" style={{
                padding: 28,
                background: accent
                  ? "linear-gradient(180deg, rgba(167,139,250,0.08), rgba(167,139,250,0.02))"
                  : "var(--surface)",
                borderColor: accent ? "var(--accent-ring)" : "var(--border)"
              }}>
                <div style={{
                  fontSize: 12, textTransform: "uppercase", letterSpacing: "0.12em",
                  color: accent ? "var(--accent)" : "var(--text-3)",
                  fontWeight: 600, marginBottom: 16
                }}>{it.title}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12 }}>
                  {it.points.map((p, j) => (
                    <li key={j} style={{
                      display: "flex", gap: 10, alignItems: "flex-start",
                      fontSize: 14, color: "var(--text)", lineHeight: 1.5
                    }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                        stroke={accent ? "var(--accent)" : "var(--text-2)"} strokeWidth="2.5"
                        style={{ flexShrink: 0, marginTop: 4 }}>
                        <polyline points="20 6 9 17 4 12" />
                      </svg>
                      <span style={{ textWrap: "pretty" }}>{p}</span>
                    </li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ----- Big comparison table -----
const CompareTable = () => {
  const groups = [
    {
      title: "Inspektionstypen",
      rows: [
        { label: "Hausanschluss-Inspektion",     a: "full", b: "partial" }
      ]
    },
    {
      title: "Workflow & Geschwindigkeit",
      rows: [
        { label: "Auswertung in wenigen Minuten",  a: "full", b: "full" },
        { label: "Inline-Verifikation im Tool",    a: "full", b: "full" },
        { label: "Direkter XML-Export",            a: "full", b: "full" },
        { label: "PDF-Bericht auf Knopfdruck",     a: "full", b: "full" },
        { label: "PDF-Bericht mit eigenem Logo",   a: "full", b: "full" }
      ]
    },
    {
      title: "Normen & Datenformate",
      rows: [
        { label: "DIN EN 13508-2 (EU)",         a: "full", b: "full" },
        { label: "DWA-M 149-2 (DE)",            a: "full", b: "full" },
        { label: "ISYBAU (DE)",                 a: "full", b: "full" }
      ]
    },
    {
      title: "Geschäftsmodell",
      rows: [
        { label: "Transparente Preise online",   a: "full", b: "no" },
        { label: "Keine Basisgebühr",            a: "full", b: "no" },
        { label: "Pay-as-you-go",                a: "full", b: "partial" },
        { label: "Sofort ausprobieren",          a: "full", b: "no" },
        { label: "Enterprise-Verträge möglich",  a: "full", b: "full" }
      ]
    },
    {
      title: "Hosting & Compliance",
      rows: [
        { label: "Made in Germany",                a: "full", b: "no" },
        { label: "Alle Server-Standorte in DE",      a: "full", b: "no" },
        { label: "Alle Daten bleiben 100% in der EU", a: "full", b: "no" },
        { label: "DSGVO-konform",                a: "full", b: "full" }
      ]
    },
    {
      title: "Sprache & Support",
      rows: [
        { label: "Deutschsprachiges Interface",  a: "full", b: "full" },
        { label: "Deutscher Support (DACH)",     a: "full", b: "full" },
        { label: "Direkter Kontakt zu den Entwicklern",    a: "full", b: "no" }
      ]
    }
  ];

  const Cell = ({ state }) => {
    if (state === "full") return (
      <span style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: 28, height: 28, borderRadius: 999,
        background: "rgba(52,211,153,0.14)",
        border: "1px solid rgba(52,211,153,0.3)",
        color: "#34d399"
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20 6 9 17 4 12" />
        </svg>
      </span>
    );
    if (state === "partial") return (
      <span style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: 28, height: 28, borderRadius: 999,
        background: "rgba(245,158,11,0.12)",
        border: "1px solid rgba(245,158,11,0.28)",
        color: "#f59e0b",
        fontSize: 16, fontWeight: 700, lineHeight: 1
      }}>~</span>
    );
    if (state === "soon") return (
      <span style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        height: 22, padding: "0 8px", borderRadius: 999,
        background: "rgba(96,165,250,0.12)",
        border: "1px solid rgba(96,165,250,0.28)",
        color: "#60a5fa",
        fontSize: 10, fontWeight: 600, letterSpacing: "0.06em",
        textTransform: "uppercase",
        fontFamily: "JetBrains Mono, monospace"
      }}>Beta</span>
    );
    return (
      <span style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: 28, height: 28, borderRadius: 999,
        background: "rgba(248,113,113,0.1)",
        border: "1px solid rgba(248,113,113,0.28)",
        color: "#f87171"
      }}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
          <path d="M6 6l12 12M18 6L6 18" />
        </svg>
      </span>
    );
  };

  return (
    <section className="section section-divider" id="tabelle">
      <div className="container">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Feature-Vergleich
          </div>
          <h2 className="h2 gradient-text">Direkt gegenübergestellt.</h2>
          <p className="lead" style={{ marginTop: 16 }}>
            Wir haben die Funktionen verglichen, die in der täglichen Auswertung
            wirklich zählen – Stand Juni 2026. Wenn sich etwas ändert, aktualisieren wir die Tabelle.
          </p>
        </div>

        <div style={{
          background: "var(--surface)",
          border: "1px solid var(--border)",
          borderRadius: "var(--radius-lg)",
          overflow: "hidden"
        }}>
          {/* Sticky header row */}
          <div style={{
            display: "grid",
            gridTemplateColumns: "minmax(0,1.6fr) 110px 110px",
            alignItems: "center",
            padding: "20px 28px",
            background: "linear-gradient(180deg, rgba(255,255,255,0.03), transparent)",
            borderBottom: "1px solid var(--border-strong)"
          }}>
            <div style={{
              fontSize: 11, textTransform: "uppercase", letterSpacing: "0.14em",
              color: "var(--text-3)", fontWeight: 600
            }}>Funktion</div>
            <div style={{ textAlign: "center" }}>
              <div style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                fontSize: 14, fontWeight: 600,
                color: "var(--accent)"
              }}>
                expandAI
              </div>
            </div>
            <div style={{ textAlign: "center" }}>
              <span style={{ fontSize: 14, fontWeight: 600, color: "var(--text-2)" }}>
                WinCan KI
              </span>
            </div>
          </div>

          {groups.map((g, gi) => (
            <div key={gi}>
              {g.rows.map((r, ri) => (
                <div key={ri} style={{
                  display: "grid",
                  gridTemplateColumns: "minmax(0,1.6fr) 110px 110px",
                  alignItems: "center",
                  padding: "18px 28px",
                  borderBottom: ri === g.rows.length - 1 && gi === groups.length - 1
                    ? "none" : "1px solid var(--border)"
                }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 14.5, color: "var(--text)", marginBottom: r.note ? 4 : 0 }}>
                      {r.label}
                    </div>
                    {r.note && (
                      <div style={{ fontSize: 12, color: "var(--text-3)", lineHeight: 1.45 }}>
                        {r.note}
                      </div>
                    )}
                  </div>
                  <div style={{ display: "flex", justifyContent: "center" }}>
                    <Cell state={r.a} />
                  </div>
                  <div style={{ display: "flex", justifyContent: "center" }}>
                    <Cell state={r.b} />
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>

        {/* Legend */}
        <div style={{
          marginTop: 20,
          display: "flex", gap: 20, flexWrap: "wrap",
          fontSize: 12, color: "var(--text-3)"
        }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 10, height: 10, borderRadius: 999, background: "#34d399" }} /> Unterstützt
          </span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 10, height: 10, borderRadius: 999, background: "#f59e0b" }} /> Teilweise / anders gelöst
          </span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 10, height: 10, borderRadius: 999, background: "#f87171" }} /> Nicht im Fokus
          </span>
        </div>
      </div>
    </section>
  );
};

// ----- Side-by-side: differentiation -----
const CompareDifferences = () => {
  const sides = [
    {
      label: "expandAI",
      accent: true,
      tagline: "Leichtgewichtige Web-Plattform für Hausanschlüsse",
      bullets: [
        {
          h: "Nichts zu installieren",
          p: "expandAI läuft komplett im Browser. Keine Desktop-Software, keine WinCan-Lizenz, kein IT-Setup – Konto anlegen, hochladen, auswerten."
        },
        {
          h: "Hausanschluss als Stärke",
          p: "Wir haben unser Modell speziell auf Hausanschluss-Inspektionen trainiert – der Bereich, in dem viele generalistische KI-Tools schwächeln."
        },
        {
          h: "Nativer Isybau2017",
          p: "Kein Workaround, kein Konverter. Die Datei im aktuellen Isybau2017-Standard, die der Auftraggeber will, kommt direkt aus dem Tool."
        },
        {
          h: "Pay-as-you-go ab 0 €",
          p: "FREE-Tier zum Testen, transparente Preise online, ohne Lizenzgebühr. Kein Sales-Gespräch nötig, um den Preis zu erfahren."
        }
      ]
    },
    {
      label: "WinCan KI",
      accent: false,
      tagline: "KI-Modul im etablierten WinCan-Ökosystem",
      bullets: [
        {
          h: "Marktführer seit 1990",
          p: "WinCan hat diesen Markt mitbegründet, zählt eine der größten installierten Basen der Branche und ist in über 50 Sprachen weltweit im Einsatz."
        },
        {
          h: "Komplettes Ökosystem",
          p: "KI-Coding ist Teil einer ganzen Suite – von WinCan VX und WinCan Web über 3D bis zur Sanierungsplanung und GIS-Anbindung."
        },
        {
          h: "Breiteste Norm-Abdeckung",
          p: "Unterstützt international sehr viele Standards (u. a. EN 13508-2, NASSCO PACP) und ist eng mit iPEK-Inspektionshardware verzahnt."
        },
        {
          h: "KI plus menschliche QA",
          p: "Optionale Qualitätskontrolle durch erfahrene Coder sorgt für gleichbleibende Ergebnisse – passend für große, standardisierte Programme."
        }
      ]
    }
  ];

  return (
    <section className="section section-divider">
      <div className="container">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Was unterscheidet die beiden Ansätze?
          </div>
          <h2 className="h2 gradient-text">Zwei Philosophien, dasselbe Ziel.</h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          {sides.map((s, i) => (
            <div key={i} className="card" style={{
              padding: 32,
              background: s.accent
                ? "linear-gradient(180deg, rgba(167,139,250,0.06), rgba(167,139,250,0.01))"
                : "var(--surface)",
              borderColor: s.accent ? "var(--accent-ring)" : "var(--border)"
            }}>
              <div style={{
                display: "flex", alignItems: "center", gap: 10, marginBottom: 6
              }}>
                <span style={{
                  fontSize: 18, fontWeight: 600,
                  color: s.accent ? "var(--accent)" : "var(--text)",
                  letterSpacing: "-0.01em"
                }}>{s.label}</span>
              </div>
              <div style={{
                fontSize: 13, color: "var(--text-3)",
                marginBottom: 28, letterSpacing: "0.01em"
              }}>{s.tagline}</div>

              <div style={{ display: "grid", gap: 22 }}>
                {s.bullets.map((b, j) => (
                  <div key={j} style={{ display: "flex", gap: 14 }}>
                    <div style={{
                      width: 28, height: 28, flexShrink: 0,
                      borderRadius: 8,
                      background: s.accent ? "var(--accent-soft)" : "rgba(255,255,255,0.04)",
                      border: `1px solid ${s.accent ? "var(--accent-ring)" : "var(--border)"}`,
                      display: "grid", placeItems: "center",
                      color: s.accent ? "var(--accent)" : "var(--text-2)",
                      fontFamily: "JetBrains Mono, monospace",
                      fontSize: 11, fontWeight: 600
                    }}>{String(j + 1).padStart(2, "0")}</div>
                    <div style={{ minWidth: 0 }}>
                      <div style={{
                        fontSize: 15, fontWeight: 600, color: "var(--text)",
                        marginBottom: 6, letterSpacing: "-0.005em"
                      }}>{b.h}</div>
                      <div style={{
                        fontSize: 13.5, color: "var(--text-2)",
                        lineHeight: 1.55, textWrap: "pretty"
                      }}>{b.p}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ----- When to choose what -----
const CompareWhen = () => {
  const scenarios = [
    {
      who: "Rohrreinigungsbetrieb",
      desc: "10–50 Hausanschluss-Inspektionen pro Woche, Reports an Hausverwaltungen, kein Bedarf an einer großen Software-Suite.",
      pick: "expandAI"
    },
    {
      who: "Großer Inspektionsdienstleister mit WinCan-Stack",
      desc: "Arbeitet bereits durchgängig mit WinCan VX und iPEK-Hardware, will KI-Coding direkt im bestehenden Workflow.",
      pick: "WinCan KI"
    },
    {
      who: "Selbstständiger Kanalinspekteur",
      desc: "Einzelkämpfer mit Bedarf an schnellem Isybau2017-Export ohne Lizenzvertrag und ohne Desktop-Installation.",
      pick: "expandAI"
    },
    {
      who: "International tätiges Ingenieurbüro",
      desc: "Projekte über mehrere Länder und Norm-Standards, komplettes Asset-Management und GIS aus einer Hand gefragt.",
      pick: "WinCan KI"
    }
  ];

  return (
    <section className="section section-divider">
      <div className="container">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Entscheidungshilfe
          </div>
          <h2 className="h2 gradient-text">Welches Tool passt zu welchem Profil?</h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
          {scenarios.map((s, i) => {
            const isUs = s.pick === "expandAI";
            return (
              <div key={i} className="card" style={{
                padding: 26,
                display: "flex", alignItems: "flex-start", gap: 20,
                borderColor: "var(--border)"
              }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 16, fontWeight: 600, color: "var(--text)",
                    marginBottom: 8, letterSpacing: "-0.01em"
                  }}>{s.who}</div>
                  <div style={{
                    fontSize: 13.5, color: "var(--text-2)", lineHeight: 1.5,
                    textWrap: "pretty"
                  }}>{s.desc}</div>
                </div>
                <div style={{
                  flexShrink: 0,
                  display: "inline-flex", alignItems: "center", gap: 8,
                  padding: "8px 14px", borderRadius: 999,
                  background: isUs ? "var(--accent-soft)" : "rgba(255,255,255,0.04)",
                  border: `1px solid ${isUs ? "var(--accent-ring)" : "var(--border)"}`,
                  color: isUs ? "var(--accent)" : "var(--text-2)",
                  fontSize: 12, fontWeight: 600
                }}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                    <polyline points="20 6 9 17 4 12" />
                  </svg>
                  {s.pick}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ----- FAQ -----
const CompareFAQ = () => {
  const items = [
    {
      q: "Brauche ich für expandAI eine WinCan-Lizenz oder zusätzliche Software?",
      a: "Nein. expandAI ist eine reine Web-Anwendung: Konto anlegen, TV-Befahrung im Browser hochladen, auswerten. Es ist keine Desktop-Software, keine WinCan-Lizenz und kein IT-Setup nötig. WinCan KI ist dagegen ein KI-Modul innerhalb des WinCan-Ökosystems und entfaltet seinen Nutzen vor allem zusammen mit WinCan VX bzw. WinCan Web."
    },
    {
      q: "Wertet WinCan KI auch Hausanschlüsse aus?",
      a: "WinCan ist als Marktführer ein Generalist und deckt Hauptkanäle, Schächte und Hausanschlüsse breit ab. expandAI hat sein Modell dagegen explizit auf Hausanschluss-Inspektionen trainiert – das ist unsere stärkste Disziplin."
    },
    {
      q: "Wie schnell ist die Auswertung im Vergleich zu WinCan KI?",
      a: "Beide setzen auf automatisiertes KI-Coding und liefern Ergebnisse zügig; WinCan wirbt mit Coding in Echtzeit, optional ergänzt um eine menschliche Qualitätskontrolle. expandAI läuft als Self-Service-SaaS direkt im Browser: Upload, Klassifikation und Verifikation passieren in Minuten – ohne den Umweg über eine separate Software."
    },
    {
      q: "Unterstützt expandAI den aktuellen Isybau2017-Standard?",
      a: "Ja, expandAI exportiert nativ nach Isybau2017 – ohne Konverter oder Zwischenschritt. Das ist gerade für deutsche Kommunen und Ingenieurbüros relevant, die Daten in genau diesem Format erwarten."
    },
    {
      q: "Wo werden meine Daten gespeichert?",
      a: "expandAI hostet alle Daten DSGVO-konform ausschließlich auf Servern in Deutschland. WinCan ist als Cloud-Lösung global aufgestellt, mit Standorten u. a. in den USA, der Schweiz, Deutschland und UK. Für Auftraggeber mit strikten EU-Hosting-Vorgaben (z. B. einige Kommunen) kann dieser Unterschied entscheidend sein."
    },
    {
      q: "Ist expandAI günstiger als WinCan KI?",
      a: "WinCan KI rechnet über ein Credit-Modell ab und setzt in der Regel eine WinCan-Lizenz voraus; konkrete Preise gibt es auf Anfrage. expandAI startet bei 0 € im FREE-Tier und rechnet darüber hinaus transparent pro Inspektion ab, ohne Lizenz- oder Basisgebühr. Für kleine bis mittlere Volumen ist das in der Regel günstiger und planbarer."
    }
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section className="section section-divider" id="faq">
      <div className="container">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Häufige Fragen zum Vergleich
          </div>
          <h2 className="h2 gradient-text">expandAI oder WinCan KI – häufig gefragt.</h2>
        </div>

        <div style={{ display: "grid", gap: 12 }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className="card" style={{
                padding: 0, overflow: "hidden",
                borderColor: isOpen ? "var(--border-strong)" : "var(--border)"
              }}>
                <button
                  type="button"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  style={{
                    width: "100%", display: "flex", alignItems: "center",
                    justifyContent: "space-between", gap: 16,
                    padding: "22px 26px",
                    background: "transparent", border: "none",
                    color: "var(--text)", fontFamily: "inherit",
                    fontSize: 16, fontWeight: 500,
                    textAlign: "left", lineHeight: 1.4, cursor: "pointer"
                  }}>
                  <span style={{ flex: 1, textWrap: "pretty" }}>{it.q}</span>
                  <span aria-hidden="true" style={{
                    width: 28, height: 28, borderRadius: 999,
                    display: "grid", placeItems: "center",
                    background: "var(--accent-soft)", color: "var(--accent)",
                    flexShrink: 0,
                    transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                    transition: "transform 0.2s ease"
                  }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                      <path d="M12 5v14M5 12h14" />
                    </svg>
                  </span>
                </button>
                {isOpen && (
                  <div style={{
                    padding: "0 26px 24px",
                    color: "var(--text-2)", fontSize: 14, lineHeight: 1.65,
                    textWrap: "pretty"
                  }}>{it.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ----- Final CTA -----
const CompareCTA = () => (
  <section className="section section-divider">
    <div className="container">
      <div style={{
        textAlign: "center",
        padding: "72px 32px",
        background: "radial-gradient(ellipse at center top, rgba(167,139,250,0.18), rgba(167,139,250,0) 60%), var(--surface)",
        border: "1px solid var(--border)",
        borderRadius: "var(--radius-xl)",
        position: "relative", overflow: "hidden"
      }}>
        <h2 className="h2 gradient-text" style={{ marginBottom: 16 }}>
          Selber vergleichen statt nur lesen.
        </h2>
        <p className="lead" style={{ maxWidth: 560, margin: "0 auto 32px" }}>
          Lade deine TV-Befahrung in expandAI hoch und sieh in Minuten, was die KI klassifiziert.
          Im FREE-Tier, ohne Installation und ohne Verkaufsgespräch.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="https://app.expandai.de/register" target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-lg">
            Kostenlos testen
          </a>
          <a href="kontakt.html" className="btn btn-ghost btn-lg">Demo anfragen</a>
        </div>
        <div style={{
          marginTop: 28, fontSize: 12, color: "var(--text-4)",
          maxWidth: 640, margin: "28px auto 0", lineHeight: 1.6
        }}>
          Stand: Juni 2026. Vergleich basiert auf öffentlich verfügbaren Informationen
          (wincan.com, Produkt- und Partner-Seiten) und unserer eigenen Produkterfahrung.
          WinCan ist eine Marke der WinCan-Gruppe. Wir sind nicht mit WinCan verbunden.
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  CompareHero, CompareVerdict, CompareTable,
  CompareDifferences, CompareWhen, CompareFAQ, CompareCTA
});