/* global React */
const { useState, useEffect, useRef, useMemo } = React;

/* =========================================================
   NAV
   ========================================================= */
function Nav() {
  const [menuOpen, setMenuOpen] = useState(false);
  const close = () => setMenuOpen(false);

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="logo" onClick={close}>
          <div className="logo-mark">N U V <span>È</span> L</div>
          <div className="logo-est">E S T . 2 0 2 5</div>
        </a>
        <ul className="nav-links">
          <li><a href="#leistungen">Leistungen</a></li>
          <li><a href="#prozess">So funktioniert's</a></li>
          <li><a href="#rechner">Kosten</a></li>
          <li><a href="#kontakt">Kontakt</a></li>
        </ul>
        <a href="#demo" className="btn btn-gold nav-cta">
          Demo testen <span className="btn-arrow">→</span>
        </a>
        <button
          className={`nav-burger${menuOpen ? ' is-open' : ''}`}
          onClick={() => setMenuOpen((o) => !o)}
          aria-label={menuOpen ? 'Menü schließen' : 'Menü öffnen'}
          aria-expanded={menuOpen}
        >
          <span /><span /><span />
        </button>
      </div>

      <div className={`nav-mobile${menuOpen ? ' is-open' : ''}`} aria-hidden={!menuOpen}>
        <ul className="nav-mobile-links">
          {[
            ['#leistungen', 'Leistungen'],
            ['#prozess', "So funktioniert's"],
            ['#rechner', 'Kosten'],
            ['#kontakt', 'Kontakt'],
          ].map(([href, label]) => (
            <li key={href}><a href={href} onClick={close}>{label}</a></li>
          ))}
        </ul>
        <a href="#demo" className="btn btn-gold nav-mobile-cta" onClick={close}>
          Demo testen <span className="btn-arrow">→</span>
        </a>
      </div>
    </nav>
  );
}

/* =========================================================
   HERO — text left, gold-wave video right
   ========================================================= */
function Hero({ videoStyle, accent, dark }) {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="hero-video">
        <window.GoldVideo style={videoStyle} accent={accent} dark={dark} />
      </div>
      <div className="hero-scrim" />
      <div className="hero-video-corners">
        <span /><span /><span /><span />
      </div>
      <div className="hero-video-label mono">
        <span className="dot" /> LIVE · AUTOMATION_LOOP
      </div>
      <div className="hero-video-cap">
        <div className="label">Signature</div>
        <div className="serif-italic" style={{fontSize: 24, lineHeight: 1.1}}>
          Quiet automation,<br />refined.
        </div>
      </div>

      <div className="hero-grid">
        <div className="hero-text">
          <div className="eyebrow">KI-Automatisierung · Made in Germany</div>
          <h1 className="hero-title">
            Ihr Unternehmen läuft.<br />
            <span className="serif-italic">Auch wenn Sie</span> schlafen.
          </h1>
          <p className="hero-sub">
            Ich automatisiere Telefon, E-Mail und Terminbuchung — damit Ihr Team
            sich auf das konzentriert, was wirklich zählt.
          </p>
          <div className="hero-cta">
            <a href="#demo" className="btn btn-primary">
              Telefonassistent live testen <span className="btn-arrow">→</span>
            </a>
            <a href="#kontakt" className="btn btn-ghost">
              Kostenloses Erstgespräch
            </a>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item">
              <div className="mono hero-meta-num">24 / 7</div>
              <div className="label">Erreichbarkeit</div>
            </div>
            <div className="hero-meta-divider" />
            <div className="hero-meta-item">
              <div className="mono hero-meta-num">{'< 2s'}</div>
              <div className="label">Antwortzeit</div>
            </div>
            <div className="hero-meta-divider" />
            <div className="hero-meta-item">
              <div className="mono hero-meta-num">DE / EN</div>
              <div className="label">Mehrsprachig</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   PAIN POINTS
   ========================================================= */
function PainPoints() {
  const items = [
    {
      n: '01',
      title: 'Verpasste Anrufe',
      body: 'Anrufe landen auf der Mailbox — Kunden gehen zur Konkurrenz, oft ohne dass Sie es überhaupt mitbekommen.',
    },
    {
      n: '02',
      title: 'E-Mail-Lawinen',
      body: 'Ihr Team verbringt Stunden mit Posteingängen statt mit den Aufgaben, für die Sie es eigentlich eingestellt haben.',
    },
    {
      n: '03',
      title: 'Manuelle Termine',
      body: 'Termine werden hin- und hergeschoben — Fehler, Doppelbuchungen, unnötiger Stress für alle Beteiligten.',
    },
    {
      n: '04',
      title: 'Vergessene Follow-ups',
      body: 'Leads kühlen ab, weil niemand Zeit hat sich zu melden. Aus heißen Anfragen werden verpasste Chancen.',
    },
  ];
  return (
    <section className="section pain" data-screen-label="02 Pain Points">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <div className="section-num">— SECTION 02</div>
            <div className="eyebrow">Status quo</div>
          </div>
          <div>
            <h2>Kennen Sie das?</h2>
            <p className="section-lede">
              Vier Probleme, die fast jedes wachsende Unternehmen kennt — und die
              Sie gerade jetzt Geld kosten.
            </p>
          </div>
        </div>

        <div className="pain-grid">
          {items.map((it) => (
            <div key={it.n} className="pain-card">
              <div className="pain-num mono">{it.n}</div>
              <div className="pain-line" />
              <h3 className="pain-title serif">{it.title}</h3>
              <p className="pain-body">{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   LEISTUNGEN
   ========================================================= */
function Leistungen() {
  const items = [
    {
      n: '01',
      title: 'Telefonassistent',
      body: 'Nimmt Anrufe an, qualifiziert Anliegen, leitet weiter oder löst direkt — in natürlicher Sprache, rund um die Uhr.',
      highlight: true,
      cta: 'Jetzt Demo anrufen',
    },
    {
      n: '02',
      title: 'E-Mail-Bearbeitung',
      body: 'Eingehende Mails werden gelesen, kategorisiert und beantwortet — mit Ihrem Tonfall, in Ihrem Stil.',
    },
    {
      n: '03',
      title: 'Terminbuchung',
      body: 'Verfügbarkeiten prüfen, Termine vereinbaren, bestätigen, erinnern — komplett automatisch im Hintergrund.',
    },
    {
      n: '04',
      title: 'Kundenanfragen 24/7',
      body: 'Standardfragen werden sofort beantwortet, komplexe Fälle landen strukturiert auf Ihrem Tisch.',
    },
    {
      n: '05',
      title: 'Follow-Up Sequenzen',
      body: 'Kein Lead bleibt liegen. Automatisierte, persönliche Nachfassaktionen zur richtigen Zeit.',
    },
    {
      n: '06',
      title: 'Datenpflege & Reporting',
      body: 'CRM-Einträge, Übergaben, Wochenreports — sauber gepflegt und immer auf dem aktuellen Stand.',
    },
  ];
  return (
    <section className="section leistungen" id="leistungen" data-screen-label="03 Leistungen">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <div className="section-num">— SECTION 03</div>
            <div className="eyebrow">Leistungen</div>
          </div>
          <div>
            <h2><span className="serif-italic">Was ich</span> für Sie automatisiere</h2>
            <p className="section-lede">
              Sechs Bausteine, einzeln oder kombiniert. Maßgeschneidert für Ihren
              Workflow — keine Standard-Lösungen von der Stange.
            </p>
          </div>
        </div>

        <div className="leistungen-grid">
          {items.map((it) => (
            <div key={it.n} className={`leist-card ${it.highlight ? 'is-highlight' : ''}`}>
              <div className="leist-top">
                <span className="leist-num mono">{it.n}</span>
                {it.highlight && <span className="leist-badge mono">Live Demo</span>}
              </div>
              <h3 className="leist-title serif">{it.title}</h3>
              <p className="leist-body">{it.body}</p>
              {it.cta && (
                <a href="#demo" className="leist-cta">
                  {it.cta} <span className="btn-arrow">→</span>
                </a>
              )}
            </div>
          ))}
        </div>

        <div className="leist-trust">
          <div className="gold-line" />
          <p className="mono">
            Umgesetzt mit n8n · Vapi · OpenAI · Claude — gebaut für Zuverlässigkeit.
          </p>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   ROI CALCULATOR
   ========================================================= */
function RoiCalculator() {
  const [employees, setEmployees] = useState(5);
  const [hours, setHours] = useState(12);
  const [wage, setWage] = useState(35);

  const calc = useMemo(() => {
    // Automation captures ~70% of manual repetitive work
    const capture = 0.7;
    const savedHoursWeek = employees * hours * capture;
    const monthlyManualCost = employees * hours * 4.33 * wage;
    const yearlySaving = savedHoursWeek * 52 * wage;
    return {
      savedHoursWeek: Math.round(savedHoursWeek),
      monthlyManualCost: Math.round(monthlyManualCost),
      yearlySaving: Math.round(yearlySaving),
    };
  }, [employees, hours, wage]);

  const fmt = (n) => n.toLocaleString('de-DE');

  return (
    <section className="section roi" id="rechner" data-screen-label="04 ROI">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <div className="section-num">— SECTION 04</div>
            <div className="eyebrow">Einsparpotenzial</div>
          </div>
          <div>
            <h2><span className="serif-italic">Was kostet</span> Sie der manuelle Status quo?</h2>
            <p className="section-lede">
              Drei Schieber, dreißig Sekunden. Sehen Sie, wie viel Zeit und Geld
              Ihr Team gerade in Aufgaben steckt, die ein Assistent übernehmen könnte.
            </p>
          </div>
        </div>

        <div className="roi-grid">
          <div className="roi-inputs">
            <RoiSlider
              label="Mitarbeiteranzahl"
              value={employees} setValue={setEmployees}
              min={1} max={20} suffix={employees === 1 ? 'Person' : 'Personen'}
            />
            <RoiSlider
              label="Stunden / Woche für manuelle Aufgaben"
              value={hours} setValue={setHours}
              min={1} max={40} suffix="Std."
              hint="Pro Mitarbeiter"
            />
            <RoiSlider
              label="Durchschnittlicher Stundenlohn"
              value={wage} setValue={setWage}
              min={12} max={80} suffix="€"
            />
          </div>

          <div className="roi-output">
            <RoiResult
              label="Gesparte Stunden / Woche"
              value={fmt(calc.savedHoursWeek)}
              unit="Std."
              note="bei 70 % Automatisierungsgrad"
            />
            <RoiResult
              label="Kosten manueller Arbeit / Monat"
              value={fmt(calc.monthlyManualCost)}
              unit="€"
              note="aktueller Aufwand"
            />
            <RoiResult
              label="Ihr Einsparpotenzial / Jahr"
              value={fmt(calc.yearlySaving)}
              unit="€"
              note="konservativ gerechnet"
              big
            />
            <a href="#kontakt" className="btn btn-gold roi-cta">
              Diese Stunden zurückgewinnen <span className="btn-arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function RoiSlider({ label, value, setValue, min, max, suffix, hint }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div className="roi-slider">
      <div className="roi-slider-head">
        <div className="label">{label}</div>
        <div className="roi-slider-val mono">
          {value}<span> {suffix}</span>
        </div>
      </div>
      <div className="roi-slider-track">
        <input
          type="range"
          min={min} max={max} value={value}
          onChange={(e) => setValue(parseInt(e.target.value))}
          style={{ '--p': pct + '%' }}
        />
      </div>
      <div className="roi-slider-foot mono">
        <span>{min}</span>
        {hint && <span className="roi-hint">{hint}</span>}
        <span>{max}</span>
      </div>
    </div>
  );
}

function RoiResult({ label, value, unit, note, big }) {
  return (
    <div className={`roi-result ${big ? 'is-big' : ''}`}>
      <div className="label">{label}</div>
      <div className="roi-result-val">
        <span className="serif">{value}</span>
        <span className="roi-result-unit mono">{unit}</span>
      </div>
      <div className="mono roi-result-note">{note}</div>
    </div>
  );
}

/* =========================================================
   PROZESS — 3 steps
   ========================================================= */
function Prozess() {
  const steps = [
    {
      n: '01',
      title: 'Analyse',
      body: 'Kostenloses Erstgespräch. Wir schauen gemeinsam, welche Prozesse sich wirklich lohnen — ehrlich, ohne Verkaufsdruck.',
      meta: 'ca. 30–45 Min.',
    },
    {
      n: '02',
      title: 'Aufbau',
      body: 'Ich baue, teste und integriere die Automatisierung in Ihre Tools. Sie bekommen einen festen Projektpreis, einmalig.',
      meta: '2–4 Wochen typisch',
    },
    {
      n: '03',
      title: 'Betreuung',
      body: 'Optional ein monatlicher Retainer für Wartung, Optimierung und Erweiterungen. Kündbar, jederzeit.',
      meta: 'optional',
    },
  ];
  return (
    <section className="section prozess" id="prozess" data-screen-label="05 Prozess">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <div className="section-num">— SECTION 05</div>
            <div className="eyebrow">Ablauf</div>
          </div>
          <div>
            <h2><span className="serif-italic">So</span> funktioniert's</h2>
            <p className="section-lede">
              Drei Phasen, transparent und ohne Überraschungen. Kein Abo-Lock-in,
              kein versteckter Aufwand.
            </p>
          </div>
        </div>

        <div className="prozess-grid">
          {steps.map((s, i) => (
            <div key={s.n} className="prozess-step">
              <div className="prozess-num serif-italic">{s.n}</div>
              <div className="prozess-line"><span /></div>
              <div className="prozess-content">
                <div className="prozess-meta mono">{s.meta}</div>
                <h3 className="serif">{s.title}</h3>
                <p>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   DEMO SECTION
   ========================================================= */
function Demo() {
  const phone = '+49 1577 4277634';
  const phoneTel = 'tel:+4915774277634';
  return (
    <section className="section demo-section" id="demo" data-screen-label="06 Demo">
      <div className="container">
        <div className="demo-card">
          <div className="demo-left">
            <div className="eyebrow">Live · jederzeit erreichbar</div>
            <h2 className="demo-title">
              <span className="serif-italic">Überzeugen</span> Sie sich selbst.
            </h2>
            <p className="demo-sub">
              Rufen Sie unseren KI-Telefonassistenten an. Stellen Sie Fragen,
              vereinbaren Sie einen Termin, testen Sie was er kann — kostenlos
              und ohne Anmeldung.
            </p>

            <a href={phoneTel} className="demo-phone">
              <div className="label">Tippen zum Anrufen</div>
              <div className="demo-phone-num serif">{phone}</div>
              <div className="demo-phone-cta mono">
                ANRUF STARTEN <span className="btn-arrow">→</span>
              </div>
            </a>
          </div>

          <div className="demo-right">
            <div className="label">Was der Assistent kann</div>
            <ul className="demo-features">
              <li>
                <span className="mono">01</span>
                <div>
                  <strong>Natürliche Gespräche</strong> auf Deutsch und Englisch —
                  versteht Kontext, Akzente, Unterbrechungen.
                </div>
              </li>
              <li>
                <span className="mono">02</span>
                <div>
                  <strong>Termine direkt buchen</strong> mit Kalenderabgleich,
                  Bestätigungs-SMS und automatischer Erinnerung.
                </div>
              </li>
              <li>
                <span className="mono">03</span>
                <div>
                  <strong>Übergabe an Sie</strong> bei komplexen Anliegen — mit
                  Zusammenfassung und allen relevanten Infos.
                </div>
              </li>
            </ul>

            <div className="demo-flow">
              <div className="label">Call Flow</div>
              <div className="demo-flow-track">
                <div className="demo-flow-node"><span>Anruf</span></div>
                <div className="demo-flow-arrow">→</div>
                <div className="demo-flow-node"><span>Verstehen</span></div>
                <div className="demo-flow-arrow">→</div>
                <div className="demo-flow-node"><span>Lösen</span></div>
                <div className="demo-flow-arrow">→</div>
                <div className="demo-flow-node is-active"><span>Übergeben</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   KONTAKT
   ========================================================= */
function Kontakt() {
  const email = 'futurewithki@gmail.com';
  const phone = '+49 1577 4277634';
  const phoneRaw = '+4915774277634';
  const wa = `https://wa.me/${phoneRaw.replace('+', '')}`;
  return (
    <section className="section kontakt" id="kontakt" data-screen-label="07 Kontakt">
      <div className="container">
        <div className="kontakt-head">
          <div className="eyebrow">Kontakt</div>
          <h2><span className="serif-italic">Fragen?</span><br />Melden Sie sich.</h2>
          <p className="kontakt-lede">
            Ich antworte innerhalb von 24 Stunden — meistens schneller. Kein
            Formular-Labyrinth, keine automatischen Antwort-Loops. Direkt &amp;
            persönlich.
          </p>
        </div>

        <div className="kontakt-grid">
          <a href={`mailto:${email}`} className="kontakt-card">
            <div className="kontakt-num mono">01 / E-Mail</div>
            <div className="kontakt-line" />
            <div className="kontakt-method serif">{email}</div>
            <div className="kontakt-foot">
              <span className="mono">DIREKT SCHREIBEN</span>
              <span className="btn-arrow">→</span>
            </div>
          </a>

          <a href={wa} target="_blank" rel="noreferrer" className="kontakt-card">
            <div className="kontakt-num mono">02 / WhatsApp</div>
            <div className="kontakt-line" />
            <div className="kontakt-method serif">{phone}</div>
            <div className="kontakt-foot">
              <span className="mono">CHAT ÖFFNEN</span>
              <span className="btn-arrow">→</span>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   FOOTER
   ========================================================= */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="logo-mark">N U V <span>È</span> L</div>
            <div className="logo-est">E S T . 2 0 2 5</div>
            <p className="footer-tagline">
              <span className="serif-italic">KI-Automatisierung,</span> still und zuverlässig.
            </p>
          </div>
          <div className="footer-stack">
            <div className="label">Built with</div>
            <div className="footer-logos">
              <span className="mono">n8n</span>
              <span className="footer-dot" />
              <span className="mono">Vapi</span>
              <span className="footer-dot" />
              <span className="mono">OpenAI</span>
              <span className="footer-dot" />
              <span className="mono">Claude</span>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <div className="mono footer-copy">© 2025 NUVÈL · All rights reserved.</div>
          <div className="footer-legal">
            <a href="#">Impressum</a>
            <a href="#">Datenschutz</a>
            <a href="#">AGB</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.PainPoints = PainPoints;
window.Leistungen = Leistungen;
window.RoiCalculator = RoiCalculator;
window.Prozess = Prozess;
window.Demo = Demo;
window.Kontakt = Kontakt;
window.Footer = Footer;