// Quantum.jsx — Variant A: Dark Tech, electric cyan, dashboard-as-hero
const { useState: useStateQ, useEffect: useEffectQ, useRef: useRefQ, useMemo: useMemoQ } = React;

const qT = {
  de: {
    nav: ['KI Mitarbeiter Test', 'Shop', 'Technologie', 'Transparenz', 'Über uns', 'Kontakt'],
    cta: 'Diagnose starten',
    badge: 'AI Smart Network · hier arbeiten virtuelle Mitarbeiter',
    h1a: 'Ihre Firma bekommt',
    h1b: 'virtuelle Mitarbeiter.',
    h1c: 'Heute.',
    sub: 'Betreten Sie kein normales Website-Projekt. Hier sehen Sie, wie ein digitales Unternehmen arbeitet: Empfang, Vertrieb, Buchhaltung und Reporting laufen als KI-Mitarbeiter zusammen, während Sie die Kontrolle behalten.',
    primary: 'Virtuellen Mitarbeiter planen',
    secondary: 'Live-Betrieb ansehen',
    kpiLabel: 'Live · letzte 24 h',
    kpis: [
      { label: 'Uptime', v: '99.987%', s: '+0.04' },
      { label: 'Leads generiert', v: '1 284', s: '+12%' },
      { label: 'Ø Reaktion', v: '1.2 s', s: '−0.3' },
      { label: 'Angebote auto.', v: '347', s: '+41%' },
    ],
    trustline: 'DSGVO-konform · jeder Vorgang protokolliert · menschlich freigegeben',
    pillarsTitle: 'Vier Abteilungen. Eine KI-Mannschaft.',
    pillarsSub: 'Statt einzelner Tools entsteht ein digitales Team, das Anfragen annimmt, Aufgaben verteilt und Ergebnisse sauber dokumentiert.',
    pillars: [
      { k: '01', t: 'Digitaler Empfang', d: 'Nimmt Anfragen entgegen, erkennt Anliegen und legt sofort eine saubere Akte an.' },
      { k: '02', t: 'Virtueller Vertrieb', d: 'Prüft Kunden, bereitet Angebote vor und erinnert rechtzeitig an offene Chancen.' },
      { k: '03', t: 'Operations-Mitarbeiter', d: 'Verbindet Lager, Termine, Dokumente und Außendienst, ohne dass jemand Daten doppelt tippt.' },
      { k: '04', t: 'Kontrolle & Sicherheit', d: 'Dokumentiert jeden Schritt, meldet Risiken und zeigt Ihnen jederzeit den aktuellen Stand.' },
    ],
    solutionsTitle: 'Virtuelle Mitarbeiter für echte Betriebe.',
    solutionsSub: 'Ob Handwerk, Handel, Autohaus oder Kanzlei: Der KI-Architekt baut Mitarbeiter für konkrete Arbeit.',
    solutionCases: [
      { tag: 'Empfang & Verkauf', t: 'Anfrage → Angebot → Auftrag', items: ['Anliegen erkennen', 'Kundenakte vorbereiten', 'Nachfassen ohne Vergessen'] },
      { tag: 'Betrieb & Lager', t: 'Termin, Material, Status', items: ['Bestände prüfen', 'Aufgaben verteilen', 'Status automatisch melden'] },
      { tag: 'Büro & Finanzen', t: 'Belege, Rechnung, DATEV', items: ['Belege ordnen', 'Rechnungen vorbereiten', 'Steuerberater sauber versorgen'] },
    ],
    workflowTitle: 'Ein Kunde meldet sich. Die KI-Mannschaft beginnt.',
    workflowSub: 'Jeder Schritt ist sichtbar: wer arbeitet, was vorbereitet wurde und wann der Mensch entscheidet.',
    workflow: ['Anfrage', 'Einordnung', 'Angebot', 'Freigabe', 'Aufgabe', 'Lieferung', 'Rechnung', 'DATEV'],
    roiTitle: 'Wie viel Arbeit bleibt bei Ihnen hängen?',
    roiSub: 'Schieber bewegen — der KI-Architekt zeigt den Hebel live.',
    roiLeads: 'Anfragen pro Monat',
    roiTime: 'Ø Minuten pro Angebot',
    roiCost: 'Personalkosten / Std.',
    roiSaved: 'Eingesparte Stunden / Monat',
    roiMoney: 'Eingesparter Aufwand / Jahr',
    transTitle: 'Sie sehen, was Ihre KI-Mitarbeiter leisten.',
    transSub: 'Jeden Monat bekommen Sie einen verständlichen Arbeitsbericht: erledigte Vorgänge, gesparte Stunden, Vorfälle und nächste Verbesserungen.',
    transBullets: [
      'Uptime, Reaktions- und Vorfallszeiten',
      'Generierte Leads & konvertierte Angebote',
      'Stunden gespart durch Automatisierung',
      'Sicherheits- und Audit-Ereignisse',
    ],
    contactTitle: 'Welcher virtuelle Mitarbeiter fehlt Ihnen?',
    contactSub: 'Beschreiben Sie kurz die Arbeit, die liegen bleibt. Der KI-Architekt übersetzt sie in einen klaren ersten Mitarbeiter-Plan.',
    contactCta: 'Mitarbeiter planen',
    demoLabel: 'Live · WhatsApp-Demo',
    demoMetric: '47 SEK.',
    demoTitle: 'Ein Satz genügt. Das Büro arbeitet weiter.',
    demoSub: 'Der Außendienst spricht. Der virtuelle Mitarbeiter schreibt, ordnet, prüft und bereitet die Buchhaltung vor.',

    // Home flow graph — plain language for non-technical entrepreneurs
    hflowTag: '03 — So funktioniert es',
    hflowTitle: 'Eine Anfrage geht ein. Ihre KI-Mannschaft übernimmt.',
    hflowSub: 'Beispiel Handwerksbetrieb. Egal ob WhatsApp, Anruf oder Foto vom Bauplatz — die Anfrage landet im digitalen Betrieb und wird von virtuellen Mitarbeitern bis zur Rechnung vorbereitet. Sie entscheiden nur dort, wo es wirklich zählt.',
    hflowLegend: ['Eingang', 'Zentrale', 'Assistent', 'Aufgabe'],
    hflowTriggers: [
      { l: 'WhatsApp', s: 'Kunde schreibt' },
      { l: 'Anruf', s: 'Sprachbox / Telefon' },
      { l: 'Foto', s: 'Aufmaß vor Ort' },
    ],
    hflowHub: { l: 'Auftrags-Zentrale', s: 'verteilt · protokolliert' },
    hflowAgents: [
      { l: 'Angebots-Assistent', s: 'schreibt Angebote', accent: 'mint' },
      { l: 'Termin-Planer', s: 'plant Einsätze', accent: 'indigo' },
      { l: 'Material-Manager', s: 'beschafft Material', accent: 'sand' },
      { l: 'Buchhaltungs-Helfer', s: 'bucht · mahnt', accent: 'mint' },
    ],
    hflowSubs: [
      ['Kunde prüfen', 'Preise abrufen', 'Angebot per E-Mail'],
      ['Monteur einplanen', 'Werkzeug reservieren', 'Kunden erinnern'],
      ['Lager prüfen', 'Bestellung auslösen', 'Lieferung verfolgen'],
      ['Rechnung erstellen', 'An Steuerberater senden', 'Mahnung wenn nötig'],
    ],
    hflowTraceLeft: 'Vom Anruf bis zur Buchung',
    hflowTraceRight: 'alles protokolliert',
    footerNote: 'AI SMART NETWORK S.R.L. · Ștefăneștii de Jos, Ilfov · Rumänien',
  },
  en: {
    nav: ['KI Mitarbeiter Test', 'Shop', 'Technology', 'Transparency', 'About', 'Contact'],
    cta: 'Start diagnosis',
    badge: 'AI Smart Network · virtual employees already at work',
    h1a: 'Give your company',
    h1b: 'virtual employees.',
    h1c: 'Today.',
    sub: 'This is not a normal website project. You are entering a digital company where reception, sales, bookkeeping and reporting work together as AI employees while you stay in control.',
    primary: 'Plan a virtual employee',
    secondary: 'See live operations',
    kpiLabel: 'Live · last 24 h',
    kpis: [
      { label: 'Uptime', v: '99.987%', s: '+0.04' },
      { label: 'Leads generated', v: '1,284', s: '+12%' },
      { label: 'Avg. response', v: '1.2 s', s: '−0.3' },
      { label: 'Quotes automated', v: '347', s: '+41%' },
    ],
    trustline: 'GDPR-compliant · every task logged · human-approved',
    pillarsTitle: 'Four departments. One AI team.',
    pillarsSub: 'Instead of disconnected tools, you get a digital team that receives requests, routes work and documents results.',
    pillars: [
      { k: '01', t: 'Digital reception', d: 'Receives enquiries, recognises the need and opens a clean case file instantly.' },
      { k: '02', t: 'Virtual sales', d: 'Checks customers, prepares quotes and follows up before opportunities go cold.' },
      { k: '03', t: 'Operations employee', d: 'Connects stock, appointments, documents and field work without double typing.' },
      { k: '04', t: 'Control & safety', d: 'Logs every step, flags risks and keeps management aware of current status.' },
    ],
    solutionsTitle: 'Virtual employees for real businesses.',
    solutionsSub: 'Trades, commerce, dealerships or firms: the AI architect builds concrete work roles that behave like employees.',
    solutionCases: [
      { tag: 'Reception & sales', t: 'Request → quote → order', items: ['Recognise the need', 'Prepare the customer file', 'Follow up reliably'] },
      { tag: 'Operations & stock', t: 'Schedule, material, status', items: ['Check availability', 'Route tasks', 'Report status automatically'] },
      { tag: 'Office & finance', t: 'Receipts, invoice, DATEV', items: ['Sort documents', 'Prepare invoices', 'Serve the accountant cleanly'] },
    ],
    workflowTitle: 'A customer asks. The AI team starts.',
    workflowSub: 'Every step is visible: who is working, what was prepared and when a human decides.',
    workflow: ['Request', 'Classify', 'Quote', 'Approval', 'Task', 'Delivery', 'Invoice', 'DATEV'],
    roiTitle: 'How much work is still stuck with you?',
    roiSub: 'Move the sliders — the AI architect shows the leverage live.',
    roiLeads: 'Enquiries per month',
    roiTime: 'Avg. minutes per quote',
    roiCost: 'Personnel cost / hour',
    roiSaved: 'Hours saved / month',
    roiMoney: 'Effort saved / year',
    transTitle: 'You see what your AI employees deliver.',
    transSub: 'Every month you receive a plain-language work report: completed cases, hours saved, incidents and next improvements.',
    transBullets: [
      'Uptime, response & incident times',
      'Leads generated & quotes converted',
      'Hours saved through automation',
      'Security & audit events',
    ],
    contactTitle: 'Which virtual employee are you missing?',
    contactSub: 'Describe the work that keeps piling up. The AI architect turns it into a first employee plan.',
    contactCta: 'Plan employee',
    demoLabel: 'Live · WhatsApp demo',
    demoMetric: '47 SEC',
    demoTitle: 'One sentence is enough. The office keeps working.',
    demoSub: 'The field rep speaks. The virtual employee writes, sorts, checks and prepares finance.',

    hflowTag: '03 — How it works',
    hflowTitle: 'A request comes in. Your AI team takes over.',
    hflowSub: 'Example: a trades business. Whether by WhatsApp, phone call or a photo from the site — the request lands in the digital operation and is prepared by virtual employees through to the invoice. You decide only where it truly matters.',
    hflowLegend: ['Inbound', 'Hub', 'Assistant', 'Task'],
    hflowTriggers: [
      { l: 'WhatsApp', s: 'customer writes' },
      { l: 'Phone', s: 'voicemail / call' },
      { l: 'Photo', s: 'measurement on-site' },
    ],
    hflowHub: { l: 'Job hub', s: 'routes · logs' },
    hflowAgents: [
      { l: 'Quote assistant', s: 'writes quotes', accent: 'mint' },
      { l: 'Scheduling assistant', s: 'plans crews', accent: 'indigo' },
      { l: 'Materials manager', s: 'sources stock', accent: 'sand' },
      { l: 'Bookkeeping helper', s: 'books · chases', accent: 'mint' },
    ],
    hflowSubs: [
      ['Check the customer', 'Look up prices', 'Send quote by email'],
      ['Assign technician', 'Reserve tools', 'Remind the customer'],
      ['Check stock', 'Place order', 'Track delivery'],
      ['Create invoice', 'Send to accountant', 'Send reminder if overdue'],
    ],
    hflowTraceLeft: 'From call to booking',
    hflowTraceRight: 'every step logged',
    footerNote: 'AI SMART NETWORK S.R.L. · Ștefăneștii de Jos, Ilfov · Romania',
  },
};

function Quantum({ lang, setLang }) {
  const t = qT[lang];

  // Live-ish KPI sparkline shimmer
  const [tick, setTick] = useStateQ(0);
  useEffectQ(() => {
    const id = setInterval(() => setTick((x) => x + 1), 1600);
    return () => clearInterval(id);
  }, []);

  // ROI state
  const [leads, setLeads] = useStateQ(120);
  const [mins, setMins] = useStateQ(22);
  const [cost, setCost] = useStateQ(65);
  const automation = 0.86;
  const hoursSaved = Math.round((leads * mins * automation) / 60);
  const moneySaved = Math.round(hoursSaved * cost * 12).toLocaleString(lang === 'de' ? 'de-DE' : 'en-US');

  // Colors
  const ink = '#0A0A0B';
  const paper = '#0E0F12';
  const fog = '#16181D';
  const text = '#E7E9EE';
  const muted = '#8A8F99';
  const line = 'rgba(255,255,255,0.08)';
  const mint = '#5EEAD4';
  const indigo = '#818CF8';
  const sand = '#FBBF77';
  const warn = '#FCA5A5';

  return (
    <div style={{ background: ink, color: text, fontFamily: "'Inter Tight', system-ui, sans-serif", minHeight: 4280, position: 'relative', overflow: 'hidden' }}>
      {/* Background grid + glow */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: `linear-gradient(${line} 1px, transparent 1px), linear-gradient(90deg, ${line} 1px, transparent 1px)`,
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse 1100px 720px at 70% 0%, #000 0%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse 1100px 720px at 70% 0%, #000 0%, transparent 75%)',
      }} />
      <div style={{
        position: 'absolute', top: -200, right: -200, width: 800, height: 800,
        background: `radial-gradient(closest-side, ${mint}33, transparent 70%)`,
        filter: 'blur(20px)', pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', top: 80, left: -160, width: 520, height: 520,
        background: `radial-gradient(closest-side, ${indigo}22, transparent 70%)`,
        filter: 'blur(20px)', pointerEvents: 'none',
      }} />

      {/* NAV */}
      <nav style={{ position: 'relative', zIndex: 5, padding: '24px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Logo color={text} accent={mint} />
        <div style={{ display: 'flex', gap: 36, alignItems: 'center', fontSize: 14, color: muted, letterSpacing: 0.1 }}>
          {t.nav.map((n) => {
            const isTech = n === 'Technologie' || n === 'Technology';
            const isSolutions = n === 'KI Mitarbeiter Test';
            const isAbout = n === 'Über uns' || n === 'About';
            const isTransparency = n === 'Transparenz' || n === 'Transparency';
            const isShop = n === 'Shop';
            const isContact = n === 'Kontakt' || n === 'Contact';
            const href = isTech ? 'ki-automatisierung.html' : isSolutions ? 'was-kostet-ein-ki-mitarbeiter/' : isAbout ? 'ueber-uns.html' : isTransparency ? 'transparenz.html' : isShop ? 'shop.html' : isContact ? 'kontakt.html' : '#';
            return (
              <a key={n} href={href} style={{ color: muted, textDecoration: 'none', cursor: 'pointer' }}>{n}</a>
            );
          })}
        </div>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <LangToggle lang={lang} setLang={setLang} dark />
          <a href="diagnose.html" style={{
            background: mint, color: ink, border: 'none', borderRadius: 999,
            padding: '11px 20px', fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
            cursor: 'pointer', letterSpacing: 0.1, textDecoration: 'none', display: 'inline-block',
          }}>{t.cta} →</a>
        </div>
      </nav>

      {/* HERO */}
      <section style={{ position: 'relative', zIndex: 4, padding: '72px 56px 120px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56 }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 12px 7px 8px', border: `1px solid ${line}`, borderRadius: 999, fontSize: 12, color: muted, marginBottom: 32 }}>
            <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 999, background: mint, boxShadow: `0 0 12px ${mint}` }} />
            {t.badge}
          </div>
          <HeroHeadline lang={lang} text={text} muted={muted} mint={mint} indigo={indigo} line={line} />
          <p style={{ marginTop: 32, maxWidth: 520, fontSize: 19, lineHeight: 1.55, color: '#C7CBD3' }}>{t.sub}</p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
            <a href="diagnose.html" style={{
              background: mint, color: ink, border: 'none', borderRadius: 12,
              padding: '14px 22px', fontSize: 15, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer', textDecoration: 'none', display: 'inline-block',
            }}>{t.primary} →</a>
            <a href="transparenz.html" style={{
              background: 'transparent', color: text, border: `1px solid ${line}`, borderRadius: 12,
              padding: '14px 22px', fontSize: 15, fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer', textDecoration: 'none', display: 'inline-block',
            }}>{t.secondary}</a>
          </div>
          <div style={{ marginTop: 44, fontSize: 13, color: muted, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: 0.5 }}>
            {t.trustline}
          </div>
        </div>

        {/* Hero — Audio-Interface der KI (Voice-Blob statt Chatfenster) */}
        <window.HeroVoiceAgent lang={lang} />
      </section>

      {/* ROI — moved up to position 2 */}
      <section style={{ position: 'relative', zIndex: 3, padding: '0 56px 120px' }}>
        <div style={{
          border: `1px solid ${line}`, borderRadius: 24, padding: 48,
          background: `linear-gradient(135deg, ${fog}, ${paper})`,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48,
        }}>
          <div>
            <SectionLabel mono mint={mint} muted={muted}>02 — ROI</SectionLabel>
            <h2 style={{ background: 'linear-gradient(115deg, #E7E9EE 40%, #5EEAD4 70%, #818CF8 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', fontSize: 44, lineHeight: 1.06, letterSpacing: -1.6, margin: '14px 0 14px', fontWeight: 600 }}>{t.roiTitle}</h2>
            <p style={{ color: muted, fontSize: 16, marginBottom: 30 }}>{t.roiSub}</p>
            <Slider label={t.roiLeads} value={leads} setValue={setLeads} min={20} max={600} step={10} mint={mint} muted={muted} line={line} suffix="" />
            <Slider label={t.roiTime} value={mins} setValue={setMins} min={5} max={90} step={1} mint={mint} muted={muted} line={line} suffix=" min" />
            <Slider label={t.roiCost} value={cost} setValue={setCost} min={30} max={150} step={5} mint={mint} muted={muted} line={line} suffix=" €" />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 28, paddingTop: 44 }}>
            <ResultBig label={t.roiSaved} value={`${hoursSaved} h`} mint={mint} muted={muted} />
            <ResultBig label={t.roiMoney} value={`${moneySaved} €`} mint={indigo} muted={muted} big />
            <div style={{ marginTop: 8, fontSize: 12, color: muted, fontFamily: "'IBM Plex Mono', monospace" }}>
              Modell: 86 % Automatisierungsquote · {lang === 'de' ? 'konservativ' : 'conservative'}
            </div>
          </div>
        </div>
      </section>

      {/* DIAGNOSE BANNER — link to full multi-step diagnosis */}
      <HomeDiagnoseBanner lang={lang} mint={mint} indigo={indigo} text={text} muted={muted} line={line} paper={paper} ink={ink} />

      {/* HOME FLOW GRAPH — plain language for non-technical visitors */}
      <HomeFlowSection t={t} mint={mint} indigo={indigo} sand={sand} warn={warn} text={text} muted={muted} line={line} fog={fog} paper={paper} ink={ink} />

      {/* PILLARS */}
      <section style={{ position: 'relative', zIndex: 3, padding: '0 56px 120px' }}>
        <SectionLabel mono mint={mint} muted={muted}>04 — Platform</SectionLabel>
        <h2 style={{ background: 'linear-gradient(115deg, #E7E9EE 40%, #5EEAD4 70%, #818CF8 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', fontSize: 56, lineHeight: 1.05, letterSpacing: -2, margin: '14px 0 18px', fontWeight: 600, maxWidth: 760 }}>{t.pillarsTitle}</h2>
        <p style={{ color: muted, fontSize: 17, maxWidth: 600, marginBottom: 48 }}>{t.pillarsSub}</p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {t.pillars.map((p, i) => (
            <div key={p.k} style={{
              padding: 28, border: `1px solid ${line}`, borderRadius: 18,
              background: `linear-gradient(180deg, ${fog}cc, ${paper}cc)`,
              backdropFilter: 'blur(8px)',
              position: 'relative', overflow: 'hidden', minHeight: 200,
            }}>
              <PillarIcon i={i} mint={mint} indigo={indigo} />
              <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, color: mint, letterSpacing: 1 }}>{p.k}</div>
              <h3 style={{ fontSize: 22, margin: '6px 0 10px', fontWeight: 600, letterSpacing: -0.4 }}>{p.t}</h3>
              <p style={{ color: muted, fontSize: 15, lineHeight: 1.55, margin: 0 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* SOLUTIONS */}
      <section style={{ position: 'relative', zIndex: 3, padding: '0 56px 120px' }}>
        <SectionLabel mono mint={mint} muted={muted}>05 — Solutions</SectionLabel>
        <h2 style={{ background: 'linear-gradient(115deg, #E7E9EE 40%, #5EEAD4 70%, #818CF8 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', fontSize: 56, lineHeight: 1.05, letterSpacing: -2, margin: '14px 0 18px', fontWeight: 600, maxWidth: 820 }}>{t.solutionsTitle}</h2>
        <p style={{ color: muted, fontSize: 17, maxWidth: 640, marginBottom: 48 }}>{t.solutionsSub}</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {t.solutionCases.map((c, i) => (
            <div key={c.tag} style={{
              padding: 28, border: `1px solid ${line}`, borderRadius: 18,
              background: fog, minHeight: 280,
            }}>
              <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: i === 0 ? mint : i === 1 ? indigo : '#FCA5A5', letterSpacing: 1, textTransform: 'uppercase' }}>{c.tag}</div>
              <h3 style={{ fontSize: 22, margin: '10px 0 22px', fontWeight: 600, letterSpacing: -0.4 }}>{c.t}</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {c.items.map((it) => (
                  <div key={it} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: '#C7CBD3' }}>
                    <span style={{ width: 6, height: 6, borderRadius: 1, background: mint, marginTop: 7, flexShrink: 0 }} />
                    {it}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* WORKFLOW */}
      <section style={{ position: 'relative', zIndex: 3, padding: '0 56px 120px' }}>
        <SectionLabel mono mint={mint} muted={muted}>06 — Pipeline</SectionLabel>
        <h2 style={{ background: 'linear-gradient(115deg, #E7E9EE 40%, #5EEAD4 70%, #818CF8 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', fontSize: 56, lineHeight: 1.05, letterSpacing: -2, margin: '14px 0 18px', fontWeight: 600, maxWidth: 780 }}>{t.workflowTitle}</h2>
        <p style={{ color: muted, fontSize: 17, maxWidth: 600, marginBottom: 56 }}>{t.workflowSub}</p>
        <WorkflowDiagram steps={t.workflow} mint={mint} indigo={indigo} line={line} muted={muted} text={text} tick={tick} fog={fog} />
      </section>

      {/* ROI — (moved to top) */}

      {/* TRANSPARENCY */}
      <section style={{ position: 'relative', zIndex: 3, padding: '0 56px 120px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <SectionLabel mono mint={mint} muted={muted}>07 — Transparency</SectionLabel>
            <h2 style={{ background: 'linear-gradient(115deg, #E7E9EE 40%, #5EEAD4 70%, #818CF8 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', fontSize: 52, lineHeight: 1.05, letterSpacing: -1.8, margin: '14px 0 18px', fontWeight: 600 }}>{t.transTitle}</h2>
            <p style={{ color: '#C7CBD3', fontSize: 17, lineHeight: 1.55, marginBottom: 28 }}>{t.transSub}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {t.transBullets.map((b) => (
                <div key={b} style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 15 }}>
                  <span style={{ display: 'inline-flex', width: 24, height: 24, borderRadius: 999, border: `1px solid ${mint}66`, alignItems: 'center', justifyContent: 'center', color: mint, fontSize: 12 }}>✓</span>
                  {b}
                </div>
              ))}
            </div>
          </div>
          <ReportPreview lang={lang} mint={mint} indigo={indigo} line={line} fog={fog} text={text} muted={muted} />
        </div>
      </section>

      {/* CONTACT */}
      <section style={{ position: 'relative', zIndex: 3, padding: '0 56px 56px' }}>
        <div style={{
          borderRadius: 28, padding: '64px 56px', position: 'relative', overflow: 'hidden',
          background: `linear-gradient(120deg, #0F1A1A 0%, #0E0F12 60%)`,
          border: `1px solid ${mint}33`,
        }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: `radial-gradient(circle at 90% 50%, ${mint}33, transparent 50%)` }} />
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 40, alignItems: 'center' }}>
            <div>
              <h2 style={{ background: 'linear-gradient(115deg, #E7E9EE 40%, #5EEAD4 70%, #818CF8 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', fontSize: 64, lineHeight: 1.0, letterSpacing: -2.5, margin: 0, fontWeight: 700 }}>{t.contactTitle}</h2>
              <p style={{ color: '#C7CBD3', fontSize: 18, marginTop: 18, maxWidth: 520 }}>{t.contactSub}</p>
            </div>
            <ChatTeaser lang={lang} mint={mint} line={line} fog={fog} muted={muted} text={text} />
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ position: 'relative', zIndex: 3, padding: '32px 56px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: `1px solid ${line}`, marginTop: 24 }}>
        <Logo color={text} accent={mint} small />
        <div style={{ fontSize: 12, color: muted, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: 0.5 }}>{t.footerNote}</div>
        <div style={{ fontSize: 12, color: muted }}>© 2026</div>
      </footer>
    </div>
  );
}

/* ---------- Quantum sub-components ---------- */

function HeroHeadline({ lang, text, muted, mint, indigo, line }) {
  const L = lang === 'de'
    ? { setup: ['Ihre Firma', 'bekommt'], outNum: 'virtuelle', outWord: 'Mitarbeiter.' }
    : { setup: ['Your company', 'gets'], outNum: 'virtual', outWord: 'employees.' };

  return (
    <div role="heading" aria-level="1" style={{
      position: 'relative',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
    }}>
      {/* Setup line — Inter Tight SemiBold */}
      <div style={{
        fontSize: 'clamp(26px, 9vw, 64px)',
        fontWeight: 600,
        letterSpacing: '-0.03em',
        lineHeight: 1.05,
        color: muted,
        display: 'flex',
        alignItems: 'baseline',
        gap: 14,
        flexWrap: 'wrap',
        marginBottom: 6,
      }}>
        <span style={{ color: text, fontVariantNumeric: 'tabular-nums' }}>{L.setup[0]}</span>
        <span>{L.setup[1]}</span>
      </div>

      {/* Punchline — Inter Tight ExtraBold/Black, dominant */}
      <div style={{
        fontSize: 'clamp(40px, 15.5vw, 180px)',
        fontWeight: 800,
        letterSpacing: '-0.05em',
        lineHeight: 0.94,
        marginTop: 8,
        display: 'flex',
        alignItems: 'baseline',
        gap: 14,
        flexWrap: 'wrap',
      }}>
        <span style={{
          background: `linear-gradient(115deg, ${mint} 0%, ${indigo} 100%)`,
          WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
          fontVariantNumeric: 'tabular-nums',
        }}>{L.outNum}</span>
        <span style={{ color: text }}>{L.outWord}</span>
      </div>

      {/* Sub-rule */}
      <div style={{
        marginTop: 22,
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <span style={{ width: 56, height: 1, background: `linear-gradient(90deg, ${mint}, transparent)` }} />
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: muted, letterSpacing: 1.4, textTransform: 'uppercase' }}>
          {lang === 'de' ? 'Digitale Mannschaft · live im Betrieb' : 'Digital team · live in operation'}
        </span>
      </div>
    </div>
  );
}

/* ── Hero phone demo: WhatsApp → booking flow ── */

function HeroPhoneDemo({ lang, t, text, muted, mint, indigo, line, fog, ink }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', position: 'relative' }}>
      <div style={{ width: '100%', maxWidth: 380, marginBottom: 18 }}>
        {/* Eyebrow row: live tag + metric badge */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 14 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase', color: muted }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: mint, boxShadow: `0 0 10px ${mint}` }} />
            {t.demoLabel}
          </div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '5px 10px 5px 8px',
            borderRadius: 999,
            border: `1px solid ${mint}55`,
            background: `linear-gradient(120deg, ${mint}11, ${indigo}11)`,
            fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: mint,
            fontWeight: 600, letterSpacing: 0.6,
          }}>
            <ClockGlyph color={mint} />
            {t.demoMetric}
          </div>
        </div>
        <h3 style={{ fontSize: 26, fontWeight: 600, letterSpacing: -0.7, lineHeight: 1.15, margin: 0, color: text, whiteSpace: 'nowrap' }}>{t.demoTitle}</h3>
        <p style={{ fontSize: 13, color: muted, lineHeight: 1.5, margin: '10px 0 0' }}>{t.demoSub}</p>
      </div>
      <QWhatsappPhone lang={lang} mint={mint} indigo={indigo} ink={ink} />
    </div>
  );
}

function ClockGlyph({ color }) {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke={color} strokeWidth="1.4" strokeLinecap="round">
      <circle cx="6" cy="6" r="4.5" />
      <path d="M6 3.5 V6 L7.8 7.3" />
    </svg>
  );
}

function QWhatsappPhone({ lang, mint, indigo, ink }) {
  const messages = lang === 'de' ? [
    { from: 'user', kind: 'audio', dur: '0:14', time: '14:02' },
    { from: 'user', kind: 'transcribed', text: '„Angebot für Sometall, 200 kg WCu-30, Lieferung KW 24."', time: '14:02' },
    { from: 'bot', text: 'Verstanden. Lead anlegen, Bonität prüfen, Marge gegen Lager kalkulieren…', time: '14:02' },
    { from: 'bot', text: 'Bonität OK (Bonität 240). Lager: 280 kg in 3 Lots. Marge 14.2 % — über Schwellwert ✓', time: '14:03' },
    { from: 'bot', kind: 'file', filename: 'Angebot_SOMETALL_Q2.pdf', size: '184 KB', time: '14:03' },
    { from: 'bot', text: 'Soll ich versenden?', time: '14:03' },
  ] : [
    { from: 'user', kind: 'audio', dur: '0:14', time: '14:02' },
    { from: 'user', kind: 'transcribed', text: '\u201CQuote for Sometall, 200 kg WCu-30, delivery W24.\u201D', time: '14:02' },
    { from: 'bot', text: 'Got it. Creating lead, checking credit, calculating margin against stock…', time: '14:02' },
    { from: 'bot', text: 'Credit OK (Bonität 240). Stock: 280 kg in 3 lots. Margin 14.2% — above threshold ✓', time: '14:03' },
    { from: 'bot', kind: 'file', filename: 'Quote_SOMETALL_Q2.pdf', size: '184 KB', time: '14:03' },
    { from: 'bot', text: 'Send it?', time: '14:03' },
  ];

  return (
    <div style={{
      width: 360, height: 680, borderRadius: 42, padding: 9,
      background: '#1a1a1c',
      border: '1px solid #2a2a2e',
      boxShadow: `0 30px 80px -20px ${mint}26, 0 0 0 1px rgba(255,255,255,0.04)`,
      position: 'relative', flexShrink: 0,
      fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
      fontWeight: 400,
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: 33, overflow: 'hidden',
        background: '#0B141A', display: 'flex', flexDirection: 'column',
      }}>
        {/* iOS status bar */}
        <div style={{ background: '#075E54', color: '#fff', padding: '12px 16px 8px', fontSize: 11, fontFamily: "'IBM Plex Mono', monospace", display: 'flex', justifyContent: 'space-between', letterSpacing: 0.5 }}>
          <span>9:41</span>
          <span>● ▮▮▮ ●●●●</span>
        </div>
        {/* WA header */}
        <div style={{ background: '#075E54', color: '#fff', padding: '6px 14px 10px', display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ fontSize: 18 }}>←</span>
          <div style={{ width: 34, height: 34, borderRadius: 999, background: `linear-gradient(135deg, ${mint}, ${indigo})`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, color: ink, fontSize: 14 }}>A</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>AI Smart Ops</div>
            <div style={{ fontSize: 10, opacity: 0.85, fontWeight: 400 }}>{lang === 'de' ? 'online · antwortet sofort' : 'online · instant'}</div>
          </div>
          <span style={{ fontSize: 16, opacity: 0.8 }}>⋮</span>
        </div>
        {/* Chat */}
        <div style={{ flex: 1, padding: 12, display: 'flex', flexDirection: 'column', gap: 7, background: '#0B141A', overflow: 'hidden' }}>
          <div style={{ alignSelf: 'center', background: 'rgba(255,255,255,0.06)', color: '#A8B5BD', fontSize: 11, padding: '3px 9px', borderRadius: 999, marginBottom: 2 }}>{lang === 'de' ? 'HEUTE' : 'TODAY'}</div>
          {messages.map((m, i) => <QChatBubble key={i} m={m} lang={lang} mint={mint} />)}
        </div>
        {/* Input */}
        <div style={{ padding: 7, background: '#0B141A', display: 'flex', gap: 6, alignItems: 'center' }}>
          <div style={{ flex: 1, background: '#1F2C33', borderRadius: 999, padding: '7px 12px', color: '#5A6B72', fontSize: 12 }}>{lang === 'de' ? 'Nachricht' : 'Message'}</div>
          <div style={{ width: 32, height: 32, borderRadius: 999, background: '#00A884', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 14 }}>🎤</div>
        </div>
        <div style={{ height: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#0B141A' }}>
          <div style={{ width: 110, height: 4, borderRadius: 4, background: '#fff', opacity: 0.6 }} />
        </div>
      </div>
    </div>
  );
}

function QChatBubble({ m, lang, mint }) {
  const isBot = m.from === 'bot';
  const bg = isBot ? '#1F2C33' : '#005C4B';
  const align = isBot ? 'flex-start' : 'flex-end';
  return (
    <div style={{ display: 'flex', justifyContent: align }}>
      <div style={{ maxWidth: '84%', background: bg, borderRadius: 8, padding: m.kind === 'audio' ? '7px 11px' : '7px 9px 5px', boxShadow: '0 1px 0 rgba(0,0,0,0.2)' }}>
        {m.kind === 'audio' && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 180 }}>
            <div style={{ width: 28, height: 28, borderRadius: 999, background: '#00A884', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 11 }}>▶</div>
            <svg width="106" height="20" viewBox="0 0 120 22">
              {Array.from({ length: 30 }).map((_, i) => (
                <rect key={i} x={i * 4} y={11 - Math.abs(Math.sin(i * 0.8)) * 8} width="2" height={Math.abs(Math.sin(i * 0.8)) * 16 + 2} rx="1" fill="#8696A0" />
              ))}
            </svg>
            <span style={{ fontSize: 11, color: '#8696A0', fontFamily: "'IBM Plex Mono', monospace", fontWeight: 400 }}>{m.dur}</span>
          </div>
        )}
        {m.kind === 'transcribed' && (
          <div>
            <div style={{ fontSize: 11, color: mint, fontFamily: "'IBM Plex Mono', monospace", marginBottom: 3, letterSpacing: 0.4, fontWeight: 500 }}>{lang === 'de' ? 'TRANSKRIBIERT' : 'TRANSCRIBED'}</div>
            <div style={{ color: '#E9EDEF', fontSize: 13, lineHeight: 1.45, fontStyle: 'italic', fontWeight: 400 }}>{m.text}</div>
          </div>
        )}
        {m.kind === 'file' && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '3px 0' }}>
            <div style={{ width: 32, height: 40, background: '#fff', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'IBM Plex Mono', monospace", fontSize: 8, color: '#E64238', fontWeight: 600 }}>PDF</div>
            <div>
              <div style={{ color: '#E9EDEF', fontSize: 12, fontWeight: 500 }}>{m.filename}</div>
              <div style={{ color: '#8696A0', fontSize: 10, marginTop: 2, fontWeight: 400 }}>{m.size}</div>
            </div>
          </div>
        )}
        {!m.kind && (
          <div style={{ color: '#E9EDEF', fontSize: 13, lineHeight: 1.45, fontWeight: 400 }}>{m.text}</div>
        )}
        <div style={{ fontSize: 11, color: '#8696A0', textAlign: 'right', marginTop: 3, display: 'flex', justifyContent: 'flex-end', gap: 4, alignItems: 'center', fontWeight: 400 }}>
          <span>{m.time}</span>
          {!isBot && <span style={{ color: mint }}>✓✓</span>}
        </div>
      </div>
    </div>
  );
}

/* ── Home flow graph: plain-language Make-style ── */

function HomeDiagnoseBanner({ lang, mint, indigo, text, muted, line, paper, ink }) {
  const txt = lang === 'de' ? {
    eye: '02b · Tiefer einsteigen',
    h: 'Diese Rechnung zeigt einen Engpass. Wollen Sie Ihren ersten KI-Mitarbeiter planen?',
    sub: 'Beantworten Sie 5 Fragen — der KI-Architekt erkennt die Arbeit, die am meisten hängen bleibt, und erstellt daraus einen 90-Tage-Mitarbeiter-Plan.',
    cta: 'Mitarbeiter-Diagnose starten',
    meta: 'Kostenfrei · keine Anmeldung · alles im Browser',
  } : {
    eye: '02b · Go deeper',
    h: 'This calculation shows one bottleneck. Want to plan your first AI employee?',
    sub: 'Answer 5 questions — the AI architect identifies the work that gets stuck most often and turns it into a 90-day employee plan.',
    cta: 'Start employee diagnosis',
    meta: 'Free · no sign-up · runs in your browser',
  };

  return (
    <section style={{ position: 'relative', zIndex: 3, padding: '0 56px 80px' }}>
      <div style={{
        borderRadius: 20, padding: '32px 36px',
        background: `linear-gradient(120deg, #0F1A1A 0%, ${paper} 70%)`,
        border: `1px solid ${mint}33`,
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: `radial-gradient(circle at 90% 50%, ${mint}26, transparent 50%)`, pointerEvents: 'none' }} />
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ flex: '1 1 480px', minWidth: 0 }}>
            <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: mint, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 10, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 24, height: 1, background: mint }} />
              {txt.eye}
            </div>
            <h3 style={{ fontSize: 32, fontWeight: 700, letterSpacing: -1, lineHeight: 1.15, margin: '0 0 12px', maxWidth: 580 }}>{txt.h}</h3>
            <p style={{ fontSize: 15, lineHeight: 1.5, color: '#C7CBD3', margin: 0, maxWidth: 580 }}>{txt.sub}</p>
          </div>
          <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 }}>
            <a href="diagnose.html" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: mint, color: ink, border: 'none', borderRadius: 12,
              padding: '15px 22px', fontSize: 15, fontWeight: 600,
              fontFamily: "'Inter Tight', system-ui, sans-serif", cursor: 'pointer',
              textDecoration: 'none', boxShadow: `0 0 28px ${mint}33`,
            }}>{txt.cta} →</a>
            <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: muted, letterSpacing: 0.6, textTransform: 'uppercase' }}>{txt.meta}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeFlowSection({ t, mint, indigo, sand, warn, text, muted, line, fog, paper, ink }) {
  return (
    <section style={{ position: 'relative', zIndex: 3, padding: '0 56px 120px' }}>
      <SectionLabel mono mint={mint} muted={muted}>{t.hflowTag}</SectionLabel>
      <h2 style={{ background: 'linear-gradient(115deg, #E7E9EE 40%, #5EEAD4 70%, #818CF8 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', fontSize: 56, lineHeight: 1.05, letterSpacing: -2, margin: '14px 0 18px', fontWeight: 600, maxWidth: 940 }}>{t.hflowTitle}</h2>
      <p style={{ color: '#C7CBD3', fontSize: 19, lineHeight: 1.55, maxWidth: 820, margin: '0 0 28px' }}>{t.hflowSub}</p>

      {/* Legend */}
      <div style={{
        display: 'flex', flexWrap: 'wrap', gap: 22, marginBottom: 22,
        fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: muted, letterSpacing: 1, textTransform: 'uppercase',
      }}>
        {t.hflowLegend.map((l, i) => {
          const c = [mint, indigo, text, '#5A6068'][i];
          return (
            <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 10, height: 10, borderRadius: 999, background: c, boxShadow: i < 2 ? `0 0 8px ${c}` : 'none' }} />
              {l}
            </div>
          );
        })}
      </div>

      <HomeFlowGraph t={t} mint={mint} indigo={indigo} sand={sand} warn={warn} text={text} muted={muted} line={line} fog={fog} paper={paper} ink={ink} />
    </section>
  );
}

function HomeFlowGraph({ t, mint, indigo, sand, warn, text, muted, line, fog, paper, ink }) {
  const accentMap = { mint, indigo, sand, warn };
  const W = 1170, H = 600;

  // Triggers (3 stacked left)
  const triggers = t.hflowTriggers.map((tr, i) => ({
    ...tr, x: 12, y: 60 + i * 168, w: 100, h: 100, kind: 'trigger',
    accent: ['mint', 'indigo', 'sand'][i],
    glyph: ['whatsapp', 'phone', 'camera'][i],
  }));

  // Hub centered vertically between triggers
  const hub = { ...t.hflowHub, x: 220, y: 260, w: 180, h: 80, kind: 'hub', accent: 'indigo' };

  // Agents (4 stacked right of hub)
  const agents = t.hflowAgents.map((a, i) => ({
    ...a, x: 490, y: 20 + i * 144, w: 220, h: 76, kind: 'agent',
  }));

  // Subs (3 per agent stacked far right)
  const subs = [];
  t.hflowSubs.forEach((group, ai) => {
    group.forEach((label, si) => {
      const a = agents[ai];
      // Center 3 subs around agent vertical center
      // Sub h=32, gap=6, total = 32*3+6*2 = 108
      // Center of stack at a.y + 38 (agent center)
      // Top sub at center - 54
      subs.push({
        x: 790, y: a.y + 38 - 54 + si * 38, w: 200, h: 32,
        label, parent: ai, accent: t.hflowAgents[ai].accent, kind: 'sub',
      });
    });
  });

  const cy = (n) => n.y + n.h / 2;

  const path = (x1, y1, x2, y2) => {
    const dx = Math.max(60, Math.abs(x2 - x1) * 0.55);
    return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;
  };

  const conns = [];
  // Triggers -> Hub
  triggers.forEach((tr) => {
    conns.push({ d: path(tr.x + tr.w, cy(tr), hub.x, cy(hub)), accent: tr.accent, speed: 2.4 });
  });
  // Hub -> Agents
  agents.forEach((a) => {
    conns.push({ d: path(hub.x + hub.w, cy(hub), a.x, cy(a)), accent: a.accent, speed: 2.0 });
  });
  // Agents -> Subs
  subs.forEach((s, i) => {
    const a = agents[s.parent];
    conns.push({ d: path(a.x + a.w, cy(a), s.x, cy(s)), accent: s.accent, speed: 1.4 + (i % 5) * 0.15 });
  });

  return (
    <div style={{
      position: 'relative', borderRadius: 20, padding: 28,
      border: `1px solid ${line}`,
      background: `linear-gradient(180deg, ${fog}, ${paper})`,
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.55,
        backgroundImage: `radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px)`,
        backgroundSize: '26px 26px',
      }} />

      <div style={{ position: 'relative', width: '100%', aspectRatio: `${W} / ${H}` }}>
        <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid meet"
             style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', overflow: 'visible' }}>
          <defs>
            {conns.map((c, i) => <path key={i} id={`hfg-p-${i}`} d={c.d} />)}
          </defs>

          {conns.map((c, i) => (
            <path key={`l-${i}`} d={c.d} stroke={accentMap[c.accent]} strokeOpacity="0.32" strokeWidth="1.3" fill="none" />
          ))}

          {conns.map((c, i) => {
            const color = accentMap[c.accent];
            return (
              <g key={`d-${i}`}>
                <circle r="3.6" fill={color} style={{ filter: `drop-shadow(0 0 6px ${color})` }}>
                  <animateMotion dur={`${c.speed}s`} repeatCount="indefinite" begin={`${(i * 0.16) % 2.4}s`}>
                    <mpath xlinkHref={`#hfg-p-${i}`} />
                  </animateMotion>
                </circle>
                {i < 7 && (
                  <circle r="2.5" fill={color} fillOpacity="0.65">
                    <animateMotion dur={`${c.speed * 1.5}s`} repeatCount="indefinite" begin={`${(i * 0.28 + 1.1) % 3}s`}>
                      <mpath xlinkHref={`#hfg-p-${i}`} />
                    </animateMotion>
                  </circle>
                )}
              </g>
            );
          })}
        </svg>

        {triggers.map((tr, i) => <HomeNodeOverlay key={`t-${i}`} node={tr} accentMap={accentMap} text={text} muted={muted} ink={ink} W={W} H={H} />)}
        <HomeNodeOverlay node={hub} accentMap={accentMap} text={text} muted={muted} ink={ink} W={W} H={H} />
        {agents.map((a, i) => <HomeNodeOverlay key={`a-${i}`} node={a} accentMap={accentMap} text={text} muted={muted} ink={ink} W={W} H={H} />)}
        {subs.map((s, i) => <HomeNodeOverlay key={`s-${i}`} node={s} accentMap={accentMap} text={text} muted={muted} ink={ink} W={W} H={H} />)}
      </div>

      {/* Footer trace */}
      <div style={{
        marginTop: 18, padding: '12px 16px', borderRadius: 12,
        background: ink, border: `1px solid ${line}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, color: muted, letterSpacing: 0.5,
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: mint, boxShadow: `0 0 8px ${mint}` }} />
          {t.hflowTraceLeft}
        </span>
        <span style={{ color: mint }}>{t.hflowTraceRight} ✓</span>
      </div>
    </div>
  );
}

function HomeNodeOverlay({ node, accentMap, text, muted, ink, W, H }) {
  const c = accentMap[node.accent] || accentMap.mint;
  const xPct = (node.x / W) * 100;
  const yPct = (node.y / H) * 100;
  const wPct = (node.w / W) * 100;
  const hPct = (node.h / H) * 100;
  const kind = node.kind;

  const baseStyle = {
    position: 'absolute',
    left: `${xPct}%`, top: `${yPct}%`, width: `${wPct}%`, height: `${hPct}%`,
    borderRadius: kind === 'trigger' ? 16 : kind === 'hub' ? 14 : kind === 'agent' ? 12 : 10,
    border: `1px solid ${c}55`,
    background:
      kind === 'trigger' ? `linear-gradient(135deg, ${c}1f, ${ink}cc)` :
      kind === 'hub' ? `linear-gradient(135deg, ${c}26, ${ink}ee)` :
      kind === 'agent' ? `linear-gradient(135deg, ${c}14, ${ink}f6)` :
      ink,
    boxShadow:
      kind === 'trigger' || kind === 'hub' ? `0 0 32px ${c}33, inset 0 0 0 1px ${c}33` :
      kind === 'agent' ? `0 0 18px ${c}1c` :
      `0 0 12px ${c}14`,
    display: 'flex',
    alignItems: 'center',
    padding: kind === 'sub' ? '0 12px' : kind === 'trigger' ? 10 : '12px 14px',
    gap: 10,
    fontFamily: "'Inter Tight', system-ui, sans-serif",
  };

  if (kind === 'trigger') {
    return (
      <div style={{ ...baseStyle, flexDirection: 'column', justifyContent: 'center', textAlign: 'center' }}>
        {node.glyph === 'whatsapp' && <QGlyphWhatsapp color={c} />}
        {node.glyph === 'phone' && <QGlyphPhone color={c} />}
        {node.glyph === 'camera' && <QGlyphCamera color={c} />}
        <div style={{ fontSize: 12, fontWeight: 600, color: text, marginTop: 6 }}>{node.l}</div>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: muted, letterSpacing: 0.4, marginTop: 2, whiteSpace: 'nowrap' }}>{node.s}</div>
      </div>
    );
  }

  if (kind === 'sub') {
    return (
      <div style={baseStyle}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: c, flexShrink: 0, boxShadow: `0 0 6px ${c}` }} />
        <span style={{ fontSize: 12, color: text, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{node.label}</span>
      </div>
    );
  }

  // hub / agent
  return (
    <div style={baseStyle}>
      <div style={{
        width: 34, height: 34, borderRadius: 8, flexShrink: 0,
        background: c + '22', border: `1px solid ${c}55`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {kind === 'hub' ? <QGlyphHub color={c} /> : <QGlyphAgent color={c} />}
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: text, letterSpacing: -0.2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{node.l}</div>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: muted, letterSpacing: 0.5, marginTop: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{node.s}</div>
      </div>
    </div>
  );
}

function QGlyphWhatsapp({ color }) {
  return (
    <svg width="30" height="30" viewBox="0 0 30 30" fill="none">
      <circle cx="15" cy="15" r="13" fill={color + '22'} stroke={color} strokeWidth="1.4" />
      <path d="M9.5 18 L8.5 22 L12.5 20.6 C13.5 21 14.3 21.1 15 21.1 C18.6 21.1 21.4 18.3 21.4 14.8 C21.4 11.3 18.6 8.5 15 8.5 C11.4 8.5 8.6 11.3 8.6 14.8 C8.6 16.1 9 17.2 9.5 18 Z" fill={color} fillOpacity="0.75" />
    </svg>
  );
}
function QGlyphPhone({ color }) {
  return (
    <svg width="30" height="30" viewBox="0 0 30 30" fill="none">
      <circle cx="15" cy="15" r="13" fill={color + '22'} stroke={color} strokeWidth="1.4" />
      <path d="M11 9 C11 9 11.5 12 12.5 13.5 C13.5 15 16 17.5 17.5 18.5 C19 19.5 22 20 22 20 L20 22 C20 22 16.5 21.5 14 19 C11.5 16.5 11 13 11 13 L13 11 Z" fill={color} fillOpacity="0.85" />
    </svg>
  );
}
function QGlyphCamera({ color }) {
  return (
    <svg width="30" height="30" viewBox="0 0 30 30" fill="none">
      <circle cx="15" cy="15" r="13" fill={color + '22'} stroke={color} strokeWidth="1.4" />
      <rect x="7" y="11" width="16" height="10" rx="2" fill="none" stroke={color} strokeWidth="1.4" />
      <path d="M11 11 L12 9 L18 9 L19 11" fill="none" stroke={color} strokeWidth="1.4" />
      <circle cx="15" cy="16" r="3" fill="none" stroke={color} strokeWidth="1.4" />
      <circle cx="15" cy="16" r="1" fill={color} />
    </svg>
  );
}
function QGlyphHub({ color }) {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round">
      <circle cx="9" cy="9" r="2.6" fill={color} />
      <circle cx="3" cy="3.5" r="1.1" />
      <circle cx="15" cy="3.5" r="1.1" />
      <circle cx="3" cy="14.5" r="1.1" />
      <circle cx="15" cy="14.5" r="1.1" />
      <line x1="4" y1="4.5" x2="7" y2="7.5" />
      <line x1="14" y1="4.5" x2="11" y2="7.5" />
      <line x1="4" y1="13.5" x2="7" y2="10.5" />
      <line x1="14" y1="13.5" x2="11" y2="10.5" />
    </svg>
  );
}
function QGlyphAgent({ color }) {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round">
      <rect x="3.5" y="5" width="11" height="9" rx="2.5" />
      <circle cx="7" cy="9.3" r="1.2" fill={color} />
      <circle cx="11" cy="9.3" r="1.2" fill={color} />
      <line x1="9" y1="2.5" x2="9" y2="5" />
      <circle cx="9" cy="2.2" r="0.9" fill={color} />
      <line x1="1.5" y1="8" x2="3.5" y2="8" />
      <line x1="14.5" y1="8" x2="16.5" y2="8" />
    </svg>
  );
}

function Logo({ color = '#000', accent = '#5EEAD4', small }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: "'Inter Tight', sans-serif", fontWeight: 600, fontSize: small ? 14 : 16, color, letterSpacing: -0.3 }}>
      <img src="logo.svg" width={small ? 22 : 26} height={small ? 22 : 26} alt="AI Smart Network" style={{ display: 'block' }} />
      <span>AI·SMART <span style={{ opacity: 0.5 }}>network</span></span>
    </div>
  );
}

function LangToggle({ lang, setLang, dark }) {
  const bg = dark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';
  const border = dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.12)';
  const activeBg = dark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.85)';
  const activeFg = dark ? '#fff' : '#fff';
  const fg = dark ? '#8A8F99' : '#666';
  return (
    <div style={{ display: 'inline-flex', background: bg, border: `1px solid ${border}`, borderRadius: 999, padding: 3, fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, letterSpacing: 1 }}>
      {['de', 'en'].map((l) => (
        <button key={l} onClick={() => setLang(l)} style={{
          background: lang === l ? activeBg : 'transparent',
          color: lang === l ? activeFg : fg,
          border: 'none', padding: '5px 10px', borderRadius: 999, cursor: 'pointer',
          fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit',
        }}>{l.toUpperCase()}</button>
      ))}
    </div>
  );
}

function SectionLabel({ children, mono, mint, muted }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      fontFamily: mono ? "'IBM Plex Mono', monospace" : 'inherit',
      fontSize: 12, color: muted, letterSpacing: 1.4, textTransform: 'uppercase',
    }}>
      <span style={{ width: 28, height: 1, background: mint }} />
      {children}
    </div>
  );
}

function PillarIcon({ i, mint, indigo }) {
  const c = i % 2 === 0 ? mint : indigo;
  return (
    <div style={{ position: 'absolute', top: 24, right: 24, width: 44, height: 44, borderRadius: 12, border: `1px solid ${c}55`, background: `${c}11`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke={c} strokeWidth="1.5">
        {i === 0 && <>
          <rect x="3" y="6" width="16" height="11" rx="2" />
          <path d="M3 10h16" />
          <circle cx="6" cy="8" r="0.7" fill={c} />
        </>}
        {i === 1 && <>
          <circle cx="11" cy="11" r="6" />
          <path d="M11 5v3 M11 14v3 M5 11h3 M14 11h3" />
          <circle cx="11" cy="11" r="2" fill={c} />
        </>}
        {i === 2 && <>
          <rect x="6" y="2" width="10" height="18" rx="2" />
          <path d="M9 17h4" />
        </>}
        {i === 3 && <>
          <path d="M11 2 L19 6 V12 C19 16 15 19 11 20 C7 19 3 16 3 12 V6 Z" />
          <path d="M8 11l2 2 4-4" />
        </>}
      </svg>
    </div>
  );
}

function DashboardCard({ t, mint, indigo, text, muted, line, fog, tick }) {
  // Generate dynamic-ish sparkline points
  const points = useMemoQ(() => {
    const seed = tick;
    return Array.from({ length: 24 }, (_, i) => {
      const s = Math.sin(i * 0.5 + seed * 0.3) * 0.3 + Math.cos(i * 0.7) * 0.2;
      return 30 - (s + 1) * 12 - (i * 0.4);
    });
  }, [tick]);
  const path = `M ${points.map((y, i) => `${(i * 240) / 23},${y + 30}`).join(' L ')}`;

  return (
    <div style={{
      position: 'relative',
      borderRadius: 22, padding: 26,
      background: `linear-gradient(180deg, ${fog}f8, #0B0C0Ef8)`,
      border: `1px solid ${line}`,
      boxShadow: `0 30px 80px -20px ${mint}22, 0 0 0 1px rgba(255,255,255,0.02)`,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
        <div style={{ fontSize: 13, color: text, fontWeight: 600, letterSpacing: -0.2 }}>Operations Pulse</div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 11, color: muted, fontFamily: "'IBM Plex Mono', monospace" }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: mint, boxShadow: `0 0 8px ${mint}` }} />
          {t.kpiLabel}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 18 }}>
        {t.kpis.map((k, i) => (
          <div key={k.label} style={{ padding: 14, borderRadius: 12, background: '#0B0C0E', border: `1px solid ${line}` }}>
            <div style={{ fontSize: 11, color: muted, letterSpacing: 0.4, marginBottom: 6 }}>{k.label}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: -0.6, fontVariantNumeric: 'tabular-nums' }}>{k.v}</div>
              <div style={{ fontSize: 11, color: k.s.startsWith('−') ? '#FCA5A5' : mint, fontFamily: "'IBM Plex Mono', monospace" }}>{k.s}</div>
            </div>
          </div>
        ))}
      </div>
      {/* Sparkline */}
      <div style={{ padding: 16, borderRadius: 12, background: '#0B0C0E', border: `1px solid ${line}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
          <div style={{ fontSize: 11, color: muted, letterSpacing: 0.4 }}>Lead-Velocity · 24h</div>
          <div style={{ fontSize: 11, color: mint, fontFamily: "'IBM Plex Mono', monospace" }}>+18.4%</div>
        </div>
        <svg width="100%" height="60" viewBox="0 0 240 60" preserveAspectRatio="none">
          <defs>
            <linearGradient id="qfill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={mint} stopOpacity="0.35" />
              <stop offset="100%" stopColor={mint} stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d={`${path} L 240,60 L 0,60 Z`} fill="url(#qfill)" />
          <path d={path} fill="none" stroke={mint} strokeWidth="1.5" />
        </svg>
      </div>
      {/* Agent log */}
      <div style={{ marginTop: 14, padding: 14, borderRadius: 12, background: '#0B0C0E', border: `1px solid ${line}`, fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, lineHeight: 1.7, color: muted }}>
        <div style={{ color: text, marginBottom: 6, fontFamily: "'Inter Tight', sans-serif", fontSize: 12 }}>Agent activity</div>
        <div><span style={{ color: mint }}>14:02</span> · research-agent → enriched lead #4821</div>
        <div><span style={{ color: mint }}>14:03</span> · quote-bot → drafted offer (€ 18.420)</div>
        <div><span style={{ color: indigo }}>14:05</span> · escalation → human review · margin {'<'}12%</div>
        <div><span style={{ color: mint }}>14:09</span> · datev-export → batch synced ✓</div>
      </div>
    </div>
  );
}

function WorkflowDiagram({ steps, mint, indigo, line, muted, text, tick, fog }) {
  const active = tick % steps.length;
  return (
    <div style={{ padding: 36, borderRadius: 20, border: `1px solid ${line}`, background: fog, position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${steps.length}, 1fr)`, gap: 8, alignItems: 'center' }}>
        {steps.map((s, i) => (
          <React.Fragment key={s}>
            <div style={{ textAlign: 'center', position: 'relative' }}>
              <div style={{
                width: 56, height: 56, borderRadius: 14, margin: '0 auto 12px',
                border: `1px solid ${i === active ? mint : line}`,
                background: i === active ? `${mint}11` : '#0B0C0E',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, color: i === active ? mint : muted,
                transition: 'all 0.4s',
                boxShadow: i === active ? `0 0 28px ${mint}44` : 'none',
              }}>{String(i + 1).padStart(2, '0')}</div>
              <div style={{ fontSize: 13, color: i === active ? text : muted, transition: 'color 0.4s', fontWeight: i === active ? 500 : 400 }}>{s}</div>
            </div>
          </React.Fragment>
        ))}
      </div>
      {/* Connecting line */}
      <div style={{ position: 'absolute', left: 36, right: 36, top: 64, height: 1, background: line }} />
      <div style={{
        position: 'absolute', left: 36, top: 63, height: 3, borderRadius: 2,
        background: `linear-gradient(90deg, ${mint}, ${indigo})`,
        width: `${((active + 1) / steps.length) * (100 - 6)}%`,
        transition: 'width 1.4s ease',
        boxShadow: `0 0 12px ${mint}`,
      }} />
    </div>
  );
}

function Slider({ label, value, setValue, min, max, step, mint, muted, line, suffix }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8, fontSize: 13, color: muted }}>
        <span>{label}</span>
        <span style={{ color: '#E7E9EE', fontFamily: "'IBM Plex Mono', monospace" }}>{value}{suffix}</span>
      </div>
      <input
        type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => setValue(Number(e.target.value))}
        style={{
          width: '100%', accentColor: mint, background: 'transparent',
        }}
      />
    </div>
  );
}

function ResultBig({ label, value, mint, muted, big }) {
  return (
    <div>
      <div style={{ fontSize: 12, color: muted, letterSpacing: 1, textTransform: 'uppercase', fontFamily: "'IBM Plex Mono', monospace", marginBottom: 8 }}>{label}</div>
      <div style={{
        fontSize: big ? 84 : 56, fontWeight: 700, letterSpacing: -2.5,
        background: `linear-gradient(120deg, ${mint}, #fff 80%)`,
        WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
        fontVariantNumeric: 'tabular-nums', lineHeight: 1,
      }}>{value}</div>
    </div>
  );
}

function ReportPreview({ lang, mint, indigo, line, fog, text, muted }) {
  return (
    <div style={{
      borderRadius: 20, padding: 28, border: `1px solid ${line}`,
      background: `linear-gradient(180deg, ${fog}, #0B0C0E)`,
      boxShadow: `0 20px 60px -20px ${indigo}22`,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 500 }}>{lang === 'de' ? 'Monatsreport · Mai 2026' : 'Monthly report · May 2026'}</div>
          <div style={{ fontSize: 11, color: muted, fontFamily: "'IBM Plex Mono', monospace", marginTop: 4 }}>Client: SOMETALL TRADING GMBH</div>
        </div>
        <div style={{ fontSize: 11, color: mint, padding: '4px 10px', border: `1px solid ${mint}55`, borderRadius: 999, fontFamily: "'IBM Plex Mono', monospace" }}>SIGNED</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10, marginBottom: 16 }}>
        <ReportStat label="Uptime" value="99.99%" mint={mint} muted={muted} line={line} />
        <ReportStat label={lang === 'de' ? 'Leads' : 'Leads'} value="284" mint={mint} muted={muted} line={line} />
        <ReportStat label={lang === 'de' ? 'Std. gespart' : 'Hrs saved'} value="612" mint={mint} muted={muted} line={line} />
      </div>
      <div style={{ padding: 14, borderRadius: 12, border: `1px solid ${line}`, background: '#0B0C0E' }}>
        <div style={{ fontSize: 11, color: muted, letterSpacing: 0.5, marginBottom: 10 }}>{lang === 'de' ? 'Vorfälle & Maßnahmen' : 'Incidents & actions'}</div>
        {[
          { d: '04.05', t: lang === 'de' ? 'DB-Latency-Spike · auto-mitigiert' : 'DB latency spike · auto-mitigated', s: 'ok' },
          { d: '12.05', t: lang === 'de' ? 'Mail-Provider-Ausfall · Failover aktiv' : 'Mail provider outage · failover active', s: 'ok' },
          { d: '21.05', t: lang === 'de' ? 'KI-Recherche → 14 neue Leads angereichert' : 'AI research → 14 new leads enriched', s: 'ok' },
        ].map((r) => (
          <div key={r.d} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '7px 0', borderBottom: `1px solid ${line}`, fontSize: 12, color: text }}>
            <span style={{ fontFamily: "'IBM Plex Mono', monospace", color: muted, fontSize: 11, width: 40 }}>{r.d}</span>
            <span style={{ flex: 1 }}>{r.t}</span>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: mint }} />
          </div>
        ))}
      </div>
    </div>
  );
}

function ReportStat({ label, value, mint, muted, line }) {
  return (
    <div style={{ padding: 12, borderRadius: 10, border: `1px solid ${line}` }}>
      <div style={{ fontSize: 11, color: muted, letterSpacing: 0.4, textTransform: 'uppercase' }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 600, color: '#fff', marginTop: 4, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.5 }}>{value}</div>
    </div>
  );
}

function ChatTeaser({ lang, mint, line, fog, muted, text }) {
  return (
    <div style={{
      borderRadius: 18, padding: 20, background: '#0B0C0E', border: `1px solid ${line}`,
    }}>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 14 }}>
        <div style={{ width: 28, height: 28, borderRadius: 999, background: `linear-gradient(135deg, ${mint}, #818CF8)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: '#0A0A0B', fontWeight: 700 }}>A</div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 500 }}>{lang === 'de' ? 'Diagnose-Assistent' : 'Diagnosis assistant'}</div>
          <div style={{ fontSize: 11, color: muted, fontFamily: "'IBM Plex Mono', monospace" }}>online · {lang === 'de' ? 'antwortet in <2s' : 'replies in <2s'}</div>
        </div>
      </div>
      <div style={{ padding: 12, borderRadius: 12, background: '#13141A', border: `1px solid ${line}`, fontSize: 13, marginBottom: 10 }}>
        {lang === 'de' ? 'Welcher Prozess kostet Sie heute am meisten Zeit?' : 'Which process eats most of your time today?'}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {(lang === 'de'
          ? ['Angebotserstellung', 'Lager & Lot', 'Buchhaltung', 'Lead-Followup']
          : ['Quotation', 'Stock & lot', 'Bookkeeping', 'Lead follow-up']
        ).map((c) => (
          <button key={c} style={{
            background: 'transparent', color: text, border: `1px solid ${mint}55`,
            borderRadius: 999, padding: '7px 12px', fontSize: 12, fontFamily: 'inherit', cursor: 'pointer',
          }}>{c}</button>
        ))}
      </div>
      <a href="diagnose.html" style={{
        width: '100%', marginTop: 14, background: mint, color: '#0A0A0B', border: 'none',
        borderRadius: 12, padding: '12px 16px', fontSize: 14, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer', textDecoration: 'none', display: 'block', textAlign: 'center', boxSizing: 'border-box',
      }}>{lang === 'de' ? 'Diagnose in 90 Sek. starten →' : 'Run 90-sec diagnosis →'}</a>
    </div>
  );
}

window.Quantum = Quantum;