// sections-2.jsx — Dialects, DX, Integrations, Pricing, Comparison, Trust, CTA, Footer.

const { useState: useState_S2, useEffect: useEffect_S2, useRef: useRef_S2 } = React;

// —————————————————————————————————————————————
// Dialect showcase
// —————————————————————————————————————————————
function DialectSection() {
  const dialects = window.HELVOX_DATA.dialects;
  const [active, setActive] = useState_S2(0);
  const [playing, setPlaying] = useState_S2(false);
  const audioRef = useRef_S2(null);

  useEffect_S2(() => {
    const audio = audioRef.current;
    if (audio) {
      audio.pause();
      audio.currentTime = 0;
    }
    setPlaying(false);
  }, [active]);

  const d = dialects[active];
  const toggleSample = () => {
    const audio = audioRef.current;
    if (!audio || !d.audioSrc) return;

    if (playing) {
      audio.pause();
      audio.currentTime = 0;
      setPlaying(false);
      return;
    }

    audio.currentTime = 0;
    setPlaying(true);
    const playPromise = audio.play();
    if (playPromise && typeof playPromise.catch === "function") {
      playPromise.catch(() => setPlaying(false));
    }
  };

  return (
    <section id="dialekte" style={{
      padding: "140px 32px", background: "#f5f5f1", color: "#0a0a0a",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <SectionHead
          idx="02"
          kicker="Dialekt"
          invert
          title={<>Sechs Stimmen,<br /><span style={{ color: "#666660" }}>die nach Hause klingen.</span></>}
          sub="Wir trainieren eigene Acoustic Models pro Region. Kein 'Schweizerdeutsch-Filter' auf einer Hochdeutsch-Stimme — sondern echte Dialekte mit Idiomatik, Aussprache und Tempo."
        />

        <div style={{
          display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48,
          alignItems: "stretch",
        }}>
          {/* Map of dialects */}
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1,
            background: "#d0d0c8", border: "1px solid #d0d0c8",
            borderRadius: 12, overflow: "hidden",
          }}>
            {dialects.map((dia, i) => (
              <button
                key={dia.code}
                onClick={() => { setActive(i); }}
                style={{
                  background: i === active ? "#0a0a0a" : "#fbfbf6",
                  color: i === active ? "#f5f5f1" : "#0a0a0a",
                  border: "none", padding: "28px 24px",
                  textAlign: "left", cursor: "pointer",
                  transition: "background 200ms",
                  display: "flex", flexDirection: "column", gap: 8,
                  minHeight: 130,
                }}>
                <div style={{
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                }}>
                  <div style={{
                    fontFamily: "Geist Mono, monospace", fontSize: 11,
                    letterSpacing: "0.14em",
                    color: i === active ? "#DA291C" : "#666660",
                  }}>{dia.code}</div>
                  <div style={{
                    width: 22, height: 22, borderRadius: 999,
                    border: `1px solid ${i === active ? "#DA291C" : "#999"}`,
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: 10, color: i === active ? "#DA291C" : "#999",
                  }}>▶</div>
                </div>
                <div style={{
                  fontFamily: "Geist, sans-serif", fontSize: 22, fontWeight: 700,
                  letterSpacing: "-0.02em",
                }}>{dia.name}</div>
              </button>
            ))}
          </div>

          {/* Active player */}
          <div style={{
            background: "#0a0a0a", color: "#f5f5f1", borderRadius: 12,
            padding: 32, display: "flex", flexDirection: "column", justifyContent: "space-between",
            minHeight: 380,
          }}>
            <div>
              <div style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                marginBottom: 32,
              }}>
                <div style={{
                  fontFamily: "Geist Mono, monospace", fontSize: 11,
                  letterSpacing: "0.14em", color: "#8a8a85",
                }}>
                  Aktive Stimme · {d.voiceName ? `${d.voiceName} · ${d.name}` : `${d.code.toLowerCase()}-lina`}
                </div>
                <div style={{
                  fontFamily: "Geist Mono, monospace", fontSize: 11,
                  color: playing ? "#d2f24a" : "#666660",
                  display: "flex", alignItems: "center", gap: 6,
                }}>
                  <span style={{
                    width: 6, height: 6, borderRadius: 999,
                    background: playing ? "#d2f24a" : "#333",
                    boxShadow: playing ? "0 0 8px #d2f24a" : "none",
                  }} />
                  {d.audioSrc ? (playing ? "WIEDERGABE" : "BEREIT") : "SAMPLE FOLGT"}
                </div>
              </div>

              <div style={{
                fontFamily: "Geist, sans-serif",
                fontSize: "clamp(22px, 2.4vw, 32px)",
                fontWeight: 500, lineHeight: 1.3, letterSpacing: "-0.02em",
                color: "#f5f5f1", marginBottom: 28,
              }}>"{d.phrase}"</div>

              <Waveform active={playing} color="#DA291C" seed={d.waveSeed} barCount={48} h={48} />
              <audio
                key={d.code}
                ref={audioRef}
                src={d.audioSrc || ""}
                preload="auto"
                onEnded={() => setPlaying(false)}
                onPause={() => setPlaying(false)}
              />
            </div>

            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              marginTop: 32, paddingTop: 20, borderTop: "1px solid #1f1f1f",
            }}>
              <button onClick={toggleSample} disabled={!d.audioSrc} style={{
                padding: "10px 18px", background: !d.audioSrc ? "#1f1f1f" : (playing ? "transparent" : "#DA291C"),
                color: !d.audioSrc ? "#666660" : (playing ? "#DA291C" : "#0a0a0a"),
                border: `1px solid ${!d.audioSrc ? "#333" : "#DA291C"}`,
                borderRadius: 6, cursor: d.audioSrc ? "pointer" : "not-allowed",
                fontFamily: "Geist, sans-serif", fontWeight: 600, fontSize: 13,
                letterSpacing: "0.02em",
              }}>
                {!d.audioSrc ? "Sample folgt" : (playing ? "■ Stopp" : "▶ Wiedergabe")}
              </button>
              <div style={{
                fontFamily: "Geist Mono, monospace", fontSize: 10.5,
                color: "#666660", letterSpacing: "0.06em",
              }}>
                Live-Hörproben · Cyliane Baseldeutsch · Zürich · Bern
              </div>
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 32, padding: "20px 24px", borderTop: "1px solid #d0d0c8",
          fontFamily: "Geist Mono, monospace", fontSize: 11,
          color: "#666660", letterSpacing: "0.08em",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
        }}>
          <span>↗ Custom Voice Cloning auf Enterprise · ab 8 Std. Trainingsmaterial</span>
          <span>+ Walliserdütsch, Bündnerdütsch in Beta</span>
        </div>
      </div>
    </section>
  );
}

// —————————————————————————————————————————————
// Developer Experience
// —————————————————————————————————————————————
function DXSection() {
  const code = window.HELVOX_DATA.code;
  const [lang, setLang] = useState_S2("curl");
  const snippet = code[lang];

  return (
    <section id="entwickler" style={{
      padding: "140px 32px", background: "#0a0a0a",
      borderTop: "1px solid #1a1a1a",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <SectionHead
          idx="03"
          kicker="Entwickler"
          title={<>Voice. <span style={{ color: "#8a8a85" }}>Aber mit </span>API.</>}
          sub="Vier Zeilen Code für den ersten Anruf. Streaming-Events, Webhooks, OpenTelemetry-Traces, signierte Payloads. Dokumentation, die echte Entwickler geschrieben haben — nicht Marketing."
        />

        <div style={{
          display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 48, alignItems: "start",
        }}>
          {/* Code */}
          <div style={{
            background: "#0c0c0c", border: "1px solid #1f1f1f", borderRadius: 12,
            overflow: "hidden",
          }}>
            <div style={{
              display: "flex", gap: 0, borderBottom: "1px solid #1f1f1f",
              background: "#0a0a0a",
            }}>
              {[
                { k: "curl",   label: "cURL" },
                { k: "python", label: "Python" },
                { k: "js",     label: "TypeScript" },
              ].map(t => (
                <button key={t.k} onClick={() => setLang(t.k)} style={{
                  padding: "12px 20px", background: lang === t.k ? "#141414" : "transparent",
                  border: "none", borderRight: "1px solid #1f1f1f",
                  color: lang === t.k ? "#f5f5f1" : "#666660",
                  fontFamily: "Geist Mono, monospace", fontSize: 12,
                  letterSpacing: "0.04em", cursor: "pointer",
                }}>{t.label}</button>
              ))}
              <div style={{
                marginLeft: "auto", padding: "12px 18px",
                fontFamily: "Geist Mono, monospace", fontSize: 10.5,
                color: "#666660", letterSpacing: "0.08em",
              }}>POST /v1/calls</div>
            </div>
            <pre style={{
              margin: 0, padding: "24px 28px",
              fontFamily: "Geist Mono, monospace", fontSize: 13.5,
              lineHeight: 1.65, color: "#c8c8c2",
              overflow: "auto",
            }}>{syntaxify(snippet)}</pre>
          </div>

          {/* DX bullets */}
          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            <DXBullet
              label="REST + Streaming"
              value="HTTP/2 · WebSocket · Server-Sent Events"
            />
            <DXBullet
              label="SDKs (offiziell)"
              value="Python · TypeScript · Go · Ruby"
            />
            <DXBullet
              label="Webhooks"
              value="HMAC-signiert · 14 Event-Typen · Retry-Pakete"
            />
            <DXBullet
              label="Observability"
              value="OpenTelemetry · Sentry · Datadog · Grafana"
            />
            <DXBullet
              label="Sandbox"
              value="Unbegrenzte Test-Anrufe · keine Karte nötig"
            />
            <DXBullet
              label="Status"
              value={<span><span style={{ color: "#d2f24a" }}>● Operativ</span> · 99.97% (90 Tage)</span>}
              last
            />
          </div>
        </div>

        <div style={{
          marginTop: 40, padding: "20px 24px", background: "#0c0c0c",
          border: "1px solid #1f1f1f", borderRadius: 10,
          display: "flex", flexWrap: "wrap", gap: 18, alignItems: "center", justifyContent: "space-between",
          fontFamily: "Geist Mono, monospace", fontSize: 12, color: "#8a8a85",
        }}>
          <span>$ npm install @helvox/sdk</span>
          <span style={{ display: "flex", gap: 18 }}>
            <a href="#docs" style={{ color: "#f5f5f1", textDecoration: "none" }}>Docs →</a>
            <a href="#api" style={{ color: "#f5f5f1", textDecoration: "none" }}>API-Referenz →</a>
            <a href="#changelog" style={{ color: "#f5f5f1", textDecoration: "none" }}>Changelog →</a>
          </span>
        </div>
      </div>
    </section>
  );
}

// Minimal syntax highlight via simple tokens
function syntaxify(code) {
  // Returns array of spans
  const tokens = code.split(/(\bcurl\b|\bfrom\b|\bimport\b|\bconst\b|\bawait\b|\bnew\b|\basync\b|\bclient\b|\bcall\b|"[^"]*"|'[^']*'|--?[\w-]+|\/\/.*$|#.*$|\$\{[^}]*\}|\bprint\b|\blambda\b|\bdef\b)/);
  return tokens.map((t, i) => {
    if (/^"[^"]*"$|^'[^']*'$/.test(t)) return <span key={i} style={{ color: "#d2f24a" }}>{t}</span>;
    if (/^--?[\w-]+$/.test(t)) return <span key={i} style={{ color: "#8a8a85" }}>{t}</span>;
    if (/^(curl|from|import|const|await|new|async|def|lambda|print)$/.test(t)) return <span key={i} style={{ color: "#DA291C" }}>{t}</span>;
    if (/^(client|call)$/.test(t)) return <span key={i} style={{ color: "#a4b8ff" }}>{t}</span>;
    if (/^\$\{[^}]*\}$/.test(t)) return <span key={i} style={{ color: "#f5b400" }}>{t}</span>;
    if (/^(\/\/.*|#.*)$/.test(t)) return <span key={i} style={{ color: "#555" }}>{t}</span>;
    return <span key={i}>{t}</span>;
  });
}

function DXBullet({ label, value, last }) {
  return (
    <div style={{
      padding: "16px 0", borderTop: "1px solid #1a1a1a",
      borderBottom: last ? "1px solid #1a1a1a" : "none",
    }}>
      <div style={{
        fontFamily: "Geist Mono, monospace", fontSize: 10.5,
        color: "#666660", letterSpacing: "0.08em", textTransform: "uppercase",
        marginBottom: 6,
      }}>{label}</div>
      <div style={{
        fontFamily: "Geist, sans-serif", fontSize: 15, color: "#f5f5f1",
        fontWeight: 500,
      }}>{value}</div>
    </div>
  );
}

// —————————————————————————————————————————————
// Integrations
// —————————————————————————————————————————————
function IntegrationsSection() {
  const items = window.HELVOX_DATA.integrations;
  return (
    <section style={{
      padding: "140px 32px", background: "#0a0a0a",
      borderTop: "1px solid #1a1a1a",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <SectionHead
          idx="04"
          kicker="Integrationen"
          title={<>Nicht nur reden.<br /><span style={{ color: "#8a8a85" }}>Auch arbeiten.</span></>}
          sub="Anruf rein, Lead-Karte im CRM, Termin im Kalender, SMS an den Kunden, Eintrag in Bexio. Alles ohne Zapier-Verkettung — nativ und mit Retry-Garantie."
        />

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1,
          background: "#1a1a1a", border: "1px solid #1a1a1a", borderRadius: 12,
          overflow: "hidden",
        }}>
          {items.map((it) => (
            <div key={it.name} style={{
              background: "#0c0c0c", padding: "28px 24px",
              minHeight: 130, display: "flex", flexDirection: "column", justifyContent: "space-between",
            }}>
              <div style={{
                fontFamily: "Geist Mono, monospace", fontSize: 28,
                color: "#DA291C", letterSpacing: "-0.04em",
              }}>{it.mono}</div>
              <div>
                <div style={{
                  fontFamily: "Geist, sans-serif", fontSize: 15, fontWeight: 600,
                  color: "#f5f5f1",
                }}>{it.name}</div>
                <div style={{
                  fontFamily: "Geist Mono, monospace", fontSize: 10.5,
                  color: "#666660", letterSpacing: "0.06em", marginTop: 2,
                }}>{it.cat.toUpperCase()}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 24, fontFamily: "Geist Mono, monospace", fontSize: 11,
          color: "#666660", letterSpacing: "0.08em",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 18,
        }}>
          <span>↗ Im Backlog: Lexoffice · Sage · Klara · Abacus · ServiceTitan</span>
          <span>Eigene Integration? <span style={{ color: "#f5f5f1" }}>integrations@helvox.ch</span></span>
        </div>
      </div>
    </section>
  );
}

// —————————————————————————————————————————————
// Pricing
// —————————————————————————————————————————————
function PricingSection() {
  const tiers = window.HELVOX_DATA.pricing;
  return (
    <section id="preise" style={{
      padding: "140px 32px", background: "#f5f5f1", color: "#0a0a0a",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <SectionHead
          idx="05"
          kicker="Preise"
          invert
          align="center"
          title={<>Transparent.<br /><span style={{ color: "#666660" }}>Klar günstiger.</span></>}
          sub="Alle Preise in CHF, inkl. CH-Hosting, ohne Setup-Gebühr. Minuten-Preis verfällt nicht. Jederzeit monatlich kündbar."
        />

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1,
          background: "#d0d0c8", border: "1px solid #d0d0c8",
          borderRadius: 14, overflow: "hidden",
        }}>
          {tiers.map((t, i) => (
            <PriceTier key={t.name} tier={t} />
          ))}
        </div>

        {/* Volume tease */}
        <div style={{
          marginTop: 28, padding: "22px 28px",
          border: "1px solid #d0d0c8", borderRadius: 12, background: "#fbfbf6",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: 14,
        }}>
          <div>
            <div style={{
              fontFamily: "Geist Mono, monospace", fontSize: 11,
              color: "#666660", letterSpacing: "0.1em", marginBottom: 4,
            }}>VOLUMEN-RABATT</div>
            <div style={{
              fontFamily: "Geist, sans-serif", fontSize: 17, fontWeight: 600,
              color: "#0a0a0a",
            }}>Ab 10'000 Minuten/Monat sprechen wir individuell — bis runter auf 0.04 CHF/Min.</div>
          </div>
          <a href="#sales" style={{
            padding: "12px 22px", background: "#0a0a0a", color: "#f5f5f1",
            textDecoration: "none", borderRadius: 6,
            fontFamily: "Geist, sans-serif", fontWeight: 600, fontSize: 14,
          }}>Volumen-Angebot →</a>
        </div>
      </div>
    </section>
  );
}

function PriceTier({ tier }) {
  return (
    <div style={{
      background: tier.featured ? "#0a0a0a" : "#fbfbf6",
      color: tier.featured ? "#f5f5f1" : "#0a0a0a",
      padding: "40px 32px", position: "relative",
    }}>
      {tier.featured && (
        <div style={{
          position: "absolute", top: 14, right: 14,
          fontFamily: "Geist Mono, monospace", fontSize: 10,
          letterSpacing: "0.12em", color: "#DA291C",
          padding: "4px 8px", border: "1px solid #DA291C", borderRadius: 4,
        }}>EMPFOHLEN</div>
      )}
      <div style={{
        fontFamily: "Geist, sans-serif", fontSize: 22, fontWeight: 700,
        letterSpacing: "-0.02em", marginBottom: 4,
      }}>{tier.name}</div>
      <div style={{
        fontFamily: "Geist, sans-serif", fontSize: 13.5,
        color: tier.featured ? "#a8a8a3" : "#666660", marginBottom: 28,
      }}>{tier.tagline}</div>

      <div style={{ marginBottom: 24, paddingBottom: 24, borderBottom: tier.featured ? "1px solid #1f1f1f" : "1px solid #d0d0c8" }}>
        {tier.price ? (
          <>
            <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
              <span style={{
                fontFamily: "Geist Mono, monospace", fontSize: 14,
                color: tier.featured ? "#8a8a85" : "#666660",
              }}>CHF</span>
              <span style={{
                fontFamily: "Geist, sans-serif", fontWeight: 700, fontSize: 56,
                letterSpacing: "-0.04em", lineHeight: 1,
              }}>{tier.price}</span>
              <span style={{
                fontFamily: "Geist, sans-serif", fontSize: 15,
                color: tier.featured ? "#8a8a85" : "#666660", marginLeft: 4,
              }}>/ Monat</span>
            </div>
            <div style={{
              fontFamily: "Geist Mono, monospace", fontSize: 12,
              color: tier.featured ? "#8a8a85" : "#666660", marginTop: 8,
            }}>+ CHF {tier.minute} pro Gesprächsminute</div>
          </>
        ) : (
          <>
            <div style={{
              fontFamily: "Geist, sans-serif", fontWeight: 700, fontSize: 38,
              letterSpacing: "-0.03em", lineHeight: 1,
            }}>Auf Anfrage</div>
            <div style={{
              fontFamily: "Geist Mono, monospace", fontSize: 12,
              color: tier.featured ? "#8a8a85" : "#666660", marginTop: 10,
            }}>Minuten {tier.minute} CHF · Volumen-Pricing</div>
          </>
        )}
      </div>

      <button style={{
        width: "100%", padding: "14px 18px",
        background: tier.featured ? "#DA291C" : "#0a0a0a",
        color: tier.featured ? "#0a0a0a" : "#f5f5f1",
        border: "none", borderRadius: 6, cursor: "pointer",
        fontFamily: "Geist, sans-serif", fontWeight: 600, fontSize: 14,
        marginBottom: 28,
      }}>{tier.cta}</button>

      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {tier.features.map(f => (
          <div key={f} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
            <span style={{
              color: "#DA291C", fontFamily: "Geist Mono, monospace", fontSize: 13,
              flexShrink: 0, paddingTop: 2,
            }}>+</span>
            <span style={{
              fontFamily: "Geist, sans-serif", fontSize: 14, lineHeight: 1.5,
              color: tier.featured ? "#c8c8c2" : "#333",
            }}>{f}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// —————————————————————————————————————————————
// Comparison
// —————————————————————————————————————————————
function ComparisonSection() {
  const rows = window.HELVOX_DATA.comparison;
  const cols = ["Feature", "HELVOX", "Suisse Voice", "Vapi / Retell"];
  return (
    <section id="kunden" style={{
      padding: "140px 32px", background: "#0a0a0a",
      borderTop: "1px solid #1a1a1a",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <SectionHead
          idx="06"
          kicker="Vergleich"
          title={<>Ehrlich verglichen.<br /><span style={{ color: "#8a8a85" }}>Stand: Mai 2026.</span></>}
          sub="Wir respektieren den Mitbewerb. Suisse Voice hat den CH-Markt früh aufgemacht — und genau darum messen wir uns daran. Hier die belegbaren Fakten, nicht Marketing-Geschwurbel."
        />

        <div style={{
          border: "1px solid #1a1a1a", borderRadius: 12, overflow: "hidden",
        }}>
          {/* Header */}
          <div style={{
            display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
            background: "#0c0c0c", borderBottom: "1px solid #1a1a1a",
          }}>
            {cols.map((c, i) => (
              <div key={c} style={{
                padding: "18px 22px",
                fontFamily: "Geist Mono, monospace", fontSize: 11,
                letterSpacing: "0.12em", textTransform: "uppercase",
                color: i === 1 ? "#DA291C" : "#8a8a85",
                fontWeight: i === 1 ? 700 : 500,
                borderRight: i < 3 ? "1px solid #1a1a1a" : "none",
                background: i === 1 ? "#101010" : "transparent",
              }}>{c}</div>
            ))}
          </div>
          {/* Rows */}
          {rows.map((r, ri) => (
            <div key={ri} style={{
              display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
              borderBottom: ri < rows.length - 1 ? "1px solid #1a1a1a" : "none",
            }}>
              {r.map((cell, ci) => (
                <div key={ci} style={{
                  padding: "18px 22px",
                  fontFamily: ci === 0 ? "Geist, sans-serif" : "Geist Mono, monospace",
                  fontSize: ci === 0 ? 14.5 : 13,
                  color: ci === 1 ? "#f5f5f1" : ci === 0 ? "#f5f5f1" : "#8a8a85",
                  fontWeight: ci === 1 ? 600 : 400,
                  background: ci === 1 ? "#101010" : "transparent",
                  borderRight: ci < 3 ? "1px solid #1a1a1a" : "none",
                }}>{cell}</div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// —————————————————————————————————————————————
// Trust
// —————————————————————————————————————————————
function TrustSection() {
  const items = [
    { kicker: "DSG · revDSG", title: "Datenresidenz Schweiz", text: "Audio, Transkripte, Metadaten — alles bleibt in Basel. Keine Drittland-Transfers. Verarbeitungsverzeichnis auf Anfrage." },
    { kicker: "Privacy", title: "Kein Training auf Ihren Daten", text: "Standard ist Opt-Out. Ihre Anrufe trainieren niemals unsere Basismodelle. Optional dedizierte Modelle für Enterprise." },
    { kicker: "Security", title: "Hardened by default", text: "TLS 1.3, AES-256 at rest, HMAC-Webhooks, Rate-Limiting, SOC 2 Type II in Prüfung (Q4 2026)." },
    { kicker: "SLA", title: "99.95% Uptime, garantiert", text: "Service Credits bei Verfehlung. Echtzeit-Statusseite mit allen Incidents der letzten 24 Monate." },
  ];
  return (
    <section style={{
      padding: "140px 32px", background: "#0a0a0a",
      borderTop: "1px solid #1a1a1a",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <SectionHead
          idx="07"
          kicker="Vertrauen"
          title={<>Swiss Made.<br /><span style={{ color: "#8a8a85" }}>Bis ins Last Byte.</span></>}
          sub="Es gibt einen Grund, warum suisse-voice 'Swiss Made' so betont. Wir auch — nur konsequenter. Hier, was das konkret heisst."
        />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "#1a1a1a", border: "1px solid #1a1a1a", borderRadius: 12, overflow: "hidden" }}>
          {items.map(it => (
            <div key={it.title} style={{ background: "#0c0c0c", padding: "36px 32px" }}>
              <div style={{
                fontFamily: "Geist Mono, monospace", fontSize: 11,
                color: "#DA291C", letterSpacing: "0.12em", textTransform: "uppercase",
                marginBottom: 14,
              }}>{it.kicker}</div>
              <div style={{
                fontFamily: "Geist, sans-serif", fontSize: 24, fontWeight: 700,
                color: "#f5f5f1", letterSpacing: "-0.02em", marginBottom: 12,
              }}>{it.title}</div>
              <div style={{
                fontFamily: "Geist, sans-serif", fontSize: 15, lineHeight: 1.6,
                color: "#a8a8a3",
              }}>{it.text}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// —————————————————————————————————————————————
// Final CTA
// —————————————————————————————————————————————
function FinalCTA({ name }) {
  return (
    <section style={{
      padding: "116px 32px", background: "#0a0a0a", color: "#f5f5f1",
      borderTop: "1px solid #1a1a1a", position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: `linear-gradient(rgba(245,245,241,0.035) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(245,245,241,0.035) 1px, transparent 1px)`,
        backgroundSize: "60px 60px",
      }} />
      <div style={{ position: "relative", maxWidth: 980, margin: "0 auto", textAlign: "center" }}>
        <div style={{
          fontFamily: "Geist Mono, monospace", fontSize: 11,
          letterSpacing: "0.18em", textTransform: "uppercase",
          marginBottom: 24, color: "#666660",
        }}>
          08 — Nach der Cyliane-Hörprobe
        </div>
        <h2 style={{
          fontFamily: "Geist, sans-serif", fontWeight: 700,
          fontSize: 56, lineHeight: 1.05, letterSpacing: 0,
          margin: 0, marginBottom: 30, overflowWrap: "break-word",
          hyphens: "auto",
        }}>
          Sie glauben nicht, dass diese Stimme KI-generiert ist?
        </h2>
        <p style={{
          fontFamily: "Geist, sans-serif", fontSize: 19, lineHeight: 1.55,
          maxWidth: 660, margin: "0 auto 40px", color: "#a8a8a3",
        }}>
          Fragen Sie Julia etwas. Direkt nach der Cyliane-Hörprobe, ohne
          Demo-Script und ohne Verkaufsdruck. Julia antwortet live im Browser.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", alignItems: "center" }}>
          <a href="/julia-demo.html" aria-label="Julia Live-Demo öffnen" style={{
            padding: "17px 28px", background: "#141414", color: "#f5f5f1",
            textDecoration: "none", borderRadius: 8, border: "1px solid #2a2a2a",
            fontFamily: "Geist, sans-serif", fontWeight: 600, fontSize: 16,
            display: "inline-block",
          }}>
            Fragen Sie Julia etwas
          </a>
          <span aria-label="Demo Nummer +41 61 222 00 00" style={{
            padding: "16px 24px", background: "transparent", color: "#8a8a85",
            borderRadius: 8, border: "1px solid #1f1f1f",
            fontFamily: "Geist Mono, monospace", fontWeight: 600, fontSize: 17,
            letterSpacing: "0.04em", display: "inline-block", cursor: "default",
          }}>
            +41 61 222 00 00
          </span>
        </div>
      </div>
    </section>
  );
}

// —————————————————————————————————————————————
// Footer
// —————————————————————————————————————————————
function Footer({ name }) {
  const cols = [
    { h: "Produkt", links: ["Voice Agent", "Telefonnummern", "Dialekte", "Voice Cloning", "Changelog"] },
    { h: "Entwickler", links: ["Dokumentation", "API-Referenz", "SDKs", "Webhooks", "Status"] },
    { h: "Unternehmen", links: ["Über uns", "Kunden", "Karriere", "Presse", "Kontakt"] },
    { h: "Rechtliches", links: ["Impressum", "Datenschutz", "AGB", "Sicherheit", "Sub-Verarbeiter"] },
  ];
  return (
    <footer style={{
      background: "#0a0a0a", color: "#666660", padding: "80px 32px 32px",
      borderTop: "1px solid #1a1a1a",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr 1fr", gap: 40,
          marginBottom: 60,
        }}>
          <div>
            <div style={{
              display: "flex", alignItems: "center", gap: 10, marginBottom: 16,
            }}>
              <span style={{
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                width: 22, height: 22, background: "#DA291C", borderRadius: 4,
              }}>
                <svg width="22" height="22" viewBox="0 0 32 32" style={{ display: "block" }} aria-hidden="true">
                  <rect x="13" y="6" width="6" height="20" fill="#ffffff" />
                  <rect x="6" y="13" width="20" height="6" fill="#ffffff" />
                </svg>
              </span>
              <span style={{
                fontFamily: "Geist, sans-serif", fontWeight: 800, fontSize: 18,
                color: "#f5f5f1", letterSpacing: "-0.02em",
              }}>{name}</span>
            </div>
            <p style={{
              fontFamily: "Geist, sans-serif", fontSize: 14, lineHeight: 1.6,
              color: "#666660", maxWidth: 320, margin: 0,
            }}>Voice AI für die Schweiz. Sechs Dialekte. Sub-500ms. Gemacht in Basel.</p>
            <div style={{
              marginTop: 24, fontFamily: "Geist Mono, monospace", fontSize: 11,
              color: "#444", letterSpacing: "0.08em",
            }}>
              <div>{name.toUpperCase()} AG · BASEL</div>
              <div>HALLO@{name.toUpperCase()}.CH</div>
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div style={{
                fontFamily: "Geist Mono, monospace", fontSize: 10.5,
                color: "#8a8a85", letterSpacing: "0.12em", textTransform: "uppercase",
                marginBottom: 16,
              }}>{c.h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {c.links.map(l => (
                  <a key={l} href="#" style={{
                    fontFamily: "Geist, sans-serif", fontSize: 14, color: "#a8a8a3",
                    textDecoration: "none",
                  }}>{l}</a>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop: 32, borderTop: "1px solid #1a1a1a",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 14,
          fontFamily: "Geist Mono, monospace", fontSize: 11,
          color: "#444", letterSpacing: "0.08em",
        }}>
          <div>© 2026 {name.toUpperCase()} AG. Alle Rechte vorbehalten. Hergestellt in Basel.</div>
          <div style={{ display: "flex", gap: 18 }}>
            <span>● System operativ</span>
            <span>v3.2.0</span>
            <span>DE · FR · IT · EN</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.DialectSection = DialectSection;
window.DXSection = DXSection;
window.IntegrationsSection = IntegrationsSection;
window.PricingSection = PricingSection;
window.ComparisonSection = ComparisonSection;
window.TrustSection = TrustSection;
window.FinalCTA = FinalCTA;
window.Footer = Footer;