const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "orange",
  "density": "default",
  "grain": "on",
  "italics": "on",
  "cursor": "off"
}/*EDITMODE-END*/;

const PROBLEMS = [
  { n: "01", t: "Zettel\u00ADwirtschaft", tag: "Paper trail", p: "Stunden\u00ADnachweise in der Jacken\u00ADtasche, Liefer\u00ADscheine auf dem Armaturenbrett, Fotos im privaten Handy." },
  { n: "02", t: "Schlecht verplante Ressourcen", tag: "Resources", p: "Zwei Kolonnen auf derselben Baustelle, eine andere steht. Weil niemand den \u00DCberblick hat." },
  { n: "03", t: "Funkstille zur Baustelle", tag: "Comms", p: "B\u00FCro wei\u00DF nicht, was auf der Baustelle passiert. Baustelle wei\u00DF nicht, was das B\u00FCro entschieden hat." },
  { n: "04", t: "Angebots\u00ADkalkulation", tag: "Quotes", p: "Zwei Abende kalkuliert, dann kommt die Absage. Und bei den Auftr\u00E4gen, die kommen, war der Preis zu knapp." },
  { n: "05", t: "Lagerverwaltung", tag: "Inventory", p: "Material bestellt, obwohl noch genug da war. Oder umgekehrt: nichts da, Baustelle steht." },
  { n: "06", t: "Verschiedene Systeme", tag: "Silos", p: "Excel, WhatsApp, eine alte Branchensoftware und drei Papierordner. Alle wissen etwas anderes." },
  { n: "07", t: "Ineffizienter Einkauf", tag: "Purchasing", p: "Gleiches Material, drei verschiedene Preise, weil jeder f\u00FCr sich bestellt." },
  { n: "08", t: "Planung", tag: "Planning", p: "Der Zeitplan stimmt bis zum ersten unvorhergesehenen Problem \u2013 dann ist alles Improvisation." },
  { n: "09", t: "Bau\u00ADdoku\u00ADmen\u00ADtation", tag: "Docs", p: "Fotos liegen auf f\u00FCnf Handys verteilt. Wer hat was wann dokumentiert? Unklar." },
  { n: "10", t: "Entscheidungen gehen verloren", tag: "Decisions", p: "Auf der Baustelle wurde etwas anders gemacht. Warum? Steht nirgends." },
  { n: "11", t: "Controlling", tag: "Finance", p: "Am Monatsende kommen die Zahlen \u2013 aber das Projekt l\u00E4uft schon seit Wochen aus dem Ruder." },
  { n: "12", t: "Nachkalkulation", tag: "Post-Calc", p: "Das Projekt ist abgeschlossen. War es rentabel? Meistens wei\u00DF das niemand genau." },
  { n: "13", t: "Kunden\u00ADkommunikation", tag: "Client Comms", p: "Der Kunde ruft dreimal am Tag an. Der Meister hat keine Zeit, jedes Mal den aktuellen Stand zu erkl\u00E4ren." },
  { n: "14", t: "M\u00E4ngel\u00ADmanagement", tag: "Warranty", p: "M\u00E4ngel werden irgendwo notiert. Ob alles behoben wurde, l\u00E4sst sich kaum nachverfolgen." },
  { n: "15", t: "Subunternehmer\u00ADkoordination", tag: "Subs", p: "Wer macht was, wann, zu welchem Preis? Bei drei Gewerken wird das schnell un\u00FCbersichtlich." }
];

const HOW_BUILD = [
  { n: "01", t: "Standard\u00ADfunktionen müssen nicht neu erfunden werden", p: "Kunden­verwaltung, Termin­planung, Rechnungs­schreibung – KI erzeugt diese Bausteine in Stunden statt Wochen. Spart Zeit und Geld." },
  { n: "02", t: "Fehler werden sofort erkannt", p: "KI prüft jede Funktion automatisch – gründlicher als jeder manuelle QA-Durchlauf. Weniger Nach­besserungen, schnellere Fertig­stellung." },
  { n: "03", t: "Bewährte Bausteine, individuell zusammen­gesetzt", p: "Foto­dokumentation, digitale Stunden­zettel, Material­übersicht. Wie beim Hausbau: bewährte Materialien, aber Ihr Grundriss." },
  { n: "04", t: "Einfache Bedienung von Anfang an", p: "KI hilft, Oberflächen zu gestalten, die sofort verständlich sind – auch für Mitarbeiter, die nicht technik­affin sind." }
];

const AI_CARDS = [
  { n: "01", t: "Leistungs­verzeichnis Analyse", p: "Automatische Analyse identifiziert wertvolle Nachtrags­potenziale im Projekt – zuverlässig und sekundenschnell.", tags: ["LV", "Nachträge"] },
  { n: "02", t: "Chatte mit deiner Baustelle", p: "Fragen zu Vorgängen, Materialien, Ressourcen – die KI findet alle Antworten verlässlich in Sekunden.", tags: ["Chat", "Q&A"] },
  { n: "03", t: "VOB Unter­stützung", p: "KI-gestützte Hilfe bei komplexen VOB-Fragen, Vertrags­prüfungen und rechtssicherer Bau­dokumentation.", tags: ["VOB", "Verträge"] },
  { n: "04", t: "Intelligente Material­bestellung", p: "Bedarfs­erkennung generiert smarte Bestell­vorschläge, abgestimmt auf Projekt­fortschritt und Termine.", tags: ["Einkauf", "Logistik"] },
  { n: "05", t: "Ressourcen­planung", p: "Die KI optimiert Geräte- und Personal­einsatz, vermeidet teure Leerläufe und steigert die Produktivität erheblich.", tags: ["Personal", "Geräte"] },
  { n: "06", t: "Intelligentes Controlling", p: "Smarte Erkennung finanzieller Abweichungen, automatisch. Liefert wertvolle Entscheidungs­grundlagen.", tags: ["Finanzen"] },
  { n: "07", t: "Auffällig­keiten bestimmen", p: "Erkennt umgehend Unregel­mäßigkeiten durch ständige Über­wachung von Beständen und Bestell­mustern.", tags: ["Monitoring"] },
  { n: "08", t: "Foto­dokumentation", p: "KI extrahiert aus Baustellen­fotos automatisch Mängel, Fortschritte und ordnet sie dem richtigen Gewerk zu.", tags: ["Vision", "Doku"] }
];

const HOW_STEPS = [
  { n: "01", t: "Kostenloses Beratungs­gespräch", p: "Wir analysieren Ihre Heraus­forderungen und zeigen konkrete Potenziale auf." },
  { n: "02", t: "Erster Prototyp in Tagen", p: "Statt monatelanger Planung erhalten Sie in wenigen Tagen einen funktionierenden Prototyp." },
  { n: "03", t: "Umsetzung & Feinschliff", p: "Auf Basis Ihres Feedbacks entwickeln wir den Prototyp zur fertigen Software – angepasst an Ihren Arbeits­alltag." },
  { n: "04", t: "Fahrplan für die Zukunft", p: "Gemein­sam entwickeln wir einen Plan für nach­haltige Digitalisierung." }
];

const SECTIONS = [
  { id: 'top', n: '01', label: 'Intro' },
  { id: 'problems', n: '02', label: 'Probleme' },
  { id: 'savings', n: '03', label: 'Preisvergleich' },
  { id: 'how-built', n: '04', label: 'Methode' },
  { id: 'demo', n: '05', label: 'Live Demo', dark: false },
  { id: 'ai', n: '06', label: 'KI-Module', dark: true },
  { id: 'process', n: '07', label: 'Prozess' },

  { id: 'faq', n: '09', label: 'FAQ' },
  { id: 'about', n: '10', label: 'Team' },
  { id: 'cta', n: '11', label: 'Termin' }
];

function Ticker() {
  const items = [
    "KI-gestützte Softwareentwicklung",
    "Made for Handwerk + Bau",
    "Ab Woche 1: funktionierender Prototyp",
    "Keine Lizenz­gebühren — die Software gehört Ihnen",
    "Hosting & Pflege: ab €100 / Monat",
    "Made in Germany",
    "VOB-konform",
    "Indiv. statt von der Stange"
  ];
  const arr = [...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {arr.map((x, i) => (
          <span key={i}>
            <span className="sep">◆</span>
            <span>{x}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

const NAV_LINKS = [
  { href: '#problems', label: 'Heraus­forderungen' },
  { href: '#savings',  label: 'Preis­vergleich' },
  { href: '#demo',     label: 'Chatbot' },
  { href: '#ai',       label: 'KI-Lösungen' },
  { href: '#about',    label: 'Über uns' },
];

const ALL_SECTION_IDS = ['top', 'problems', 'savings', 'how-built', 'demo', 'ai', 'process', 'faq', 'about', 'cta'];

function Topbar() {
  const [activeId, setActiveId] = useState(() => {
    const hash = window.location.hash.slice(1);
    return hash || 'top';
  });

  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const id = e.target.id;
          setActiveId(id);
          const hash = id === 'top' ? window.location.pathname : '#' + id;
          history.replaceState(null, '', hash);
        }
      });
    }, { rootMargin: '-40% 0px -55% 0px', threshold: 0 });

    ALL_SECTION_IDS.forEach((id) => {
      const el = document.getElementById(id);
      if (el) io.observe(el);
    });
    return () => io.disconnect();
  }, []);

  return (
    <div className="topbar">
      <div className="topbar-inner">
        <a href="#top" className="brand">
          <span className="brand-mark">B</span>
          <span className="brand-name">bau-digital<em>.ai</em></span>
        </a>
        <nav className="primary">
          {NAV_LINKS.map(({ href, label }) => (
            <a key={href} href={href} data-active={activeId === href.slice(1) ? '1' : '0'}>
              {label}
            </a>
          ))}
        </nav>
        <div className="topbar-right">
          <a className="btn primary" href="#cta">
            Termin <span className="arrow">↗</span>
          </a>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg-lines" aria-hidden="true" />
      <div className="hero-grid">
        <div className="hero-copy">
          <h1 className="hero-title">
            Software, die zu Ihrem<br/>
            <em>Betrieb</em> passt &mdash;<br/>
            <span className="hi">schnell</span>, bezahlbar,<br/>
            dank KI.
          </h1>
          <p className="hero-lede">
            Wir entwickeln intelligente Softwarelösungen, die Ihre Prozesse vereinfachen,
            Zeit sparen und Ihr Unternehmen nach vorne bringen.
          </p>
          <div className="hero-foot">
            <a className="btn cta-primary" href="#cta">Kostenloses Beratungs­gespräch <span className="arrow">↗</span></a>
            <a className="btn ghost-pill" href="https://wa.me/4954196273720">
              <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
                <path fill="currentColor" d="M17.5 14.4l-2.3-1.1c-.3-.1-.6-.1-.8.2l-.8 1c-.2.2-.5.3-.7.2-.9-.4-1.9-1.1-2.7-1.9-.8-.8-1.5-1.8-1.9-2.7-.1-.2 0-.5.2-.7l1-.8c.3-.2.3-.5.2-.8L8.6 5.5c-.2-.4-.6-.6-1-.5-.7.2-1.6.6-2 1.5-.8 1.8-.1 4.5 2.5 7.1 2.5 2.6 5.3 3.3 7.1 2.5.9-.4 1.3-1.3 1.5-2 .1-.4-.1-.8-.5-1l-1.7-1.7zM12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.3 1.2 4.7L2 22l5.5-1.2C8.9 21.6 10.4 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
              </svg>
              WhatsApp Chat
            </a>
          </div>

        </div>
        <HeroVisual />
      </div>
    </section>
  );
}

function HeroVisual() {
  return (
    <div className="hero-visual hero-img-wrap">
      <img
        className="hero-img"
        src="herobaudigital.png"
        alt="Bau-digital.ai Dashboard auf Tablet und Smartphone — Baustelle im Hintergrund"
      />
    </div>
  );
}

const PROBLEM_ILLUS = [
  // 00 Zettelwirtschaft
  <svg viewBox="0 0 160 100" fill="none">
    <g transform="rotate(-12 44 52)"><rect x="18" y="18" width="50" height="64" rx="2" stroke="rgba(255,255,255,0.18)" strokeWidth="1.5"/></g>
    <g transform="rotate(5 74 48)"><rect x="50" y="14" width="50" height="64" rx="2" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.28)" strokeWidth="1.5"/></g>
    <rect x="80" y="16" width="50" height="66" rx="2" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.5)" strokeWidth="1.5"/>
    <line x1="89" y1="32" x2="120" y2="32" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
    <line x1="89" y1="41" x2="120" y2="41" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
    <line x1="89" y1="50" x2="108" y2="50" stroke="rgba(255,255,255,0.18)" strokeWidth="1"/>
    <path d="M120 16 L130 16 L130 26 Z" fill="#ff5b14"/>
  </svg>,
  // 01 Schlecht verplante Ressourcen
  <svg viewBox="0 0 160 100" fill="none">
    <line x1="18" y1="28" x2="142" y2="28" stroke="rgba(255,255,255,0.12)" strokeWidth="1"/>
    <line x1="18" y1="54" x2="142" y2="54" stroke="rgba(255,255,255,0.12)" strokeWidth="1"/>
    <line x1="18" y1="80" x2="142" y2="80" stroke="rgba(255,255,255,0.12)" strokeWidth="1"/>
    <rect x="22" y="18" width="64" height="18" rx="9" fill="#ff5b14" opacity="0.8"/>
    <rect x="72" y="44" width="58" height="18" rx="9" fill="#ff5b14" opacity="0.8"/>
    <rect x="22" y="44" width="42" height="18" rx="9" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.3)" strokeWidth="1" strokeDasharray="4 2"/>
    <rect x="22" y="70" width="95" height="18" rx="9" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.18)" strokeWidth="1" strokeDasharray="4 3"/>
    <circle cx="94" cy="27" r="5" fill="rgba(255,255,255,0.45)"/>
    <circle cx="106" cy="27" r="5" fill="rgba(255,255,255,0.45)" stroke="#ff5b14" strokeWidth="1.5"/>
    <line x1="97" y1="27" x2="103" y2="27" stroke="#ff5b14" strokeWidth="1.5"/>
  </svg>,
  // 02 Funkstille zur Baustelle
  <svg viewBox="0 0 160 100" fill="none">
    <path d="M8 14 L8 52 Q8 58 14 58 L58 58 L64 68 L64 58 L70 58 Q76 58 76 52 L76 14 Q76 8 70 8 L14 8 Q8 8 8 14Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5"/>
    <line x1="18" y1="24" x2="66" y2="24" stroke="rgba(255,255,255,0.28)" strokeWidth="1"/>
    <line x1="18" y1="33" x2="66" y2="33" stroke="rgba(255,255,255,0.28)" strokeWidth="1"/>
    <line x1="18" y1="42" x2="50" y2="42" stroke="rgba(255,255,255,0.16)" strokeWidth="1"/>
    <path d="M152 48 L152 86 Q152 92 146 92 L102 92 L96 100 L96 92 L90 92 Q84 92 84 86 L84 48 Q84 42 90 42 L146 42 Q152 42 152 48Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5"/>
    <line x1="94" y1="58" x2="142" y2="58" stroke="rgba(255,255,255,0.28)" strokeWidth="1"/>
    <line x1="94" y1="67" x2="142" y2="67" stroke="rgba(255,255,255,0.28)" strokeWidth="1"/>
    <circle cx="80" cy="34" r="5" fill="none" stroke="#ff5b14" strokeWidth="1.5"/>
    <line x1="77" y1="31" x2="83" y2="37" stroke="#ff5b14" strokeWidth="1.5"/>
    <line x1="83" y1="31" x2="77" y2="37" stroke="#ff5b14" strokeWidth="1.5"/>
  </svg>,
  // 03 Angebotskalkulation
  <svg viewBox="0 0 160 100" fill="none">
    <rect x="16" y="8" width="80" height="84" rx="3" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5"/>
    <line x1="26" y1="30" x2="86" y2="30" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/>
    <line x1="26" y1="42" x2="86" y2="42" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/>
    <line x1="26" y1="54" x2="86" y2="54" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/>
    <line x1="26" y1="66" x2="62" y2="66" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/>
    <circle cx="122" cy="36" r="22" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.3)" strokeWidth="1.5"/>
    <line x1="122" y1="18" x2="122" y2="36" stroke="rgba(255,255,255,0.5)" strokeWidth="1.5"/>
    <line x1="122" y1="36" x2="135" y2="43" stroke="#ff5b14" strokeWidth="2"/>
    <line x1="32" y1="78" x2="58" y2="78" stroke="#ff5b14" strokeWidth="1.5" strokeDasharray="3 2" opacity="0.6"/>
    <line x1="32" y1="84" x2="48" y2="84" stroke="#ff5b14" strokeWidth="1" strokeDasharray="3 2" opacity="0.3"/>
  </svg>,
  // 04 Lagerverwaltung
  <svg viewBox="0 0 160 100" fill="none">
    <line x1="10" y1="28" x2="150" y2="28" stroke="rgba(255,255,255,0.3)" strokeWidth="1.5"/>
    <line x1="10" y1="64" x2="150" y2="64" stroke="rgba(255,255,255,0.3)" strokeWidth="1.5"/>
    <line x1="10" y1="26" x2="10" y2="96" stroke="rgba(255,255,255,0.18)" strokeWidth="1"/>
    <line x1="150" y1="26" x2="150" y2="96" stroke="rgba(255,255,255,0.18)" strokeWidth="1"/>
    <rect x="18" y="34" width="32" height="24" rx="2" fill="rgba(255,255,255,0.12)" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
    <rect x="62" y="34" width="32" height="24" rx="2" fill="rgba(255,255,255,0.12)" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
    <rect x="106" y="34" width="32" height="24" rx="2" fill="none" stroke="#ff5b14" strokeWidth="1.5" strokeDasharray="3 2"/>
    <line x1="112" y1="46" x2="132" y2="46" stroke="#ff5b14" strokeWidth="1" strokeDasharray="2 2" opacity="0.5"/>
    <rect x="18" y="70" width="32" height="24" rx="2" fill="rgba(255,255,255,0.12)" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
    <rect x="62" y="70" width="32" height="24" rx="2" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="1" strokeDasharray="3 2"/>
    <rect x="106" y="70" width="32" height="24" rx="2" fill="rgba(255,255,255,0.12)" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
  </svg>,
  // 05 Verschiedene Systeme
  <svg viewBox="0 0 160 100" fill="none">
    <rect x="6" y="6" width="40" height="28" rx="3" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.35)" strokeWidth="1.5"/>
    <line x1="14" y1="16" x2="38" y2="16" stroke="rgba(255,255,255,0.32)" strokeWidth="1"/>
    <line x1="14" y1="22" x2="38" y2="22" stroke="rgba(255,255,255,0.22)" strokeWidth="1"/>
    <line x1="14" y1="28" x2="28" y2="28" stroke="rgba(255,255,255,0.14)" strokeWidth="1"/>
    <rect x="114" y="6" width="40" height="28" rx="3" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.35)" strokeWidth="1.5"/>
    <ellipse cx="134" cy="17" rx="10" ry="4" fill="none" stroke="rgba(255,255,255,0.32)" strokeWidth="1"/>
    <line x1="124" y1="17" x2="124" y2="27" stroke="rgba(255,255,255,0.28)" strokeWidth="1"/>
    <line x1="144" y1="17" x2="144" y2="27" stroke="rgba(255,255,255,0.28)" strokeWidth="1"/>
    <ellipse cx="134" cy="27" rx="10" ry="4" fill="none" stroke="rgba(255,255,255,0.32)" strokeWidth="1"/>
    <rect x="6" y="66" width="40" height="28" rx="3" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.35)" strokeWidth="1.5"/>
    <polyline points="10,72 26,82 42,72" fill="none" stroke="rgba(255,255,255,0.32)" strokeWidth="1"/>
    <rect x="114" y="66" width="40" height="28" rx="3" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.35)" strokeWidth="1.5"/>
    <circle cx="126" cy="80" r="3" fill="rgba(255,255,255,0.35)"/>
    <circle cx="134" cy="80" r="3" fill="rgba(255,255,255,0.35)"/>
    <circle cx="142" cy="80" r="3" fill="rgba(255,255,255,0.35)"/>
    <rect x="60" y="36" width="40" height="28" rx="3" fill="rgba(255,255,255,0.06)" stroke="#ff5b14" strokeWidth="1.5"/>
    <line x1="70" y1="46" x2="90" y2="46" stroke="#ff5b14" strokeWidth="1.5" opacity="0.5"/>
    <line x1="70" y1="52" x2="84" y2="52" stroke="#ff5b14" strokeWidth="1" opacity="0.3"/>
  </svg>,
  // 06 Ineffizienter Einkauf
  <svg viewBox="0 0 160 100" fill="none">
    <rect x="55" y="6" width="50" height="32" rx="3" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.5)" strokeWidth="1.5"/>
    <line x1="70" y1="38" x2="36" y2="55" stroke="rgba(255,255,255,0.25)" strokeWidth="1"/>
    <line x1="80" y1="38" x2="80" y2="55" stroke="rgba(255,255,255,0.25)" strokeWidth="1"/>
    <line x1="90" y1="38" x2="124" y2="48" stroke="rgba(255,255,255,0.25)" strokeWidth="1"/>
    <rect x="14" y="55" width="44" height="18" rx="2" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.28)" strokeWidth="1"/>
    <rect x="22" y="60" width="18" height="8" rx="1" fill="rgba(255,255,255,0.25)"/>
    <rect x="58" y="55" width="44" height="18" rx="2" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.28)" strokeWidth="1"/>
    <rect x="66" y="60" width="18" height="8" rx="1" fill="rgba(255,255,255,0.25)"/>
    <rect x="102" y="44" width="44" height="30" rx="2" fill="rgba(255,255,255,0.06)" stroke="#ff5b14" strokeWidth="1.5"/>
    <rect x="110" y="50" width="18" height="18" rx="1" fill="#ff5b14" opacity="0.25"/>
  </svg>,
  // 07 Planung
  <svg viewBox="0 0 160 100" fill="none">
    <rect x="14" y="12" width="84" height="13" rx="3" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
    <rect x="14" y="33" width="58" height="13" rx="3" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
    <rect x="14" y="54" width="38" height="13" rx="3" fill="#ff5b14" opacity="0.35" stroke="#ff5b14" strokeWidth="1.5"/>
    <rect x="64" y="54" width="60" height="13" rx="3" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.18)" strokeWidth="1" strokeDasharray="4 2"/>
    <line x1="56" y1="48" x2="56" y2="88" stroke="#ff5b14" strokeWidth="1.5" strokeDasharray="3 2"/>
    <rect x="14" y="75" width="100" height="13" rx="3" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.15)" strokeWidth="1" strokeDasharray="4 3"/>
  </svg>,
  // 08 Baudokumentation
  <svg viewBox="0 0 160 100" fill="none">
    <rect x="8" y="18" width="30" height="52" rx="5" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.35)" strokeWidth="1.5"/>
    <rect x="14" y="24" width="18" height="14" rx="1" fill="rgba(255,255,255,0.12)" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/>
    <rect x="65" y="8" width="30" height="52" rx="5" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.35)" strokeWidth="1.5"/>
    <rect x="71" y="14" width="18" height="14" rx="1" fill="rgba(255,255,255,0.12)" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/>
    <rect x="122" y="18" width="30" height="52" rx="5" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.35)" strokeWidth="1.5"/>
    <rect x="128" y="24" width="18" height="14" rx="1" fill="rgba(255,255,255,0.12)" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/>
    <rect x="42" y="52" width="18" height="14" rx="1" fill="#ff5b14" opacity="0.45" stroke="#ff5b14" strokeWidth="1"/>
    <rect x="100" y="58" width="18" height="14" rx="1" fill="#ff5b14" opacity="0.45" stroke="#ff5b14" strokeWidth="1"/>
    <rect x="48" y="28" width="14" height="11" rx="1" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.25)" strokeWidth="1"/>
    <rect x="102" y="36" width="14" height="11" rx="1" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.25)" strokeWidth="1"/>
  </svg>,
  // 09 Entscheidungen gehen verloren
  <svg viewBox="0 0 160 100" fill="none">
    <path d="M8 14 L8 58 Q8 65 15 65 L102 65 L110 78 L110 65 L122 65 Q129 65 129 58 L129 14 Q129 7 122 7 L15 7 Q8 7 8 14Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5"/>
    <line x1="20" y1="24" x2="80" y2="24" stroke="rgba(255,255,255,0.45)" strokeWidth="1"/>
    <line x1="20" y1="35" x2="95" y2="35" stroke="rgba(255,255,255,0.32)" strokeWidth="1"/>
    <line x1="20" y1="46" x2="88" y2="46" stroke="rgba(255,255,255,0.18)" strokeWidth="1"/>
    <line x1="20" y1="57" x2="72" y2="57" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
    <circle cx="138" cy="32" r="5" fill="rgba(255,255,255,0.15)"/>
    <circle cx="150" cy="42" r="4" fill="rgba(255,255,255,0.08)"/>
    <circle cx="158" cy="52" r="2.5" fill="rgba(255,255,255,0.04)"/>
  </svg>,
  // 10 Controlling
  <svg viewBox="0 0 160 100" fill="none">
    <line x1="18" y1="88" x2="152" y2="88" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/>
    <line x1="18" y1="88" x2="18" y2="8" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/>
    <polyline points="22,78 48,74 74,70 100,72 106,62" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5" fill="none"/>
    <line x1="106" y1="62" x2="106" y2="88" stroke="#ff5b14" strokeWidth="1.5" strokeDasharray="3 2"/>
    <polyline points="106,62 128,38 144,22" stroke="#ff5b14" strokeWidth="1.5" strokeDasharray="4 3" fill="none"/>
    <circle cx="106" cy="62" r="4" fill="#ff5b14"/>
  </svg>,
  // 11 Nachkalkulation
  <svg viewBox="0 0 160 100" fill="none">
    <path d="M28 18 L28 86 L132 86 L132 34 L116 18Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5"/>
    <path d="M116 18 L116 34 L132 34" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5"/>
    <line x1="42" y1="46" x2="86" y2="46" stroke="rgba(255,255,255,0.12)" strokeWidth="1"/>
    <line x1="42" y1="58" x2="72" y2="58" stroke="rgba(255,255,255,0.12)" strokeWidth="1"/>
    <line x1="42" y1="70" x2="100" y2="70" stroke="#ff5b14" strokeWidth="1" strokeDasharray="3 2" opacity="0.5"/>
    <line x1="42" y1="78" x2="78" y2="78" stroke="#ff5b14" strokeWidth="1" strokeDasharray="3 2" opacity="0.3"/>
  </svg>,
  // 12 Kundenkommunikation
  <svg viewBox="0 0 160 100" fill="none">
    <path d="M62 76 Q58 68 58 54 Q58 28 80 28 Q102 28 102 54 Q102 68 98 76 L92 76 L92 88 L80 76Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.45)" strokeWidth="1.5"/>
    <circle cx="68" cy="54" r="4" fill="#ff5b14" opacity="0.7"/>
    <circle cx="80" cy="54" r="4" fill="#ff5b14"/>
    <circle cx="92" cy="54" r="4" fill="#ff5b14" opacity="0.7"/>
    <path d="M46 64 Q42 56 42 44 Q42 18 62 18" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="1.5" strokeDasharray="4 3"/>
    <path d="M28 60 Q24 52 24 40 Q24 10 46 10" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="1.5" strokeDasharray="4 3"/>
    <path d="M114 60 Q118 52 118 40 Q118 10 98 10" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="1.5" strokeDasharray="4 3"/>
  </svg>,
  // 13 Mängelmanagement
  <svg viewBox="0 0 160 100" fill="none">
    <rect x="34" y="12" width="16" height="16" rx="2" fill="none" stroke="rgba(255,255,255,0.35)" strokeWidth="1.5"/>
    <line x1="58" y1="20" x2="122" y2="20" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
    <rect x="34" y="36" width="16" height="16" rx="2" fill="none" stroke="rgba(255,255,255,0.35)" strokeWidth="1.5"/>
    <line x1="58" y1="44" x2="116" y2="44" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
    <rect x="34" y="60" width="16" height="16" rx="2" fill="none" stroke="#ff5b14" strokeWidth="2"/>
    <circle cx="42" cy="68" r="7" fill="none" stroke="#ff5b14" strokeWidth="1.5"/>
    <line x1="58" y1="68" x2="104" y2="68" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
    <rect x="34" y="82" width="16" height="16" rx="2" fill="none" stroke="rgba(255,255,255,0.35)" strokeWidth="1.5"/>
    <line x1="58" y1="90" x2="110" y2="90" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
  </svg>,
  // 14 Subunternehmerkoordination
  <svg viewBox="0 0 160 100" fill="none">
    <circle cx="80" cy="50" r="9" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.55)" strokeWidth="1.5"/>
    <circle cx="26" cy="18" r="8" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.32)" strokeWidth="1.5"/>
    <circle cx="134" cy="18" r="8" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.32)" strokeWidth="1.5"/>
    <circle cx="18" cy="78" r="8" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.32)" strokeWidth="1.5"/>
    <circle cx="142" cy="78" r="8" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.32)" strokeWidth="1.5"/>
    <line x1="71" y1="44" x2="34" y2="26" stroke="#ff5b14" strokeWidth="1" opacity="0.7"/>
    <line x1="89" y1="44" x2="126" y2="26" stroke="#ff5b14" strokeWidth="1" opacity="0.7"/>
    <line x1="71" y1="56" x2="26" y2="70" stroke="#ff5b14" strokeWidth="1" opacity="0.7"/>
    <line x1="89" y1="56" x2="134" y2="70" stroke="#ff5b14" strokeWidth="1" opacity="0.7"/>
    <line x1="34" y1="26" x2="134" y2="70" stroke="rgba(255,255,255,0.12)" strokeWidth="1" strokeDasharray="3 3"/>
    <line x1="126" y1="26" x2="26" y2="70" stroke="rgba(255,255,255,0.12)" strokeWidth="1" strokeDasharray="3 3"/>
    <line x1="26" y1="26" x2="26" y2="70" stroke="rgba(255,255,255,0.08)" strokeWidth="1" strokeDasharray="3 3"/>
    <line x1="134" y1="26" x2="134" y2="70" stroke="rgba(255,255,255,0.08)" strokeWidth="1" strokeDasharray="3 3"/>
  </svg>,
];

function SectionHead({ eyebrow, title, sub }) {
  return (
    <div className="sec-head">
      <div className="sec-head-inner">
        {eyebrow && <div className="sec-label">{eyebrow}</div>}
        <h2 className="sec-title">{title}</h2>
        {sub && <p className="sec-sub">{sub}</p>}
      </div>
    </div>
  );
}

function ProblemsSection() {
  const [hovered, setHovered] = useState(null);
  const rows = [PROBLEMS.slice(0, 5), PROBLEMS.slice(5, 10), PROBLEMS.slice(10, 15)];

  return (
    <section id="problems" onMouseLeave={() => setHovered(null)}>
      <SectionHead
        title={<>Wir kennen die <span style={{display:'inline-block', lineHeight:'1.3'}}><span className="hi">Probleme</span></span> im Handwerk.</>}
      />
      <div className="problems-rows">
        {rows.map((row, rowIdx) => (
          <div className="problems-row" key={rowIdx}>
            {row.map((p, colIdx) => {
              const idx = rowIdx * 5 + colIdx;
              return (
                <div className="problem" key={idx} onMouseEnter={() => setHovered(idx)}>
                  <div className="p-num">{p.n}</div>
                  <h3 className="p-title">{p.t}</h3>
                  <p className="p-desc">{p.p}</p>
                </div>
              );
            })}
            {row.map((p, colIdx) => {
              const idx = rowIdx * 5 + colIdx;
              const pos = colIdx === 4 ? 3 : colIdx + 1;
              return (
                <div
                  className="problem-illustration"
                  key={`illus-${idx}`}
                  data-pos={pos}
                  data-show={hovered === idx}
                  aria-hidden="true"
                >
                  <div className="p-illus-inner">
                    <div className="p-illus-svg">{PROBLEM_ILLUS[idx]}</div>
                  </div>
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </section>
  );
}

function SavingsSection() {
  const [calc, setCalc] = useState(COST_DEFAULTS);
  const { perMonth, be, worth } = costModel(calc);
  return (
    <section className="savings" id="savings">
      <SectionHead
        title={<>Ein Abo hört nie auf zu <span style={{display:'inline-block', lineHeight:'1.3'}}><span className="hi">kosten</span></span>.</>}
        sub="Ziehen Sie durch die Zeit und sehen Sie, wann es Sie überholt."
      />
      <div className="savings-body">
        <RoiCalc value={calc} onChange={setCalc} />

        <div className="roi-result" data-worth={worth ? '1' : '0'}>
          {worth ? (
            <div className="roi-big">
              Nach <span className="hi"><CountUp to={be} dur={400} /> Monaten</span> ist das Abo teurer.
              Ab dann sparen Sie {perMonth.toLocaleString('de-DE')} € — jeden Monat, für immer.
            </div>
          ) : (
            <div className="roi-big">
              Bei {calc.users} Mitarbeitern ist ein Abo rechnerisch günstiger. Eigene Software
              lohnt sich hier über passgenaue Abläufe — nicht über den Preis.
            </div>
          )}
        </div>

        <div className="roi-foot">
          <span>Beispielrechnung mit marktüblichen Werten</span>
          <span>Standard-Software im Abo: {COST_SEAT} € pro Nutzer/Monat — kein Angebot von uns</span>
          <span>Ihre eigene Software: {COST_FIXED.toLocaleString('de-DE')} € Festpreis + {COST_CARE} €/Monat Hosting &amp; Pflege</span>
        </div>

        <div className="savings-rule"></div>

        <div className="savings-lead">
          <h3 className="savings-h2">Individuelle Software gab es auch bisher. Nur zu anderen Konditionen.</h3>
          <p>
            Klassische Agentur, dieselbe Software: 30.000 €. Und drei Monate Wartezeit.
          </p>
        </div>

        <AgencyCompare />

        <div className="roi-result">
          <div className="roi-big">
            <span className="hi">20.000 €</span> weniger und <span className="hi">9 Wochen</span> früher einsatzbereit.
          </div>
        </div>
      </div>
    </section>
  );
}


function HowBuiltSection() {
  return (
    <section className="how" id="how-built">
      <SectionHead
        title={<>So realisieren wir den <span style={{display:'inline-block', lineHeight:'1.3'}}><span className="hi">Kostenvorteil</span></span>.</>}
      />
      <div className="how-grid">
        {HOW_BUILD.map((s, i) => (
          <div className="how-step" key={i}>
            <div className="n">{s.n}</div>
            <h3>{s.t}</h3>
            <p>{s.p}</p>
          </div>
        ))}
      </div>
      <div className="how-cta">
        <p style={{whiteSpace:'nowrap'}}>
          Wir geben den Großteil der eingesparten Entwicklungskosten <strong>direkt an unsere Kunden weiter</strong>.
        </p>
        <a className="btn dark" href="#cta">Beispiel anfordern <span className="arrow">↗</span></a>
      </div>
    </section>
  );
}

function AISection() {
  return (
    <section className="ai" id="ai" data-dark="1">
      <SectionHead
        title={<>Intelligente <span className="hi">Agenten</span> — direkt in Ihrer Software.</>}
      />
      <div className="ai-grid">
        {AI_CARDS.map((c, i) => (
          <div className="ai-card" key={i}>
            <div className="ai-num">{c.n}</div>
            <h4>{c.t}</h4>
            <p>{c.p}</p>
          </div>
        ))}
      </div>
      <div className="ai-strip">
        <p><strong>Keine Standard-Software.</strong> Jede KI-Funktion wird exakt auf Ihren Betrieb maßgeschneidert.</p>
        <a className="btn" style={{background:'var(--accent)', color:'var(--accent-ink)', borderColor:'var(--accent)'}} href="#cta">Eigenes Modul besprechen <span className="arrow">↗</span></a>
      </div>
    </section>
  );
}

function ProcessSection() {
  return (
    <section className="how" id="process">
      <SectionHead
        title={<>Ihr Weg zur <span style={{display:'inline-block', lineHeight:'1.3'}}><span className="hi">eigenen</span></span> Software.</>}
        sub="Vier Schritte, ungefähr sechs Wochen — vom ersten Gespräch bis zur produktiv genutzten Software."
      />
      <div className="how-grid">
        {HOW_STEPS.map((s, i) => (
          <div className="how-step" key={i}>
            <div className="n">{s.n}</div>
            <h3>{s.t}</h3>
            <p>{s.p}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function AboutSection() {
  return (
    <section className="about" id="about">
      <SectionHead
        title={<>Aus der <span className="hi">Praxis</span> für die Praxis.</>}
      />
      <div className="about-grid">
        <div className="person">
          <div className="avatar portrait">
            <img src="milutin.png" alt="Milutin Culibrk" onError={(e)=>{e.currentTarget.style.display='none';e.currentTarget.parentNode.querySelector('.ph').style.display='block'}} />
            <span className="ph" style={{display:'none'}}>KI-Portrait · Platzhalter</span>
          </div>
          <div className="person-body">
            <h3>Milutin Culibrk</h3>
            <div className="role">Digitalisierung &amp; Prozesse</div>
            <p>Kennt die Digitalisierung von Prozessen in Bau und Handwerk aus erster Hand – von verschiedenen Systemen über Schnittstellen bis hin zu branchen­spezifischen Formaten.</p>
            <div className="contact">
              <a className="btn" href="mailto:milutin.culibrk@bau-digital.ai">E-Mail</a>
              <a className="btn" href="https://www.linkedin.com/in/mculibrk/" target="_blank" rel="noopener">LinkedIn ↗</a>
            </div>
          </div>
        </div>
        <div className="person">
          <div className="avatar portrait">
            <img src="sascha.png" alt="Sascha Riemann" onError={(e)=>{e.currentTarget.style.display='none';e.currentTarget.parentNode.querySelector('.ph').style.display='block'}} />
            <span className="ph" style={{display:'none'}}>KI-Portrait · Platzhalter</span>
          </div>
          <div className="person-body">
            <h3>Sascha Riemann</h3>
            <div className="role">Technischer Experte &amp; Entwicklung</div>
            <p>Der technische Kopf hinter bau-digital.ai. Entwickelt die Software, setzt KI-gestützte Prozesse um, sorgt dafür, dass aus Ihren Anforderungen eine Lösung wird, die zuverlässig funktioniert.</p>
            <div className="contact">
              <a className="btn" href="mailto:sascha.riemann@bau-digital.ai">E-Mail</a>
              <a className="btn" href="https://www.linkedin.com/in/sascha-riemann-bbb8602b0/" target="_blank" rel="noopener">LinkedIn ↗</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section className="cta" id="cta">
      <div className="cta-inner">
        <div className="cta-body">
          <h2>Lass uns Ihre Software bauen.</h2>
          <div className="cta-actions" style={{marginTop:28}}>
            <a className="btn ghost" href="https://wa.me/4954196273720">
              <span style={{display:'inline-flex', width:18, height:18, marginRight:2}} aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.2-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.8-.9-3-1.6-4.2-3.7-.3-.5.3-.5.9-1.6.1-.2 0-.4-.1-.5-.1-.2-.6-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .2.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.2-.6-.4z M12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.6 1.4 5.1L2 22l4.9-1.3c1.5.8 3.2 1.3 5.1 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.7 0-3.3-.5-4.6-1.3l-.3-.2-3.3.9.9-3.2-.2-.3c-.9-1.4-1.4-3-1.4-4.8C3.1 7.6 7.1 3.6 12 3.6S20.9 7.6 20.9 12 16.9 20 12 20z"/></svg>
              </span>
              WhatsApp schreiben
            </a>
            <a className="btn ghost" href="tel:+4954196273720">+49 541 96273720</a>
          </div>
          <p style={{marginTop:24, fontSize:14, maxWidth:'42ch', opacity:0.75}}>
            Lieber direkt schreiben? WhatsApp — Sie bekommen zeitnah eine unverbindliche Antwort. Oder buchen Sie rechts einen Termin.
          </p>
        </div>
        <div className="cta-side">
          <CalendlyEmbed />
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="foot-grid">
        <h2 className="big-name">bau-digital<em>.ai</em></h2>
        <div className="foot-meta">
          <div>Osnabrück · DE</div>
          <div>+49 541 96273720</div>
          <div><a href="mailto:kontakt@bau-digital.ai">kontakt@bau-digital.ai</a></div>
        </div>
      </div>
      <div className="foot-bottom">
        <div>© 2026 bau-digital.ai</div>
        <div style={{display:'flex', gap:18}}>
          <a href="impressum.html" style={{color:'inherit'}}>Impressum</a>
          <a href="datenschutz.html" style={{color:'inherit'}}>Datenschutz</a>
        </div>
      </div>
    </footer>
  );
}

function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakSelect
          label="Akzentfarbe"
          value={t.palette}
          options={[
            {value:'orange', label:'Sicherheits-Orange'},
            {value:'acid', label:'Acid Lime'},
            {value:'blueprint', label:'Blueprint Blau'},
            {value:'paper', label:'Mono / Papier'}
          ]}
          onChange={(v) => setTweak('palette', v)}
        />
      </TweakSection>
      <TweakSection title="Layout & Effekte">
        <TweakRadio
          label="Dichte"
          value={t.density}
          options={['tight','default','loose']}
          onChange={(v) => setTweak('density', v)}
        />
        <TweakRadio
          label="Grain"
          value={t.grain}
          options={['on','off']}
          onChange={(v) => setTweak('grain', v)}
        />
        <TweakRadio
          label="Italics"
          value={t.italics}
          options={['on','off']}
          onChange={(v) => setTweak('italics', v)}
        />
        <TweakRadio
          label="Crosshair-Cursor"
          value={t.cursor}
          options={['on','off']}
          onChange={(v) => setTweak('cursor', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const hash = window.location.hash.slice(1);
    if (hash) {
      const el = document.getElementById(hash);
      if (el) el.scrollIntoView({ behavior: 'instant' });
    }
  }, []);

  useEffect(() => {
    document.documentElement.setAttribute('data-palette', t.palette);
    document.documentElement.setAttribute('data-density', t.density);
    document.documentElement.setAttribute('data-grain', t.grain);
    document.documentElement.setAttribute('data-italics', t.italics);
    document.body.setAttribute('data-cursor', t.cursor);
  }, [t]);

  return (
    <div>
      {t.cursor === 'on' && <CrosshairCursor />}
      <Topbar />
      <Hero />
      <ProblemsSection />
      <SavingsSection />
      <HowBuiltSection />
      <DemoSection />
      <AISection />
      <ProcessSection />
      <FAQSection />
      <AboutSection />
      <CTASection />
      <Footer />
      <Tweaks t={t} setTweak={setTweak} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);