/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo } = React;
const t = window.t || function(de, en){ return de; };
const __lang = window.__lang || "de";

/* ============================================================
   CONFIG — Kontakt & Buchung (zentral pflegbar)
============================================================ */
const CONTACT = {
  email: "maksym@liakhov-group.com",
  partnerEmail: "maksym@liakhov-group.com",
  phone: "+41 78 349 32 52",
  phoneTel: "+41783493252",
};

/* ---------- Tiny Toast ---------- */
function useToast() {
  const [toast, setToast] = useState(null);
  useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(null), 2400);
    return () => clearTimeout(t);
  }, [toast]);
  const node = toast ? <div className="toast">{toast}</div> : null;
  return [node, setToast];
}

/* ---------- Service detail data ---------- */
const SERVICE_DETAILS = {
  "01": {
    bullets: [
      t("Prozess-Audit: 2–5 Tage Beobachtung in Ihren bestehenden Tools", "Process audit: 2–5 days observing your existing tools"),
      t("Workflow-Engines: n8n, Zapier oder eigene Pipelines — versionierbar", "Workflow engines: n8n, Zapier or custom pipelines — versionable"),
      t("Integration in Ihre Buchhaltung, CRM, Kasse, Logistik", "Integration with your accounting, CRM, POS, logistics"),
      t("Schulung Ihres Teams + dokumentierte Übergabe", "Training for your team + documented handover"),
    ],
    suggestedPrompt: t("Ich möchte interne Abläufe automatisieren. Bitte Vorschlag mit Festpreis.", "I would like to automate internal processes. Please propose with fixed price."),
  },
  "02": {
    bullets: [
      t("Anforderungs-Workshop und Daten-Inventur", "Requirements workshop and data inventory"),
      t("Auswahl: Claude / GPT / Open-Source — modell-agnostisch", "Choice: Claude / GPT / Open-Source — model-agnostic"),
      t("RAG, Agents oder klassische Pipelines — passend zum Use-Case", "RAG, agents or classic pipelines — matched to the use case"),
      t("Hosting in Ihrer Infrastruktur möglich — keine Daten-Abflüsse", "Hosting in your infrastructure possible — no data leakage"),
    ],
    suggestedPrompt: t("Ich möchte KI in meinem Betrieb einsetzen. Bitte Vorschlag mit Festpreis.", "I would like to use AI in my business. Please propose with fixed price."),
  },
  "03": {
    bullets: [
      t("Vollständiges Kostenstellen-Audit inkl. Lieferanten-Reverse", "Full cost-center audit including supplier reverse-engineering"),
      t("Konkrete, umgesetzte Einsparungen — kein PDF-Bericht", "Concrete, implemented savings — not a PDF report"),
      t("KPI-Dashboard mit monatlichem Tracking", "KPI dashboard with monthly tracking"),
      t("Garantie: messbare Ersparnis oder kein Honorar für die Analyse", "Guarantee: measurable savings or no fee for the analysis"),
    ],
    suggestedPrompt: t("Ich möchte meine Betriebskosten senken. Bitte Analyse-Vorschlag mit Festpreis.", "I would like to reduce operating costs. Please propose an analysis with fixed price."),
  },
  "04": {
    bullets: [
      t("Idee-Validation, Marktanalyse, Wettbewerbs-Mapping", "Idea validation, market analysis, competitive mapping"),
      t("Pitch-Deck (10–15 Folien) und Bewertungsmodell", "Pitch deck (10–15 slides) and valuation model"),
      t("Investor-Outreach an unser bestehendes Netzwerk", "Investor outreach via our existing network"),
      t("Term-Sheet-Verhandlung — wir sitzen mit Ihnen am Tisch", "Term-sheet negotiation — we sit at the table with you"),
    ],
    suggestedPrompt: t("Ich suche Investoren für mein Vorhaben. Bitte Vorschlag mit Festpreis.", "I am looking for investors for my venture. Please propose with fixed price."),
  },
};

/* ============================================================
   LIAKHOV GROUP — Main App
============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 75,
  "three3dIntensity": 1,
  "lightTheme": true
}/*EDITMODE-END*/;

/* ---------- Services Data ---------- */
const SERVICES = [
  {
    num: "01",
    title: t("Automatisierung der Arbeitsabläufe", "Workflow Automation"),
    body: t("Wiederkehrende Aufgaben ersetzen wir durch zuverlässige, dokumentierte Automatisierungen — von Kundenbetreuung über Logistik bis zur Buchhaltung.", "We replace recurring tasks with reliable, documented automations — from customer service through logistics to accounting."),
    foot: t("Prozess-Audit · Workflow-Engines · Integrationen", "Process audit · Workflow engines · Integrations"),
  },
  {
    num: "02",
    title: t("Implementierung der KI", "AI Implementation"),
    body: t("Maßgeschneiderte KI-Systeme, trainiert auf Ihre Daten — Assistenten, Dokumentenverarbeitung und Prognosemodelle, sauber in Ihre IT integriert.", "Tailored AI systems trained on your data — assistants, document processing and predictive models, cleanly integrated into your IT."),
    foot: t("LLM-Pipelines · RAG · Custom Agents", "LLM pipelines · RAG · Custom agents"),
  },
  {
    num: "03",
    title: t("Analyse & Ausgabenoptimierung", "Analysis & Cost Optimization"),
    body: t("Tiefe Kostenanalyse mit konkreten Sparpotenzialen — keine PDF-Ratschläge, sondern umgesetzte, messbare und garantierte Einsparungen.", "In-depth cost analysis with concrete savings potential — no PDF advice, but implemented, measurable and guaranteed reductions."),
    foot: t("Kostenstellen-Audit · Lieferanten-Reverse · KPI-Tracking", "Cost-center audit · Supplier review · KPI tracking"),
  },
  {
    num: "04",
    title: t("Vermittlung & Begleitung", "Investor Matching & Guidance"),
    body: t("Von der ersten Idee bis zur Investorenfindung — Pitch-Deck, Bewertung, Term-Sheet. Wir sitzen auf Ihrer Seite des Tisches.", "From first idea to investor matching — pitch deck, valuation, term sheet. We sit on your side of the table."),
    foot: t("Idea Validation · Pitch · Investor Outreach", "Idea validation · Pitch · Investor outreach"),
  },
];

const FIXED_PRICES = [
  {
    tag: "Marketing", slug: "online-marketing", title: t("Online-Marketing", "Online Marketing"),
    body: t("SEO, Performance-Ads, Content-Strategie und monatliches Reporting. Skalierbar nach Budget.", "SEO, performance ads, content strategy and monthly reporting. Scales with your budget."),
    from: t("ab", "from"), chf: 298, amt: "CHF 298.-",
    examples: [
      { name: t("Basis-Paket", "Basic Package"), chf: 298, includes: [t("SEO-Grundoptimierung", "Basic SEO optimisation"), t("Performance-Ads-Setup", "Performance ads setup"), t("Content-Strategie", "Content strategy"), t("Monatliches Reporting", "Monthly reporting")] },
      { name: t("Erweitert", "Extended"), chf: 328, includes: [t("SEO-Grundoptimierung", "Basic SEO optimisation"), t("Performance-Ads-Setup", "Performance ads setup"), t("Content-Strategie", "Content strategy"), t("Monatliches Reporting", "Monthly reporting")], extras: [t("Google My Business Setup & Optimierung", "Google My Business setup & optimisation"), t("Social-Media-Profil-Optimierung (3 Plattformen)", "Social media profile optimisation (3 platforms)"), t("Newsletter-Setup mit Erst-Template", "Newsletter setup with first template")] },
    ],
  },
  {
    tag: "Education", slug: "schulungen", title: t("Schulungen", "Training"),
    body: t("Workshops zu Automatisierung im Alltag — vom KI-Assistenten bis zur No-Code-Toolchain. Ausschliesslich vor Ort beim Kunden oder online.", "Workshops on day-to-day automation — from AI assistants to no-code toolchains. On-site at the client or online only."),
    from: t("ab", "from"), chf: 335, amt: "CHF 335.-",
    examples: [
      { name: t("Basis-Workshop", "Basic Workshop"), chf: 335, includes: [t("Workshop vor Ort oder online", "Workshop on-site or online"), t("KI-Toolchain-Demo", "AI toolchain demo"), t("Praxisbeispiele aus Ihrem Alltag", "Hands-on examples from your everyday work"), t("Foliensatz nach dem Workshop", "Slide deck after the workshop")] },
      { name: t("Erweitert", "Extended"), chf: 369, includes: [t("Workshop vor Ort oder online", "Workshop on-site or online"), t("KI-Toolchain-Demo", "AI toolchain demo"), t("Praxisbeispiele aus Ihrem Alltag", "Hands-on examples from your everyday work"), t("Foliensatz nach dem Workshop", "Slide deck after the workshop")], extras: [t("Schriftliche Zusammenfassung als PDF", "Written summary as PDF"), t("30-Tage-E-Mail-Nachsupport", "30-day email follow-up support"), t("Workshop-Aufzeichnung mit Kapiteln", "Workshop recording with chapters")] },
    ],
  },
  {
    tag: "Web", slug: "webseiten", title: t("Webseiten", "Websites"),
    body: t("Statische Seiten, Shops, Dashboards. Performance-orientiert, barrierearm, in Ihrem CMS Ihrer Wahl.", "Static sites, shops, dashboards. Performance-oriented, accessible, in the CMS of your choice."),
    from: t("ab", "from"), chf: 250, amt: "CHF 250.-",
    examples: [
      { name: t("Basis-Site", "Basic Site"), chf: 250, includes: [t("Statische Seite / Shop / Dashboard", "Static site / shop / dashboard"), t("CMS Ihrer Wahl", "CMS of your choice"), t("Performance-orientiert", "Performance-oriented"), t("Barrierearm", "Accessible")] },
      { name: t("Erweitert", "Extended"), chf: 275, includes: [t("Statische Seite / Shop / Dashboard", "Static site / shop / dashboard"), t("CMS Ihrer Wahl", "CMS of your choice"), t("Performance-orientiert", "Performance-oriented"), t("Barrierearm", "Accessible")], extras: [t("SEO-Grundoptimierung (Sitemap, Meta, robots.txt)", "Basic SEO optimisation (sitemap, meta, robots.txt)"), t("Cookie-Banner DSGVO-konform", "GDPR-compliant cookie banner"), t("30 Tage technischer Support nach Launch", "30 days of technical support after launch")] },
    ],
  },
  {
    tag: "Mobile", slug: "mobile-apps", title: t("Mobile Applikationen", "Mobile Applications"),
    body: t("iOS & Android — nativ oder Cross-Platform. Inkl. Store-Submission und 3 Monate Wartung.", "iOS & Android — native or cross-platform. Including store submission and 3 months of maintenance."),
    from: t("ab", "from"), chf: 450, amt: "CHF 450.-",
    examples: [
      { name: t("Basis-App", "Basic App"), chf: 450, includes: [t("iOS & Android", "iOS & Android"), t("Nativ oder Cross-Platform", "Native or cross-platform"), t("Store-Submission", "Store submission"), t("3 Monate Wartung", "3 months of maintenance")] },
      { name: t("Erweitert", "Extended"), chf: 495, includes: [t("iOS & Android", "iOS & Android"), t("Nativ oder Cross-Platform", "Native or cross-platform"), t("Store-Submission", "Store submission"), t("3 Monate Wartung", "3 months of maintenance")], extras: [t("App-Icon und Store-Screenshots", "App icon and store screenshots"), t("Datenschutzerklärungs-Vorlage", "Privacy policy template"), t("Beta-Test-Setup für 100 User", "Beta test setup for 100 users")] },
    ],
  },
];

/* ---------- Brand Mark (V3 Geometrisch) ---------- */
function BrandMark({ size = 32, stroke = "var(--gold)", strokeWidth = 6, showDots = true }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="butt" aria-hidden="true">
      <line x1="46" y1="14" x2="46" y2="86" />
      <line x1="46" y1="86" x2="86" y2="86" />
      <line x1="46" y1="14" x2="14" y2="86" />
      {showDots && (
        <g fill={stroke} stroke="none">
          <circle cx="46" cy="14" r="3" />
          <circle cx="46" cy="86" r="3" />
          <circle cx="14" cy="86" r="3" />
          <circle cx="86" cy="86" r="3" />
        </g>
      )}
    </svg>
  );
}

/* ---------- Nav ---------- */
function Nav({ lightTheme, onToggleTheme }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const navLinks = [
    { href: "#services", label: t("Wir für Sie", "Services") },
    { href: "#pricer", label: t("Angebot", "Quote") },
    { href: "#about", label: t("Über uns", "About") },
    { href: "#contact", label: t("Kontakt", "Contact") },
  ];
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <a href="#top" className="brand">
          <div className="brand-mark"><BrandMark size={22} strokeWidth={8} showDots={false} /></div>
          Liakhov<span style={{ color: "var(--gold)", fontStyle: "italic" }}>·</span>Group
        </a>
        <div className="nav-links">
          {navLinks.map((l) => (
            <a key={l.href} href={l.href}>{l.label}</a>
          ))}
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <button
            onClick={() => window.setLang && window.setLang(__lang === "en" ? "de" : "en")}
            aria-label={t("Sprache wechseln", "Switch language")}
            title={t("Sprache wechseln", "Switch language")}
            style={{
              height: 40,
              padding: "0 12px",
              borderRadius: 999,
              border: "1px solid var(--line-strong)",
              background: "transparent",
              color: "var(--ink)",
              fontSize: 12,
              fontFamily: "var(--mono)",
              letterSpacing: "0.08em",
              display: "grid",
              placeItems: "center",
              cursor: "pointer",
              transition: "border-color .15s, color .15s",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--gold)"; e.currentTarget.style.color = "var(--gold)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line-strong)"; e.currentTarget.style.color = "var(--ink)"; }}
          >
            {__lang === "en" ? "DE" : "EN"}
          </button>
          <button
            onClick={onToggleTheme}
            aria-label={t("Theme wechseln", "Switch theme")}
            title={lightTheme ? t("Dunkler Modus", "Dark mode") : t("Heller Modus", "Light mode")}
            style={{
              width: 40, height: 40, borderRadius: 999,
              border: "1px solid var(--line-strong)",
              background: "transparent",
              color: "var(--ink)",
              fontSize: 16,
              display: "grid", placeItems: "center",
              transition: "border-color .15s, color .15s",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--gold)"; e.currentTarget.style.color = "var(--gold)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line-strong)"; e.currentTarget.style.color = "var(--ink)"; }}
          >
            {lightTheme ? "☾" : "☀"}
          </button>
          <a href="#pricer" className="btn btn-primary btn-arrow nav-cta">{t("Angebot anfragen", "Get a quote")}</a>
          <button
            type="button"
            className="nav-burger"
            aria-label={menuOpen ? t("Menü schließen", "Close menu") : t("Menü öffnen", "Open menu")}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((o) => !o)}
          >
            <span className={`nav-burger-box ${menuOpen ? "is-open" : ""}`}>
              <span></span><span></span><span></span>
            </span>
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="nav-mobile-menu">
          {navLinks.map((l) => (
            <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)}>{l.label}</a>
          ))}
          <a href="#pricer" className="btn btn-primary btn-arrow" onClick={() => setMenuOpen(false)}>Angebot anfragen</a>
        </div>
      )}
    </nav>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  useEffect(() => {
    if (window.__initHeroScene) window.__initHeroScene();
  }, []);
  return (
    <header className="hero" id="top">
      <div className="bg-glow" style={{ top: "-200px", right: "-200px" }} />
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow">{t("Schweizer KMU-Beratung · Zürich", "Swiss SME Consulting · Zurich")}</div>
          <div className="hero-status-badge">
            <span className="hero-status-dot" />
            {t("Aktuell verfügbar · max. 15 Aufträge/Monat", "Currently available · max. 15 projects/month")}
          </div>
          <h1 className="h-display">
            {t("KI-Optimierungen", "AI optimisations")}<br />
            <em>{t("für Ihren Betrieb.", "for your business.")}</em>
          </h1>
          <p className="lede" style={{ marginTop: 28 }}>
            {t("Wir automatisieren die täglichen Abläufe in Ihrem Unternehmen mit KI — Sie sparen Zeit, Kosten und Nerven. Sichtbare Resultate in 4–12 Wochen.", "We automate your company's daily operations with AI — you save time, money and stress. Visible results in 4–12 weeks.")}
          </p>
          <div className="hero-cta">
            <a href="#pricer" className="btn btn-primary btn-arrow">{t("Bedarf in 2 Min. ermitteln", "Find your need in 2 min")}</a>
            <a href="#services" className="btn btn-ghost">{t("Services ansehen", "See services")}</a>
          </div>
          <div className="hero-meta">
            <div className="stat">
              <div className="stat-num" style={{ fontSize: 28, lineHeight: 1.1 }}>{t("Erprobt", "Proven")}</div>
              <div className="stat-lbl" style={{ maxWidth: 210 }}>{t("KI- & Automatisierungsprojekte für Schweizer KMU", "Automation & AI projects for Swiss SMEs")}</div>
            </div>
            <div className="stat">
              <div className="stat-num" style={{ fontSize: 28, lineHeight: 1.1 }}>{t("Garantie", "Guaranteed")}</div>
              <div className="stat-lbl" style={{ maxWidth: 210 }}>{t("Messbare Ersparnis oder kein Honorar", "Measurable savings or no fee")}</div>
            </div>
            <div className="stat">
              <div className="stat-num">14d</div>
              <div className="stat-lbl">{t("Mediane Time-to-Live", "Median time-to-live")}</div>
            </div>
          </div>
        </div>
        <div className="hero-3d" id="hero-3d" />
      </div>
      <div className="hero-ticker">
        <div className="ticker-track">
          <span>{t("Workflow-Automatisierung", "Workflow Automation")}</span>
          <span>{t("KI-Implementierung", "AI Implementation")}</span>
          <span>{t("Kostenoptimierung", "Cost Optimization")}</span>
          <span>{t("Investorenfindung", "Investor Matching")}</span>
          <span>{t("Online-Marketing", "Online Marketing")}</span>
          <span>{t("Mobile Apps", "Mobile Apps")}</span>
          <span>{t("Workflow-Automatisierung", "Workflow Automation")}</span>
          <span>{t("KI-Implementierung", "AI Implementation")}</span>
          <span>{t("Kostenoptimierung", "Cost Optimization")}</span>
          <span>{t("Investorenfindung", "Investor Matching")}</span>
          <span>{t("Online-Marketing", "Online Marketing")}</span>
          <span>{t("Mobile Apps", "Mobile Apps")}</span>
        </div>
      </div>
    </header>
  );
}

/* ---------- Service Infographics ---------- */
function ServiceInfographic({ num }) {
  if (num === "01") return <Infographic01 />;
  if (num === "02") return <Infographic02 />;
  if (num === "03") return <Infographic03 />;
  if (num === "04") return <Infographic04 />;
  return null;
}

// 01 — Automatisierung: 4 manual tasks → automation pipeline
function Infographic01() {
  const G = "var(--gold)", L = "var(--line-strong)", I = "var(--ink-dim)", M = "var(--ink-mute)";
  const tasks = [t("Kunden","Customers"), t("Verkauf","Sales"), t("Logistik","Logistics"), t("Buchhaltung","Accounting")];
  return (
    <div className="svc-info">
      <svg viewBox="0 0 320 130" xmlns="http://www.w3.org/2000/svg" style={{ width: "100%", height: "auto", display: "block" }}>
        {/* left: stack of manual tasks */}
        {tasks.map((t, i) => (
          <g key={t} transform={`translate(8 ${10 + i * 26})`}>
            <rect width="92" height="20" rx="4" fill="none" stroke={L} strokeDasharray="2 3" />
            <circle cx="10" cy="10" r="3" fill="none" stroke={M} />
            <text x="22" y="14" fill={I} fontSize="10" fontFamily="JetBrains Mono">{t}</text>
          </g>
        ))}
        {/* arrows feeding into engine */}
        {tasks.map((_, i) => (
          <path key={i} d={`M 100 ${20 + i * 26} L 142 65`} stroke={L} strokeWidth="1" fill="none" />
        ))}
        {/* central engine */}
        <g transform="translate(160 65)">
          <circle r="28" fill="none" stroke={G} strokeWidth="1.5" />
          <circle r="28" fill="none" stroke={G} strokeWidth="0.5" strokeDasharray="2 4">
            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite" />
          </circle>
          <path d="M -8 -3 h 16 M -8 3 h 12 M -8 9 h 8" stroke={G} strokeWidth="1.4" strokeLinecap="round" />
          <text y="-12" textAnchor="middle" fill={G} fontSize="8" fontFamily="JetBrains Mono" letterSpacing="1">FLOW</text>
        </g>
        {/* right: dashboard */}
        <g transform="translate(208 22)">
          <rect width="100" height="86" rx="6" fill="none" stroke={L} />
          <text x="50" y="14" textAnchor="middle" fill={M} fontSize="8" fontFamily="JetBrains Mono" letterSpacing="1.5">UPTIME · 24 / 7</text>
          <line x1="8" y1="22" x2="92" y2="22" stroke={L} />
          {/* mini bars */}
          {[24, 38, 22, 46, 30, 50, 34].map((h, i) => (
            <rect key={i} x={10 + i * 12} y={78 - h} width="7" height={h} fill={i === 6 ? G : I} opacity={i === 6 ? 1 : 0.55} />
          ))}
        </g>
        {/* path engine -> dashboard */}
        <path d="M 188 65 L 208 65" stroke={G} strokeWidth="1.2" markerEnd="url(#a01)" />
        <defs>
          <marker id="a01" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 0 L 10 5 L 0 10 z" fill={G} />
          </marker>
        </defs>
      </svg>
      <div className="svc-info-cap">{t("Manuelle Schritte → eine dokumentierte Automatisierung", "Manual steps → one documented automation")}</div>
    </div>
  );
}

// 02 — KI: data → LLM → outputs (assistant, RAG, prediction)
function Infographic02() {
  const G = "var(--gold)", L = "var(--line-strong)", I = "var(--ink-dim)", M = "var(--ink-mute)";
  return (
    <div className="svc-info">
      <svg viewBox="0 0 320 150" xmlns="http://www.w3.org/2000/svg" style={{ width: "100%", height: "auto", display: "block" }}>
        {/* sources */}
        {["DOCS", "API", "DB"].map((src, i) => (
          <g key={src} transform={`translate(10 ${18 + i * 32})`}>
            <rect width="58" height="22" rx="3" fill="none" stroke={L} />
            <text x="29" y="15" textAnchor="middle" fill={I} fontSize="9" fontFamily="JetBrains Mono" letterSpacing="1">{src}</text>
          </g>
        ))}
        {/* lines into LLM */}
        {[0, 1, 2].map((i) => (
          <path key={i} d={`M 68 ${29 + i * 32} L 130 65`} stroke={L} strokeWidth="1" fill="none" />
        ))}
        {/* LLM core (hex) */}
        <g transform="translate(160 65)">
          {[0, 60, 120, 180, 240, 300].map((a) => {
            const r = 26;
            const x1 = Math.cos((a * Math.PI) / 180) * r, y1 = Math.sin((a * Math.PI) / 180) * r;
            const x2 = Math.cos(((a + 60) * Math.PI) / 180) * r, y2 = Math.sin(((a + 60) * Math.PI) / 180) * r;
            return <line key={a} x1={x1} y1={y1} x2={x2} y2={y2} stroke={G} strokeWidth="1.4" />;
          })}
          {/* neural dots */}
          {Array.from({ length: 8 }).map((_, i) => {
            const a = (i / 8) * Math.PI * 2;
            return <circle key={i} cx={Math.cos(a) * 12} cy={Math.sin(a) * 12} r="1.6" fill={G}>
              <animate attributeName="opacity" values="0.4;1;0.4" dur="2s" begin={`${i * 0.18}s`} repeatCount="indefinite" />
            </circle>;
          })}
          <text y="40" textAnchor="middle" fill={G} fontSize="8" fontFamily="JetBrains Mono" letterSpacing="1.5">LLM</text>
        </g>
        {/* outputs */}
        {[
          { y: 22, label: t("Assistent", "Assistant"), glyph: "⌬" },
          { y: 60, label: "RAG", glyph: "≡" },
          { y: 98, label: t("Prognose", "Prediction"), glyph: "↗" },
        ].map((o, i) => (
          <g key={o.label} transform={`translate(208 ${o.y})`}>
            <rect width="98" height="22" rx="3" fill="none" stroke={i === 1 ? G : L} />
            <text x="14" y="15" fill={I} fontSize="11" fontFamily="JetBrains Mono">{o.glyph}</text>
            <text x="32" y="15" fill={I} fontSize="10" fontFamily="Instrument Serif">{o.label}</text>
            <path d={`M 188 65 L 208 ${o.y + 11}`} stroke={L} strokeWidth="1" fill="none" />
          </g>
        ))}
        <text x="160" y="144" textAnchor="middle" fill={M} fontSize="8" fontFamily="JetBrains Mono" letterSpacing="1.5">{t("PIPELINE · INTEGRIERT IN IHRE IT", "PIPELINE · INTEGRATED INTO YOUR IT")}</text>
      </svg>
      <div className="svc-info-cap">{t("Ihre Daten → ein LLM-System → drei nutzbare Outputs", "Your data → one LLM system → three usable outputs")}</div>
    </div>
  );
}

// 03 — Kostenoptimierung: bar chart of savings
function Infographic03() {
  const G = "var(--gold)", L = "var(--line-strong)", I = "var(--ink-dim)", M = "var(--ink-mute)";
  const cats = [
    { l: t("Lieferanten","Suppliers"), before: 100, after: 78 },
    { l: t("Software","Software"),    before: 88,  after: 54 },
    { l: t("Logistik","Logistics"),    before: 72,  after: 56 },
    { l: t("Energie","Energy"),     before: 64,  after: 48 },
    { l: t("Personal","Staff"),    before: 92,  after: 84 },
  ];
  return (
    <div className="svc-info">
      <svg viewBox="0 0 320 130" xmlns="http://www.w3.org/2000/svg" style={{ width: "100%", height: "auto", display: "block" }}>
        {/* baseline */}
        <line x1="14" y1="100" x2="306" y2="100" stroke={L} />
        <text x="14" y="14" fill={M} fontSize="8" fontFamily="JetBrains Mono" letterSpacing="1.5">{t("VORHER · NACHHER (CHF / MONAT)", "BEFORE · AFTER (CHF / MONTH)")}</text>
        {cats.map((c, i) => {
          const x = 24 + i * 56;
          return (
            <g key={c.l}>
              <rect x={x} y={100 - c.before * 0.7} width="18" height={c.before * 0.7} fill="none" stroke={L} />
              <rect x={x + 22} y={100 - c.after * 0.7} width="18" height={c.after * 0.7} fill={G} />
              {/* delta bracket */}
              <line x1={x + 9} y1={100 - c.before * 0.7 - 4} x2={x + 31} y2={100 - c.after * 0.7 - 4} stroke={G} strokeWidth="1" strokeDasharray="2 2" />
              <text x={x + 20} y={100 - Math.max(c.before, c.after) * 0.7 - 9} textAnchor="middle" fill={G} fontSize="8" fontFamily="JetBrains Mono">−{Math.round(((c.before - c.after) / c.before) * 100)}%</text>
              <text x={x + 20} y={114} textAnchor="middle" fill={I} fontSize="8.5" fontFamily="JetBrains Mono">{c.l}</text>
            </g>
          );
        })}
        {/* total saved */}
        <g transform="translate(0 122)">
          <text x="160" y="6" textAnchor="middle" fill={M} fontSize="8" fontFamily="JetBrains Mono" letterSpacing="1.5">{t("Ø EINSPARUNG · 22 % · GARANTIERT MESSBAR", "Ø SAVINGS · 22 % · GUARANTEED MEASURABLE")}</text>
        </g>
      </svg>
      <div className="svc-info-cap">{t("Kostenstellen-Audit mit umgesetzter Reduktion", "Cost-center audit with implemented reduction")}</div>
    </div>
  );
}

// 04 — Vermittlung: 4-stage funnel idea → investor
function Infographic04() {
  const G = "var(--gold)", L = "var(--line-strong)", I = "var(--ink-dim)", M = "var(--ink-mute)";
  const stages = [
    { l: t("IDEE", "IDEA"),     w: 280, sub: t("Validation", "Validation") },
    { l: "PITCH",    w: 220, sub: t("Deck · Bewertung", "Deck · Valuation") },
    { l: "OUTREACH", w: 160, sub: t("Investor-Match", "Investor match") },
    { l: "DEAL",     w: 100, sub: t("Term-Sheet", "Term sheet") },
  ];
  return (
    <div className="svc-info">
      <svg viewBox="-70 0 470 130" xmlns="http://www.w3.org/2000/svg" style={{ width: "100%", height: "auto", display: "block" }}>
        {stages.map((s, i) => {
          const y = 8 + i * 24;
          const x = (320 - s.w) / 2;
          const isLast = i === stages.length - 1;
          return (
            <g key={s.l}>
              <rect x={x} y={y} width={s.w} height="18" rx="9" fill={isLast ? G : "none"} stroke={isLast ? G : L} strokeWidth="1" />
              <text x="160" y={y + 12} textAnchor="middle" fill={isLast ? "var(--on-gold)" : I} fontSize="9" fontFamily="JetBrains Mono" letterSpacing="2" fontWeight={isLast ? "600" : "400"}>{s.l}</text>
              <text x={x + s.w + 8} y={y + 12} fill={M} fontSize="8" fontFamily="JetBrains Mono">{s.sub}</text>
              {i < stages.length - 1 && (
                <path d={`M 160 ${y + 18} L 160 ${y + 24}`} stroke={L} strokeWidth="1" markerEnd="url(#a04)" />
              )}
            </g>
          );
        })}
        <defs>
          <marker id="a04" viewBox="0 0 10 10" refX="5" refY="9" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 0 L 5 9 L 10 0 z" fill={L} />
          </marker>
        </defs>
        {/* side annotation: "an einem Tisch" */}
        <g transform="translate(160 122)">
          <text textAnchor="middle" fill={M} fontSize="8" fontFamily="JetBrains Mono" letterSpacing="1.5">{t("SIE + LIAKHOV · AN EINEM TISCH", "YOU + LIAKHOV · AT ONE TABLE")}</text>
        </g>
      </svg>
      <div className="svc-info-cap">{t("Von der ersten Idee bis zum unterschriebenen Term-Sheet", "From the first idea to the signed term sheet")}</div>
    </div>
  );
}

/* ---------- Services Section ---------- */
function Services() {
  useEffect(() => {
    if (window.__initServiceMinis) window.__initServiceMinis();
  }, []);
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="eyebrow">{t("§ 02 — Wir für Sie", "§ 02 — Solutions")}</div>
        <h2 className="h-section">
          {t("Vier Disziplinen.", "Four disciplines.")}<br />
          <em>{t("Ein", "One")}</em>{t(" Ansprechpartner.", " contact.")}
        </h2>
        <p className="lede">
          {t("Jeder Service wird persönlich geplant und umgesetzt — kein Account-Manager, keine Übergaben. Sie reden mit der Person, die liefert.", "Every service is planned and delivered personally — no account managers, no handoffs. You speak with the person who delivers.")}
        </p>
        <div className="svc-grid">
          {SERVICES.map((s) => (
            <article className="svc-card" key={s.num} role="button" tabIndex={0}
              onClick={() => window.dispatchEvent(new CustomEvent("liakhov:open-service", { detail: { num: s.num } }))}
              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); window.dispatchEvent(new CustomEvent("liakhov:open-service", { detail: { num: s.num } })); } }}
              style={{ cursor: "pointer" }}>
              <div className="svc-3d" />
              <div className="svc-num">{s.num}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <ServiceInfographic num={s.num} />
              <div className="svc-foot">
                <span>{s.foot}</span>
                <span className="arrow">→</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- AI Pricing Chat ---------- */
const INITIAL_PRICING_MSGS = [
  {
    role: "bot",
    text: t(
      "Guten Tag. Ich bin der KI-Assistent von Liakhov Group. Beschreiben Sie mir Ihr Problem oder Vorhaben in eigenen Worten — ich entwickle daraus einen passenden Lösungsvorschlag inklusive Marktpreis und unserem Festpreis.",
      "Hello. I'm the AI assistant of Liakhov Group. Describe your problem or project in your own words — I'll draft a suitable solution proposal including market price and our fixed price."
    ),
  },
];

/* ---------- Conversion-Tracking ----------
   Schickt Funnel-Events an Plausible (sofort aktiv) und – sobald der LinkedIn
   Insight Tag scharf ist – an LinkedIn (lintrk). Funktioniert ohne Crash, auch
   wenn ein Tracker (noch) nicht geladen ist. */
const LINKEDIN_CONV = {
  // Hier später die echten LinkedIn-Conversion-IDs eintragen (Campaign Manager → Conversions):
  // quote_shown: 1234567,
  // booking_opened: 1234568,
};
function track(name, props) {
  try { if (typeof window !== "undefined" && window.plausible) window.plausible(name, props ? { props } : undefined); } catch (e) {}
  try { if (typeof window !== "undefined" && window.lintrk && LINKEDIN_CONV[name]) window.lintrk("track", { conversion_id: LINKEDIN_CONV[name] }); } catch (e) {}
}

/* ---------- Start-Chips: klickbare Themen gegen die "leere Eingabe"-Blockade ---------- */
const STARTER_CHIPS = [
  { label: () => t("E-Mails automatisieren", "Automate emails"),
    text: () => t("Ich möchte die Bearbeitung und Beantwortung meiner geschäftlichen E-Mails automatisieren.", "I want to automate the handling and answering of my business emails.") },
  { label: () => t("Buchhaltung mit KI", "AI bookkeeping"),
    text: () => t("Ich möchte meine Buchhaltung bzw. Rechnungserfassung mit KI automatisieren.", "I want to automate my bookkeeping / invoice capture with AI.") },
  { label: () => t("Angebote schreiben lassen", "Generate quotes"),
    text: () => t("Ich möchte Angebote und Offerten automatisch erstellen lassen.", "I want quotes and offers to be generated automatically.") },
  { label: () => t("Kundenanfragen beantworten", "Answer customer inquiries"),
    text: () => t("Ich möchte eingehende Kundenanfragen automatisch beantworten oder vorqualifizieren.", "I want to automatically answer or pre-qualify incoming customer inquiries.") },
];

function PricingChat() {
  const [messages, setMessages] = useState(INITIAL_PRICING_MSGS);
  const [input, setInput] = useState("");

  // Pre-fill from external trigger (Service-Karte → Anfragen)
  useEffect(() => {
    const onPrefill = (e) => {
      setInput(e.detail?.text || "");
      const ta = document.querySelector(".chat-input textarea");
      if (ta) ta.focus();
    };
    window.addEventListener("liakhov:prefill-chat", onPrefill);
    return () => window.removeEventListener("liakhov:prefill-chat", onPrefill);
  }, []);
  const [busy, setBusy] = useState(false);
  const [urgency, setUrgency] = useState("normal");
  const bodyRef = useRef(null);

  // ---- Voice-to-Text (Web Speech API) ----
  const [listening, setListening] = useState(false);
  const [voiceSupported, setVoiceSupported] = useState(true);
  const [interim, setInterim] = useState("");
  const recogRef = useRef(null);
  const baseRef = useRef("");

  useEffect(() => {
    const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SR) {
      setVoiceSupported(false);
      return;
    }
    const recog = new SR();
    recog.lang = (typeof __lang !== "undefined" && __lang === "en") ? "en-US" : "de-DE";
    recog.continuous = true;
    recog.interimResults = true;
    recog.maxAlternatives = 1;

    recog.onresult = (e) => {
      let finalText = "";
      let interimText = "";
      for (let i = e.resultIndex; i < e.results.length; i++) {
        const transcript = e.results[i][0].transcript;
        if (e.results[i].isFinal) finalText += transcript;
        else interimText += transcript;
      }
      if (finalText) {
        baseRef.current = (baseRef.current + " " + finalText).replace(/\s+/g, " ").trim();
        setInput(baseRef.current);
        setInterim("");
      } else {
        setInterim(interimText);
      }
    };
    recog.onerror = (e) => {
      console.warn("Speech recognition error:", e.error);
      setListening(false);
      setInterim("");
    };
    recog.onend = () => {
      setListening(false);
      setInterim("");
    };
    recogRef.current = recog;
    return () => {
      try { recog.stop(); } catch {}
    };
  }, []);

  function toggleVoice() {
    if (!recogRef.current) return;
    if (listening) {
      recogRef.current.stop();
      setListening(false);
    } else {
      baseRef.current = input.trim();
      try {
        recogRef.current.start();
        setListening(true);
      } catch (e) {
        console.warn(e);
      }
    }
  }

  useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [messages, busy]);

  // Dringlichkeits-Multiplikator wirkt direkt auf den Marktpreis.
  // ASAP = voller Marktpreis (kein Rabatt — Premium-Service).
  // Entspannt = stärkster Rabatt (20% unter Markt).
  const urgencyMult = { entspannt: 0.80, normal: 0.90, dringend: 0.95, asap: 1.00 };
  const urgencyLabel = { entspannt: "Entspannt", normal: "Normal", dringend: "Dringend", asap: "ASAP" };

  async function send(preset) {
    const text = (typeof preset === "string" ? preset : input).trim();
    if (!text || busy) return;
    setInput("");
    const isFirst = !messages.some((m) => m.role === "user");
    if (isFirst) track("chat_started");
    track("message_sent");
    const newMsgs = [...messages, { role: "user", text }];
    setMessages(newMsgs);
    setBusy(true);

    const sysPrompt = `Du bist der KI-Berater von Liakhov Group, einem schweizerischen Beratungs-Einzelunternehmen für Workflow-Automatisierung, KI-Implementierung, Kostenoptimierung und Investoren-Vermittlung.

PREISFORMEL (zwingend befolgen):
1. Identifiziere das Problem.
2. Schlage eine konkrete Lösung mit klarer Beschreibung des Endresultates vor (2-4 Sätze, was der Kunde am Ende erhält).
3. Schätze einen realistischen Marktpreis (Median Schweizer Markt, CHF).
4. Berechne den Endpreis: Marktpreis × ${urgencyMult[urgency]} (Dringlichkeit "${urgency}").
   - ASAP = 100% Marktpreis (Premium für sofortige Bearbeitung)
   - Dringend = 95% Marktpreis (5% Vorteil)
   - Normal = 90% Marktpreis (10% Vorteil)
   - Entspannt = 80% Marktpreis (20% Vorteil)
5. NIEMALS Lieferzeiten oder Tage nennen — die Liefer-Zeitschiene wird separat zwischen Auftraggeber und Auftragnehmer verhandelt.

ANTWORT-FORMAT (zwingend gültiges JSON, sonst nichts):
{
  "reply": "kurze freundliche Antwort an den Kunden auf Deutsch (2-3 Sätze, OHNE Erwähnung von Tagen/Lieferzeit)",
  "quote": {
    "problem": "Knappe Problembeschreibung (1 Satz)",
    "solution": "Konkrete Lösung in 1-2 Sätzen",
    "deliverable": "Klare Beschreibung des Endresultats — was genau erhält der Kunde am Ende? (2-4 Sätze, die später Vertragsbestandteil werden)",
    "scope": ["Konkreter Bullet 1", "Konkreter Bullet 2", "Konkreter Bullet 3"],
    "marketPrice": 5000,
    "urgency": "${urgency}",
    "urgencyMultiplier": ${urgencyMult[urgency]},
    "finalPrice": ${Math.round(5000 * urgencyMult[urgency])}
  }
}

Falls du noch zu wenig Information hast für ein seriöses Angebot, gib stattdessen aus:
{ "reply": "deine Rückfrage auf Deutsch", "quote": null }

Stelle maximal 2 Rückfragen, dann gib ein Angebot ab. Sprich NIE über Lieferzeiten, Tage, Wochen oder konkrete Termine.`;

    try {
      // ---------- API-Aufruf ----------
      // 1. Production: über eigenen Cloudflare-Pages-Function-Proxy (/api/claude).
      // 2. Studio (claude.ai-Vorschau): über window.claude.complete().
      // 3. Lokaler offline-Test: Fallback-JSON.
      let raw = "";
      const useProxy =
        typeof window !== "undefined" &&
        !(window.claude && window.claude.complete) &&
        !/^(localhost|127\.0\.0\.1)$/.test(window.location.hostname);

      if (useProxy) {
        // Echte Production: ruft den Backend-Proxy auf, der den API-Key versteckt.
        const resp = await fetch("/api/claude", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            urgency,
            lang: __lang,
            messages: newMsgs.map((m) => ({
              role: m.role === "user" ? "user" : "assistant",
              content: m.text,
            })),
          }),
        });
        if (!resp.ok) {
          let serverMsg = "Der KI-Dienst ist gerade nicht erreichbar.";
          try {
            const err = await resp.json();
            if (err && err.error) serverMsg = err.error;
          } catch {}
          throw new Error(serverMsg);
        }
        raw = JSON.stringify(await resp.json());
      } else if (window.claude && window.claude.complete) {
        // Studio-Modus (Claude-Artifact-Vorschau)
        const history = newMsgs
          .map((m) => `${m.role === "user" ? "Kunde" : "Berater"}: ${m.text}`)
          .join("\n");
        const prompt = `${sysPrompt}\n\nBisheriger Verlauf:\n${history}\n\nGib NUR JSON zurück.`;
        raw = await window.claude.complete(prompt);
      } else {
        // Lokaler Offline-Fallback (z. B. file://-Vorschau)
        raw = JSON.stringify({
          reply:
            "Vielen Dank. Auf Basis Ihrer Beschreibung sehe ich klares Automatisierungspotenzial. Hier ein erster Vorschlag (Demo-Daten):",
          quote: {
            problem: text.slice(0, 80),
            solution: "Maßgeschneiderte Workflow-Automatisierung mit KI-gestützter Verarbeitung.",
            deliverable: "Sie erhalten eine voll funktionsfähige Automatisierung Ihres Hauptprozesses, dokumentiert und einsatzbereit. Inklusive Übergabe-Schulung und 30 Tagen Nachbetreuung.",
            scope: ["Prozess-Mapping & Audit", "Implementierung in Ihrer Toolchain", "Schulung & Übergabe"],
            marketPrice: 6000,
            urgency,
            urgencyMultiplier: urgencyMult[urgency],
            finalPrice: Math.round(6000 * urgencyMult[urgency]),
          },
        });
      }

      // ---------- Robuste Antwort-Verarbeitung ----------
      // 1. JSON aus Antwort isolieren (Modell sendet manchmal Pre-/Suffix-Text)
      const jsonMatch = raw.match(/\{[\s\S]*\}/);
      let data;
      try {
        data = jsonMatch ? JSON.parse(jsonMatch[0]) : { reply: raw, quote: null };
      } catch (parseErr) {
        data = {
          reply:
            "Ich habe Ihre Nachricht erhalten, brauche aber noch eine Information, um ein seriöses Angebot zu erstellen: Wie viele Mitarbeiter sind betroffen und in welcher Branche sind Sie tätig?",
          quote: null,
        };
      }

      // 2. Plausibilitäts-Check für Quotes — schützt vor Prompt-Injection
      if (data.quote) {
        const q = data.quote;
        const valid =
          typeof q.finalPrice === "number" && q.finalPrice >= 100 && q.finalPrice <= 100000 &&
          typeof q.marketPrice === "number" && q.marketPrice >= 100 && q.marketPrice <= 200000 &&
          typeof q.problem === "string" && q.problem.length > 3 &&
          typeof q.solution === "string" && q.solution.length > 3;
        if (!valid) {
          data.quote = null;
          data.reply = (data.reply || "") +
            "\n\nDas erste Angebot wirkte unplausibel — ich rechne es noch einmal nach. Können Sie das Volumen oder den Umfang etwas näher beschreiben?";
        }
      }

      const next = [...newMsgs, { role: "bot", text: data.reply || "Konnten Sie das genauer beschreiben?" }];
      if (data.quote) { next.push({ role: "quote", quote: data.quote }); track("quote_shown"); }
      setMessages(next);
    } catch (e) {
      console.error(e);
      setMessages([
        ...newMsgs,
        {
          role: "bot",
          text:
            t("Es ist gerade ein technisches Problem aufgetreten. Bitte versuchen Sie es in einem Moment erneut — oder schreiben Sie direkt an ", "A technical issue occurred. Please try again in a moment — or write directly to ") +
            CONTACT.email + t(" und ich melde mich persönlich.", " and I will get back to you personally."),
        },
      ]);
    } finally {
      setBusy(false);
    }
  }

  function onKey(e) {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      send();
    }
  }

  return (
    <div className="chat">
      <div className="chat-head">
        <span className="dot" />
        {t("Live-Beratung · Claude · DE", "Live consultation · Claude · EN")}
      <button type="button" onClick={() => { setMessages(INITIAL_PRICING_MSGS); setInput(""); setUrgency("normal"); setListening(false); if (recogRef && recogRef.current) { try { recogRef.current.stop(); } catch(_) {} } }} aria-label={t("Chat neu starten", "Restart chat")} title={t("Neu starten", "Restart")} style={{ marginLeft: "auto", background: "transparent", border: "1px solid var(--line)", color: "var(--ink-mute)", fontSize: 11, padding: "4px 10px", borderRadius: 6, cursor: "pointer", letterSpacing: "0.06em", fontFamily: "var(--mono)" }}>↻ {t("NEU", "NEW")}</button>
        </div>
      <div className="chat-body" ref={bodyRef}>
        {messages.map((m, i) => {
          if (m.role === "quote") return <QuoteCard key={i} q={m.quote} onBook={(kind, q) => { track("booking_opened", { kind }); window.dispatchEvent(new CustomEvent("liakhov:open-booking", { detail: { kind, q } })); }} />;
          return (
            <div key={i} className={`msg msg-${m.role}`}>
              {m.text}
            </div>
          );
        })}
        {/* Start-Chips: erscheinen nur beim Erstkontakt (nur Begrüßung sichtbar) und nehmen dem Besucher die "leere Eingabe"-Hürde. */}
        {messages.length === 1 && !busy && (
          <div className="starter-chips">
            <div className="starter-chips-hint">{t("Schnellstart — oder einfach frei schreiben:", "Quick start — or just write freely:")}</div>
            <div className="starter-chips-row">
              {STARTER_CHIPS.map((c, i) => (
                <button key={i} type="button" className="starter-chip" onClick={() => send(c.text())}>
                  {c.label()}
                </button>
              ))}
            </div>
          </div>
        )}
        {busy && <div className="msg msg-bot" style={{ opacity: 0.6 }}>● ● ●</div>}
      </div>
      <div className="chat-input">
        <textarea
          value={input + (interim ? (input ? " " : "") + interim : "")}
          onChange={(e) => { setInput(e.target.value); baseRef.current = e.target.value; }}
          onKeyDown={onKey}
          placeholder={listening ? t("Höre zu… sprechen Sie jetzt", "Listening… speak now") : t("Beschreiben Sie Ihr Problem oder Vorhaben…", "Describe your problem or project…")}
          style={listening ? { borderColor: "var(--gold)" } : undefined}
        />
        {voiceSupported && (
          <button
            className={`chat-mic ${listening ? "on" : ""}`}
            onClick={toggleVoice}
            title={listening ? t("Aufnahme stoppen", "Stop recording") : t("Diktieren (Sprache → Text)", "Dictate (speech → text)")}
            aria-label={t("Sprachaufnahme", "Voice recording")}
            type="button"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <rect x="9" y="3" width="6" height="12" rx="3" />
              <path d="M5 11a7 7 0 0 0 14 0" />
              <line x1="12" y1="18" x2="12" y2="22" />
              <line x1="8" y1="22" x2="16" y2="22" />
            </svg>
            {listening && <span className="mic-pulse" />}
          </button>
        )}
        <button className="chat-send" onClick={send} disabled={busy || !input.trim()}>
          ↗
        </button>
      </div>
      <div style={{ padding: "0 14px 14px" }}>
        <div className="urgency">
          {Object.keys(urgencyMult).map((u) => (
            <button key={u} className={urgency === u ? "on" : ""} onClick={() => setUrgency(u)}>
              {({entspannt: t("entspannt","relaxed"), normal: t("normal","normal"), dringend: t("dringend","urgent"), asap: "asap"})[u] || u}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function QuoteCard({ q, onBook }) {
  const fmt = (n) => new Intl.NumberFormat("de-CH", { style: "currency", currency: "CHF", maximumFractionDigits: 0 }).format(n);
  const urgencyLabels = { entspannt: t("Entspannt", "Relaxed"), normal: t("Normal", "Normal"), dringend: t("Dringend", "Urgent"), asap: "ASAP" };
  const urgencyText = urgencyLabels[q.urgency] || t("Normal", "Normal");
  const savingsPct = Math.round((1 - (q.urgencyMultiplier || 1)) * 100);
  return (
    <div className="msg msg-quote">
      <h4>{t("Ihr Angebot", "Your quote")}</h4>
      <div style={{ marginBottom: 10, color: "var(--ink-dim)", fontFamily: "var(--sans)", fontSize: 13, lineHeight: 1.5 }}>
        <b style={{ color: "var(--ink)" }}>{t("Problem:", "Problem:")}</b> {q.problem}<br />
        <b style={{ color: "var(--ink)" }}>{t("Lösung:", "Solution:")}</b> {q.solution}
      </div>
      {q.deliverable && (
        <div style={{ margin: "10px 0", padding: "10px 12px", border: "1px solid var(--line-strong)", borderRadius: 8, background: "var(--bg-elev)", fontSize: 13, color: "var(--ink-dim)", lineHeight: 1.5 }}>
          <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--gold)", marginBottom: 4, textTransform: "uppercase" }}>{t("Endresultat", "End result")}</div>
          {q.deliverable}
        </div>
      )}
      {q.scope && (
        <ul style={{ margin: "8px 0 14px 18px", padding: 0, color: "var(--ink-dim)", fontFamily: "var(--sans)", fontSize: 13 }}>
          {q.scope.map((s, i) => <li key={i}>{s}</li>)}
        </ul>
      )}
      <div className="row"><span>{t("Marktpreis (Median)", "Market price (median)")}</span><span className="v">{fmt(q.marketPrice)}</span></div>
      <div className="row">
        <span style={{ color: "var(--gold)" }}>{t("Liakhov-Vorteil", "Liakhov advantage")}</span>
        <span className="v" style={{ color: "var(--gold)", fontWeight: 700 }}>{t("bis −20 %", "up to −20%")}</span>
      </div>
      <div className="row">
        <span>{t("Dringlichkeit:", "Urgency:")} {urgencyText} (×{q.urgencyMultiplier})</span>
        <span className="v" style={{ color: savingsPct > 0 ? "var(--ok)" : "var(--ink-mute)" }}>
          {savingsPct > 0 ? `−${savingsPct}%` : t("Markt", "Market")}
        </span>
      </div>
      <div className="total">
        <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase" }}>Gesamt</span>
        <span>{fmt(q.finalPrice)}</span>
      </div>
      <div style={{ marginTop: 6, fontSize: 11, color: "var(--ink-mute)", fontFamily: "var(--mono)", letterSpacing: "0.04em" }}>
        50% Vorauszahlung · 50% nach Abnahme
      </div>
      {q.priceRationale && (
        <div style={{ marginTop: 16, padding: "12px 14px", borderRadius: 8, background: "var(--bg-elev, #14110c)", border: "1px solid var(--line, #2a2620)" }}>
          <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--gold)", marginBottom: 6, textTransform: "uppercase" }}>{t("Warum dieser Preis", "Why this price")}</div>
          <div style={{ color: "var(--ink-dim)", fontSize: 13, lineHeight: 1.6, fontFamily: "var(--sans)" }}>{q.priceRationale}</div>
        </div>
      )}
      <div className="actions">
        <button className="btn btn-primary" style={{ flex: 1 }} onClick={() => onBook && onBook("book", q)}>{t("Buchen & Vertrag prüfen", "Book & review contract")}</button>
        <button className="btn btn-ghost" onClick={() => onBook && onBook("email", q)}>{t("Per E-Mail erhalten", "Receive by email")}</button>
      </div>
    </div>
  );
}

function PricerVisual() {
  return (
    <div className="pricer-visual">
      <svg viewBox="0 0 360 280" xmlns="http://www.w3.org/2000/svg" style={{ width: "100%", height: "auto", display: "block" }}>
        <defs>
          <linearGradient id="pvGold" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="var(--gold)" />
            <stop offset="100%" stopColor="var(--gold-soft)" />
          </linearGradient>
          <pattern id="pvHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="4" stroke="var(--line-strong)" strokeWidth="0.6" opacity="0.5" />
          </pattern>
        </defs>

        {/* ====== Top: price gauge ====== */}
        <g transform="translate(180 130)">
          {/* outer ring */}
          <path d="M -110 0 A 110 110 0 0 1 110 0" fill="none" stroke="var(--line-strong)" strokeWidth="1" />
          {/* tick marks */}
          {Array.from({ length: 21 }).map((_, i) => {
            const a = Math.PI + (i / 20) * Math.PI;
            const r1 = 110, r2 = i % 5 === 0 ? 96 : 102;
            const x1 = Math.cos(a) * r1, y1 = Math.sin(a) * r1;
            const x2 = Math.cos(a) * r2, y2 = Math.sin(a) * r2;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--line-strong)" strokeWidth={i % 5 === 0 ? 1.2 : 0.7} />;
          })}
          {/* zone labels */}
          <text x="-92" y="-92" fill="var(--ink-mute)" fontSize="9" fontFamily="JetBrains Mono" letterSpacing="1.5">{t("MARKT", "MARKET")}</text>
          <text x="92" y="-92" textAnchor="end" fill="var(--ink-mute)" fontSize="9" fontFamily="JetBrains Mono" letterSpacing="1.5">+30 %</text>
          <text x="0" y="-118" textAnchor="middle" fill="var(--ink-mute)" fontSize="9" fontFamily="JetBrains Mono" letterSpacing="1.5">−15 %</text>

          {/* "fair" sweep arc — left third highlighted gold */}
          <path d="M -110 0 A 110 110 0 0 1 -38 -103" fill="none" stroke="var(--gold)" strokeWidth="3" strokeLinecap="round" />
          <text x="-78" y="-66" textAnchor="middle" fill="var(--gold)" fontSize="9" fontFamily="JetBrains Mono" letterSpacing="2" fontWeight="600">{t("FAIR-ZONE", "FAIR ZONE")}</text>

          {/* needle — animated to fair zone */}
          <g style={{ transformOrigin: "0 0" }}>
            <g>
              <line x1="0" y1="0" x2="0" y2="-100" stroke="var(--gold)" strokeWidth="2" strokeLinecap="round" transform="rotate(-50)">
                <animateTransform attributeName="transform" type="rotate" values="-90;30;-30;-50" dur="4s" repeatCount="indefinite" />
              </line>
            </g>
          </g>
          {/* hub */}
          <circle r="9" fill="var(--bg-card)" stroke="var(--gold)" strokeWidth="1.5" />
          <circle r="3" fill="var(--gold)" />

          {/* center readout */}
          <text x="0" y="22" textAnchor="middle" fill="var(--ink-mute)" fontSize="8" fontFamily="JetBrains Mono" letterSpacing="2">{t("IHR PREIS", "YOUR PRICE")}</text>
          <text x="0" y="42" textAnchor="middle" fill="var(--ink)" fontSize="22" fontFamily="Instrument Serif" fontStyle="italic">{t("unter Markt", "below market")}</text>
        </g>

        {/* ====== Bottom: invoice strip filling in ====== */}
        <g transform="translate(20 180)">
          <rect width="320" height="86" rx="8" fill="var(--bg-card)" stroke="var(--line)" />
          {/* header row */}
          <text x="14" y="18" fill="var(--ink-mute)" fontSize="8" fontFamily="JetBrains Mono" letterSpacing="2">{t("TRANSPARENZ-LEDGER", "TRANSPARENCY LEDGER")}</text>
          <line x1="14" y1="24" x2="306" y2="24" stroke="var(--line)" />

          {/* line items — staggered fade in */}
          {[
            { l: t("Marktpreis", "Market price"), v: "100 %", off: 0 },
            { l: t("Liakhov-Vorteil", "Liakhov advantage"), v: "−20 %", off: 0.6 },
            { l: t("Ihr Pauschalpreis", "Your flat price"), v: "80 %", off: 1.2, gold: true },
          ].map((row, i) => {
            const y = 36 + i * 16;
            return (
              <g key={i}>
                <text x="14" y={y} fill={row.gold ? "var(--gold)" : "var(--ink-dim)"} fontSize="11" fontFamily="Instrument Serif">
                  {row.l}
                  <animate attributeName="opacity" from="0" to="1" dur="0.6s" begin={`${row.off}s`} fill="freeze" />
                </text>
                <text x="306" y={y} textAnchor="end" fill={row.gold ? "var(--gold)" : "var(--ink)"} fontSize="11" fontFamily="JetBrains Mono" fontWeight={row.gold ? 600 : 400}>
                  {row.v}
                  <animate attributeName="opacity" from="0" to="1" dur="0.6s" begin={`${row.off}s`} fill="freeze" />
                </text>
                {/* dotted leader */}
                <line x1={14 + row.l.length * 6 + 6} y1={y - 3} x2="266" y2={y - 3} stroke="var(--line)" strokeDasharray="1 3" opacity="0.5">
                  <animate attributeName="opacity" from="0" to="0.5" dur="0.6s" begin={`${row.off}s`} fill="freeze" />
                </line>
              </g>
            );
          })}
        </g>

        {/* ====== Tiny stamp top-right: 50/50 Vorauskasse ====== */}
        <g transform="translate(312 30)">
          <circle r="22" fill="none" stroke="var(--gold)" strokeWidth="1" />
          <circle r="22" fill="none" stroke="var(--gold)" strokeWidth="0.5" strokeDasharray="2 3">
            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="14s" repeatCount="indefinite" />
          </circle>
          <text y="-2" textAnchor="middle" fill="var(--gold)" fontSize="13" fontFamily="Instrument Serif" fontStyle="italic">50/50</text>
          <text y="9" textAnchor="middle" fill="var(--gold)" fontSize="6" fontFamily="JetBrains Mono" letterSpacing="1.2">{t("ZAHLUNG", "PAYMENT")}</text>
        </g>

        {/* ====== Tiny stamp top-left: keine Überraschung ====== */}
        <g transform="translate(48 30)">
          <rect x="-30" y="-14" width="60" height="28" rx="3" fill="none" stroke="var(--line-strong)" />
          <text y="-2" textAnchor="middle" fill="var(--ink-dim)" fontSize="6.5" fontFamily="JetBrains Mono" letterSpacing="1.5">{t("FIX", "FLAT")}</text>
          <text y="8" textAnchor="middle" fill="var(--ink-dim)" fontSize="6.5" fontFamily="JetBrains Mono" letterSpacing="1.5">{t("PAUSCHAL", "RATE")}</text>
        </g>
      </svg>
    </div>
  );
}

function Pricer() {
  return (
    <section className="section" id="pricer">
      <div className="wrap">
        <div className="eyebrow">{t("§ 01 — KI-Angebot in Sekunden", "§ 01 — AI quote in seconds")}</div>
        <h2 className="h-section">
          {t("In 2 Minuten", "In 2 minutes")}<br /><em>{t("zum Festpreis.", "to a fixed price.")}</em>
        </h2>
        <div style={{
          display: "inline-flex",
          alignItems: "center",
          gap: 12,
          marginBottom: 16,
          padding: "8px 16px",
          border: "1px solid var(--gold)",
          borderRadius: 999,
          background: "var(--bg-elev)",
          fontFamily: "var(--mono)",
          fontSize: 12,
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          color: "var(--gold)",
        }}>
          <span style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic", textTransform: "none", letterSpacing: 0 }}>−20%</span>
          <span>{t("unter Marktpreis · garantiert · jederzeit", "below market price · guaranteed · always")}</span>
        </div>
        <div className="pricer">
          <div className="pricer-side">
            <h3>{t("Ihr Preis. Ihr Tempo.", "Your price. Your pace.")}<br />{t("Ohne Theater.", "No drama.")}</h3>
            <PricerVisual />
            <p style={{ color: "var(--ink-dim)", fontSize: 14, lineHeight: 1.6, margin: 0 }}>
              {t("Sie beschreiben Ihr Anliegen, der KI-Berater entwirft eine konkrete Lösung mit Festpreis. Bei ", "You describe your project, the AI advisor drafts a concrete solution with a fixed price. With ")}<b style={{ color: "var(--gold)" }}>{t("20% unter Marktpreis", "20% below market price")}</b>{t(" als Standard — bei höchster Dringlichkeit (ASAP) zum Marktpreis. Nach Ihrer Zustimmung legen wir sofort los — keine Stundenpakete, keine versteckten Posten.", " as the standard — at top urgency (ASAP) at market price. After your approval we start right away — no hourly packages, no hidden items.")}
            </p>
            <div style={{
              marginTop: "auto",
              borderTop: "1px solid var(--line)",
              paddingTop: 18,
              fontFamily: "var(--serif)",
              fontSize: 15,
              color: "var(--ink-dim)",
              lineHeight: 1.55,
              fontStyle: "italic",
            }}>
              {t("Sie entscheiden, wie Sie bezahlen — Kreditkarte, Bargeld, PayPal, Banküberweisung oder Krypto.", "You choose how to pay — credit card, cash, PayPal, bank transfer or crypto.")}
            </div>
          </div>
          <PricingChat />
        </div>
      </div>
    </section>
  );
}

/* ---------- Fixed-Price Icons (3D) ---------- */
function FixedPriceIcon({ slug }) {
  const icons = {
    "online-marketing": (
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <defs><linearGradient id="fpi1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#e6c478" /><stop offset="1" stopColor="#8f6f34" /></linearGradient></defs>
        <ellipse cx="50" cy="84" rx="30" ry="6" fill="rgba(0,0,0,0.35)" />
        <rect x="22" y="56" width="14" height="22" rx="2" fill="#6f5528" />
        <rect x="43" y="44" width="14" height="34" rx="2" fill="url(#fpi1)" />
        <rect x="64" y="30" width="14" height="48" rx="2" fill="url(#fpi1)" />
        <path d="M22 50 L43 38 L64 26 L78 16" stroke="#e6c478" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M69 14 L80 14 L80 25" stroke="#e6c478" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
    "schulungen": (
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <defs><linearGradient id="fpi2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#e6c478" /><stop offset="1" stopColor="#8f6f34" /></linearGradient></defs>
        <ellipse cx="50" cy="86" rx="28" ry="6" fill="rgba(0,0,0,0.35)" />
        <path d="M34 48 L34 63 a16 9 0 0 0 32 0 L66 48 Z" fill="#6f5528" />
        <path d="M50 24 L84 39 L50 54 L16 39 Z" fill="url(#fpi2)" />
        <path d="M50 54 L84 39 L84 43 L50 58 Z" fill="#6f5528" />
        <path d="M50 54 L16 39 L16 43 L50 58 Z" fill="#8f6f34" />
        <path d="M84 41 L84 60" stroke="#e6c478" strokeWidth="2.5" strokeLinecap="round" />
        <circle cx="84" cy="63" r="4" fill="#e6c478" />
      </svg>
    ),
    "webseiten": (
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <defs><linearGradient id="fpi3" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#e6c478" /><stop offset="1" stopColor="#8f6f34" /></linearGradient></defs>
        <ellipse cx="50" cy="86" rx="30" ry="6" fill="rgba(0,0,0,0.35)" />
        <rect x="34" y="26" width="48" height="40" rx="4" fill="#6f5528" />
        <rect x="20" y="18" width="52" height="46" rx="5" fill="url(#fpi3)" />
        <path d="M20 30 h52" stroke="#1a1308" strokeWidth="2.4" opacity="0.5" />
        <circle cx="27" cy="24" r="2.4" fill="#1a1308" />
        <circle cx="34" cy="24" r="2.4" fill="#1a1308" />
        <circle cx="41" cy="24" r="2.4" fill="#1a1308" />
        <path d="M28 40 h20 M28 48 h30 M28 56 h14" stroke="#1a1308" strokeWidth="3.2" strokeLinecap="round" opacity="0.55" />
      </svg>
    ),
    "mobile-apps": (
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <defs><linearGradient id="fpi4" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#e6c478" /><stop offset="1" stopColor="#8f6f34" /></linearGradient></defs>
        <ellipse cx="50" cy="88" rx="24" ry="6" fill="rgba(0,0,0,0.35)" />
        <rect x="44" y="20" width="32" height="58" rx="8" fill="#6f5528" />
        <rect x="30" y="14" width="34" height="62" rx="8" fill="url(#fpi4)" />
        <rect x="36" y="23" width="22" height="34" rx="2" fill="#1a1308" opacity="0.5" />
        <circle cx="47" cy="67" r="3.4" fill="#1a1308" />
        <circle cx="42" cy="31" r="2.6" fill="#e6c478" />
        <circle cx="52" cy="31" r="2.6" fill="#e6c478" />
        <circle cx="42" cy="41" r="2.6" fill="#e6c478" />
        <circle cx="52" cy="41" r="2.6" fill="#e6c478" />
      </svg>
    ),
  };
  return <div className="fix-icon">{icons[slug] || null}</div>;
}

/* ---------- Fixed Prices ---------- */
function FixedPrices() {

  const [productModal, setProductModal] = useState(null);
  const [productAcceptAgb, setProductAcceptAgb] = useState(false);
  const [productEmail, setProductEmail] = useState("");
  const [productPay, setProductPay] = useState("card");
  const [productProcessing, setProductProcessing] = useState(false);
  const [productError, setProductError] = useState(null);
  const [serviceModal, setServiceModal] = useState(null);
  const [customDesc, setCustomDesc] = useState("");
  const [customUrg, setCustomUrg] = useState("normal");
  const [customQuote, setCustomQuote] = useState(null);
  const [customLoading, setCustomLoading] = useState(false);
  const [customError, setCustomError] = useState(null);
  const [customMsgs, setCustomMsgs] = useState([]);
  return (
    <section className="section" id="fixed">
      <div className="wrap">
        <div className="eyebrow">{t("§ 03 — Fixe Preise", "§ 03 — Fixed Prices")}</div>
        <h2 className="h-section">
          {t("Klare Pakete.", "Clear packages.")}<br /><em>{t("Keine", "No")}</em>{t(" Überraschungen.", " surprises.")}
        </h2>
        <p className="lede">
          {t("Für die häufigsten Projekte gelten Festpreise. Sie wissen vor dem Kick-off, was Sie bekommen und was Sie bezahlen.", "For the most common projects we offer fixed prices. You know before kick-off what you get and what you pay.")}
        </p>
        <div className="fixed-grid">
          {FIXED_PRICES.map((p) => {
            const chf = parseInt((p.amt.match(/\d+/) || ["0"])[0], 10);
            const orig = Math.round(chf * 1.25);
            const save = orig - chf;
            return (
              <div className="fix-card" key={p.title} role="button" tabIndex={0}
                style={{ cursor: "pointer" }}
                onClick={() => setServiceModal(p)}
                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setServiceModal(p); } }}
              >
                <FixedPriceIcon slug={p.slug} />
                <div className="tag">{p.tag}</div>
                <h4>{p.title}</h4>
                <p>{p.body}</p>
                <div className="price">
                  <span style={{ textDecoration: "line-through", opacity: 0.5, marginRight: 8, fontSize: "0.85em" }}>CHF {orig}.-</span>
                  <span className="from">{p.from}</span>
                  <span className="amt">{p.amt}</span>
                </div>
                <div style={{ marginTop: 10, fontSize: "0.82em", color: "#C8A35A", fontWeight: 600 }}>
                  {t("−20% Liakhov-Vorteil · Sie sparen CHF ", "−20% Liakhov advantage · You save CHF ")}{save}.-
                </div>
              </div>
            );
          })}
        </div>
      </div>

        
        {serviceModal && (
          <div onClick={() => setServiceModal(null)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.65)", zIndex: 1000, display: "flex", alignItems: "flex-start", justifyContent: "center", padding: 20, overflowY: "auto" }}>
            <div onClick={(e) => e.stopPropagation()} style={{ background: "var(--bg, #1a1a1a)", color: "var(--ink, #f0f0f0)", maxWidth: 780, width: "100%", borderRadius: 18, padding: 30, boxShadow: "0 16px 60px rgba(0,0,0,0.5)", marginTop: 30, marginBottom: 30 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
                <div>
                  <div style={{ fontSize: "0.78em", letterSpacing: "0.12em", textTransform: "uppercase", color: "#C8A35A", marginBottom: 4 }}>{serviceModal.tag}</div>
                  <h3 style={{ margin: 0, fontSize: "1.6em" }}>{serviceModal.title}</h3>
                </div>
                <button onClick={() => setServiceModal(null)} aria-label="Schliessen" style={{ background: "transparent", border: "none", color: "inherit", fontSize: "1.6em", cursor: "pointer", padding: "4px 8px", lineHeight: 1 }}>×</button>
              </div>
              <p style={{ opacity: 0.85, marginTop: 0 }}>{serviceModal.body}</p>
              <h4 style={{ marginTop: 24, marginBottom: 12, fontSize: "1.1em" }}>Beispielpakete · zum Bestellen anklicken</h4>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 24 }}>
                {serviceModal.examples.map((ex, i) => {
                  const exOrig = Math.round(ex.chf * 1.25);
                  const exSave = exOrig - ex.chf;
                  const isExt = !!ex.extras;
                  return (
                    <div key={i} role="button" tabIndex={0}
                      onClick={() => { const t = serviceModal.title + " — " + ex.name; const allItems = [...(ex.includes || []), ...(ex.extras || [])]; setServiceModal(null); setProductModal({ tag: serviceModal.tag, title: t, body: allItems.join(" · "), chf: ex.chf, orig: exOrig, save: exSave, amt: "CHF " + ex.chf + ".-" }); }}
                      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); const t = serviceModal.title + " — " + ex.name; const allItems = [...(ex.includes || []), ...(ex.extras || [])]; setServiceModal(null); setProductModal({ tag: serviceModal.tag, title: t, body: allItems.join(" · "), chf: ex.chf, orig: exOrig, save: exSave, amt: "CHF " + ex.chf + ".-" }); } }}
                      style={{ padding: 18, borderRadius: 12, background: isExt ? "rgba(200,163,90,0.12)" : "rgba(255,255,255,0.04)", border: isExt ? "2px solid rgba(200,163,90,0.5)" : "1px solid rgba(255,255,255,0.12)", cursor: "pointer" }}
                    >
                      {isExt && <div style={{ fontSize: "0.72em", color: "#C8A35A", fontWeight: 700, letterSpacing: "0.1em", marginBottom: 8 }}>+3 EXTRAS · +10%</div>}
                      <h5 style={{ margin: "0 0 10px 0", fontSize: "1.05em" }}>{ex.name}</h5>
                      <ul style={{ padding: 0, margin: "0 0 12px 0", listStyle: "none", fontSize: "0.85em", opacity: 0.85 }}>
                        {ex.includes.map((it, j) => (<li key={j} style={{ padding: "2px 0" }}>· {it}</li>))}
                        {ex.extras && ex.extras.map((it, j) => (<li key={"e" + j} style={{ padding: "2px 0", color: "#C8A35A", fontWeight: 600 }}>+ {it}</li>))}
                      </ul>
                      <div style={{ paddingTop: 10, borderTop: "1px solid rgba(255,255,255,0.1)" }}>
                        <span style={{ textDecoration: "line-through", opacity: 0.5, fontSize: "0.85em", marginRight: 8 }}>CHF {exOrig}.-</span>
                        <span style={{ fontSize: "1.1em", fontWeight: 700 }}>CHF {ex.chf}.-</span>
                      </div>
                      <div style={{ marginTop: 6, fontSize: "0.78em", color: "#C8A35A", fontWeight: 600 }}>Sie sparen CHF {exSave}.- · −20%</div>
                      <div style={{ marginTop: 8, fontSize: "0.85em", color: "#C8A35A" }}>→ Bestellen</div>
                    </div>
                  );
                })}
              </div>
              <div style={{ borderTop: "1px solid rgba(255,255,255,0.12)", paddingTop: 24 }}>
                <h4 style={{ margin: "0 0 8px 0", fontSize: "1.1em" }}>Sie wollen etwas Anderes?</h4>
                <p style={{ opacity: 0.75, marginTop: 0, marginBottom: 16, fontSize: "0.92em" }}>
                  Beschreiben Sie kurz, was Sie genau brauchen — der KI-Berater erstellt Ihnen ein passgenaues Angebot mit Festpreis. 50% Vorauszahlung, 50% nach Abnahme.
                </p>
                <textarea value={customDesc} onChange={(e) => setCustomDesc(e.target.value)} placeholder={"z. B. Ich habe einen kleinen WordPress-Webshop, möchte ihn auf Shopify migrieren mit allen Produkten und Bestellhistorie..."} rows={4}
                  style={{ width: "100%", padding: "12px", borderRadius: 8, border: "1px solid rgba(255,255,255,0.18)", background: "rgba(255,255,255,0.04)", color: "inherit", fontSize: "0.95em", fontFamily: "inherit", resize: "vertical", marginBottom: 12, boxSizing: "border-box" }} />
                <div style={{ marginBottom: 12, fontSize: "0.85em", opacity: 0.8 }}>{t("Wie dringend?", "How urgent?")}</div>
                <div style={{ display: "flex", gap: 6, marginBottom: 14, flexWrap: "wrap" }}>
                  {[["entspannt", "Entspannt · max. Rabatt"], ["normal", "Normal"], ["dringend", "Dringend"], ["asap", "ASAP · voller Marktpreis"]].map(([key, label]) => (
                    <button key={key} type="button" onClick={() => setCustomUrg(key)}
                      style={{ flex: "1 1 auto", minWidth: 120, padding: "8px 10px", borderRadius: 8, border: customUrg === key ? "2px solid #C8A35A" : "1px solid rgba(255,255,255,0.18)", background: customUrg === key ? "rgba(200,163,90,0.12)" : "transparent", color: "inherit", cursor: "pointer", fontSize: "0.85em", fontWeight: customUrg === key ? 700 : 400 }}
                    >{label}</button>
                  ))}
                </div>
                {customError && (<div style={{ padding: 10, marginBottom: 12, background: "rgba(220,50,50,0.12)", color: "#ff8080", borderRadius: 8, fontSize: "0.9em", whiteSpace: "pre-wrap" }}>{customError}</div>)}
                <button
                  onClick={async () => {
                    if (customDesc.trim().length < 8) { setCustomError("Bitte beschreiben Sie kurz, was Sie brauchen (mind. 8 Zeichen)."); return; }
                    setCustomLoading(true); setCustomError(null); setCustomQuote(null);
                    try {
                      const newMsgs = [...customMsgs, { role: "user", content: customDesc + (serviceModal ? "\n\n[Service-Kategorie: " + serviceModal.title + "]" : "") }];
                      const r = await fetch("/api/claude", {
                        method: "POST", headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({ messages: newMsgs, urgency: customUrg, lang: __lang })
                      });
                      const data = await r.json();
                      if (!r.ok) throw new Error(data.error || "Fehler bei der Analyse");
                      setCustomMsgs([...newMsgs, { role: "assistant", content: JSON.stringify(data) }]);
                      if (data.quote && data.quote.finalPrice) {
                        setCustomQuote(data.quote);
                      } else if (data.reply) {
                        setCustomError(data.reply);
                      }
                    } catch (e) { setCustomError(e.message || "Verbindungsfehler."); }
                    setCustomLoading(false);
                  }}
                  disabled={customLoading || customDesc.trim().length < 8}
                  style={{ padding: "12px 20px", borderRadius: 8, border: "none", background: "#C8A35A", color: "#0a0a0a", fontWeight: 700, cursor: customLoading || customDesc.trim().length < 8 ? "not-allowed" : "pointer", opacity: customLoading || customDesc.trim().length < 8 ? 0.55 : 1 }}
                >
                  {customLoading ? "Analysiere…" : "Angebot erstellen"}
                </button>
                {customQuote && (
                  <div style={{ marginTop: 20, padding: 18, borderRadius: 12, background: "rgba(200,163,90,0.10)", border: "1px solid rgba(200,163,90,0.4)" }}>
                    <h5 style={{ margin: "0 0 10px 0" }}>Ihr individuelles Angebot</h5>
                    <p style={{ marginTop: 0, fontSize: "0.92em" }}><strong>Aufgabe:</strong> {customQuote.problem}</p>
                    <p style={{ fontSize: "0.92em" }}><strong>Lieferleistung:</strong> {customQuote.deliverable}</p>
                    <div style={{ padding: 14, background: "rgba(0,0,0,0.25)", borderRadius: 8, margin: "14px 0" }}>
                      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, fontSize: "0.88em", opacity: 0.7 }}>
                        <span>Marktpreis</span><span style={{ textDecoration: "line-through" }}>CHF {customQuote.marketPrice}.-</span>
                      </div>
                      <div style={{ display: "flex", justifyContent: "space-between", color: "#C8A35A", fontWeight: 700 }}>
                        <span>Liakhov-Vorteil + Tempo-Faktor ({customUrg})</span>
                        <span>−{Math.round((1 - (customQuote.urgencyMultiplier || 1)) * 100)}%</span>
                      </div>
                      <div style={{ display: "flex", justifyContent: "space-between", fontSize: "1.2em", fontWeight: 800, paddingTop: 12, marginTop: 12, borderTop: "1px solid rgba(255,255,255,0.18)" }}>
                        <span>Festpreis</span><span>CHF {customQuote.finalPrice}.-</span>
                      </div>
                      <div style={{ fontSize: "0.82em", opacity: 0.7, marginTop: 6 }}>Davon 50% Vorauszahlung (CHF {Math.round(customQuote.finalPrice / 2)}.-) bei Bestellung, 50% nach Abnahme.</div>
                    </div>
                    <button
                      onClick={async () => {
                        setCustomLoading(true); setCustomError(null);
                        try {
                          const r = await fetch("/api/create-checkout-session", {
                            method: "POST", headers: { "Content-Type": "application/json" },
                            body: JSON.stringify({ mode: "deposit", quote: customQuote, paymentMethod: "card", customerEmail: "" })
                          });
                          const data = await r.json();
                          if (data.capacityFull) { setCustomError(data.message); setCustomLoading(false); return; }
                          if (!r.ok || !data.url) { setCustomError(data.error || "Fehler"); setCustomLoading(false); return; }
                          window.location.href = data.url;
                        } catch (e) { setCustomError(e.message || "Verbindungsfehler."); setCustomLoading(false); }
                      }}
                      disabled={customLoading}
                      style={{ width: "100%", padding: "14px", borderRadius: 10, border: "none", background: "#C8A35A", color: "#0a0a0a", fontWeight: 700, fontSize: "1.05em", cursor: customLoading ? "not-allowed" : "pointer", opacity: customLoading ? 0.55 : 1 }}
                    >
                      {customLoading ? "Wird vorbereitet…" : "Buchen mit 50% Vorauszahlung — CHF " + Math.round(customQuote.finalPrice / 2) + ".- jetzt"}
                    </button>
                    <p style={{ fontSize: "0.78em", opacity: 0.7, textAlign: "center", marginTop: 8, marginBottom: 0 }}>
                      Bezahlung über Kreditkarte (Stripe). Andere Methoden im Live-Berater oben.
                    </p>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
{productModal && (
          <div onClick={() => { if (!productProcessing) setProductModal(null); }} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)", zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
            <div onClick={(e) => e.stopPropagation()} style={{ position: "relative", background: "var(--bg, #1a1a1a)", color: "var(--ink, #f0f0f0)", maxWidth: 540, width: "100%", borderRadius: 16, padding: 28, boxShadow: "0 12px 50px rgba(0,0,0,0.4)", maxHeight: "90vh", overflowY: "auto" }}>
            <button type="button" onClick={() => { if (!productProcessing) setProductMod(null); }} aria-label="Schliessen" style={{ position: "absolute", top: 10, right: 12, width: 34, height: 34, borderRadius: 999, background: "rgba(0,0,0,0.08)", border: "none", fontSize: 22, fontWeight: 600, color: "#1a1a1a", cursor: "pointer", lineHeight: 1, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 }}>×</button>
              <div style={{ marginBottom: 6, fontSize: "0.85em", letterSpacing: "0.08em", textTransform: "uppercase", color: "#C8A35A" }}>{productModal.tag}</div>
              <h3 style={{ marginTop: 0, marginBottom: 12 }}>{productModal.title}</h3>
              <p style={{ opacity: 0.85, marginTop: 0 }}>{productModal.body}</p>
              <div style={{ padding: 18, borderRadius: 12, background: "rgba(200,163,90,0.10)", border: "1px solid rgba(200,163,90,0.35)", margin: "20px 0" }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, opacity: 0.7 }}>
                  <span>Originalpreis</span>
                  <span style={{ textDecoration: "line-through" }}>CHF {productModal.orig}.-</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 14, color: "#C8A35A", fontWeight: 700, fontSize: "1.05em" }}>
                  <span>−20% Liakhov-Vorteil</span>
                  <span>−CHF {productModal.save}.-</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 12, borderTop: "1px solid rgba(255,255,255,0.12)", fontSize: "1.18em", fontWeight: 700 }}>
                  <span>Sie zahlen heute</span>
                  <span>CHF {productModal.chf}.-</span>
                </div>
                <p style={{ fontSize: "0.85em", marginTop: 14, marginBottom: 0, opacity: 0.7 }}>
                  Vollständige Zahlung · keine Vorkasse · 14 Tage Widerrufsrecht
                </p>
              </div>
              <label style={{ display: "block", marginBottom: 14, fontSize: "0.95em" }}>
                <input type="checkbox" checked={productAcceptAgb} data-required={!productAcceptAgb} onChange={(e) => setProductAcceptAgb(e.target.checked)} style={{ marginRight: 8 }} />
                {t("Ich akzeptiere die AGB.", "I accept the Terms.")}
              </label>
              <input type="email" placeholder={t("ihre@email.ch (für Rechnung)", "your@email.com (for invoice)")} value={productEmail} data-required={!productEmail} onChange={(e) => setProductEmail(e.target.value)} style={{ width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid rgba(255,255,255,0.18)", background: "rgba(255,255,255,0.05)", color: "inherit", marginBottom: 14, fontSize: "1em", boxSizing: "border-box" }} />
              <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
                <button type="button" onClick={() => setProductPay("card")} style={{ flex: 1, padding: "10px", borderRadius: 8, border: productPay === "card" ? "2px solid #C8A35A" : "1px solid rgba(255,255,255,0.18)", background: "transparent", color: "inherit", cursor: "pointer", fontWeight: productPay === "card" ? 600 : 400 }}>{t("Kreditkarte", "Credit card")}</button>
                <button type="button" onClick={() => setProductPay("paypal")} style={{ flex: 1, padding: "10px", borderRadius: 8, border: productPay === "paypal" ? "2px solid #C8A35A" : "1px solid rgba(255,255,255,0.18)", background: "transparent", color: "inherit", cursor: "pointer", fontWeight: productPay === "paypal" ? 600 : 400 }}>PayPal</button>
              </div>
              {productError && (<div style={{ padding: 10, marginBottom: 12, background: "rgba(220,50,50,0.12)", color: "#ff8080", borderRadius: 8, fontSize: "0.9em" }}>{productError}</div>)}
              <button data-needs-attention={!productAcceptAgb || !productEmail} onClick={async () => {
                if (!productAcceptAgb) { setProductError(t("Bitte AGB akzeptieren.", "Please accept the Terms.")); return; }
                if (!productEmail.includes("@")) { setProductError(t("Bitte gültige E-Mail eingeben.", "Please enter a valid email.")); return; }
                setProductProcessing(true); setProductError(null);
                try {
                  const r = await fetch("/api/create-checkout-session", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ mode: "full", quote: { finalPrice: productModal.chf, problem: t("Festpreis: ", "Fixed price: ") + productModal.title, deliverable: productModal.body, urgency: "normal" }, paymentMethod: productPay, customerEmail: productEmail }),
                  });
                  const data = await r.json();
                  if (data.capacityFull) { setProductError(data.message || t("Aktuell ausgelastet.", "Currently at capacity.")); setProductProcessing(false); return; }
                  if (!r.ok || !data.url) { setProductError(data.error || t("Fehler beim Erstellen der Bezahl-Session.", "Could not create payment session.")); setProductProcessing(false); return; }
                  window.location.href = data.url;
                } catch (e) { setProductError(t("Verbindungsfehler. Bitte erneut versuchen.", "Connection error. Please try again.")); setProductProcessing(false); }
              }} disabled={productProcessing || !productAcceptAgb || !productEmail.includes("@")} style={{ width: "100%", padding: "14px", borderRadius: 10, border: "none", background: "#C8A35A", color: "#0a0a0a", fontWeight: 700, fontSize: "1.05em", cursor: (productProcessing || !productAcceptAgb || !productEmail.includes("@")) ? "not-allowed" : "pointer", opacity: (productProcessing || !productAcceptAgb || !productEmail.includes("@")) ? 0.55 : 1 }}>
                {productProcessing ? "Wird vorbereitet …" : "Jetzt bezahlen — CHF " + productModal.chf + ".-"}
              </button>
              <button onClick={() => { if (!productProcessing) setProductModal(null); }} style={{ display: "block", margin: "14px auto 0", background: "transparent", border: "none", color: "rgba(255,255,255,0.55)", cursor: "pointer", fontSize: "0.9em" }}>{t("Abbrechen", "Cancel")}</button>
            </div>
          </div>
        )}
    </section>
  );
}

/* ---------- About ---------- */
function AboutSlider() {
  const [idx, setIdx] = useState(0);
  const slides = [
    {
      eyebrow: t("Warum", "Why"),
      title: t("Hinter Liakhov Group steht eine Person.", "Behind Liakhov Group stands one person."),
      svg: (
        <svg viewBox="0 0 320 220" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <text x="56" y="32" fill="currentColor" stroke="none" fontSize="9" letterSpacing="2" opacity="0.7">{t("FRÜHER", "BEFORE")}</text>
          <rect x="20" y="48" width="100" height="14" opacity="0.55" />
          <rect x="20" y="68" width="100" height="14" opacity="0.4" />
          <rect x="20" y="88" width="100" height="14" opacity="0.25" />
          <text x="42" y="120" fill="currentColor" stroke="none" fontSize="20" opacity="0.5">{t("PDF", "PDF")}</text>
          <circle cx="60" cy="160" r="20" opacity="0.45" />
          <path d="M50 156 Q60 150 70 156" opacity="0.45" />
          <path d="M52 168 Q60 162 68 168" opacity="0.45" />
          <text x="40" y="200" fill="currentColor" stroke="none" fontSize="8" letterSpacing="1.5" opacity="0.5">{t("KEINER ANS TELEFON", "NOBODY PICKS UP")}</text>
          <text x="220" y="32" fill="currentColor" stroke="none" fontSize="9" letterSpacing="2">{t("JETZT", "NOW")}</text>
          <circle cx="240" cy="80" r="20" />
          <path d="M222 122 a18 18 0 0 1 36 0" />
          <rect x="280" y="60" width="22" height="34" rx="3" />
          <circle cx="291" cy="86" r="2" fill="currentColor" />
          <path d="M276 80 L266 80" strokeDasharray="2 2" />
          <text x="218" y="160" fill="currentColor" stroke="none" fontSize="9" letterSpacing="1">{t("EIN MENSCH", "ONE PERSON")}</text>
          <text x="218" y="174" fill="currentColor" stroke="none" fontSize="9" letterSpacing="1">{t("EIN DRAHT", "ONE LINE")}</text>
          <text x="218" y="200" fill="currentColor" stroke="none" fontSize="8" letterSpacing="1.5" opacity="0.7">{t("HEBT IMMER AB", "ALWAYS ANSWERS")}</text>
          <path d="M150 110 L180 110" strokeDasharray="3 4" opacity="0.4" />
          <path d="M174 104 L182 110 L174 116" opacity="0.4" />
        </svg>
      ),
      text: __lang === "en"
        ? (<>My name is <em>Maksym Liakhov</em>. I founded this company because too many small and mid-sized businesses are left alone by consultancies — with expensive PDFs and half-finished tools.</>)
        : (<>Mein Name ist <em>Maksym Liakhov</em>. Ich habe diese Firma gegründet, weil zu viele KMU von Beratungen alleingelassen werden — mit teuren PDFs und halbfertigen Tools.</>),
    },
    {
      eyebrow: t("Hintergrund", "Background"),
      title: t("Zehn Jahre Hände-an-die-Arbeit.", "Ten years of hands-on work."),
      svg: (
        <svg viewBox="0 0 320 220" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M30 130 L290 130" strokeDasharray="4 4" opacity="0.4" />
          <g transform="translate(40 100)">
            <rect x="-22" y="-22" width="44" height="44" rx="4" />
            <path d="M-12 -10 L12 -10 M-12 0 L12 0 M-12 10 L12 10" opacity="0.6" />
            <circle cx="0" cy="42" r="4" fill="currentColor" />
            <text x="-26" y="64" fill="currentColor" stroke="none" fontSize="9" letterSpacing="1.2">{t("LOGISTIK", "LOGISTICS")}</text>
          </g>
          <g transform="translate(120 100)">
            <path d="M-22 -8 L22 -8 L22 22 L-22 22 Z" />
            <path d="M-10 -8 L-10 -18 L10 -18 L10 -8" />
            <path d="M-22 4 L22 4" opacity="0.5" />
            <circle cx="0" cy="42" r="4" fill="currentColor" />
            <text x="-26" y="64" fill="currentColor" stroke="none" fontSize="9" letterSpacing="1.2">{t("VERTRIEB", "SALES")}</text>
          </g>
          <g transform="translate(200 100)">
            <path d="M-12 -22 L-12 6" />
            <path d="M-18 -22 L-6 -22 M-18 -10 Q-12 -4 -6 -10 L-6 -22" opacity="0.6" />
            <path d="M12 -22 L12 22" />
            <path d="M6 -22 L18 -22 L18 -2 L6 -2 Z" />
            <circle cx="0" cy="42" r="4" fill="currentColor" />
            <text x="-32" y="64" fill="currentColor" stroke="none" fontSize="9" letterSpacing="1.2">{t("GASTRONOMIE", "HOSPITALITY")}</text>
          </g>
          <g transform="translate(280 100)">
            <circle cx="0" cy="0" r="20" />
            <path d="M0 -20 L0 -10 M0 10 L0 20 M-20 0 L-10 0 M10 0 L20 0" />
            <circle cx="0" cy="0" r="6" fill="currentColor" />
            <circle cx="0" cy="42" r="4" fill="currentColor" />
            <text x="-30" y="64" fill="currentColor" stroke="none" fontSize="9" letterSpacing="1.2">{t("WORKFLOWS", "WORKFLOWS")}</text>
          </g>
          <text x="20" y="40" fill="currentColor" stroke="none" fontSize="8" letterSpacing="1.5" opacity="0.6">{t("PACKEN · VERKAUFEN · KALKULIEREN · BAUEN", "PACK · SELL · CALCULATE · BUILD")}</text>
          <path d="M62 100 L98 100" strokeDasharray="2 3" opacity="0.5" />
          <path d="M142 100 L178 100" strokeDasharray="2 3" opacity="0.5" />
          <path d="M222 100 L258 100" strokeDasharray="2 3" opacity="0.5" />
          <path d="M252 96 L260 100 L252 104" opacity="0.5" />
        </svg>
      ),
      text: __lang === "en"
        ? (<>Over ten years at the intersection of <em>technology and operations</em> — logistics, sales, hospitality. I packed, sold and calculated myself before I built the first workflow.</>)
        : (<>Über zehn Jahre an der Schnittstelle von <em>Technik und Betrieb</em> — Logistik, Vertrieb, Gastronomie. Ich habe selbst gepackt, verkauft und kalkuliert, bevor ich den ersten Workflow gebaut habe.</>),
    },
    {
      eyebrow: t("Wie ich arbeite", "How I work"),
      title: t("Ein Mensch, vier Disziplinen, ein direkter Draht.", "One person, four disciplines, one direct line."),
      svg: (
        <svg viewBox="0 0 320 220" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <circle cx="160" cy="110" r="28" />
          <circle cx="160" cy="100" r="9" />
          <path d="M144 124 a16 16 0 0 1 32 0" />
          <text x="143" y="158" fill="currentColor" stroke="none" fontSize="9" letterSpacing="1.5">SIE</text>
          <line x1="100" y1="60" x2="138" y2="92" strokeDasharray="3 3" opacity="0.5" />
          <line x1="220" y1="60" x2="182" y2="92" strokeDasharray="3 3" opacity="0.5" />
          <line x1="100" y1="160" x2="138" y2="128" strokeDasharray="3 3" opacity="0.5" />
          <line x1="220" y1="160" x2="182" y2="128" strokeDasharray="3 3" opacity="0.5" />
          <g transform="translate(60 50)">
            <rect x="-22" y="-14" width="44" height="28" rx="3" />
            <path d="M-12 -4 L-4 4 L12 -8" opacity="0.7" />
            <text x="-32" y="34" fill="currentColor" stroke="none" fontSize="9" letterSpacing="1.2">{t("AUTOMAT.", "AUTOM.")}</text>
          </g>
          <g transform="translate(260 50)">
            <rect x="-22" y="-14" width="44" height="28" rx="3" />
            <path d="M-10 -4 L-10 6 M10 -6 L10 6 M-10 0 Q0 -8 10 0" opacity="0.7" />
            <circle cx="-4" cy="-6" r="1.5" fill="currentColor" />
            <circle cx="4" cy="-6" r="1.5" fill="currentColor" />
            <text x="-10" y="34" fill="currentColor" stroke="none" fontSize="9" letterSpacing="1.2">{t("KI", "AI")}</text>
          </g>
          <g transform="translate(60 170)">
            <rect x="-22" y="-14" width="44" height="28" rx="3" />
            <text x="-14" y="6" fill="currentColor" stroke="none" fontSize="13" letterSpacing="0">CHF</text>
            <text x="-26" y="34" fill="currentColor" stroke="none" fontSize="9" letterSpacing="1.2">{t("KOSTEN", "COSTS")}</text>
          </g>
          <g transform="translate(260 170)">
            <rect x="-22" y="-14" width="44" height="28" rx="3" />
            <circle cx="-8" cy="0" r="5" />
            <circle cx="8" cy="0" r="5" />
            <line x1="-3" y1="0" x2="3" y2="0" />
            <text x="-32" y="34" fill="currentColor" stroke="none" fontSize="9" letterSpacing="1.2">{t("VERMITTL.", "MATCHING")}</text>
          </g>
        </svg>
      ),
      text: __lang === "en"
        ? (<><em>Liakhov Group</em> is intentionally small. One person, four disciplines, one direct line. You talk to me — not to an account manager.</>)
        : (<><em>Liakhov Group</em> ist bewusst klein. Ein Mensch, vier Disziplinen, ein direkter Draht. Sie reden mit mir — nicht mit einem Account-Manager.</>),
    },
  ];
  const prev = () => setIdx((i) => (i - 1 + slides.length) % slides.length);
  const next = () => setIdx((i) => (i + 1) % slides.length);
  return (
    <div className="about-slider" role="region" aria-label={t("Über uns — Slider", "About us — slider")}>
      <div className="about-slider-viewport">
        <div className="about-slider-track" style={{ transform: `translateX(-${idx * 100}%)` }}>
          {slides.map((s, i) => (
            <div className="about-slide" key={i} aria-hidden={i !== idx}>
              <div className="about-slide-graphic">{s.svg}</div>
              <div>
                <div className="about-slide-eyebrow">§ 04 · {s.eyebrow}</div>
                <h3 className="about-slide-title">{s.title}</h3>
                <p className="about-slide-text">{s.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="about-slider-controls">
        <button type="button" className="about-slider-arrow" onClick={prev} aria-label={t("Vorherige Folie", "Previous slide")}>‹</button>
        <div className="about-slider-dots" role="tablist">
          {slides.map((_, i) => (
            <button key={i} type="button" onClick={() => setIdx(i)} className={i === idx ? "is-active" : ""} aria-label={`${t("Folie", "Slide")} ${i + 1}`} aria-selected={i === idx} role="tab" />
          ))}
        </div>
        <button type="button" className="about-slider-arrow" onClick={next} aria-label={t("Nächste Folie", "Next slide")}>›</button>
      </div>
    </div>
  );
}

function About() {
  return (
    <section className="section" id="about">
      <div className="wrap">
        <div className="eyebrow">{t("§ 04 — Über uns", "§ 04 — About")}</div>
        <h2 className="h-section" style={{ marginBottom: 18 }}>
          {t("Hinter ", "Behind ")}<em>Liakhov Group</em><br />{t("steht eine Person.", "stands one person.")}
        </h2>
        <AboutSlider />

        <div className="about-values">
          <div className="about-value">
            <div className="about-value-icon">
              <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M32 8 L32 56" />
                <path d="M16 20 L8 38 a8 8 0 0 0 16 0 L16 20 Z" />
                <path d="M48 20 L40 38 a8 8 0 0 0 16 0 L48 20 Z" />
                <path d="M16 20 L48 20" />
                <circle cx="32" cy="14" r="2.5" fill="currentColor" />
                <path d="M22 56 L42 56" />
              </svg>
            </div>
            <div className="about-value-title">{t("Ehrlich vor schnell", "Honest over fast")}</div>
            <div className="about-value-body">{t("Wenn KI Ihr Problem nicht löst, sage ich das. Lieber kein Mandat als ein faules.", "If AI doesn't solve your problem, I'll say so. Better no engagement than a bad one.")}</div>
          </div>
          <div className="about-value">
            <div className="about-value-icon">
              <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="32" cy="22" r="9" />
                <path d="M14 54 a18 18 0 0 1 36 0" />
                <circle cx="14" cy="14" r="2" fill="currentColor" opacity="0.4" />
                <circle cx="50" cy="14" r="2" fill="currentColor" opacity="0.4" />
                <circle cx="10" cy="44" r="2" fill="currentColor" opacity="0.4" />
                <circle cx="54" cy="44" r="2" fill="currentColor" opacity="0.4" />
              </svg>
            </div>
            <div className="about-value-title">{t("Klein vor groß", "Small over big")}</div>
            <div className="about-value-body">{t("Ein Ansprechpartner. Kein Pitch-Team, das verschwindet, sobald der Vertrag steht.", "One point of contact. No pitch team that vanishes the moment the contract is signed.")}</div>
          </div>
          <div className="about-value">
            <div className="about-value-icon">
              <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <rect x="8" y="42" width="8" height="14" />
                <rect x="22" y="32" width="8" height="24" />
                <rect x="36" y="22" width="8" height="34" />
                <rect x="50" y="14" width="8" height="42" />
                <path d="M8 14 L20 26 L34 18 L48 28 L58 8" strokeDasharray="2 3" opacity="0.6" />
                <circle cx="58" cy="8" r="2.5" fill="currentColor" />
              </svg>
            </div>
            <div className="about-value-title">{t("Beweisbar vor laut", "Provable over loud")}</div>
            <div className="about-value-body">{t("Ich zeige Ihnen, was läuft — Logs, Workflows, gemessene Einsparungen. Keine Folien.", "I show you what's running — logs, workflows, measured savings. No slides.")}</div>
          </div>
          <div className="about-value">
            <div className="about-value-icon">
              <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="20" cy="32" r="9" />
                <path d="M29 32 L52 32" />
                <path d="M44 26 L44 38" />
                <path d="M52 26 L52 38" />
                <circle cx="20" cy="32" r="3" fill="currentColor" />
                <path d="M8 50 L56 50" strokeDasharray="2 3" opacity="0.4" />
              </svg>
            </div>
            <div className="about-value-title">{t("Ihrs vor meins", "Yours over mine")}</div>
            <div className="about-value-body">{t("Alles, was ich baue, gehört Ihnen. Quellcode, Workflows, Daten. Kein Vendor-Lock-in.", "Everything I build belongs to you. Source code, workflows, data. No vendor lock-in.")}</div>
          </div>
        </div>

        <AboutInfographic />

        <div style={{
          marginTop: 56,
          paddingTop: 24,
          borderTop: "1px solid var(--line)",
          display: "flex",
          gap: 36,
          flexWrap: "wrap",
          fontFamily: "var(--mono)",
          fontSize: 11,
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          color: "var(--ink-mute)",
        }}>
          <div>
            <div style={{ color: "var(--gold)", marginBottom: 4 }}>UID</div>
            <div style={{ color: "var(--ink)", fontSize: 13, letterSpacing: "0.06em" }}>CHE-294.177.807</div>
          </div>
          <div>
            <div style={{ color: "var(--gold)", marginBottom: 4 }}>{t("Sitz", "Headquarters")}</div>
            <div style={{ color: "var(--ink)", fontSize: 13, letterSpacing: "0.06em" }}>{t("Schweiz", "Switzerland")}</div>
          </div>
          <div>
            <div style={{ color: "var(--gold)", marginBottom: 4 }}>{t("Gründung", "Founded")}</div>
            <div style={{ color: "var(--ink)", fontSize: 13, letterSpacing: "0.06em" }}>2023</div>
          </div>
          <div>
            <div style={{ color: "var(--gold)", marginBottom: 4 }}>{t("Mandate", "Mandates")}</div>
            <div style={{ color: "var(--ink)", fontSize: 13, letterSpacing: "0.06em" }}>{t("persönlich verantwortet", "personally accountable")}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- About Infographic ---------- */
function AboutInfographic() {
  return (
    <div className="about-info">
      <AboutRow1 />
    </div>
  );
}

// Row 1 — n8n / API integration
function AboutRow1() {
  return (
    <div className="about-row">
      <div className="about-row-head">
        <div className="about-row-num">★</div>
        <h3 className="about-row-title">{t("Wie ich arbeite — ", "How I work — ")}<em>{t("ein Beispiel-Workflow", "a sample workflow")}</em></h3>
      </div>

      <div className="about-row-body row-wide">
        <div className="about-cell about-cell-wide">
          <div className="about-cell-label">{t("Workflow-Engine · n8n · ziehbar", "Workflow engine · n8n · draggable")}</div>
          <WorkflowGraph />
          <div className="about-cell-foot">{t("So sieht Automatisierung bei mir aus: 19 Knoten, 20 Verbindungen, alles dokumentiert. Ziehen Sie ruhig daran herum — es geht nichts kaputt.", "This is what automation looks like with me: 19 nodes, 20 connections, fully documented. Feel free to drag them around — nothing will break.")}</div>
        </div>

        {/* Middle: API protocols */}
        <div className="about-cell">
          <div className="about-cell-label">{t("Was ich anbinde", "What I connect to")}</div>
          <ul className="about-protocols">
            <li><span className="dot" />REST & GraphQL</li>
            <li><span className="dot" />Webhooks (in & out)</li>
            <li><span className="dot" />OAuth2 / API-Keys</li>
            <li><span className="dot" />{t("Polling, Queues, Retry-Logik", "Polling, queues, retry logic")}</li>
            <li><span className="dot" />Custom Code-Nodes (JS / Python)</li>
          </ul>
          <div className="about-cell-foot">{t("Wenn Ihr System eine Schnittstelle hat, finde ich einen Weg.", "If your system has an interface, I will find a way.")}</div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Footer ---------- */
function Footer({ openModal }) {
  return (
    <footer className="footer" id="contact">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 8 }}>
              <BrandMark size={56} strokeWidth={6} />
              <h2 className="h-display" style={{ fontSize: 64, margin: 0 }}>Liakhov<em>·</em>Group</h2>
            </div>
            <p>
              {t("Einzelunternehmen Maksym Liakhov · Beratung, Automatisierung, KI und Vermittlung für ambitionierte kleine und mittelständische Unternehmen.", "Sole Proprietorship Maksym Liakhov · Consulting, automation, AI and investor matching for ambitious small and medium businesses.")}
            </p>
          </div>
          <div>
            <h5>{t("Rechtliches", "Legal")}</h5>
            <ul>
              <li><button type="button" className="footer-link" onClick={() => openModal("impressum")}>{t("Impressum", "Imprint")}</button></li>
              <li><button type="button" className="footer-link" onClick={() => openModal("agb")}>{t("AGB", "Terms")}</button></li>
              <li><button type="button" className="footer-link" onClick={() => openModal("datenschutz")}>{t("Datenschutz", "Privacy")}</button></li>
              <li><button type="button" className="footer-link" onClick={() => openModal("nda")}>NDA</button></li>
            </ul>
          </div>
          <div>
            <h5>{t("Kontakt", "Contact")}</h5>
            <ul className="footer-contact-list" style={{ listStyle: "none", padding: 0, margin: 0 }}>
              <li style={{ marginBottom: 6, fontFamily: "var(--sans)", fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.6 }}><a href={`tel:${CONTACT.phoneTel}`} style={{ fontFamily: "var(--sans)", fontSize: 14, color: "var(--ink-dim)", textDecoration: "none", lineHeight: 1.6 }}>{CONTACT.phone}</a></li>
              <li style={{ marginBottom: 6, fontFamily: "var(--sans)", fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.6 }}><a href={`mailto:${CONTACT.email}`} style={{ fontFamily: "var(--sans)", fontSize: 14, color: "var(--ink-dim)", textDecoration: "none", lineHeight: 1.6 }}>{CONTACT.email}</a></li>
              <li style={{ marginBottom: 6, fontFamily: "var(--sans)", fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.6 }}>Balberstrasse 58, 8038 Zürich</li>
              {/* TODO vor Veröffentlichung: Link auf KI-Terminagent setzen, aktuell mailto */}
              <li style={{ marginBottom: 6, fontFamily: "var(--sans)", fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.6 }}><button type="button" onClick={() => { if (window.__openAppointmentModal) window.__openAppointmentModal(); }} style={{ fontFamily: "var(--sans)", fontSize: 14, color: "var(--ink-dim)", background: "transparent", border: "none", padding: 0, cursor: "pointer", textAlign: "left", lineHeight: 1.6 }}>{t("Termin buchen", "Book appointment")}</button></li>
              <li style={{ marginBottom: 6, fontFamily: "var(--sans)", fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.6 }}><a href="https://www.linkedin.com/in/maksym-liakhov-6aa157402/" target="_blank" rel="noopener noreferrer" style={{ color: "var(--gold)", textDecoration: "none" }}>↗ LinkedIn — Maksym Liakhov</a></li>
            </ul>
          </div>
          <div>
            <h5>{t("Partner", "Partners")}</h5>
            <ul>
              <li><button type="button" className="footer-link" onClick={() => openModal("partner-netzwerk")}>{t("Partner-Netzwerk", "Partner network")}</button></li>
              <li><button type="button" className="footer-link" onClick={() => openModal("affiliate")}>{t("Empfehlungsprogramm", "Referral program")}</button></li>
              <li><button type="button" className="footer-link" onClick={() => openModal("becomePartner")}>{t("Partner werden", "Become a partner")}</button></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Maksym Liakhov · UID/MWST: <span style={{ fontFamily: "var(--mono)", color: "var(--ink-dim)" }}>CHE-294.177.807 MWST</span>{t(" · Alle Rechte vorbehalten", " · All rights reserved")}</span>
          <span>{t("Made with ◆ in der Schweiz", "Made with ◆ in Switzerland")}</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Modals ---------- */
function NdaContent() {
  const [lang, setLang] = useState("de");
  const today = new Date().toISOString().slice(0, 10);
  return (
    <>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18, paddingBottom: 14, borderBottom: "1px solid var(--line)", flexWrap: "wrap", gap: 12 }}>
        <h3 style={{ margin: 0 }}>{lang === "de" ? "Geheimhaltungsvereinbarung (NDA)" : "Non-Disclosure Agreement (NDA)"}</h3>
        <div style={{ display: "inline-flex", border: "1px solid var(--line)", borderRadius: 6, overflow: "hidden", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em" }}>
          <button type="button" onClick={() => setLang("de")} style={{ padding: "6px 14px", border: "none", cursor: "pointer", background: lang === "de" ? "var(--gold)" : "transparent", color: lang === "de" ? "var(--on-gold, #0a0a0a)" : "var(--ink-dim)" }}>DE</button>
          <button type="button" onClick={() => setLang("en")} style={{ padding: "6px 14px", border: "none", cursor: "pointer", background: lang === "en" ? "var(--gold)" : "transparent", color: lang === "en" ? "var(--on-gold, #0a0a0a)" : "var(--ink-dim)" }}>EN</button>
        </div>
      </div>
      {lang === "de" ? (
        <>
          <>
        <p style={{ fontSize: 13, opacity: 0.7, marginTop: 0 }}>Stand: ${new Date().toISOString().slice(0, 10)} · Anwendbares Recht: Schweiz</p>
        <h4>§ 1 — Vertragsparteien</h4>
        <p><strong>Empfangende Partei (Verpflichtete):</strong><br />
          Maksym Liakhov, Einzelunternehmen «Liakhov Group»<br />
          Balberstrasse 58, 8038 Zürich, Schweiz<br />
          UID: CHE-294.177.807</p>
        <p><strong>Offenlegende Partei (Geschützte):</strong><br />
          jede natürliche oder juristische Person, die mit der empfangenden Partei einen Auftrag, Werkvertrag, Beratungsmandat oder eine sonstige Geschäftsbeziehung eingeht.</p>

        <h4>§ 2 — Geltungsbereich</h4>
        <p>Diese Geheimhaltungsverpflichtung tritt automatisch und ohne separate Unterzeichnung in Kraft, sobald die empfangende Partei einen Auftrag — gleich welcher Art (Werkvertrag, Beratung, Pricer-Bestellung, persönliches Gespräch, Festpreis-Paket, Custom-Quote, etc.) — von der offenlegenden Partei annimmt. Sie ist integraler Bestandteil jeder einzelnen Geschäftsbeziehung und ergänzt die Allgemeinen Geschäftsbedingungen (AGB) und den jeweiligen Werkvertrag.</p>

        <h4>§ 3 — Vertrauliche Informationen</h4>
        <p>Als <em>vertraulich</em> gelten <strong>sämtliche</strong> Informationen, Daten, Dokumente, Quellcode, Geschäftsstrategien, Kundendaten, Lieferantenbeziehungen, Finanz- und Buchhaltungsdaten, technische Spezifikationen, Pläne, Konzepte, Geschäftsgeheimnisse im Sinne von Art. 162 StGB sowie sämtliche sonstigen Materialien und Sachverhalte, welche die empfangende Partei im Rahmen oder anlässlich der Auftragsausführung zur Kenntnis erhält oder beobachtet.</p>
        <p>Die Vertraulichkeit gilt unabhängig vom Übermittlungsweg (mündlich, schriftlich, elektronisch, durch Beobachtung vor Ort, durch Einsicht in Systeme oder Dokumente) und unabhängig davon, ob die Information explizit als «vertraulich», «confidential» oder ähnlich gekennzeichnet wurde.</p>

        <h4>§ 4 — Pflichten der empfangenden Partei</h4>
        <p>4.1 <strong>Strikte Geheimhaltung:</strong> Sämtliche vertraulichen Informationen werden mit der Sorgfalt einer ordentlichen Geschäftsfrau / eines ordentlichen Geschäftsmanns behandelt und ausschliesslich für die Auftragserfüllung verwendet.</p>
        <p>4.2 <strong>Keine Weitergabe an Dritte:</strong> ohne ausdrückliche schriftliche Einwilligung der offenlegenden Partei.</p>
        <p>4.3 <strong>Kein Eigennutz:</strong> keine Verwendung für eigene Zwecke der empfangenden Partei oder zugunsten Dritter ausserhalb des Auftrags — weder direkt noch indirekt.</p>
        <p>4.4 <strong>Schutzmassnahmen:</strong> angemessene technische und organisatorische Sicherheitsmassnahmen (verschlüsselte Speicherung, sichere Übertragung, Zugriffskontrolle, Backup-Schutz).</p>
        <p>4.5 <strong>Subunternehmer:</strong> Falls Aufgaben an externe Dienstleister oder Subunternehmer delegiert werden müssen, geschieht dies ausschliesslich nach vorheriger Zustimmung der offenlegenden Partei und nur mit gleichwertiger schriftlicher Geheimhaltungsverpflichtung dieser Dritten.</p>
      </>
          <>
        <h4>§ 5 — Ausnahmen von der Geheimhaltung</h4>
        <p>Nicht als vertraulich gelten Informationen, die:</p>
        <ul>
          <li>nachweislich bereits vor Aufnahme der Geschäftsbeziehung allgemein bekannt waren oder ohne Verschulden der empfangenden Partei nachträglich öffentlich werden;</li>
          <li>der empfangenden Partei nachweislich bereits vor Beginn des Auftrags rechtmässig und ohne Geheimhaltungspflicht bekannt waren;</li>
          <li>aufgrund gesetzlicher Verpflichtung, behördlicher Anordnung oder rechtskräftigen Gerichtsentscheids offengelegt werden müssen — wobei die offenlegende Partei in einem solchen Fall, soweit rechtlich zulässig, vorgängig informiert wird, damit sie geeignete Schutzmassnahmen ergreifen kann.</li>
        </ul>

        <h4>§ 6 — Dauer der Geheimhaltung</h4>
        <p>Die Geheimhaltungsverpflichtung beginnt mit der Annahme des Auftrags und gilt <strong>zeitlich unbegrenzt</strong> fort — auch nach Beendigung der Geschäftsbeziehung. Geschäftsgeheimnisse im Sinne von Art. 162 StGB sowie technische und kommerzielle Know-how-Daten unterliegen einer ohnehin zeitlich unbeschränkten Schutzpflicht.</p>

        <h4>§ 7 — Rückgabe und Löschung</h4>
        <p>Nach Abschluss oder Beendigung des Auftrags werden auf erste Aufforderung der offenlegenden Partei sämtliche vertraulichen Materialien (physisch und digital) <strong>zurückgegeben oder nachweislich gelöscht</strong> — einschliesslich aller Kopien, Sicherungen und Auszüge.</p>
        <p>Ausgenommen sind Daten, deren Aufbewahrung der empfangenden Partei aufgrund schweizerischer handels- oder steuerrechtlicher Vorgaben (insb. Art. 957 ff. OR, Buchführungspflicht 10 Jahre) gesetzlich vorgeschrieben ist. Solche Daten unterliegen weiterhin der Geheimhaltungspflicht und werden nach Ablauf der gesetzlichen Aufbewahrungsfristen unverzüglich gelöscht.</p>

        <h4>§ 8 — Haftung bei Verletzung</h4>
        <p>Im Falle einer schuldhaften Verletzung dieser Geheimhaltungsvereinbarung haftet die empfangende Partei für sämtliche der offenlegenden Partei daraus entstehenden direkten und nachweisbar kausalen Schäden gemäss den Bestimmungen des Schweizer Obligationenrechts (insb. Art. 41 ff. und Art. 97 ff. OR).</p>
        <p>Bei vorsätzlichen Verstössen, insbesondere bei der Verletzung von Geschäfts- und Fabrikationsgeheimnissen, kommen zusätzlich die strafrechtlichen Bestimmungen von Art. 162 StGB sowie Art. 4 lit. c und Art. 6 UWG (Bundesgesetz gegen den unlauteren Wettbewerb) zur Anwendung.</p>

        <h4>§ 9 — Anwendbares Recht und Gerichtsstand</h4>
        <p>Diese Geheimhaltungsvereinbarung untersteht ausschliesslich <strong>Schweizer Recht</strong>, unter Ausschluss kollisionsrechtlicher Bestimmungen und des UN-Kaufrechts (CISG).</p>
        <p>Ausschliesslicher Gerichtsstand für sämtliche Streitigkeiten aus oder im Zusammenhang mit dieser Vereinbarung ist <strong>Zürich, Schweiz</strong>, vorbehältlich zwingender konsumentenschutzrechtlicher Gerichtsstandsbestimmungen.</p>

        <h4>§ 10 — Salvatorische Klausel</h4>
        <p>Sollten einzelne Bestimmungen dieser Vereinbarung ganz oder teilweise unwirksam, ungültig oder undurchsetzbar sein oder werden, bleibt die Wirksamkeit der übrigen Bestimmungen davon unberührt. Anstelle der unwirksamen Bestimmung gilt diejenige wirksame Regelung, die dem wirtschaftlichen Zweck der unwirksamen Bestimmung am nächsten kommt.</p>

        <h4>§ 11 — Inkraftsetzung</h4>
        <p>Diese Vereinbarung tritt automatisch und ohne separate Unterzeichnung in Kraft, sobald die empfangende Partei einen Auftrag der offenlegenden Partei annimmt. Sie ergänzt die Allgemeinen Geschäftsbedingungen (AGB) und den jeweiligen Werkvertrag und gilt für jede einzelne Geschäftsbeziehung separat und in vollem Umfang.</p>

        <p style={{ fontSize: 13, opacity: 0.7, marginTop: 24, fontStyle: "italic" }}>
          Diese einseitige Verpflichtungserklärung ist von Maksym Liakhov (Liakhov Group) abgegeben und bindet ausschliesslich die empfangende Partei. Eine Gegenleistung oder Gegenverpflichtung der offenlegenden Partei ist nicht erforderlich. Auf Wunsch wird auf Verlangen der offenlegenden Partei eine separate, beidseitig unterzeichnete Fassung erstellt.
        </p>
      </>
        </>
      ) : (
        <>
          <>
        <p style={{ fontSize: 13, opacity: 0.7, marginTop: 0 }}>Last updated: ${new Date().toISOString().slice(0, 10)} · Governing law: Switzerland</p>
        <h4>§ 1 — Parties</h4>
        <p><strong>Receiving Party (Obligated):</strong><br />
          Maksym Liakhov, sole proprietorship «Liakhov Group»<br />
          Balberstrasse 58, 8038 Zürich, Switzerland<br />
          UID: CHE-294.177.807</p>
        <p><strong>Disclosing Party (Protected):</strong><br />
          any natural or legal person entering into a mandate, work contract, consulting engagement, or any other business relationship with the Receiving Party.</p>

        <h4>§ 2 — Scope</h4>
        <p>This confidentiality obligation enters into force automatically and without separate signature as soon as the Receiving Party accepts a mandate of any kind (work contract, consulting, pricer order, in-person meeting, fixed-price package, custom quote, etc.) from the Disclosing Party. It is an integral part of every individual business relationship and supplements the General Terms and Conditions (GTC) and the respective work contract.</p>

        <h4>§ 3 — Confidential Information</h4>
        <p><em>Confidential</em> means <strong>any and all</strong> information, data, documents, source code, business strategies, customer data, supplier relationships, financial and accounting data, technical specifications, plans, concepts, trade secrets within the meaning of Art. 162 of the Swiss Penal Code, and all other materials and circumstances that the Receiving Party becomes aware of or observes in the course of, or in connection with, the execution of the mandate.</p>
        <p>Confidentiality applies regardless of the means of transmission (oral, written, electronic, by on-site observation, by inspection of systems or documents) and regardless of whether the information was explicitly marked as «confidential», «vertraulich» or similar.</p>

        <h4>§ 4 — Obligations of the Receiving Party</h4>
        <p>4.1 <strong>Strict confidentiality:</strong> All confidential information shall be treated with the diligence of a prudent business person and used exclusively for fulfilling the mandate.</p>
        <p>4.2 <strong>No disclosure to third parties:</strong> without the express written consent of the Disclosing Party.</p>
        <p>4.3 <strong>No personal use:</strong> no use for the Receiving Party's own purposes, or in favour of third parties, outside the mandate — neither directly nor indirectly.</p>
        <p>4.4 <strong>Protective measures:</strong> appropriate technical and organisational security measures (encrypted storage, secure transmission, access control, backup protection).</p>
        <p>4.5 <strong>Subcontractors:</strong> If tasks must be delegated to external service providers or subcontractors, this shall only occur with the prior consent of the Disclosing Party and only with an equivalent written confidentiality obligation imposed on such third parties.</p>

        <h4>§ 5 — Exceptions to Confidentiality</h4>
        <p>Information shall not be considered confidential if it:</p>
        <ul>
          <li>was demonstrably already publicly known prior to the start of the business relationship, or becomes public after such start without fault of the Receiving Party;</li>
          <li>was demonstrably already lawfully known to the Receiving Party prior to the start of the mandate, without obligation of confidentiality;</li>
          <li>must be disclosed pursuant to legal obligation, official order, or final and binding court decision — in which case the Disclosing Party shall, where legally permissible, be informed in advance so that it may take appropriate protective measures.</li>
        </ul>
      </>
          <>
        <h4>§ 6 — Duration of Confidentiality</h4>
        <p>The confidentiality obligation begins with acceptance of the mandate and continues <strong>without time limit</strong> — also after termination of the business relationship. Trade secrets within the meaning of Art. 162 of the Swiss Penal Code, as well as technical and commercial know-how, are in any event subject to indefinite protection.</p>

        <h4>§ 7 — Return and Deletion</h4>
        <p>Upon completion or termination of the mandate, all confidential materials (physical and digital) shall be <strong>returned or verifiably deleted</strong> upon first request of the Disclosing Party — including all copies, backups, and excerpts.</p>
        <p>Excluded are data that the Receiving Party is legally required to retain under Swiss commercial or tax law (in particular Art. 957 ff. of the Swiss Code of Obligations, accounting retention obligation of 10 years). Such data shall remain subject to the confidentiality obligation and shall be deleted without delay upon expiry of the statutory retention periods.</p>

        <h4>§ 8 — Liability for Breach</h4>
        <p>In the event of a culpable breach of this confidentiality agreement, the Receiving Party shall be liable for all direct and demonstrably causal damages incurred by the Disclosing Party, in accordance with the provisions of the Swiss Code of Obligations (in particular Art. 41 ff. and Art. 97 ff. CO).</p>
        <p>In case of intentional breach, in particular violation of business and manufacturing secrets, the criminal provisions of Art. 162 of the Swiss Penal Code as well as Art. 4 lit. c and Art. 6 of the Swiss Federal Act against Unfair Competition (UCA) shall additionally apply.</p>

        <h4>§ 9 — Governing Law and Place of Jurisdiction</h4>
        <p>This confidentiality agreement is exclusively subject to <strong>Swiss law</strong>, to the exclusion of conflict-of-laws rules and the United Nations Convention on Contracts for the International Sale of Goods (CISG).</p>
        <p>Exclusive place of jurisdiction for all disputes arising out of or in connection with this agreement is <strong>Zurich, Switzerland</strong>, subject to mandatory consumer-protection rules on jurisdiction.</p>

        <h4>§ 10 — Severability</h4>
        <p>Should individual provisions of this agreement be or become wholly or partially invalid, void, or unenforceable, the validity of the remaining provisions shall remain unaffected. The invalid provision shall be replaced by the valid provision that most closely reflects the economic purpose of the invalid one.</p>

        <h4>§ 11 — Entry into Force</h4>
        <p>This agreement enters into force automatically and without separate signature as soon as the Receiving Party accepts a mandate from the Disclosing Party. It supplements the General Terms and Conditions (GTC) and the respective work contract and applies separately and in full to each individual business relationship.</p>

        <p style={{ fontSize: 13, opacity: 0.7, marginTop: 24, fontStyle: "italic" }}>
          This unilateral declaration of obligation is given by Maksym Liakhov (Liakhov Group) and binds exclusively the Receiving Party. No consideration or counter-obligation from the Disclosing Party is required. Upon request of the Disclosing Party, a separate, mutually signed version may be prepared.
        </p>
      </>
        </>
      )}
    </>
  );
}

function Modal({ id, onClose }) {
  // Escape schliesst das Modal; Fokus-Rückgabe an das vorher fokussierte Element.
  useEffect(() => {
    const prevFocus = typeof document !== "undefined" ? document.activeElement : null;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("keydown", onKey);
      try { if (prevFocus && prevFocus.focus) prevFocus.focus(); } catch (e) {}
    };
  }, [onClose]);
  const content = {
    nda: <NdaContent />,
    impressum: (
      <>
        <h3>{t("Impressum", "Legal Notice (Impressum)")}</h3>
        {__lang === "en" && <div style={{padding:"12px 14px", marginTop:8, marginBottom:16, background:"rgba(217,164,65,0.10)", border:"1px solid var(--gold)", borderRadius:8, fontSize:13, lineHeight:1.55, color:"var(--ink-dim)"}}><b style={{color:"var(--ink)"}}>For English readers:</b> The text below is in German because the legally binding version of this document — under Swiss law — must be in German. Please use your browser's translation feature for casual reading, or contact <a href={`mailto:${CONTACT.email}`} style={{color:"var(--gold)"}}>{CONTACT.email}</a> for clarification in English.</div>}
        <p>Angaben gemäss schweizerischem Obligationenrecht (Art. 322 ff. OR) sowie Art. 3 lit. s UWG:</p>
        <h4>Anbieter</h4>
        <div style={{ display: "flex", gap: 18, alignItems: "center", flexWrap: "wrap" }}>
          <img
            src="/uploads/Businessfoto2026.png"
            alt="Maksym Liakhov"
            loading="lazy"
            decoding="async"
            style={{ width: 96, height: 96, borderRadius: 12, border: "1px solid var(--gold)", objectFit: "cover", objectPosition: "top", flexShrink: 0 }}
          />
          <p style={{ margin: 0 }}>
            Maksym Liakhov<br />
            Einzelunternehmen «Liakhov Group»<br />
            Balberstrasse 58<br />
            8038 Zürich<br />
            Schweiz
          </p>
        </div>
        <h4>Kontakt</h4>
        <p>
          Telefon: <a href={`tel:${CONTACT.phoneTel}`} style={{ color: "var(--gold)" }}>{CONTACT.phone}</a><br />
          E-Mail: <a href={`mailto:${CONTACT.email}`} style={{ color: "var(--gold)" }}>{CONTACT.email}</a>
        </p>
        <h4>Unternehmens-Identifikationsnummer (UID)</h4>
        <p><span style={{ fontFamily: "var(--mono)", color: "var(--gold)" }}>CHE-294.177.807</span></p>
        <h4>Mehrwertsteuer</h4>
        <p>MWST-pflichtig gemäss schweizerischem MWSTG. MWST-Nr.: <span style={{ fontFamily: "var(--mono)", color: "var(--gold)" }}>CHE-294.177.807 MWST</span>. Alle Preise verstehen sich, soweit nicht anders ausgewiesen, zzgl. der gesetzlichen MWST von 8.1%.</p>
        <h4>Verantwortlich für den Inhalt</h4>
        <p>Maksym Liakhov, Adresse wie oben.</p>
        <h4>Haftungsausschluss</h4>
        <p>Trotz sorgfältiger inhaltlicher Kontrolle übernimmt der Anbieter keine Haftung für die Richtigkeit, Vollständigkeit und Aktualität der bereitgestellten Inhalte. Für Inhalte externer Links sind ausschliesslich deren Betreiber verantwortlich.</p>
        <h4>Anwendbares Recht und Gerichtsstand</h4>
        <p>Es gilt schweizerisches Recht unter Ausschluss des UN-Kaufrechts. Gerichtsstand ist Zürich, sofern keine zwingenden gesetzlichen Bestimmungen entgegenstehen.</p>
      </>
    ),
    agb: (
      <>
        <h3>{t("Allgemeine Geschäftsbedingungen (AGB)", "General Terms and Conditions (AGB)")}</h3>
        {__lang === "en" && <div style={{padding:"12px 14px", marginTop:8, marginBottom:16, background:"rgba(217,164,65,0.10)", border:"1px solid var(--gold)", borderRadius:8, fontSize:13, lineHeight:1.55, color:"var(--ink-dim)"}}><b style={{color:"var(--ink)"}}>For English readers:</b> The text below is in German because the legally binding version of this document — under Swiss law — must be in German. Please use your browser's translation feature for casual reading, or contact <a href={`mailto:${CONTACT.email}`} style={{color:"var(--gold)"}}>{CONTACT.email}</a> for clarification in English.</div>}
        <p style={{ fontSize: 12, color: "var(--ink-mute)" }}>Stand: 4. Mai 2026 · Version 2.0 · Anwendbar auf alle über liakhov-group.com geschlossenen Verträge.</p>
        <p>Diese AGB regeln die Vertragsbeziehung zwischen Maksym Liakhov, Einzelunternehmen «Liakhov Group», Balberstrasse 58, 8038 Zürich, Schweiz («Anbieter»), und seinen Kundinnen und Kunden («Kunde») für sämtliche über liakhov-group.com angebotenen oder vermittelten Leistungen. Es gilt ausschliesslich schweizerisches Recht.</p>
        <h4>1. Geltungsbereich und Vertragsschluss</h4>
        <p>1.1 Diese AGB gelten für jeden Vertragsabschluss zwischen Anbieter und Kunde. Abweichende AGB des Kunden werden nicht anerkannt.<br />1.2 Der Vertrag kommt verbindlich zustande mit Eingang der Vorauszahlung des Kunden auf Basis des im Beratungs-Chat oder per E-Mail bestätigten Angebots.<br />1.3 Mit Eingang der Vorauszahlung akzeptiert der Kunde diese AGB, den Werkvertrag und die im Angebot enthaltene Beschreibung des Endresultats verbindlich.</p>
        <h4>2. KI-generierte Angebote</h4>
        <p>2.1 Im Beratungs-Chat erzeugte Angebote sind unverbindliche Schätzungen. Verbindlich werden sie erst durch die Vorauszahlung oder durch schriftliche Bestätigung beider Seiten.<br />2.2 Der Anbieter behält sich vor, KI-generierte Angebote innerhalb von 7 Tagen schriftlich zu korrigieren, falls sie auf unvollständigen Angaben des Kunden beruhen.</p>
        <h4>3. Preise, Vorauszahlung und Restzahlung</h4>
        <p>3.1 Alle Preise verstehen sich in Schweizer Franken (CHF), zzgl. der gesetzlichen Mehrwertsteuer (CH-MWST 8.1%).<br />3.2 <b>50/50-Zahlungsmodell</b>: 50% Vorauszahlung sofort bei Vertragsschluss, 50% nach Abnahme oder spätestens 14 Tage nach Bereitstellung.<br />3.3 Die Vorauszahlung ist nicht erstattungsfähig, sobald der Anbieter mit der Arbeit begonnen hat.<br />3.4 Akzeptierte Zahlungsarten: Kreditkarte/Debitkarte, PayPal, Banküberweisung (SIC/SEPA), XRP (Krypto), Bargeld vor Ort nach Vereinbarung.</p>
        <h4>4. Leistungsumfang und Endresultat</h4>
        <p>4.1 Der verbindliche Leistungsumfang richtet sich ausschliesslich nach der im Buchungs-Schritt akzeptierten «Beschreibung des Endresultats». Diese ist Vertragsgegenstand des Werkvertrags nach Art. 363 ff. OR.<br />4.2 Lieferzeit-Termine werden nach Vertragsschluss individuell vereinbart.</p>
        <h4>5. Mitwirkungspflichten</h4>
        <p>Der Kunde stellt unverzüglich und kostenfrei alle notwendigen Informationen, Daten, Zugänge und Ansprechpersonen bereit.</p>
        <h4>6. Abnahme</h4>
        <p>14 Tage nach Bereitstellung gilt das Werk ohne schriftliche, begründete Mängelrüge als abgenommen.</p>
        <h4>7. Stornierung</h4>
        <p>Vor Beginn: 20% Stornogebühr (mind. CHF 200). Nach Beginn: erbrachter Aufwand + 50% des Restwerts.</p>
        <h4>8. Eigentum und Nutzungsrechte</h4>
        <p>8.1 <b>Eigentumsvorbehalt</b>: Werkergebnisse bleiben bis zur vollständigen Zahlung Eigentum des Anbieters.<br />8.2 Mit Vollzahlung gehen einfache, nicht-exklusive Nutzungsrechte auf den Kunden über.<br />8.3 Der Anbieter behält das Recht, generische Konzepte und Methoden weiterzuverwenden.</p>
        <h4>9. Gewährleistung</h4>
        <p>30 Tage Funktionsgewährleistung ab Abnahme. Ausgeschlossen bei nachträglichen Änderungen des Kunden, Bedienungsfehlern, Drittanbieter-Updates oder höherer Gewalt.</p>
        <h4>10. Haftungsbegrenzung</h4>
        <p>10.1 Haftung nur für Vorsatz und grobe Fahrlässigkeit. Leichte Fahrlässigkeit ausgeschlossen.<br />10.2 Gesamthaftung begrenzt auf den Festpreis des Auftrags.<br />10.3 Mittelbare Schäden, Folgeschäden, entgangener Gewinn, Datenverlust, Drittansprüche ausgeschlossen.<br />10.4 Keine Haftung für Drittanbieter-Dienste (Anthropic, Cloudflare, Stripe, Bexio, Google).</p>
        <h4>11. Verschwiegenheit</h4>
        <p>Beide Parteien wahren Verschwiegenheit über vertrauliche Informationen für mindestens 5 Jahre nach Vertragsende.</p>
        <h4>12. Konkurrenzschutz und Referenz</h4>
        <p>12.1 Kein Abwerben von Mitarbeitenden/Subunternehmern/Partnern während Vertragsdauer und 12 Monate danach.<br />12.2 Anbieter darf Kunde als Referenz nennen (Name, Logo, Projektbeschreibung), sofern nicht schriftlich widersprochen.</p>
        <h4>13. Widerrufsrecht (Konsumenten)</h4>
        <p>14 Tage gem. Art. 40a ff. OR. Erlischt bei vollständig erbrachten digitalen Dienstleistungen mit ausdrücklicher Zustimmung.</p>
        <h4>14. Höhere Gewalt</h4>
        <p>Bei Naturkatastrophen, Krieg, Pandemie, Cyber-Angriffen ruht die Leistungspflicht. Schadensersatz ausgeschlossen.</p>
        <h4>15. Schlussbestimmungen</h4>
        <p>Schweizerisches Recht unter Ausschluss UN-Kaufrecht. Ausschliesslicher Gerichtsstand: Zürich.</p>
      </>
    ),
    werkvertrag: (
      <>
        <h3>{t("Werkvertrag · Vertragstemplate", "Service Contract · Template")}</h3>
        {__lang === "en" && <div style={{padding:"12px 14px", marginTop:8, marginBottom:16, background:"rgba(217,164,65,0.10)", border:"1px solid var(--gold)", borderRadius:8, fontSize:13, lineHeight:1.55, color:"var(--ink-dim)"}}><b style={{color:"var(--ink)"}}>For English readers:</b> The text below is in German because the legally binding version of this document — under Swiss law — must be in German. Please use your browser's translation feature for casual reading, or contact <a href={`mailto:${CONTACT.email}`} style={{color:"var(--gold)"}}>{CONTACT.email}</a> for clarification in English.</div>}
        <p style={{ fontSize: 12, color: "var(--ink-mute)" }}>Stand: 4. Mai 2026 · Version 2.0 · Wird mit Eingang der Vorauszahlung wirksam.</p>
        <p>Werkvertrag nach Art. 363 ff. OR zwischen <b>Maksym Liakhov</b>, Einzelunternehmen «Liakhov Group», Balberstrasse 58, 8038 Zürich («Auftragnehmer»), und dem Kunden gemäss Buchungsprozess («Auftraggeber»).</p>
        <h4>§ 1 Vertragsgegenstand</h4>
        <p>1.1 Der Auftragnehmer verpflichtet sich, das im Buchungs-Schritt 1 detaillierte Endresultat («Werk») herzustellen. Diese Endresultat-Beschreibung («Deliverable») ist verbindlicher Vertragsteil.<br />1.2 Nicht ausdrücklich aufgeführte Leistungen sind nicht geschuldet.</p>
        <h4>§ 2 Vergütung und Zahlungsmodalitäten</h4>
        <p>2.1 Festpreis in CHF zzgl. der gesetzlichen Mehrwertsteuer (CH-MWST 8.1%).<br />2.2 <b>Zahlung 50/50</b>: 50% Vorauszahlung bei Vertragsschluss; 50% Restzahlung innert 7 Tagen nach Abnahme oder spätestens 14 Tage nach Bereitstellung.<br />2.3 Verzugszins 5% p.a. (Art. 104 OR) bei Verzug der Restzahlung über 14 Tage.</p>
        <h4>§ 3 Mitwirkung des Auftraggebers</h4>
        <p>Auftraggeber stellt unverzüglich und kostenfrei alle Informationen, Zugänge und Ansprechpersonen bereit.</p>
        <h4>§ 4 Abnahme</h4>
        <p>14 Tage Prüffrist nach Bereitstellung. Ohne begründete schriftliche Mängelrüge gilt das Werk als abgenommen.</p>
        <h4>§ 5 Eigentum und Nutzungsrechte</h4>
        <p>5.1 <b>Eigentumsvorbehalt</b> bis zur vollständigen Zahlung.<br />5.2 Nach Vollzahlung: einfache, nicht-exklusive, unbegrenzte Nutzungsrechte am Werk auf Auftraggeber.<br />5.3 Weitergabe an Dritte nur mit schriftlicher Zustimmung.<br />5.4 Auftragnehmer behält Recht zur Wiederverwendung generischer Konzepte und Methoden.</p>
        <h4>§ 6 Haftung</h4>
        <p>6.1 Haftung nur für Vorsatz und grobe Fahrlässigkeit.<br />6.2 Gesamthaftung begrenzt auf den Festpreis.<br />6.3 Mittelbare Schäden, Folgeschäden, entgangener Gewinn, Datenverlust, Reputationsschaden, Drittansprüche ausgeschlossen.<br />6.4 Keine Haftung für Drittanbieter-Dienste.</p>
        <h4>§ 7 Verschwiegenheit</h4>
        <p>Beide Parteien wahren Verschwiegenheit für mindestens 5 Jahre.</p>
        <h4>§ 8 Konkurrenz- und Abwerbeschutz</h4>
        <p>Auftraggeber wirbt während Vertragsdauer und 12 Monate danach keine Mitarbeitenden/Subunternehmer/Partner ab. Konventionalstrafe: sechsmonatiges Honorar der betreffenden Person.</p>
        <h4>§ 9 Referenz und Marketing</h4>
        <p>Auftragnehmer darf Auftraggeber als Referenz nennen (Name, Logo, Projektbeschreibung), sofern nicht schriftlich widersprochen.</p>
        <h4>§ 10 Stornierung</h4>
        <p>Vor Beginn: 20% Stornogebühr (mind. CHF 200). Nach Beginn: erbrachter Aufwand + 50% Restwert.</p>
        <h4>§ 11 Vertragsannahme durch Zahlung</h4>
        <p>Mit Eingang der Vorauszahlung gilt dieser Werkvertrag als verbindlich akzeptiert. Keine zusätzliche Unterschrift erforderlich.</p>
        <h4>§ 12 Schlussbestimmungen</h4>
        <p>12.1 Änderungen schriftlich (E-Mail genügt).<br />12.2 Salvatorische Klausel.<br />12.3 Schweizerisches Recht, Ausschluss UN-Kaufrecht.<br />12.4 Gerichtsstand: Zürich.</p>
      </>
    ),
        datenschutz: (
      <>
        <h3>{t("Datenschutzerklärung", "Privacy Policy")}</h3>
        {__lang === "en" && <div style={{padding:"12px 14px", marginTop:8, marginBottom:16, background:"rgba(217,164,65,0.10)", border:"1px solid var(--gold)", borderRadius:8, fontSize:13, lineHeight:1.55, color:"var(--ink-dim)"}}><b style={{color:"var(--ink)"}}>For English readers:</b> The text below is in German because the legally binding version of this document — under Swiss law — must be in German. Please use your browser's translation feature for casual reading, or contact <a href={`mailto:${CONTACT.email}`} style={{color:"var(--gold)"}}>{CONTACT.email}</a> for clarification in English.</div>}
        <p>Diese Erklärung informiert Sie nach dem revidierten Schweizerischen Datenschutzgesetz (revDSG, in Kraft seit 1.&nbsp;September&nbsp;2023) sowie — soweit anwendbar — der EU-Datenschutz-Grundverordnung (DSGVO) über die Bearbeitung Ihrer personenbezogenen Daten auf liakhov-group.com.</p>
        <h4>1. Verantwortlicher</h4>
        <p>Maksym Liakhov, Einzelunternehmen «Liakhov Group», Balberstrasse 58, 8038 Zürich, Schweiz.<br />
          Kontakt für Datenschutzanliegen: <a href={`mailto:${CONTACT.email}`} style={{ color: "var(--gold)" }}>{CONTACT.email}</a> · <a href={`tel:${CONTACT.phoneTel}`} style={{ color: "var(--gold)" }}>{CONTACT.phone}</a>
        </p>
        <h4>2. Welche Daten wir bearbeiten</h4>
        <p>Wir bearbeiten ausschliesslich solche Daten, die Sie uns aktiv übermitteln oder die technisch zwingend bei einem Webseitenbesuch anfallen:</p>
        <ul>
          <li><b>Server-Logs:</b> IP-Adresse, Datum/Uhrzeit, abgerufene Ressource, User-Agent — gespeichert für maximal 30 Tage zum Schutz vor Missbrauch.</li>
          <li><b>Beratungs-Chat:</b> Inhalte, die Sie in den KI-Pricer eingeben, sowie der erzeugte Vorschlag.</li>
          <li><b>Buchungs-/Kontaktanfragen:</b> Name, E-Mail, Telefon, Anliegen — sofern von Ihnen mitgeteilt.</li>
          <li><b>Vertragsdaten:</b> bei Beauftragung Rechnungs- und Zahlungsdaten gemäss OR-Buchführungspflicht.</li>
        </ul>
        <h4>3. Zwecke und Rechtsgrundlagen</h4>
        <p>Vertragsanbahnung und -durchführung (Art. 31 Abs. 2 lit. a revDSG / Art. 6 Abs. 1 lit. b DSGVO), Erfüllung gesetzlicher Pflichten (Buchhaltung, Steuern), berechtigte Interessen (IT-Sicherheit, Missbrauchsschutz). Eine Einwilligung ist Grundlage für freiwillige Eingaben, etwa im Chat.</p>
        <h4>4. Auftragsbearbeiter und Übermittlungen ins Ausland</h4>
        <p>Wir setzen folgende Dienstleister ein:</p>
        <ul>
          <li><b>Anthropic, PBC (USA)</b> — Bearbeitung Ihrer Chat-Eingaben durch das Sprachmodell «Claude» zur Erzeugung Ihres Angebots. Übermittlung in die USA auf Grundlage Ihrer Einwilligung (Art. 17 revDSG / Art. 49 Abs. 1 lit. a DSGVO) sowie ergänzender Standardvertragsklauseln. Details: <a href="https://www.anthropic.com/legal/privacy" target="_blank" rel="noopener" style={{ color: "var(--gold)" }}>anthropic.com/legal/privacy</a>.</li>
          <li><b>Cloudflare, Inc. (USA)</b> — Hosting, Content-Delivery und Schutz vor Missbrauch. Verarbeitet technisch anfallende Verbindungsdaten (u.&nbsp;a. IP-Adresse).</li>
          <li><b>Plausible Analytics (EU, Server in Deutschland)</b> — cookielose, aggregierte Reichweitenmessung ohne personenbezogene Profile und ohne domainübergreifendes Tracking. Datenstandort EU. Details: <a href="https://plausible.io/data-policy" target="_blank" rel="noopener" style={{ color: "var(--gold)" }}>plausible.io/data-policy</a>.</li>
          <li><b>LinkedIn Ireland / Microsoft (EU/USA)</b> — der «LinkedIn Insight Tag» misst den Erfolg unserer LinkedIn-Kampagnen (Conversion-Tracking) und kann pseudonyme Nutzungsdaten an LinkedIn übermitteln. Sie können der Nutzung jederzeit widersprechen: <a href="https://www.linkedin.com/psettings/guest-controls/retargeting-opt-out" target="_blank" rel="noopener" style={{ color: "var(--gold)" }}>LinkedIn-Opt-out</a> · <a href="https://www.linkedin.com/legal/privacy-policy" target="_blank" rel="noopener" style={{ color: "var(--gold)" }}>LinkedIn-Datenschutz</a>.</li>
          <li><b>Resend (USA)</b> — Versand von Bestätigungs- und Benachrichtigungs-E-Mails bei Termin- und Auftragsanfragen.</li>
          <li><b>Stripe (USA/EU)</b> — Zahlungsabwicklung, sofern Sie eine Online-Zahlung wählen.</li>
          <li><b>Google Fonts</b> — Schriftarten werden über Google-Server geladen; dabei wird Ihre IP-Adresse an Google übermittelt.</li>
        </ul>
        <p>Geben Sie keine besonders schützenswerten Daten (z.&nbsp;B. Gesundheits- oder Finanzdaten Dritter) in den Chat ein. Inhalte werden zur Beantwortung an Anthropic übertragen.</p>
        <h4>5. Aufbewahrungsdauer</h4>
        <p>Vertragsdaten 10 Jahre (Art. 958f OR), Kontaktanfragen ohne Vertragsschluss bis zu 12 Monate, Server-Logs 30 Tage, Chat-Eingaben werden serverseitig nicht persistent gespeichert.</p>
        <h4>6. Cookies, Reichweitenmessung und Tracking</h4>
        <p>Für den Betrieb der Seite verwenden wir technisch notwendige, kurzlebige Speicher (z.&nbsp;B. für die Theme- und Sprachwahl). Darüber hinaus setzen wir ein:</p>
        <ul>
          <li><b>Plausible Analytics</b> — cookielose, aggregierte Reichweitenmessung (Seitenaufrufe, Herkunft, Gerätetyp). Es werden keine Cookies gesetzt und keine personenbezogenen Profile gebildet; die Daten liegen auf Servern in der EU (Deutschland).</li>
          <li><b>LinkedIn Insight Tag</b> — Conversion-Messung für unsere LinkedIn-Werbekampagnen. Dabei können pseudonyme Nutzungsdaten an LinkedIn übermittelt werden. Rechtsgrundlage ist unser berechtigtes Interesse an der Erfolgsmessung von Marketing (Art.&nbsp;31 revDSG). Sie können der Verarbeitung jederzeit widersprechen — siehe die Opt-out-Links unter Ziffer&nbsp;4.</li>
        </ul>
        <p>Ein domainübergreifendes Nutzer-Profiling zu Werbezwecken durch uns findet nicht statt.</p>
        <h4>7. Ihre Rechte</h4>
        <p>Sie haben das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung, Datenherausgabe sowie das Recht, die Einwilligung jederzeit zu widerrufen. Beschwerden können beim Eidgenössischen Datenschutz- und Öffentlichkeitsbeauftragten (EDÖB) eingereicht werden.</p>
        <h4>8. Datensicherheit</h4>
        <p>Die Datenübermittlung erfolgt verschlüsselt (TLS&nbsp;1.3). Wir setzen technische und organisatorische Massnahmen gemäss Stand der Technik ein.</p>
        <h4>9. Änderungen</h4>
        <p>Diese Erklärung kann fortgeschrieben werden. Stand: 5.&nbsp;Juli&nbsp;2026.</p>
      </>
    ),
    kontakt: (
      <>
        <h3>{t("Kontakt & Termin", "Contact & appointment")}</h3>
        <p>{t("Sie erreichen mich auf den folgenden Wegen — ein erstes Gespräch ist immer kostenfrei.", "You can reach me in the following ways — a first conversation is always free of charge.")}</p>
        <h4>{t("Direkt", "Direct")}</h4>
        <p>{t("Telefon", "Phone")}: <a href={`tel:${CONTACT.phoneTel}`} style={{ color: "var(--gold)" }}>{CONTACT.phone}</a><br />{t("E-Mail", "Email")}: <a href={`mailto:${CONTACT.email}`} style={{ color: "var(--gold)" }}>{CONTACT.email}</a><br />{t("Signal & Telegram auf Anfrage", "Signal & Telegram on request")}<br />{t("Adresse", "Address")}: Balberstrasse 58, 8038 Zürich</p>
        <h4>{t("Termin buchen", "Book an appointment")}</h4>
        <p>{t("Buchen Sie ein 30-Minuten-Erstgespräch — Sie wählen zwei Wunschtermine, ich bestätige persönlich per E-Mail.", "Book a 30-minute first consultation — pick two preferred slots and I confirm personally by email.")}</p>
        <button
          type="button"
          className="btn btn-primary btn-arrow"
          style={{ marginTop: 12, display: "inline-flex" }}
          onClick={() => { onClose(); if (window.__openAppointmentModal) window.__openAppointmentModal(); }}
        >{t("Termin anfragen", "Request appointment")}</button>
      </>
    ),
    "partner-netzwerk": __lang === "en" ? (
      <>
        <h3>Our partner network</h3>
        <p>We work quietly with selected specialists in the background — so you get from a single source what you would otherwise have to gather from three providers.</p>
        <h4>Current partners</h4>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 14 }}>
          <div style={{ border: "1px solid var(--line-strong)", borderRadius: 8, padding: "12px 14px" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--gold)", textTransform: "uppercase" }}>Tax · Accounting</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 17, marginTop: 4 }}>Swiss fiduciary partner</div>
            <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 4 }}>Swiss fiduciary, VAT and payroll.</div>
          </div>
          <div style={{ border: "1px solid var(--line-strong)", borderRadius: 8, padding: "12px 14px" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--gold)", textTransform: "uppercase" }}>Law</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 17, marginTop: 4 }}>IT law firm</div>
            <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 4 }}>Contracts, data protection, privacy.</div>
          </div>
          <div style={{ border: "1px solid var(--line-strong)", borderRadius: 8, padding: "12px 14px" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--gold)", textTransform: "uppercase" }}>Hosting</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 17, marginTop: 4 }}>Swiss hosting (Infomaniak / Cloudflare)</div>
            <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 4 }}>Servers in Switzerland / edge cloud worldwide.</div>
          </div>
          <div style={{ border: "1px solid var(--line-strong)", borderRadius: 8, padding: "12px 14px" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--gold)", textTransform: "uppercase" }}>Investors</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 17, marginTop: 4 }}>Private investor network</div>
            <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 4 }}>Pre-seed to Series-A, CH and EU.</div>
          </div>
        </div>
        <p style={{ marginTop: 16, fontSize: 12, color: "var(--ink-mute)" }}>Specific names on request — for discretion we do not publish our partners.</p>
      </>
    ) : (
      <>
        <h3>Unser Partner-Netzwerk</h3>
        <p>Wir arbeiten still im Hintergrund mit ausgewählten Spezialisten zusammen — damit Sie aus einer Hand erhalten, was Sie sonst bei drei Anbietern zusammensuchen müssten.</p>
        <h4>Aktuelle Partner</h4>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 14 }}>
          <div style={{ border: "1px solid var(--line-strong)", borderRadius: 8, padding: "12px 14px" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--gold)", textTransform: "uppercase" }}>Steuern · Buchhaltung</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 17, marginTop: 4 }}>Treuhand-Partner CH</div>
            <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 4 }}>Schweizer Treuhänder, MWST und Lohn.</div>
          </div>
          <div style={{ border: "1px solid var(--line-strong)", borderRadius: 8, padding: "12px 14px" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--gold)", textTransform: "uppercase" }}>Recht</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 17, marginTop: 4 }}>IT-Anwaltskanzlei</div>
            <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 4 }}>Verträge, DSG, Datenschutz.</div>
          </div>
          <div style={{ border: "1px solid var(--line-strong)", borderRadius: 8, padding: "12px 14px" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--gold)", textTransform: "uppercase" }}>Hosting</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 17, marginTop: 4 }}>CH-Hoster (Infomaniak / Cloudflare)</div>
            <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 4 }}>Server in der Schweiz / Edge-Cloud weltweit.</div>
          </div>
          <div style={{ border: "1px solid var(--line-strong)", borderRadius: 8, padding: "12px 14px" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--gold)", textTransform: "uppercase" }}>Investoren</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 17, marginTop: 4 }}>Privates Investor-Netzwerk</div>
            <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 4 }}>Pre-Seed bis Series-A, CH und EU.</div>
          </div>
        </div>
        <p style={{ marginTop: 16, fontSize: 12, color: "var(--ink-mute)" }}>Konkrete Namen auf Anfrage — wir nennen unsere Partner aus Diskretionsgründen nicht öffentlich.</p>
      </>
    ),
    affiliate: __lang === "en" ? (
      <>
        <h3>Referral programme — sharing pays off</h3>
        <p>Know someone who would benefit from our work? Recommend us and receive 10% of the order value as a thank-you — up to CHF 5,000 per referral.</p>
        <h4>How it works</h4>
        <ol style={{ paddingLeft: 18, lineHeight: 1.7 }}>
          <li>Send us the name and email of the person you'd like to refer.</li>
          <li>We get in touch and mention you as the referrer.</li>
          <li>If an order is signed and paid in full, we transfer 10% to you within 14 days.</li>
        </ol>
        <h4>Payout</h4>
        <p>By bank transfer, PayPal or offset against one of your own invoices with us.</p>
        <h4>Fair rules</h4>
        <p>No hidden conditions, no minimum, no contracts. You can refer or not refer at any time without explanation.</p>
        <a href={`mailto:${CONTACT.email}?subject=Referral&body=${encodeURIComponent("Hello Maksym,\n\nI would like to refer the following person/company:\n\nName:\nCompany:\nEmail:\nShort note:\n\nBest regards\n")}`} className="btn btn-primary btn-arrow" style={{ marginTop: 12, display: "inline-flex" }}>Send referral</a>
      </>
    ) : (
      <>
        <h3>Empfehlungsprogramm — empfehlen lohnt sich</h3>
        <p>Sie kennen jemanden, dem unsere Arbeit helfen würde? Empfehlen Sie uns weiter und erhalten Sie 10% des Auftragswerts als Dankeschön — bis zu CHF 5'000 pro Empfehlung.</p>
        <h4>So funktioniert es</h4>
        <ol style={{ paddingLeft: 18, lineHeight: 1.7 }}>
          <li>Sie schreiben uns formlos den Namen und die E-Mail-Adresse Ihrer Empfehlung.</li>
          <li>Wir nehmen Kontakt auf und nennen Sie als Empfehlungsgeber.</li>
          <li>Wird ein Auftrag abgeschlossen und voll bezahlt, überweisen wir Ihnen 10% innert 14 Tagen.</li>
        </ol>
        <h4>Auszahlung</h4>
        <p>Per Banküberweisung, PayPal oder Verrechnung mit einer Ihrer eigenen Rechnungen bei uns.</p>
        <h4>Faire Regeln</h4>
        <p>Keine versteckten Bedingungen, keine Mindestabnahme, keine Verträge. Sie können jederzeit ohne Begründung empfehlen oder lassen.</p>
        <a href={`mailto:${CONTACT.email}?subject=Empfehlung&body=${encodeURIComponent("Guten Tag Maksym,\n\nich möchte folgende Person/Firma empfehlen:\n\nName:\nFirma:\nE-Mail:\nKurzes Anliegen:\n\nMit freundlichen Grüßen\n")}`} className="btn btn-primary btn-arrow" style={{ marginTop: 12, display: "inline-flex" }}>Empfehlung schicken</a>
      </>
    ),
    becomePartner: __lang === "en" ? (
      <>
        <h3>Become a partner</h3>
        <p>Are you a tax advisor, fiduciary, lawyer, marketing agency, IT consultant or investor? Then we might be a good fit.</p>
        <h4>Who we are looking for</h4>
        <ul style={{ paddingLeft: 18, lineHeight: 1.7 }}>
          <li><b>Fiduciaries &amp; accountants</b> — for joint mandates around VAT, payroll and annual accounts.</li>
          <li><b>Specialist law firms</b> — IT law, data protection, contract law for SMEs.</li>
          <li><b>Marketing &amp; design agencies</b> — when your clients need automation or AI.</li>
          <li><b>Investors &amp; family offices</b> — we bring vetted SME opportunities.</li>
        </ul>
        <h4>What's in it for you</h4>
        <p>Direct access to paying SME clients, clear referral fee (10% on success), no exclusivity, no membership fee. Straightforward, on a handshake.</p>
        <a href={`mailto:${CONTACT.email}?subject=Partner inquiry&body=${encodeURIComponent("Hello Maksym,\n\nI am interested in a partnership.\n\nName:\nCompany:\nField:\nWhy we fit:\n\nBest regards\n")}`} className="btn btn-primary btn-arrow" style={{ marginTop: 12, display: "inline-flex" }}>Send inquiry</a>
      </>
    ) : (
      <>
        <h3>Partner werden</h3>
        <p>Sind Sie Steuerberater:in, Treuhänder:in, Anwält:in, Marketing-Agentur, IT-Berater:in oder Investor? Dann passen wir vielleicht zusammen.</p>
        <h4>Was wir suchen</h4>
        <ul style={{ paddingLeft: 18, lineHeight: 1.7 }}>
          <li><b>Treuhand &amp; Buchhaltung</b> — für Ko-Mandate bei MWST, Lohn und Jahresabschluss.</li>
          <li><b>Spezialisierte Anwaltskanzleien</b> — IT-Recht, Datenschutz, Vertragsrecht für KMU.</li>
          <li><b>Marketing- &amp; Designagenturen</b> — wenn Ihre Kunden Automatisierung oder KI brauchen.</li>
          <li><b>Investoren &amp; Family Offices</b> — wir bringen geprüfte Vorhaben aus dem KMU-Segment.</li>
        </ul>
        <h4>Was Sie davon haben</h4>
        <p>Direkter Zugang zu zahlungskräftigen KMU-Mandanten, klare Vermittlerprovision (10% bei Erfolg), keine Exklusivität, keine Mitgliedsgebühr. Unkompliziert per Handschlag.</p>
        <h4>So geht's los</h4>
        <p>Schreiben Sie uns kurz, was Sie machen und welche Klientel Sie bedienen. Wir antworten innert 48 Stunden mit einem Vorschlag für einen Kennenlern-Termin.</p>
        <a href={`mailto:${CONTACT.partnerEmail}?subject=Partneranfrage&body=${encodeURIComponent("Guten Tag Maksym,\n\nich/wir möchten als Partner mit Liakhov Group zusammenarbeiten.\n\nFirma/Name:\nBranche/Spezialisierung:\nWebseite:\nAnliegen / Vorschlag:\n\nMit freundlichen Grüßen\n")}`} className="btn btn-primary btn-arrow" style={{ marginTop: 12, display: "inline-flex" }}>Anfrage senden</a>
      </>
    ),
  }[id];

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" role="dialog" aria-modal="true" aria-label={t("Informationen", "Information")} onClick={(e) => e.stopPropagation()} style={{ position: "relative" }}>
        <button className="modal-close" onClick={onClose} aria-label={t("Schliessen", "Close")}>×</button>
        {content}
      </div>
    </div>
  );
}

/* ---------- Service Detail Modal ---------- */
function ServiceModal({ num, onClose }) {
  const svc = SERVICES.find((s) => s.num === num);
  const det = SERVICE_DETAILS[num];
  if (!svc || !det) return null;
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} style={{ position: "relative", maxWidth: 640 }}>
        <button className="modal-close" onClick={onClose}>×</button>
        <div className="eyebrow" style={{ marginBottom: 10 }}>§ 01 · Service {svc.num}</div>
        <h3>{svc.title}</h3>
        <p style={{ color: "var(--ink-dim)", fontSize: 16, lineHeight: 1.6 }}>{svc.body}</p>
        <h4>{t("Was genau enthalten ist", "What's included")}</h4>
        <ul style={{ paddingLeft: 18, color: "var(--ink-dim)", fontSize: 15, lineHeight: 1.7 }}>
          {det.bullets.map((b, i) => <li key={i}>{b}</li>)}
        </ul>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 22 }}>
          <button className="btn btn-primary btn-arrow" style={{ flex: 1, minWidth: 220 }} onClick={() => {
            onClose();
            window.location.hash = "#pricer";
            setTimeout(() => {
              window.dispatchEvent(new CustomEvent("liakhov:prefill-chat", { detail: { text: det.suggestedPrompt } }));
            }, 600);
          }}>{t("Im Chat anfragen", "Ask in chat")}</button>
          <button type="button" onClick={(e) => { e.preventDefault(); if (window.__openAppointmentModal) window.__openAppointmentModal(); }} className="btn btn-ghost">{t("Termin buchen", "Book appointment")}</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Booking Modal (zweistufiger Akzeptanz-Flow) ---------- */
function BookingModal({ kind, q, onClose, openModal }) {
  const fmt = (n) => new Intl.NumberFormat("de-CH", { style: "currency", currency: "CHF", maximumFractionDigits: 0 }).format(n);
  const [step, setStep] = useState(1);
  const [acceptedDeliverable, setAcceptedDeliverable] = useState(false);
  const [acceptedTerms, setAcceptedTerms] = useState(false);
  const [paymentMethod, setPaymentMethod] = useState(null);
  const [techSpec, setTechSpec] = useState(null);
  const [techSpecId, setTechSpecId] = useState(null);

  const [processing, setProcessing] = useState(false);
  const [paymentInfo, setPaymentInfo] = useState(null);
  const [paymentError, setPaymentError] = useState(null);

  const halfPrice = q ? Math.round(q.finalPrice / 2) : 0;
  const subject = __lang === "en"
    ? `Liakhov order confirmation · ${q?.problem?.slice(0, 60) || "Request"}`
    : `Liakhov-Auftragsbestätigung · ${q?.problem?.slice(0, 60) || "Anfrage"}`;
  const body = q
    ? (__lang === "en"
        ? `Hello Maksym,\n\nI accept the AI-generated quote as binding:\n\nProblem: ${q.problem}\nSolution: ${q.solution}\n\nEnd result (contract subject):\n${q.deliverable || "—"}\n\nScope:\n${(q.scope || []).map((s) => "• " + s).join("\n")}\n\nMarket price: ${fmt(q.marketPrice)}\nUrgency: ${q.urgency || "normal"} (×${q.urgencyMultiplier})\nFixed price total: ${fmt(q.finalPrice)}\n  50% upfront: ${fmt(halfPrice)}\n  50% on acceptance: ${fmt(q.finalPrice - halfPrice)}\n\nPreferred payment method: ${paymentMethod || "—"}\n\nWith the upfront payment I confirm the end-result description as well as the Terms and Service Contract.\n\nBest regards`
        : `Guten Tag Maksym,\n\nich nehme das KI-generierte Angebot verbindlich an:\n\nProblem: ${q.problem}\nLösung: ${q.solution}\n\nEndresultat (Werkvertrags-Gegenstand):\n${q.deliverable || "—"}\n\nUmfang:\n${(q.scope || []).map((s) => "• " + s).join("\n")}\n\nMarktpreis: ${fmt(q.marketPrice)}\nDringlichkeit: ${q.urgency || "normal"} (×${q.urgencyMultiplier})\nFestpreis gesamt: ${fmt(q.finalPrice)}\n  davon 50% Vorauszahlung: ${fmt(halfPrice)}\n  davon 50% nach Abnahme: ${fmt(q.finalPrice - halfPrice)}\n\nGewünschte Zahlmethode: ${paymentMethod || "—"}\n\nMit der Zahlung der Vorauskasse bestätige ich die Endresultat-Beschreibung sowie die AGB und den Werkvertrag.\n\nMit freundlichen Grüßen`)
    : "";
  const mailto = `mailto:${CONTACT.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;

  const PAYMENT_METHODS = [
    { id: "card", label: t("Kreditkarte / Debitkarte", "Credit / debit card"), note: "Visa, Mastercard, Amex" },
    { id: "paypal", label: "PayPal", note: t("International, Käuferschutz", "International, buyer protection") },
    { id: "bank", label: t("Banküberweisung", "Bank transfer"), note: t("SEPA / SIC, 1–2 Werktage", "SEPA / SIC, 1–2 business days") },
    { id: "xrp", label: "XRP (Krypto)", note: t("Sofort, niedrige Gebühren", "Instant, low fees") },
    { id: "cash", label: t("Bargeld vor Ort", "Cash on-site"), note: t("Nach Vereinbarung in Zürich", "By arrangement in Zürich") },
  ];

  if (kind === "email") {
    return (
      <div className="modal-bg" onClick={onClose}>
        <div className="modal" onClick={(e) => e.stopPropagation()} style={{ position: "relative", maxWidth: 560 }}>
          <button className="modal-close" onClick={onClose}>×</button>
          <div className="eyebrow" style={{ marginBottom: 10 }}>{t("Angebot per E-Mail", "Quote by email")}</div>
          <h3>{t("Angebot zusenden.", "Send quote.")}</h3>
          <p style={{ color: "var(--ink-dim)", fontSize: 14 }}>
            {t("Wir senden Ihnen das Angebot per E-Mail. Klicken Sie unten, um Ihre Mail-App vorausgefüllt zu öffnen.", "We will send the quote by email. Click below to open your mail app pre-filled.")}
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 18 }}>
            <a href={mailto} className="btn btn-primary btn-arrow" style={{ flex: 1, minWidth: 200 }} onClick={onClose}>
              {t("E-Mail öffnen", "Open email")}
            </a>
            <a href={`tel:${CONTACT.phoneTel}`} className="btn btn-ghost" onClick={onClose}>{t("Anrufen", "Call")}</a>
          </div>
        </div>
      </div>
    );
  }

  // ---------- TECH-SPEC GATE: Pflicht-Akzeptanz vor Bezahlflow ----------
  if (!techSpec && window.TechSpecModal) {
    return React.createElement(window.TechSpecModal, {
      open: true,
      quote: q,
      onAccept: (spec, id) => { setTechSpec(spec); setTechSpecId(id); },
      onClose,
    });
  }

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} style={{ position: "relative", maxWidth: 640 }}>
        <button className="modal-close" onClick={onClose}>×</button>
        <div className="eyebrow" style={{ marginBottom: 10 }}>
          {t("Schritt", "Step")} {step} {t("von 2", "of 2")} · {step === 1 ? t("Werkvertrag prüfen", "Review contract") : t("Bezahlmethode wählen", "Choose payment method")}
        </div>

        {step === 1 && (
          <>
            <h3>{t("Vertragliche Grundlage prüfen.", "Review contractual basis.")}</h3>
            <p style={{ color: "var(--ink-dim)", fontSize: 14, marginTop: 8 }}>
              Bevor Sie zahlen, prüfen Sie bitte sorgfältig die Beschreibung des Endresultats. Diese Beschreibung wird Vertragsgegenstand des Werkvertrags und definiert verbindlich, was Sie am Ende erhalten.
            </p>

            {q && (
              <div style={{ margin: "16px 0", padding: "16px 18px", border: "1px solid var(--gold)", borderRadius: 10, background: "var(--bg-elev)" }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", color: "var(--gold)", marginBottom: 8, textTransform: "uppercase" }}>{t("Endresultat (Werkvertrags-Gegenstand)", "End result (contract subject)")}</div>
                <div style={{ color: "var(--ink)", fontSize: 15, lineHeight: 1.55 }}>
                  {q.deliverable || `${q.solution} (Details: ${(q.scope || []).join("; ")})`}
                </div>
                <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--line-strong)", color: "var(--ink-dim)", fontSize: 13 }}>
                  <b style={{ color: "var(--ink)" }}>{t("Umfang:", "Scope:")}</b>
                  <ul style={{ margin: "6px 0 0 18px", padding: 0 }}>
                    {(q.scope || []).map((s, i) => <li key={i}>{s}</li>)}
                  </ul>
                </div>
                <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--line-strong)", color: "var(--gold)", fontFamily: "var(--mono)", fontSize: 13, letterSpacing: "0.04em" }}>
                  Festpreis: {fmt(q.finalPrice)}<br />
                  Vorauszahlung (50%): {fmt(halfPrice)}<br />
                  Restzahlung nach Abnahme (50%): {fmt(q.finalPrice - halfPrice)}
                </div>
              </div>
            )}

            <div style={{ display: "flex", flexDirection: "column", gap: 10, margin: "20px 0" }}>
              <label style={{ display: "flex", alignItems: "flex-start", gap: 10, cursor: "pointer", fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.5 }}>
                <input type="checkbox" checked={acceptedDeliverable} onChange={(e) => setAcceptedDeliverable(e.target.checked)} style={{ marginTop: 3, accentColor: "var(--gold)", cursor: "pointer" }} />
                <span>{t("Ich bestätige, dass die Beschreibung des Endresultats meinen Erwartungen entspricht und Vertragsgegenstand wird.", "I confirm that the description of the end result matches my expectations and becomes part of the contract.")}</span>
              </label>
              <label style={{ display: "flex", alignItems: "flex-start", gap: 10, cursor: "pointer", fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.5 }}>
                <input type="checkbox" checked={acceptedTerms} onChange={(e) => setAcceptedTerms(e.target.checked)} style={{ marginTop: 3, accentColor: "var(--gold)", cursor: "pointer" }} />
                <span>
                  {t("Ich akzeptiere die", "I accept the")}{" "}
                  <a href="#" onClick={(e) => { e.preventDefault(); openModal && openModal("agb"); }} style={{ color: "var(--gold)", textDecoration: "underline" }}>{t("AGB", "Terms")}</a>
                  {" "}{t("und den", "and the")}{" "}
                  <a href="#" onClick={(e) => { e.preventDefault(); openModal && openModal("werkvertrag"); }} style={{ color: "var(--gold)", textDecoration: "underline" }}>{t("Werkvertrag", "Service contract")}</a>
                  . {t("Mit der nachfolgenden Zahlung der Vorauskasse kommt der Vertrag verbindlich zustande.", "Upon the upfront payment that follows, the contract becomes binding.")}
                </span>
              </label>
            </div>

            <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
              <button className="btn btn-ghost" onClick={onClose} style={{ flex: 0 }}>{t("Abbrechen", "Cancel")}</button>
              <button
                className="btn btn-primary btn-arrow"
                style={{ flex: 1, opacity: (acceptedDeliverable && acceptedTerms) ? 1 : 0.4, cursor: (acceptedDeliverable && acceptedTerms) ? "pointer" : "not-allowed" }}
                disabled={!acceptedDeliverable || !acceptedTerms}
                onClick={() => setStep(2)}
              >
                {t("Weiter zur Bezahlmethode", "Continue to payment")}
              </button>
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <h3>{t("Wie möchten Sie 50% Vorauskasse leisten?", "How would you like to pay 50% upfront?")}</h3>
            <p style={{ color: "var(--ink-dim)", fontSize: 14, marginTop: 8 }}>
              {t("Heute fällig:", "Due today:")} <b style={{ color: "var(--gold)" }}>{fmt(halfPrice)}</b> ({t("50% des Festpreises", "50% of fixed price")} {fmt(q?.finalPrice || 0)}).
              {t("Die restlichen", "The remaining")} {fmt((q?.finalPrice || 0) - halfPrice)} {t("zahlen Sie nach erfolgreicher Abnahme der Arbeit.", "you pay after successful acceptance of the work.")}
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, margin: "18px 0" }}>
              {PAYMENT_METHODS.map((m) => (
                <button
                  key={m.id}
                  type="button"
                  onClick={() => setPaymentMethod(m.id)}
                  style={{
                    padding: "12px 14px",
                    borderRadius: 8,
                    border: paymentMethod === m.id ? "1px solid var(--gold)" : "1px solid var(--line-strong)",
                    background: paymentMethod === m.id ? "var(--bg-elev)" : "transparent",
                    color: "var(--ink)",
                    cursor: "pointer",
                    textAlign: "left",
                    transition: "border-color .15s, background .15s",
                  }}
                >
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{m.label}</div>
                  <div style={{ fontSize: 11, color: "var(--ink-mute)", marginTop: 3 }}>{m.note}</div>
                </button>
              ))}
            </div>

            <div style={{ padding: "12px 14px", borderRadius: 8, background: "var(--bg-elev)", border: "1px solid var(--line)", fontSize: 12, color: "var(--ink-mute)", lineHeight: 1.55, marginTop: 10 }}>
              ⚠️ Live-Bezahlung wird zurzeit eingerichtet. Bis zur Aktivierung melden wir uns nach Klick auf <em>«Verbindlich bestellen»</em> {t("innerhalb von 24 Stunden mit den Zahlungsdetails der gewählten Methode.", "within 24 hours with the payment details of the chosen method.")}
            </div>

            <div style={{ display: "flex", gap: 10, marginTop: 22, flexWrap: "wrap" }}>
              <button className="btn btn-ghost" onClick={() => setStep(1)} style={{ flex: 0 }}>{t("Zurück", "Back")}</button>
              <button
                type="button"
                disabled={!paymentMethod || processing}
                onClick={async () => {
                  if (!paymentMethod) return;
                  setPaymentError(null);
                  // Bargeld → keine API, einfach Mail öffnen
                  if (paymentMethod === "cash") {
                    window.location.href = mailto;
                    setTimeout(onClose, 200);
                    return;
                  }
                  // Stripe-Methoden → Checkout-Session anlegen, dann redirect
                  if (["card", "paypal"].includes(paymentMethod)) {
                    setProcessing(true);
                    try {
                      const r = await fetch("/api/create-checkout-session", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({ quote: q, paymentMethod }),
                      });
                      const data = await r.json();
                      if (data.capacityFull) { setPaymentError(data.message || t("Aktuell ausgelastet.", "Currently at capacity.")); setProcessing(false); return; }
                    if (!r.ok || !data.url) throw new Error(data.error || t("Stripe-Session konnte nicht erstellt werden", "Could not create Stripe session"));
                      window.location.href = data.url;
                    } catch (e) {
                      setProcessing(false);
                      setPaymentError(e.message + t(" — bitte E-Mail nutzen oder andere Methode wählen.", " — please use email or choose another method."));
                    }
                    return;
                  }
                  // Banküberweisung → SEPA-QR-Daten holen, Step 3 anzeigen
                  if (paymentMethod === "bank") {
                    setProcessing(true);
                    try {
                      const r = await fetch("/api/swiss-qr-bill", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({ quote: q }),
                      });
                      const data = await r.json();
                      if (!r.ok) throw new Error(data.error || t("SEPA-Daten konnten nicht erstellt werden", "Could not generate SEPA data"));
                      setPaymentInfo({ kind: "bank", ...data });
                      setStep(3);
                    } catch (e) {
                      setPaymentError(e.message);
                    } finally {
                      setProcessing(false);
                    }
                    return;
                  }
                  // XRP → XRP-Daten holen, Step 3 anzeigen
                  if (paymentMethod === "xrp") {
                    setProcessing(true);
                    try {
                      const r = await fetch("/api/xrp-payment-info", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({ quote: q }),
                      });
                      const data = await r.json();
                      if (!r.ok) throw new Error(data.error || t("XRP-Daten konnten nicht erstellt werden", "Could not generate XRP data"));
                      setPaymentInfo({ kind: "xrp", ...data });
                      setStep(3);
                    } catch (e) {
                      setPaymentError(e.message);
                    } finally {
                      setProcessing(false);
                    }
                    return;
                  }
                }}
                className="btn btn-primary btn-arrow"
                style={{ flex: 1, minWidth: 220, opacity: (paymentMethod && !processing) ? 1 : 0.4, cursor: (paymentMethod && !processing) ? "pointer" : "not-allowed" }}
              >
                {processing ? t("Bitte warten…", "Please wait…") : t("Verbindlich bestellen", "Order bindingly")}
              </button>
              {paymentError && (
                <div style={{ marginTop: 10, padding: "10px 12px", border: "1px solid var(--danger)", borderRadius: 6, background: "rgba(210,120,96,0.08)", color: "var(--danger)", fontSize: 12, width: "100%" }}>
                  ⚠️ {paymentError}
                </div>
              )}
            </div>

            <div style={{ marginTop: 14, fontSize: 11, color: "var(--ink-mute)", textAlign: "center" }}>
              Mit der Zahlung der Vorauskasse akzeptieren Sie verbindlich die AGB, den Werkvertrag und die Beschreibung des Endresultates.
            </div>
          </>
        )}

        {step === 3 && paymentInfo && (
          <>
            <h3>{t("So leisten Sie Ihre Vorauszahlung.", "Here's how to make your upfront payment.")}</h3>
            <p style={{ color: "var(--ink-dim)", fontSize: 14, marginTop: 8 }}>
              {t("Bitte überweisen Sie den unten genannten Betrag inklusive der Referenz / des Tags. Sobald die Zahlung eingegangen ist, melden wir uns innert 24 Stunden mit den Onboarding-Unterlagen.", "Please transfer the amount below including the reference / tag. As soon as payment arrives, we will get back to you within 24 hours with the onboarding documents.")}
            </p>

            {paymentInfo.kind === "bank" && (
              <div style={{ margin: "16px 0", padding: "16px 18px", border: "1px solid var(--gold)", borderRadius: 10, background: "var(--bg-elev)", fontSize: 14, lineHeight: 1.6 }}>
                <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 18px", color: "var(--ink-dim)" }}>
                  <span style={{ color: "var(--ink-mute)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>{t("Empfänger", "Recipient")}</span><span style={{ color: "var(--ink)" }}>{paymentInfo.holder}</span>
                  <span style={{ color: "var(--ink-mute)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>IBAN</span><span style={{ color: "var(--ink)", fontFamily: "var(--mono)", letterSpacing: "0.04em" }}>{paymentInfo.iban}</span>
                  {paymentInfo.bic && (<><span style={{ color: "var(--ink-mute)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>BIC</span><span style={{ color: "var(--ink)", fontFamily: "var(--mono)" }}>{paymentInfo.bic}</span></>)}
                  <span style={{ color: "var(--ink-mute)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>{t("Betrag", "Amount")}</span><span style={{ color: "var(--gold)", fontFamily: "var(--mono)", fontWeight: 600 }}>CHF {paymentInfo.amountChf}</span>
                  <span style={{ color: "var(--ink-mute)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>{t("Verwendungszweck", "Reference")}</span><span style={{ color: "var(--gold)", fontFamily: "var(--mono)", fontWeight: 600 }}>{paymentInfo.reference}</span>
                </div>
                <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--line-strong)", display: "flex", gap: 16, alignItems: "center" }}>
                  <img src={paymentInfo.qrUrl} alt="SEPA QR-Code" style={{ width: 130, height: 130, borderRadius: 6, background: "white", padding: 6 }} />
                  <div style={{ fontSize: 12, color: "var(--ink-mute)", lineHeight: 1.55 }}>
                    {t("Den QR-Code mit Ihrer Banking-App scannen — Empfänger, IBAN, Betrag und Referenz werden automatisch übernommen.", "Scan the QR code with your banking app — recipient, IBAN, amount and reference are filled in automatically.")}
                  </div>
                </div>
              </div>
            )}

            {paymentInfo.kind === "xrp" && (
              <div style={{ margin: "16px 0", padding: "16px 18px", border: "1px solid var(--gold)", borderRadius: 10, background: "var(--bg-elev)", fontSize: 14, lineHeight: 1.6 }}>
                <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 18px", color: "var(--ink-dim)" }}>
                  <span style={{ color: "var(--ink-mute)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>{t("Wallet", "Wallet")}</span><span style={{ color: "var(--ink)", fontFamily: "var(--mono)", fontSize: 12, wordBreak: "break-all" }}>{paymentInfo.walletAddress}</span>
                  <span style={{ color: "var(--ink-mute)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>{t("Destination Tag", "Destination Tag")}</span><span style={{ color: "var(--gold)", fontFamily: "var(--mono)", fontWeight: 600 }}>{paymentInfo.destinationTag}</span>
                  <span style={{ color: "var(--ink-mute)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>{t("Betrag", "Amount")}</span><span style={{ color: "var(--gold)", fontFamily: "var(--mono)", fontWeight: 600 }}>{paymentInfo.xrpAmount} XRP</span>
                  <span style={{ color: "var(--ink-mute)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>{t("Kurs", "Rate")}</span><span style={{ color: "var(--ink-dim)", fontFamily: "var(--mono)" }}>1 XRP ≈ CHF {paymentInfo.xrpChfRate} (inkl. 1% Puffer)</span>
                </div>
                <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--line-strong)", display: "flex", gap: 16, alignItems: "center" }}>
                  <img src={paymentInfo.qrUrl} alt="XRP QR-Code" style={{ width: 130, height: 130, borderRadius: 6, background: "white", padding: 6 }} />
                  <div style={{ fontSize: 12, color: "var(--ink-mute)", lineHeight: 1.55 }}>
                    {t("QR mit Xaman / Trust Wallet scannen — Adresse, Destination Tag und XRP-Betrag werden vorausgefüllt.", "Scan QR with Xaman / Trust Wallet — address, destination tag and XRP amount are pre-filled.")}
                    {" "}<b>{t("Ohne Destination Tag", "Without Destination Tag")}</b> {t("kann die Zahlung nicht zugeordnet werden.", "the payment cannot be matched.")}
                  </div>
                </div>
              </div>
            )}

            <div style={{ padding: "10px 12px", borderRadius: 8, background: "var(--bg-elev)", border: "1px solid var(--line)", fontSize: 12, color: "var(--ink-mute)", lineHeight: 1.55, marginTop: 10 }}>
              {paymentInfo.note}
            </div>

            <div style={{ display: "flex", gap: 10, marginTop: 22, flexWrap: "wrap" }}>
              <button className="btn btn-ghost" onClick={() => { setStep(2); setPaymentInfo(null); }} style={{ flex: 0 }}>{t("Zurück", "Back")}</button>
              <button className="btn btn-primary" style={{ flex: 1, minWidth: 220 }} onClick={onClose}>{t("Verstanden, schließen", "Understood, close")}</button>
            </div>

            <div style={{ marginTop: 14, fontSize: 11, color: "var(--ink-mute)", textAlign: "center" }}>
              Mit der Zahlung der Vorauskasse akzeptieren Sie verbindlich die AGB, den Werkvertrag und die Beschreibung des Endresultates.
            </div>
          </>
        )}
      </div>
    </div>
  );
}

/* ---------- Tweaks ---------- */
function AppTweaks({ tweaks, setTweak }) {
  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Theme" />
      <window.TweakToggle label="Heller Hintergrund" value={tweaks.lightTheme}
        onChange={(v) => setTweak("lightTheme", v)} />
      <window.TweakSection label="Akzentfarbe" />
      <window.TweakSlider label="Hue (oklch)" value={tweaks.accentHue} min={0} max={360} step={1}
        onChange={(v) => setTweak("accentHue", v)} />
      <window.TweakSection label="3D-Intensität" />
      <window.TweakSlider label="Stärke" value={tweaks.three3dIntensity} min={0} max={3} step={0.1}
        onChange={(v) => setTweak("three3dIntensity", v)} />
    </window.TweaksPanel>
  );
}

/* ---------- App ---------- */
function AppointmentModal({ open, onClose }) {
  const [step, setStep] = useState("form");
  const [mode, setMode] = useState("online");
  const [name, setName] = useState("");
  const [gender, setGender] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [address, setAddress] = useState("");
  const [description, setDescription] = useState("");
  const [urgency, setUrgency] = useState("normal");
  const [slot1Date, setSlot1Date] = useState("");
  const [slot1Time, setSlot1Time] = useState("");
  const [slot2Date, setSlot2Date] = useState("");
  const [slot2Time, setSlot2Time] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(null);
  const [result, setResult] = useState(null);

  if (!open) return null;

  const today = new Date().toISOString().slice(0, 10);
  const timeOptions = ["09:00", "10:00", "11:00", "12:00", "14:00", "15:00", "16:00", "17:00"];

  const submitDisabled = submitting
    || !email.includes("@") || !phone || phone.length < 6
    || !name || name.length < 2 || !gender
    || description.length < 8
    || !slot1Date || !slot1Time || !slot2Date || !slot2Time
    || (mode === "onsite" && address.length < 5);

  function close() {
    setStep("form"); setName(""); setGender(""); setEmail(""); setPhone(""); setAddress("");
    setDescription(""); setUrgency("normal"); setMode("online");
    setSlot1Date(""); setSlot1Time(""); setSlot2Date(""); setSlot2Time("");
    setSubmitting(false); setError(null); setResult(null);
    onClose();
  }

  async function submit() {
    if (submitDisabled) return;
    if (slot1Date === slot2Date && slot1Time === slot2Time) {
      setError(t("Die beiden Wunschtermine müssen unterschiedlich sein.", "The two preferred dates must be different."));
      return;
    }
    setSubmitting(true); setError(null);
    try {
      const r = await fetch("/api/book-appointment", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          email, phone, name, gender, description, urgency,
          address: mode === "onsite" ? address : "",
          mode,
          lang: __lang,
          slot1: { date: slot1Date, time: slot1Time },
          slot2: { date: slot2Date, time: slot2Time },
        }),
      });
      const data = await r.json();
      if (!r.ok || !data.ok) {
        setError(data.error || t("Fehler bei der Buchung. Bitte erneut versuchen.", "Booking failed. Please try again."));
        setSubmitting(false);
        return;
      }
      setResult(data); setStep("done"); setSubmitting(false);
    } catch (e) {
      setError(t("Verbindungsfehler. Bitte erneut versuchen.", "Connection error. Please try again."));
      setSubmitting(false);
    }
  }

  const inputStyle = { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--line, rgba(255,255,255,0.18))", background: "rgba(255,255,255,0.04)", color: "inherit", fontSize: "0.95em", fontFamily: "inherit", boxSizing: "border-box" };

  return (
    <div onClick={() => { if (!submitting) close(); }} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)", zIndex: 1100, display: "flex", alignItems: "flex-start", justifyContent: "center", padding: 20, overflowY: "auto" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: "var(--bg, #1a1a1a)", color: "var(--ink, #f0f0f0)", maxWidth: 720, width: "100%", borderRadius: 18, padding: 32, marginTop: 30, marginBottom: 30, boxShadow: "0 16px 60px rgba(0,0,0,0.5)" }}>
        {step === "form" ? (
          <>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
              <div>
                <div style={{ fontSize: "0.78em", letterSpacing: "0.12em", textTransform: "uppercase", color: "#C8A35A", marginBottom: 4 }}>{t("Termin buchen", "Book appointment")}</div>
                <h3 style={{ margin: 0, fontSize: "1.55em" }}>{t("Persönliches Beratungsgespräch", "Personal consultation")}</h3>
              </div>
              <button onClick={() => { if (!submitting) close(); }} aria-label={t("Schließen", "Close")} style={{ background: "transparent", border: "none", color: "inherit", fontSize: "1.6em", cursor: "pointer", padding: "4px 8px", lineHeight: 1 }}>×</button>
            </div>

            <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
              <button type="button" onClick={() => setMode("online")} style={{ flex: 1, padding: "12px", borderRadius: 8, border: mode === "online" ? "2px solid #C8A35A" : "1px solid rgba(255,255,255,0.18)", background: mode === "online" ? "rgba(200,163,90,0.12)" : "transparent", color: "inherit", cursor: "pointer", fontWeight: mode === "online" ? 600 : 400 }}>{t("🌐 Online-Termin", "🌐 Online meeting")}</button>
              <button type="button" onClick={() => setMode("onsite")} style={{ flex: 1, padding: "12px", borderRadius: 8, border: mode === "onsite" ? "2px solid #C8A35A" : "1px solid rgba(255,255,255,0.18)", background: mode === "onsite" ? "rgba(200,163,90,0.12)" : "transparent", color: "inherit", cursor: "pointer", fontWeight: mode === "onsite" ? 600 : 400 }}>{t("📍 Vor Ort beim Kunden", "📍 On-site at customer")}</button>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 10 }}>
              <input type="text" placeholder={t("Vor- und Nachname *", "First and last name *")} value={name} onChange={(e) => setName(e.target.value)} style={inputStyle} />
              <select value={gender} onChange={(e) => setGender(e.target.value)} style={inputStyle}>
                <option value="">{t("Geschlecht *", "Gender *")}</option>
                <option value="female">{t("Weiblich", "Female")}</option>
                <option value="male">{t("Männlich", "Male")}</option>
                <option value="diverse">{t("Divers", "Other")}</option>
              </select>
              <input type="email" placeholder={t("E-Mail-Adresse *", "Email address *")} value={email} onChange={(e) => setEmail(e.target.value)} style={inputStyle} />
              <input type="tel" placeholder={t("Telefonnummer *", "Phone number *")} value={phone} onChange={(e) => setPhone(e.target.value)} style={inputStyle} />
            </div>

            {mode === "onsite" && (
              <input type="text" placeholder={t("Adresse für Vor-Ort-Termin (Strasse, PLZ, Ort) *", "Address for on-site meeting (street, ZIP, city) *")} value={address} onChange={(e) => setAddress(e.target.value)} style={{ ...inputStyle, marginBottom: 10 }} />
            )}

            <textarea placeholder={t("Beschreiben Sie Ihr Anliegen kurz (mind. 8 Zeichen) *", "Briefly describe your request (min. 8 characters) *")} value={description} onChange={(e) => setDescription(e.target.value)} rows={4} style={{ ...inputStyle, marginBottom: 12, resize: "vertical" }} />

            <div style={{ marginBottom: 8, fontSize: "0.85em", opacity: 0.75 }}>{t("Wie dringend?", "How urgent?")}</div>
            <div style={{ display: "flex", gap: 6, marginBottom: 18, flexWrap: "wrap" }}>
              {[["entspannt", t("Entspannt", "Relaxed")], ["normal", t("Normal", "Normal")], ["dringend", t("Dringend", "Urgent")], ["asap", "ASAP"]].map(([k, l]) => (
                <button key={k} type="button" onClick={() => setUrgency(k)} style={{ flex: "1 1 auto", minWidth: 110, padding: "8px 10px", borderRadius: 8, border: urgency === k ? "2px solid #C8A35A" : "1px solid rgba(255,255,255,0.18)", background: urgency === k ? "rgba(200,163,90,0.12)" : "transparent", color: "inherit", cursor: "pointer", fontSize: "0.88em", fontWeight: urgency === k ? 700 : 400 }}>{l}</button>
              ))}
            </div>
            <div style={{ padding: 14, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 10, marginBottom: 10 }}>
              <div style={{ marginBottom: 8, fontSize: "0.9em", fontWeight: 600 }}>{t("1. Wunschtermin *", "1st preferred date *")}</div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                <input type="date" min={today} value={slot1Date} onChange={(e) => setSlot1Date(e.target.value)} style={{ ...inputStyle, flex: "1 1 180px" }} />
                <select value={slot1Time} onChange={(e) => setSlot1Time(e.target.value)} style={{ ...inputStyle, flex: "1 1 140px" }}>
                  <option value="">{t("Uhrzeit", "Time")}</option>
                  {timeOptions.map((t) => (<option key={t} value={t}>{t}</option>))}
                </select>
              </div>
            </div>

            <div style={{ padding: 14, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 10, marginBottom: 18 }}>
              <div style={{ marginBottom: 8, fontSize: "0.9em", fontWeight: 600 }}>{t("2. Wunschtermin (alternativ) *", "2nd preferred date (alternative) *")}</div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                <input type="date" min={today} value={slot2Date} onChange={(e) => setSlot2Date(e.target.value)} style={{ ...inputStyle, flex: "1 1 180px" }} />
                <select value={slot2Time} onChange={(e) => setSlot2Time(e.target.value)} style={{ ...inputStyle, flex: "1 1 140px" }}>
                  <option value="">{t("Uhrzeit", "Time")}</option>
                  {timeOptions.map((t) => (<option key={t} value={t}>{t}</option>))}
                </select>
              </div>
              <div style={{ fontSize: "0.78em", opacity: 0.65, marginTop: 8 }}>{t("Zwei verschiedene Termine geben mir Flexibilität bei der Planung.", "Two different dates give me flexibility in scheduling.")}</div>
            </div>

            <div style={{ padding: 14, background: "rgba(200,163,90,0.08)", border: "1px solid rgba(200,163,90,0.3)", borderRadius: 10, marginBottom: 18, fontSize: "0.86em", lineHeight: 1.55 }}>
              <div style={{ fontWeight: 700, marginBottom: 6, color: "#C8A35A" }}>{t("Tarif & Bedingungen", "Rate & conditions")}</div>
              <div style={{ marginBottom: 4 }}>· <strong>50.– CHF/Std. + 8.1% MwSt</strong> = 54.05 CHF brutto/Stunde</div>
              <div style={{ marginBottom: 4 }}>· {t("Mindestens 1 Stunde Beratung pro Termin", "Minimum 1 hour consultation per meeting")}</div>
              {mode === "onsite" && (<div style={{ marginBottom: 4 }}>· {t("Wegspesen ab Balberstrasse 58, 8038 Zürich werden in jedem Fall verrechnet", "Travel from Balberstrasse 58, 8038 Zürich is always billed")}</div>)}
              <div style={{ marginBottom: 4 }}>{t("· Wenn aus dem Gespräch ", "· If ")}<strong>{t("ein", "any")}</strong>{t(" Auftrag entsteht: Beratungs-Honorar entfällt.", " order results from the meeting, the consultation fee is waived.")}{mode === "onsite" ? t(" Bitte beachten, dass die Fahrtkosten zum Kunden auch in Rechnung gestellt werden.", " Please note that travel costs to the customer are also billed.") : ""}</div>
              <div style={{ marginTop: 8, opacity: 0.85 }}>{t("Mit dem Klick auf „Verbindlich buchen\" akzeptieren Sie diese Konditionen.", "By clicking \"Book bindingly\" you accept these conditions.")}</div>
            </div>

            {error && (<div style={{ padding: 10, marginBottom: 12, background: "rgba(220,50,50,0.12)", color: "#ff8080", borderRadius: 8, fontSize: "0.9em" }}>{error}</div>)}

            <button onClick={submit} disabled={submitDisabled} style={{ width: "100%", padding: "14px", borderRadius: 10, border: "none", background: "#C8A35A", color: "#0a0a0a", fontWeight: 700, fontSize: "1.05em", cursor: submitDisabled ? "not-allowed" : "pointer", opacity: submitDisabled ? 0.55 : 1 }}>
              {submitting ? t("Wird verbindlich gebucht…", "Booking…") : t("Verbindlich buchen", "Book bindingly")}
            </button>
          </>
        ) : (
          <>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
              <h3 style={{ margin: 0, fontSize: "1.4em" }}>{result?.conditional ? t("Buchung eingegangen", "Booking received") : t("Termin gebucht", "Appointment booked")}</h3>
              <button onClick={close} aria-label={t("Schließen", "Close")} style={{ background: "transparent", border: "none", color: "inherit", fontSize: "1.6em", cursor: "pointer", padding: "4px 8px", lineHeight: 1 }}>×</button>
            </div>
            {result?.conditional ? (
              <div style={{ padding: 22, background: "rgba(200,163,90,0.15)", border: "2px solid #C8A35A", borderRadius: 12, marginBottom: 18 }}>
                <div style={{ color: "#C8A35A", fontWeight: 700, marginBottom: 8, fontSize: "1.05em" }}>{t("⏳ Bedingte Buchung — Maksym meldet sich persönlich", "⏳ Conditional booking — Maksym will reach out personally")}</div>
                <p style={{ marginTop: 0, marginBottom: 8 }}>{result.message}</p>
                <p style={{ marginBottom: 0, fontSize: "0.9em", opacity: 0.85 }}><strong>{t("Hinweis:", "Note:")}</strong> {result.conditionalReason}</p>
              </div>
            ) : (
              <div style={{ padding: 22, background: "rgba(80,200,120,0.10)", border: "1px solid rgba(80,200,120,0.4)", borderRadius: 12, marginBottom: 18 }}>
                <div style={{ color: "#5CC878", fontWeight: 700, marginBottom: 8, fontSize: "1.05em" }}>✓ Termin fest gebucht</div>
                <p style={{ marginTop: 0, marginBottom: 0 }}>{result?.message}</p>
              </div>
            )}
            <p style={{ fontSize: "0.86em", opacity: 0.85, marginBottom: 6 }}><strong>{t("Termin:", "Appointment:")}</strong> {slot1Date} {t("um", "at")} {slot1Time}{result?.conditional ? " (" + t("oder", "or") + " " + slot2Date + " " + t("um", "at") + " " + slot2Time + ")" : ""}</p>
            <p style={{ fontSize: "0.86em", opacity: 0.85, marginBottom: 6 }}><strong>{t("Modus:", "Mode:")}</strong> {mode === "online" ? t("Online", "Online") : t("Vor Ort beim Kunden", "On-site at customer")}</p>
            <p style={{ fontSize: "0.86em", opacity: 0.7, marginBottom: 16, fontFamily: "var(--mono, monospace)" }}><strong>{t("Buchungs-ID:", "Booking ID:")}</strong> {result?.bookingId}</p>
            <p style={{ fontSize: "0.86em", opacity: 0.85, marginBottom: 18 }}>{t("Eine Bestätigung wurde an", "A confirmation was sent to")} <strong>{email}</strong> {t("versendet (Posteingang oder Spam-Ordner).", "(inbox or spam folder).")}</p>
            <button onClick={close} style={{ width: "100%", padding: "12px", borderRadius: 10, border: "1px solid var(--line, rgba(255,255,255,0.18))", background: "transparent", color: "inherit", cursor: "pointer", fontWeight: 600 }}>{t("Schließen", "Close")}</button>
          </>
        )}
      </div>
    </div>
  );
}

function AnnouncementBanner() {
  const [shown, setShown] = useState(false);
  const [dismissed, setDismissed] = useState(true);
  useEffect(() => {
    try {
      const isDismissed = localStorage.getItem("lhg_announce_dismissed") === "1";
      if (isDismissed) return;
    } catch(e) {}
    setDismissed(false);
    const id = setTimeout(() => setShown(true), 150);
    return () => clearTimeout(id);
  }, []);
  function dismiss() {
    setShown(false);
    try { localStorage.setItem("lhg_announce_dismissed", "1"); } catch(e) {}
    setTimeout(() => setDismissed(true), 450);
  }
  if (dismissed) return null;
  return (
    <div
      role="status"
      aria-live="polite"
      style={{
        position: "fixed",
        top: 0, left: 0, right: 0,
        zIndex: 9000,
        background: "linear-gradient(90deg, #C8A35A 0%, #d9a441 50%, #C8A35A 100%)",
        color: "#1a1408",
        padding: "10px 44px 10px 20px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 12,
        fontFamily: "var(--mono)",
        fontSize: 13,
        letterSpacing: "0.06em",
        textAlign: "center",
        boxShadow: "0 2px 14px rgba(0,0,0,0.18)",
        transform: shown ? "translateY(0)" : "translateY(-100%)",
        opacity: shown ? 1 : 0,
        transition: "transform .55s cubic-bezier(.2,.7,.3,1), opacity .35s ease",
        pointerEvents: shown ? "auto" : "none",
      }}
    >
      <span style={{ fontWeight: 700, textTransform: "uppercase" }}>
        {t("KI-Optimierungen für Ihren Betrieb!", "AI optimisations for your business!")}
      </span>
      <button
        onClick={dismiss}
        aria-label={t("Schließen", "Close")}
        style={{
          position: "absolute",
          right: 12,
          top: "50%",
          transform: "translateY(-50%)",
          background: "transparent",
          border: "none",
          color: "#1a1408",
          fontSize: 22,
          lineHeight: 1,
          cursor: "pointer",
          padding: "2px 8px",
          fontWeight: 700,
          opacity: 0.75,
        }}
      >×</button>
    </div>
  );
}

function App() {
  const [modal, setModal] = useState(null);
  const [appointmentOpen, setAppointmentOpen] = useState(false);
  useEffect(() => { window.__openAppointmentModal = () => setAppointmentOpen(true); return () => { delete window.__openAppointmentModal; }; }, []);
  const [serviceNum, setServiceNum] = useState(null);
  const [booking, setBooking] = useState(null); // { kind, q }
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const onSvc = (e) => setServiceNum(e.detail?.num || null);
    const onBook = (e) => setBooking(e.detail || null);
    window.addEventListener("liakhov:open-service", onSvc);
    window.addEventListener("liakhov:open-booking", onBook);
    return () => {
      window.removeEventListener("liakhov:open-service", onSvc);
      window.removeEventListener("liakhov:open-booking", onBook);
    };
  }, []);

  useEffect(() => {
    if (window.__setHero3dIntensity) window.__setHero3dIntensity(tweaks.three3dIntensity);
    document.documentElement.style.setProperty("--gold",
      `oklch(${tweaks.lightTheme ? 58 : 72}% 0.12 ${tweaks.accentHue})`);
    if (tweaks.lightTheme) {
      document.documentElement.setAttribute("data-theme", "light");
    } else {
      document.documentElement.removeAttribute("data-theme");
    }
  }, [tweaks]);

  const toggleTheme = () => setTweak("lightTheme", !tweaks.lightTheme);

  return (
    <>
      <AnnouncementBanner />
      <Nav lightTheme={tweaks.lightTheme} onToggleTheme={toggleTheme} />
      <Hero />
      <Pricer />
      {window.NumbersCounter && React.createElement(window.NumbersCounter)}
      <Services />
      {window.HowIWork && React.createElement(window.HowIWork)}
      <FixedPrices />
      {window.Showcase && React.createElement(window.Showcase)}
      {window.Testimonials && React.createElement(window.Testimonials)}
      {window.LeadMagnet && React.createElement(window.LeadMagnet)}
      <About />
      {window.FAQ && React.createElement(window.FAQ)}
      {window.ToolsWall && React.createElement(window.ToolsWall)}
      <Footer openModal={setModal} />
      {window.StickyCTA && React.createElement(window.StickyCTA)}
      {modal && <Modal id={modal} onClose={() => setModal(null)} />}
      <AppointmentModal open={appointmentOpen} onClose={() => setAppointmentOpen(false)} />
      {serviceNum && <ServiceModal num={serviceNum} onClose={() => setServiceNum(null)} />}
      {booking && <BookingModal kind={booking.kind} q={booking.q} onClose={() => setBooking(null)} openModal={setModal} />}
      {/* Tweaks-Panel nur auf nicht-öffentlichen Hosts sichtbar: localhost oder *.pages.dev
          mit ?dev=1. Auf der Produktionsdomain (liakhov-group.com) bleibt es aus. */}
      {(typeof window !== "undefined" && (function () {
        const h = window.location.hostname;
        const isDevHost = /^(localhost|127\.0\.0\.1)$/.test(h) || /\.pages\.dev$/.test(h);
        if (!isDevHost) return false;
        return new URLSearchParams(window.location.search).has("dev") || /^(localhost|127\.0\.0\.1)$/.test(h);
      })()) && <AppTweaks tweaks={tweaks} setTweak={setTweak} />}
      <LiveBubble />
    </>
  );
}

/* ---------- Live-Bubble auf Hauptseite (Verknüpfung zur Live-Beratung-Seite) ---------- */
function LiveBubble() {
  const [hidden, setHidden] = useState(false);
  useEffect(() => {
    try { if (localStorage.getItem("lhg_live_bubble_dismissed") === "1") setHidden(true); } catch (e) {}
  }, []);
  if (hidden) return null;
  const liveUrl = __lang === "en" ? "https://yourliveconsultation.com/" : "https://deineliveberatung.com/";
  const onDismiss = (e) => { e.preventDefault(); e.stopPropagation(); try { localStorage.setItem("lhg_live_bubble_dismissed", "1"); } catch (err) {} setHidden(true); };
  return (
    <a className="live-bubble live-bubble-cta" href={liveUrl} target="_blank" rel="noopener noreferrer" title={t("Live-Beratung in neuem Fenster öffnen", "Open live consultation in new window")}>
      <span className="live-bubble-dot" />
      <span>{t("Live-Beratung · 2 Min.", "Live Consultation · 2 min")}</span>
      <span className="live-bubble-close" onClick={onDismiss} role="button" aria-label={t("Verbergen", "Hide")}>×</span>
    </a>
  );
}

/* ---------- Live-Beratung · Standalone Chat (deineliveberatung.com / yourliveconsultation.com) ---------- */
function LiveAdvisoryApp() {
  const [mode, setMode] = useState("fullscreen");
  const [isMobile, setIsMobile] = useState(typeof window !== "undefined" && window.innerWidth < 720);
  const [modal, setModal] = useState(null);
  const [booking, setBooking] = useState(null);
  const [appointmentOpen, setAppointmentOpen] = useState(false);

  useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 720);
    window.addEventListener("resize", onResize);
    document.documentElement.setAttribute("data-theme", "light");
    document.body.classList.add("live-body");
    const onBook = (e) => setBooking(e.detail || null);
    window.addEventListener("liakhov:open-booking", onBook);
    window.__openAppointmentModal = () => setAppointmentOpen(true);
    return () => {
      window.removeEventListener("resize", onResize);
      window.removeEventListener("liakhov:open-booking", onBook);
      document.body.classList.remove("live-body");
      delete window.__openAppointmentModal;
    };
  }, []);

  const effectiveMode = isMobile ? "fullscreen" : mode;
  const switchLang = () => { if (typeof window.setLang === "function") window.setLang(__lang === "en" ? "de" : "en"); };

  if (effectiveMode === "minimized") {
    return (
      <button className="live-bubble" onClick={() => setMode("window")} aria-label={t("Live-Beratung öffnen", "Open live consultation")}>
        <span className="live-bubble-dot" />
        <span>{t("Live-Beratung", "Live consultation")}</span>
      </button>
    );
  }

  return (
    <div className={`live-app live-${effectiveMode}`}>
      <header className="live-topbar">
        <a href="https://liakhov-group.com/" className="live-brand" aria-label="Liakhov Group">
          <BrandMark size={20} strokeWidth={8} showDots={false} />
          <span>Liakhov<em>·</em>Group</span>
        </a>
        <div className="live-topbar-title">{t("Live-Beratung · KI-Berater", "Live Consultation · AI Advisor")}</div>
        <div className="live-topbar-actions">
          <button onClick={switchLang} className="live-icon-btn" title={t("Sprache wechseln", "Switch language")}>{__lang === "en" ? "DE" : "EN"}</button>
          {!isMobile && (
            <>
              <button onClick={() => setMode("minimized")} className="live-icon-btn" title={t("Minimieren", "Minimize")}>—</button>
              <button onClick={() => setMode(mode === "window" ? "fullscreen" : "window")} className="live-icon-btn" title={mode === "window" ? t("Maximieren", "Maximize") : t("Verkleinern", "Restore")}>{mode === "window" ? "◱" : "❐"}</button>
            </>
          )}
          <a href="https://liakhov-group.com/" className="live-icon-btn" title={t("Zur Hauptseite", "To main site")}>↗</a>
        </div>
      </header>
      {/* Wert-/Trust-Streifen: gibt kaltem Werbe-Traffic in 1 Blick Kontext + Vertrauen, bevor der Chat startet. */}
      <div className="live-valuestrip">
        <div className="live-valuestrip-head">
          {t("KI-Festpreis in 2 Minuten — kostenlos & unverbindlich", "AI fixed price in 2 minutes — free & non-binding")}
        </div>
        <div className="live-trust-chips">
          <span className="live-trust-chip"><b>{t("Erprobt", "Proven")}</b> {t("bei Schweizer KMU", "with Swiss SMEs")}</span>
          <span className="live-trust-chip"><b>{t("Garantie", "Guarantee")}</b> {t("Ersparnis oder kein Honorar", "savings or no fee")}</span>
          <span className="live-trust-chip"><b>{t("2 Min.", "2 min")}</b> {t("zum Festpreis", "to fixed price")}</span>
        </div>
        <div className="live-valuestrip-sub">
          {t("Ohne Anmeldung · Ohne Verkaufsgespräch · Schweizer KMU-Beratung aus Zürich", "No signup · No sales call · Swiss SME consulting from Zurich")}
        </div>
      </div>
      <main className="live-main">
        <PricingChat />
      </main>
      {modal && <Modal id={modal} onClose={() => setModal(null)} />}
      <AppointmentModal open={appointmentOpen} onClose={() => setAppointmentOpen(false)} />
      {booking && <BookingModal kind={booking.kind} q={booking.q} onClose={() => setBooking(null)} openModal={setModal} />}
    </div>
  );
}

const __isLiveDomain = typeof window !== "undefined" && (
  /^(www\.)?(deineliveberatung|yourliveconsultation)\.com$/.test(window.location.hostname) ||
  (function(){ try { return new URLSearchParams(window.location.search).has("live"); } catch(e){ return false; } })()
);

ReactDOM.createRoot(document.getElementById("root")).render(__isLiveDomain ? <LiveAdvisoryApp /> : <App />);