// Comparison page sections — expandAI vs Cansol (Cansol Deutschland GmbH)
// Factual, fair comparison. Cansol is an established German service provider (Dienstleister,
// since 2008): you send / upload your inspection data, their team of engineers, technicians and
// inspectors evaluates it WITH AI (IBAK Panoramo 3D specialist, sewer drones, manhole analysis,
// full rehabilitation engineering) and delivers the result back. That breadth is stated honestly.
// IMPORTANT: both companies are German and DSGVO-compliant, so "Made in Germany / EU hosting" is
// NOT a differentiator here — using it would be dishonest. The honest spine of this comparison is:
// expandAI = Self-Service-SOFTWARE (du wertest selbst im Browser aus, sofort)
// Cansol    = Full-Service-DIENSTLEISTUNG (Experten-Team + KI werten für dich aus)

// ----- 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. Cansol:<br />
        Software zum Selbstauswerten oder Full-Service?
      </h1>
      <p className="lead" style={{ maxWidth: 800, marginBottom: 36 }}>
        Beide setzen KI für die Auswertung von TV-Befahrungen ein – und beide kommen aus
        Deutschland. Der Unterschied liegt im Modell: Cansol ist ein etablierter
        Dienstleister, der deine Inspektionsdaten mit einem erfahrenen Team plus KI auswertet
        (IBAK Panoramo 3D, Schacht- und Drohneninspektion, Sanierungsplanung). expandAI ist die
        Self-Service-Plattform: Du lädst deine Hausanschluss-Befahrung hoch und wertest sie in
        Minuten selbst im Browser aus – mit nativem Isybau2017-Export, ohne Auftrag und ohne Wartezeit.
      </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: "Modell", a: "Self-Service-Software", b: "Full-Service-Dienstleister" },
          { k: "Inspektionstyp", a: "Hausanschlüsse", b: "Großprofil, Schacht, Drohne" },
          { k: "Zugang", a: "Sofort selbst im Browser", b: "Daten einsenden, Team wertet aus" },
          { k: "Pricing", a: "Pay-per-Use ab 0 €", b: "Projektbezogen / auf Anfrage" }
        ].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)" }}>
              Cansol · {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 selbst auswerten – sofort, im Browser",
        "Du brauchst keine Daten an einen Dienstleister zu schicken",
        "Du willst transparente Preise und Ergebnisse ohne Wartezeit"
      ]
    },
    {
      title: "Wann Cansol passt",
      tone: "neutral",
      points: [
        "Du willst die Auswertung komplett abgeben (Full-Service)",
        "Du hast IBAK-Panoramo-3D-, Schacht- oder Großprofildaten",
        "Du brauchst Drohneninspektion schwer zugänglicher Bauwerke",
        "Du suchst Sanierungsplanung & Ingenieurleistungen aus einer Hand"
      ]
    },
    {
      title: "Was beide leisten",
      tone: "muted",
      points: [
        "Automatische Schadenserkennung per KI",
        "Klassifikation nach Norm-Codes (DWA-M 149-2)",
        "Export nach Isybau / strukturierte Datenformate",
        "Deutsches Unternehmen, DSGVO-konforme Verarbeitung"
      ]
    }
  ];

  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: "no" },
        { label: "Inline-Verifikation im Tool",    a: "full", b: "no" },
        { 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: "partial" }
      ]
    },
    {
      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: "no" },
        { label: "Sofort ausprobieren",          a: "full", b: "partial" },
        { label: "Enterprise-Verträge möglich",  a: "full", b: "full" }
      ]
    },
    {
      title: "Hosting & Compliance",
      rows: [
        { label: "Made in Germany",                a: "full", b: "full" },
        { label: "Alle Server-Standorte in DE",      a: "full", b: "full" },
        { label: "Alle Daten bleiben 100% in der EU", a: "full", b: "full" },
        { 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 }}>
            Software zum Selbstauswerten gegen Full-Service-Dienstleistung – wir haben die
            Punkte verglichen, die in der Praxis 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)" }}>
                Cansol
              </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: "Self-Service-Software für Hausanschlüsse",
      bullets: [
        {
          h: "Du behältst die Kontrolle",
          p: "Du lädst hoch, die KI klassifiziert, du verifizierst – alles selbst im Browser. Keine Daten verlassen den Prozess Richtung Dienstleister, kein Warten auf eine Lieferung."
        },
        {
          h: "Hausanschluss als Stärke",
          p: "Wir haben unser Modell speziell auf Hausanschluss-Inspektionen trainiert – der Bereich, in dem viele generalistische Lösungen schwächeln."
        },
        {
          h: "Ergebnis in Minuten",
          p: "Statt Daten einzusenden und auf einen Download-Link zu warten, siehst du das Resultat sofort – die komplette Auswertung passt in eine Mittagspause."
        },
        {
          h: "Transparent ab 0 €",
          p: "FREE-Tier zum Testen, Preise online einsehbar, Abrechnung pro Inspektion. Kein Angebot, kein Auftrag, kein Sales-Gespräch nötig."
        }
      ]
    },
    {
      label: "Cansol",
      accent: false,
      tagline: "Full-Service-Dienstleister rund um die Kanalinspektion",
      bullets: [
        {
          h: "Auswertung komplett abgeben",
          p: "Cansol ist seit 2008 als Dienstleister am Markt: ein Team aus Ingenieuren, Technikern und Inspekteuren wertet deine Daten KI-gestützt aus und liefert das fertige Ergebnis zurück."
        },
        {
          h: "IBAK Panoramo 3D & Schacht",
          p: "Spezialisiert auf die Auswertung von IBAK-Panoramo-3D-Scans sowie Schacht- und Großprofilanalysen – inklusive MPEG-Videoanalyse aus Schwenkkopfkameras."
        },
        {
          h: "Drohne für schwere Fälle",
          p: "Eigene Kanaldrohnen-Technologie mit 4K-360°- und LiDAR-Erfassung für Großprofile und Bauwerke, in denen Befahrung oder Begehung nicht möglich sind."
        },
        {
          h: "Ingenieurleistung aus einer Hand",
          p: "Von der Datenumwandlung über Sanierungsplanung, Hydraulik und Kostenschätzung bis zur Bauüberwachung – breite Formatabdeckung und ein großes Leistungsspektrum."
        }
      ]
    }
  ];

  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">Selbst auswerten oder auswerten lassen.</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, will selbst auswerten und sofort Reports an Hausverwaltungen liefern.",
      pick: "expandAI"
    },
    {
      who: "Kommune mit Großprofil & Bauwerken",
      desc: "Stauraumkanäle und Schachtbauwerke, die nicht befahrbar sind – Drohneninspektion und 3D-Auswertung durch ein Team gefragt.",
      pick: "Cansol"
    },
    {
      who: "Selbstständiger Kanalinspekteur",
      desc: "Einzelkämpfer mit Bedarf an schnellem Isybau2017-Export ohne Auftrag, ohne Datenversand und ohne Wartezeit.",
      pick: "expandAI"
    },
    {
      who: "Auftraggeber mit Sanierungsprojekt",
      desc: "Braucht die komplette Kette von IBAK-Panoramo-Auswertung über Sanierungsplanung bis zur Bauüberwachung aus einer Hand.",
      pick: "Cansol"
    }
  ];

  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">Welche Lösung 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: "Ist Cansol eine Software oder ein Dienstleister?",
      a: "Cansol (Cansol Deutschland GmbH) ist in erster Linie ein Dienstleister: Du sendest bzw. lädst deine Inspektionsdaten hoch, ein Team aus Ingenieuren, Technikern und Inspekteuren wertet sie KI-gestützt aus und liefert das Ergebnis zurück. expandAI ist dagegen eine Self-Service-Software – du wertest deine TV-Befahrung selbst im Browser aus, ohne die Auswertung aus der Hand zu geben."
    },
    {
      q: "Wertet expandAI auch Schächte, Großprofile oder IBAK-Panoramo-Daten aus?",
      a: "Nein, das ist Cansols Stärke. Cansol ist auf die Auswertung von IBAK-Panoramo-3D-Scans, Schacht- und Großprofilanalysen sowie auf Drohneninspektion schwer zugänglicher Bauwerke spezialisiert. expandAI ist bewusst auf Hausanschluss-Inspektionen fokussiert und wertet diese als reine Software-Lösung aus."
    },
    {
      q: "Wie schnell habe ich mein Ergebnis?",
      a: "Bei expandAI sofort: Upload, KI-Klassifikation und Verifikation passieren direkt im Browser, das Ergebnis liegt in Minuten vor. Bei Cansol gibst du die Daten an den Dienstleister und erhältst das ausgewertete Ergebnis anschließend zurück (z. B. über einen Download-Link) – der Vorteil ist, dass du dich um die Auswertung selbst nicht kümmern musst."
    },
    {
      q: "Sind beide DSGVO-konform und aus Deutschland?",
      a: "Ja. Sowohl expandAI als auch Cansol sind deutsche Unternehmen und verarbeiten Daten DSGVO-konform. Anders als bei einem Vergleich mit ausländischen Anbietern ist der Daten-Standort hier also kein Unterscheidungsmerkmal – der Unterschied liegt im Modell (Software vs. Dienstleistung) und im Inspektions-Fokus."
    },
    {
      q: "Welche Datenformate werden unterstützt?",
      a: "expandAI exportiert nativ nach Isybau2017 und klassifiziert nach DWA-M 149-2 bzw. DIN EN 13508-2 – gezielt für den deutschen Hausanschluss-Anwendungsfall. Cansol deckt als Dienstleister eine sehr breite Palette internationaler Schnittstellen ab (u. a. ISYBAU XML, DWA-M 150, WRc, DANDAS, RibX, PACP) und übernimmt auf Wunsch auch Datenumwandlungen zwischen Formaten."
    },
    {
      q: "Was kostet die Auswertung im Vergleich?",
      a: "expandAI startet bei 0 € im FREE-Tier und rechnet darüber hinaus transparent pro Inspektion ab (online einsehbar, ohne Auftrag). Cansol arbeitet als Dienstleister projekt- bzw. leistungsbezogen; konkrete Preise ergeben sich aus dem jeweiligen Auftrag. Für kleine bis mittlere Hausanschluss-Volumen ist Self-Service in der Regel günstiger und planbarer, für umfangreiche Sanierungsprojekte kann die Full-Service-Leistung von Cansol sinnvoller sein."
    }
  ];

  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 Cansol – 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 auswerten 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 Auftrag und ohne Wartezeit.
        </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
          (cansol.de, Produkt- und Leistungsseiten) und unserer eigenen Produkterfahrung.
          Cansol ist eine Marke der Cansol Deutschland GmbH. Wir sind nicht mit Cansol verbunden.
        </div>
      </div>
    </div>
  </section>
);

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