// Comparison page sections — expandAI vs Pallon
// Factual, fair comparison. Where Pallon is stronger (established, global reach, manhole/main-sewer scale)
// this is stated honestly. The differentiation is positioning, not bashing.

// ----- 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. Pallon:<br />
        welche KI passt zur deutschen Kanalinspektion?
      </h1>
      <p className="lead" style={{ maxWidth: 760, marginBottom: 36 }}>
        Beide Anbieter automatisieren die Auswertung von TV-Befahrungen mit KI –
        verfolgen aber unterschiedliche Ansätze. Pallon ist ein etablierter, global aufgestellter
        Anbieter aus der Schweiz mit Fokus auf Hauptkanäle und Schächte. expandAI ist die
        deutsche Self-Service-Plattform mit Hausanschluss-Fokus, nativem Isybau2017-Export
        und DWA-M 149-2-Klassifikation in Minuten statt Tagen.
      </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" },
          { k: "Inspektionstyp", a: "Hausanschlüsse", b: "Hauptkanäle & Schächte" },
          { k: "Workflow", a: "Self-Service in Minuten", b: "Cloud-Service" },
          { k: "Pricing", a: "Pay-per-Use ab 0 €", b: "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)" }}>
              Pallon · {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 brauchst Isybau2017-Export nach deutschem Standard",
        "Du willst Ergebnisse in Minuten, nicht Tagen",
        "Du arbeitest mit deutschsprachigen Auftraggebern"
      ]
    },
    {
      title: "Wann Pallon passt",
      tone: "neutral",
      points: [
        "Du wertest Hauptkanäle oder Schächte (MACP) aus",
        "Du brauchst einen international etablierten Anbieter",
        "Du arbeitest mit Standards wie PACP / NASSCO",
        "Du suchst einen Full-Service mit Quality-Control"
      ]
    },
    {
      title: "Was beide leisten",
      tone: "muted",
      points: [
        "Automatische Schadenserkennung per KI",
        "Klassifikation nach Norm-Codes",
        "PDF-Reports und strukturierte Exporte",
        "Web-basierte Plattform, Review 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: "no" },
        { 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: "no" }
      ]
    },
    {
      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 ausporbieren",         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)" }}>
                Pallon
              </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: "Anbieter für Haushaltsanschlüsse",
      bullets: [
        {
          h: "Minuten statt Tage",
          p: "Du lädst hoch, die KI klassifiziert, du verifizierst. Die komplette Auswertung passt in eine Mittagspause statt in einen Lieferzyklus."
        },
        {
          h: "Hausanschluss als Stärke",
          p: "Wir haben unser Modell speziell auf Hausanschluss-Inspektionen trainiert – der Bereich, in dem viele KI-Tools schwächeln."
        },
        {
          h: "Datenformat",
          p: "Kein Workaround, kein Konverter. Die Datei, die der Auftraggeber will, kommt direkt aus dem Tool."
        },
        {
          h: "Pay-as-you-go ab 0 €",
          p: "FREE-Tier zum Testen, transparente Preise online. Kein Sales-Gespräch nötig, um den Preis zu erfahren."
        }
      ]
    },
    {
      label: "Pallon",
      accent: false,
      tagline: "Anbieter für Hauptkanal & Schacht",
      bullets: [
        {
          h: "Reife Plattform",
          p: "Pallon ist seit Jahren am Markt, hat tausende Kilometer Kanal ausgewertet und Partnerschaften mit großen Inspektions-Software-Anbietern."
        },
        {
          h: "Hauptkanal & Schacht im Fokus",
          p: "Die Stärke liegt klar bei größeren Inspektionsformaten – inklusive 3D-Vision-Analysen für Schächte (MACP)."
        },
        {
          h: "Global aufgestellt",
          p: "Unterstützt internationale Standards wie PACP und NASSCO und ist über Partner in mehreren Märkten verfügbar."
        },
        {
          h: "Service-orientiert",
          p: "Eher Full-Service mit eigener Quality-Control-Schicht als Self-Service-SaaS – passend für größere 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.",
      pick: "expandAI"
    },
    {
      who: "Kommune mit großem Kanalnetz",
      desc: "Mehrere hundert Kilometer Hauptkanal, jährliche Re-Inspektion, MACP-konforme Schacht-Daten.",
      pick: "Pallon"
    },
    {
      who: "Selbstständiger Kanalinspekteur",
      desc: "Einzelkämpfer mit Bedarf an schnellem Isybau-Export ohne Vertragsverhandlung.",
      pick: "expandAI"
    },
    {
      who: "Ingenieurbüro mit Sanierungsplanung",
      desc: "Internationale Projekte, Mix aus EU- und US-Standards, Pallon im bestehenden Software-Stack integriert.",
      pick: "Pallon"
    }
  ];

  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: "Wertet Pallon auch Hausanschlüsse aus?",
      a: "Pallon konzentriert sich primär auf Hauptkanäle und Schächte. expandAI hat seine Modelle explizit auf Hausanschlüsse trainiert – das ist unsere stärkste Disziplin."
    },
    {
      q: "Wie lange dauert die Auswertung bei Pallon im Vergleich zu expandAI?",
      a: "Pallon gibt auf der eigenen Website eine durchschnittliche Bearbeitungszeit von etwa einer Woche an, da die KI-Auswertung durch eine zusätzliche Qualitätskontrolle ergänzt wird. expandAI läuft als Self-Service-SaaS: Upload, Klassifikation und Verifikation passieren in Minuten – die Quality-Control übernimmt direkt der Inspekteur im Tool."
    },
    {
      q: "Wo werden meine Daten gespeichert?",
      a: "expandAI hostet alle Daten DSGVO-konform auf Servern in DE. Pallon ist ein Schweizer Unternehmen; die Schweiz hat einen DSGVO-äquivalenten Datenschutz, ist aber kein EU-Mitglied. Für Auftraggeber mit strikten EU-Hosting-Vorgaben (z. B. einige Kommunen) kann das relevant sein."
    },
    {
      q: "Kann ich beide Tools parallel einsetzen?",
      a: "Ja. Wenn dein Portfolio sowohl Hausanschlüsse als auch Hauptkanäle umfasst, kann eine Kombination Sinn machen – expandAI für Hausanschlüsse, Pallon für die großen Kanäle. Sobald unsere KI-Auswertung für Hauptkanäle und Schächte aus der Beta kommt, ersetzt expandAI beide Anwendungsfälle aus einer Hand."
    },
    {
      q: "Ist expandAI günstiger als Pallon?",
      a: "Pallon veröffentlicht keine offiziellen Preise – die Angebote werden individuell verhandelt. expandAI startet bei 0 € im FREE-Tier und rechnet darüber hinaus transparent pro Inspektion ab. Für kleine bis mittlere Volumen ist das in der Regel günstiger und planbarer. Ein direkter Preisvergleich gelingt nur mit einem konkreten Angebot beider Anbieter."
    }
  ];

  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 Pallon – 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 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
          (Pallon.com, Presse­mitteilungen, Partner-Seiten) und unserer eigenen Produkterfahrung.
          Pallon ist eine Marke der Pallon AG, Zürich. Wir sind nicht mit Pallon verbunden.
        </div>
      </div>
    </div>
  </section>
);

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