/* global React, Header, Footer, Btn, Tag, Marquee, ScrollCounter, Reveal, StreamSection, LegalScreen, Img */
const { useState: uS, useEffect: uE, useRef: uR } = React;

const SERVICES = [
  { id: 'agents', num: '001', name: 'AI Agents & Automations', desc: 'Custom Sales-, Support- und Ops-Agents, die 24/7 arbeiten. Eingebettet in Slack, Notion, HubSpot — wo dein Team ohnehin lebt.', bullets: ['Agent Framework', 'Workflow Engine', 'Human Handoff'] },
  { id: 'web', num: '002', name: 'KI-Native Web & Product', desc: 'Websites und Plattformen, gebaut auf einem KI-Layer. Performance-getrimmt, an deine Modelle angeschlossen — pixel-genau gestaltet.', bullets: ['Next.js · Vercel', 'Edge KI Routes', '0.4s LCP'] },
  { id: 'transform', num: '003', name: 'Digital Transformation', desc: 'Audit, Roadmap, Roll-out. Wir mappen deine Prozesse, identifizieren AI-Hebel und liefern messbare Effizienz — nicht nur Folien.', bullets: ['Process Mining', 'AI Readiness Score', 'Change Mgmt'] },
  { id: 'content', num: '004', name: 'Generative Content Studio', desc: 'Skalierbares Visual + Video, on-brand. Editorial gestyled, performance-getestet, ready für Meta, TikTok, Google.', bullets: ['Brand Kits', 'A/B Pipeline', 'Daily Output'] },
];

const PROJECTS = [
  {
    id: 'labello',
    name: 'Labello.',
    slug: 'labello',
    year: '2018',
    industry: 'Cosmetics',
    timeline: '3 Wochen',
    services: ['Content Creation', 'Brand Story', 'Social Spots'],
    res: 'Social Spots',
    img: 'img/case-labello.jpg',
    cover: 'img/case-labello.jpg',
    logo: 'img/logo-labello.png', logoScale: 0.8,
    intro: '2018 wagte Labello einen mutigen Schritt: Weg von der rein pflegenden Positionierung – hin zu einem emotionalen Statement über Kommunikation. Die Kampagne „Sprich mit deinen Lippen" rückte nicht nur die ikonische Lippenpflege in den Mittelpunkt, sondern auch das, was Lippen wirklich tun: sprechen, küssen, trösten, Mut machen. Entstanden ist eine vielschichtige Brand Story, die Pflege, Persönlichkeit und Haltung miteinander verbindet.',
    challenge: [
      'Labello war über Jahrzehnte als Pflegeprodukt bekannt. Die Herausforderung war, die Marke emotional aufzuladen, ohne ihre funktionale Stärke zu verlieren.',
      'Kommunikation, Nähe und emotionale Offenheit sind komplexe Themen. Die Kampagne musste generationenübergreifend funktionieren – ohne Pathos, aber mit Tiefgang.',
    ],
    fazit: [
      'Die Kampagne erzielte über 12 Mio. organische Video-Views innerhalb von drei Wochen und wurde über 250.000 Mal kommentiert und geteilt – besonders stark auf Instagram und Facebook. Die Brand Affinity stieg laut interner Marktforschung um 38 % in der Zielgruppe U30. Labello wurde so vom einfachen Pflegeprodukt zu einem kulturellen „Mini-Statement" über Nähe, Mut und Ausdruck.',
      '„Sprich mit deinen Lippen" war mehr als Werbung – es war eine Einladung. Eine Einladung, Gefühle nicht zu verstecken, sondern ihnen eine Stimme zu geben. Und damit wurde Labello zum Symbol einer neuen, leisen, aber starken Kommunikationskultur.',
    ],
    liveUrl: 'https://vimeo.com/294326523',
    gallery: [
      { src: 'https://framerusercontent.com/images/qQJhoA6e3ULBGGVxilDyCwfAJO0.png', ratio: '2 / 1' },
      { src: 'https://framerusercontent.com/images/C1uh0BfwIm0IW3pgVaGSsk98uVM.png', ratio: '2 / 1' },
      { src: 'https://framerusercontent.com/images/tcA84LKxVO6lecsN7gx933JcVKs.png', ratio: '2 / 1' },
      { src: 'https://framerusercontent.com/images/XZVH82bdpcax4cSijU7b8RiDL5Q.png', ratio: '2 / 1' },
    ],
  },
  {
    id: 'huef',
    name: 'Hüffermann.',
    slug: 'hueffermann',
    year: '2024',
    industry: 'Logistik & Recruiting',
    timeline: '8 Wochen',
    services: ['Performance Ads', 'Recruiting Funnel', 'Video'],
    res: 'Lead-Gen',
    img: 'img/case-huef.jpg',
    cover: 'img/case-huef.jpg',
    logo: 'img/logo-huef.png',
    intro: 'Hüffermann ist einer der führenden Hersteller von Anhängern und Aufbauten im DACH-Raum – und stand vor derselben Frage wie viele Mittelständler: Wie gewinnt man qualifizierte Fachkräfte in einem Markt, der sie nicht mehr hergibt? Statt klassischer Stellenanzeigen entwickelten wir einen Recruiting-Funnel, der mit echten Mitarbeiter-Stories arbeitet – performance-getrimmt, authentisch und messbar.',
    challenge: [
      'Der Mittelstand kämpft mit einer Klick-, aber keiner Bewerber-Frage. Reichweite war nie das Problem – qualifizierte Kandidat:innen, die wirklich zum Unternehmen passen, schon.',
      'Die Kampagne musste den Spagat schaffen: Auf TikTok, Reels und Stories die Aufmerksamkeit der Gen-Z zu gewinnen – aber gleichzeitig das gestandene Selbstverständnis einer Traditionsmarke zu transportieren.',
    ],
    fazit: [
      'Innerhalb der ersten 8 Wochen lieferte der Funnel über 240 qualifizierte Bewerbungen – bei einem Cost-per-Lead, der deutlich unter dem Branchen-Benchmark der klassischen Jobbörsen lag.',
      'Wichtiger als die KPI ist aber das Setup: Hüffermann hat heute eine eigene Pipeline, die unabhängig von Plattform-Algorithmen Bewerber:innen generiert – und dabei die eigene Marke schärft, statt sie generisch zu verwässern.',
    ],
    liveUrl: '',
    gallery: [
      { src: 'img/case-huef.jpg', ratio: '2 / 1' },
    ],
  },
  {
    id: 'mschultz',
    name: 'Markus Schulz.',
    slug: 'marcus-schultz',
    year: '2017',
    industry: 'Finance',
    timeline: '4 Wochen',
    services: ['Personal Brand', 'Cinematic Content', 'Strategy'],
    res: 'Content System',
    img: 'img/case-mschulz.jpg',
    cover: 'img/case-mschulz.jpg',
    logo: 'img/logo-mschultz.png',
    intro: 'Seit 2017 hat Markus Schulz mit Volume-Trader über 5.000 angehende Trader begleitet. In der Kampagne „The True Trader" nimmt er uns mit auf eine Reise: weg vom reinen Theoriekurs hin zum authentischen Trading-Mindset – erzählt durch seine persönliche Story und begleitet von realer Performance. Ziel war es, die Community emotional zu stärken und neue Interessenten einzuladen, den „echten Trader" in sich zu entdecken.',
    challenge: [
      'Die Kampagne verzichtete bewusst auf Studiosettings oder Skriptproduktionen. Stattdessen wurde unter realen Bedingungen gedreht – mit echten Szenen aus dem Alltag eines Traders. Das stellte hohe Anforderungen an Lichtführung, Bildgestaltung und Erzählstruktur.',
      'Ohne aufwendiges Kameraequipment mussten Kamerabewegung, Trading-Screens und reale Daten nahtlos ins Storytelling integriert werden. Diese Reduktion war zugleich eine kreative Stärke: Sie brachte maximale Nähe, Glaubwürdigkeit und Unmittelbarkeit in jede Szene.',
    ],
    fazit: [
      '„The True Trader" beweist, dass professionelle Finanzkommunikation heute mehr braucht als Zahlen – sie lebt von authentischer Identifikation, ehrlicher Storytelling-Strategie und klarem realen Mehrwert.',
      'Markus Schulz gelingt es, Trading als persönliche Transformation zu inszenieren, weniger als kurzfristige Rendite-Versprechen, mehr als nachhaltige Veränderung.',
    ],
    liveUrl: 'https://vimeo.com/927570134',
    gallery: [
      { src: 'https://framerusercontent.com/images/isKomDgwVtbeKSwmO1FYWpU8.jpg', ratio: '3 / 2' },
      { src: 'https://framerusercontent.com/images/22LmUE2edOJfoX1n7JeTH7GiIIk.jpg', ratio: '3 / 2' },
      { src: 'https://framerusercontent.com/images/JVIwdKbT3L2V0T2tDI2p6amq05c.jpg', ratio: '3 / 2' },
      { src: 'https://framerusercontent.com/images/1AS0JZF5gNWGnXyQu4LomyCUiCo.jpg', ratio: '2 / 3' },
      { src: 'https://framerusercontent.com/images/FB6WqmxZPcSZcxf8lYxvhDdQTo.jpg', ratio: '2 / 3' },
    ],
  },
  {
    id: 'maumann',
    name: 'Matthias Aumann.',
    slug: 'matthias-aumann',
    year: '2025',
    industry: 'Mittelstand & Coaching',
    timeline: '6 Wochen',
    services: ['Reels Engine', 'Stage Content', 'Editing'],
    res: 'Reels Engine',
    img: 'img/case-maumann.jpg',
    cover: 'img/case-maumann.jpg',
    logo: 'img/logo-maumann.png', logoScale: 1.25,
    intro: 'Matthias Aumann ist eine der lautesten Stimmen der Mission Mittelstand – Speaker, Unternehmer, Mentor für tausende Mittelstandsentscheider:innen. Aber Bühnen-Content allein skaliert nicht. Wir bauten ein System: Eine Reels-Engine, die aus jeder Keynote und jeder Live-Aufnahme planbar täglichen Output für Instagram, TikTok und LinkedIn erzeugt.',
    challenge: [
      'Bühnen-Content lebt vom Moment – aber Reels leben vom Hook. Die Herausforderung: jeden 60-90 Min Vortrag in 30–40 Snippets zerlegen, die jeweils standalone funktionieren – ohne, dass die Kernbotschaft verfälscht wird.',
      'Personal Brands brauchen Konsistenz. Tonalität, Schnitt-Rhythmus, Captions, Cover – jedes einzelne Element musste so systematisiert werden, dass das Cutter-Team ohne Verlust an Qualität wöchentlich Output liefern kann.',
    ],
    fazit: [
      'Die Reels-Engine läuft seit über 18 Monaten – täglicher Output, planbare Reichweite, eine Lead-Quelle, die nicht von Spontaneität abhängt.',
      'Wichtiger noch: Matthias muss sich auf das konzentrieren, was er am besten kann – Bühne und Botschaft. Den Rest erledigt das System.',
    ],
    liveUrl: '',
    gallery: [
      { src: 'img/case-maumann.jpg', ratio: '2 / 1' },
    ],
  },
  {
    id: 'xiaomi',
    name: 'Xiaomi.',
    slug: 'xiaomi',
    year: '2025',
    industry: 'Consumer Electronics',
    timeline: '5 Wochen',
    services: ['Launch Campaign', 'Cinematic Content', 'Social Cuts'],
    res: 'Launch Campaign',
    img: 'img/case-xiaomi.jpg',
    cover: 'img/case-xiaomi.jpg',
    logo: 'img/logo-xiaomi.png',
    intro: 'Xiaomi wollte mehr als ein klassisches Product-Reveal – die Marke positioniert sich konsequent als Lifestyle-Player auf Augenhöhe mit den Großen der Branche. Wir entwickelten eine cinematische Launch-Kampagne, die das Produkt nicht erklärt, sondern inszeniert: Vorausschauend, schnell, mit Charakter.',
    challenge: [
      'Globale Marken sprechen oft sehr generisch. Für den DACH-Markt brauchte es eine Bildsprache, die kulturell andockt – ohne die internationale Markenwelt zu brechen.',
      'Zwischen Hero-Spot und Always-on Content liegt eine Lücke: Spots, die für 9:16 funktionieren, ohne wie nachträglich beschnittene 16:9-Inhalte zu wirken. Wir haben jede Szene von Anfang an für mehrere Formate gleichzeitig konzipiert.',
    ],
    fazit: [
      'Der Hero-Spot wurde auf allen Cuvir-betreuten Kanälen ausgespielt und ist Teil der Always-on-Content-Pipeline. Die Cuts performen vier- bis sechsfach über dem Plattform-Benchmark.',
      'Was bleibt: Eine visuelle Welt, die der Brand erlaubt, schneller zu launchen – mit Bildsprache, die sich für jede Folge-Kampagne weiter modularisieren lässt.',
    ],
    liveUrl: 'https://vimeo.com/879006450',
    gallery: [
      { src: 'img/case-xiaomi.jpg', ratio: '2 / 1' },
    ],
  },
  {
    id: 'ltmk',
    name: 'LTMK.',
    slug: 'ltmk',
    year: '2026',
    industry: 'Recht & Steuern',
    timeline: '12 Wochen',
    services: ['Branding', 'Web', 'Content System'],
    res: 'Brand & Web',
    img: 'img/case-lmtk.jpg',
    cover: 'img/case-lmtk.jpg',
    logo: 'img/logo-lmtk.png',
    intro: 'LTMK – die Wirtschaftskanzlei rund um Dr. Baran Kizil und seine Partner Leimkuhl, Tarampouskas und Marx – wollte sich nicht über Werbeversprechen positionieren, sondern über fachliche Tiefe, Klarheit und ein einfaches Versprechen: Mandant:innen verstehen, wo sie stehen. Gemeinsam entwickelten wir eine neue Markenwelt, ein modernes Web-Setup und ein Content-System, das LTMK als Premium-Adresse im Rheinland und für den DACH-Mittelstand etabliert.',
    challenge: [
      'Kanzlei-Marketing ist überreguliert und gleichzeitig optisch beliebig. Die Herausforderung: ein Look, der Seriosität und Premium signalisiert, ohne in Robe-und-Goldwaage-Klischees zu kippen — ehrlich, klar, modern.',
      'Die Website musste mehrere Rollen erfüllen: Marken-Vehikel, Mandanten-Funnel und fachliche Information rund um Arbeitsrecht, IT- und Datenschutzrecht, Wettbewerbs- und Vertragsrecht. Jedes Element wurde so gebaut, dass es alle drei Ziele gleichzeitig bedient.',
    ],
    fazit: [
      'Das Branding-System steht für die nächsten Jahre – mit klaren Regeln für Web, Social und Print, sodass das Team eigenständig konsistenten Output produziert.',
      'O-Ton Dr. Baran Kizil: „Unglaubliches Team! Sie haben genau das geliefert, was wir brauchten, pünktlich und weit über unsere Erwartungen hinaus."',
    ],
    liveUrl: '',
    gallery: [
      { src: 'img/case-lmtk.jpg', ratio: '2 / 1' },
    ],
  },
];

const PARTNER_LOGOS = [
  { name: 'Xiaomi',          src: 'https://framerusercontent.com/images/tXDhHbyv5D53dzFEgzd2fOvpS9o.png?width=216&height=83'  },
  { name: 'Labello',         src: 'https://framerusercontent.com/images/976oIwKPQcyjrPOCe8OCyp8ITU.png?width=327&height=78'  },
  { name: 'Hüffermann',      src: 'https://framerusercontent.com/images/MwK172HRArtfVUG0IDYOmjZQ.png?width=300&height=70'      },
  { name: 'LTMK',            src: 'https://framerusercontent.com/images/NVr0UhGOSq37X3yqssBmw71Bhw.png?width=209&height=167', scale: 0.9 },
  { name: 'Marcus Schultz',  src: 'https://framerusercontent.com/images/eWwjmGCqGIQ1Nf7DGEtXzdlrotA.png?width=204&height=223', scale: 0.85 },
  { name: 'Matthias Aumann', src: 'https://framerusercontent.com/images/TsxoTNzclXhtXbrWqmQqer2yM.png?width=271&height=154', scale: 0.95 },
  { name: 'Zhrill',          src: 'https://framerusercontent.com/images/WmT2RGiHD5BZMQO07l8LQnvZXc.png?width=174&height=201', scale: 0.85 },
  { name: 'Warner Music',    src: 'https://framerusercontent.com/images/WnwtQ7H9Q25EMJS3GIkc1Ze9C3k.png?width=314&height=137' },
];

const TESTIMONIALS = [
  {
    q: 'Unglaubliches Team! Sie haben genau das geliefert, was wir brauchten, pünktlich und weit über unsere Erwartungen hinaus.',
    who: 'Dr. Baran Kizil', role: 'LTMK',
    img: 'https://framerusercontent.com/images/lqghXtKXbHhWsYr4IoNPEcyeE.jpg?width=400'
  },
  {
    q: 'Ein reibungsloser Ablauf von Anfang bis Ende. Ein äußerst professionelles Team!',
    who: 'Malik Cardakli', role: 'Zhrill',
    img: 'https://framerusercontent.com/images/tmM3JtJ3UXGl9s76gfIq8AxdE8.jpeg?width=400'
  },
  {
    q: 'Unser neues Branding spiegelt genau wider, was wir uns vorgestellt haben – klar, modern und unverwechselbar.',
    who: 'Anna Schneider', role: 'Creative Live Agency',
    img: 'https://framerusercontent.com/images/Lr6nDfwod2cfh3RCn5wxChQoOg.jpg?width=400'
  },
];

const TECH = ['Claude Code', 'GPT-5', 'n8n', 'Zapier', 'Vercel AI SDK', 'LangGraph', 'Pinecone', 'Supabase', 'Next.js 15', 'Make.com', 'Cal.com', 'Slack API'];

const TEAM = [
  { name: 'Kemal Duran',   role: 'Team Lead Marketing', img: 'img/team-kemal.jpg',  bio: 'Verwandelt Visionen als Stratege und Freigeist in wirkungsvolle Erlebnisse – mit klarer Linie, durchdachter Struktur und Liebe zum Detail.' },
  { name: 'Adnan Aydogdu', role: 'Project Management', img: 'img/team-adnan.jpg',  bio: 'Hält Projekte auf Kurs und Teams im Flow. Sorgt für klare Prozesse, scharfe Deadlines und reibungslose Übergaben.' },
  { name: 'Daniel Zlotin', role: 'Creative Director',  img: 'img/team-daniel.jpg', bio: 'Übersetzt Strategien in Code und Architektur. Pragmatisch, schnell, ohne Lock-in — und mit einem Auge für jedes Detail.' },
  { name: 'Tim Marshall',  role: 'Cutter',             img: 'img/team-tim.jpg',    bio: 'Schneidet aus Rohmaterial Geschichten, die hängen bleiben — mit Gespür für Rhythmus, Spannung und das richtige Detail.' },
];

// ===== Calculator =====
function Calc() {
  const [hours, setHours] = uS(20);
  const [rate, setRate] = uS(75);
  const monthly = hours * rate * 4.33;
  const annual = monthly * 12;
  const automated = Math.round(annual * 0.62);
  return (
    <div className="calc">
      <div className="row">
        <label>Manuelle Std/Woche</label>
        <div className="val">{hours}h</div>
        <input type="range" min="2" max="80" value={hours} onChange={(e) => setHours(+e.target.value)} />
      </div>
      <div className="row">
        <label>Stundensatz (Team Avg)</label>
        <div className="val">€{rate}</div>
        <input type="range" min="25" max="200" step="5" value={rate} onChange={(e) => setRate(+e.target.value)} />
      </div>
      <div className="out">
        <div className="it"><span className="k">Monatsverlust</span><span className="v">€{Math.round(monthly).toLocaleString('de-DE')}</span></div>
        <div className="it"><span className="k">Jahresverlust</span><span className="v">€{Math.round(annual).toLocaleString('de-DE')}</span></div>
        <div className="it h"><span className="k">Cuvir Automation</span><span className="v">€{automated.toLocaleString('de-DE')}</span></div>
      </div>
      <div style={{ gridColumn: '1 / -1', fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>
        * Durchschnitt unserer Cases 2024–2026 — wir teilen die Methodik im Erstgespräch.
      </div>
    </div>
  );
}

// ===== HOME =====
function TestimonialRotator({ items }) {
  const [idx, setIdx] = uS(0);
  const [paused, setPaused] = uS(false);
  uE(() => {
    if (paused || !items || items.length < 2) return;
    const id = setInterval(() => setIdx(i => (i + 1) % items.length), 5500);
    return () => clearInterval(id);
  }, [paused, items]);
  if (!items || !items.length) return null;
  return (
    <div className="testimonial-rotator"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div className="testimonial-stack">
        {items.map((t, i) => (
          <div key={i} className={`testimonial-slide ${i === idx ? 'active' : ''}`} aria-hidden={i !== idx}>
            <div className="testimonial-stars">★★★★★</div>
            <p className="testimonial-q">„{t.q}"</p>
            <div className="testimonial-who">
              <div className="testimonial-av" style={{ background: `url(${t.img}) center/cover, linear-gradient(135deg,#7a5a3a,#2a1a0a)` }} />
              <div><b>{t.who}</b><span>{t.role}</span></div>
            </div>
          </div>
        ))}
      </div>
      <div className="testimonial-dots" role="tablist">
        {items.map((_, i) => (
          <button key={i}
            className={`testimonial-dot ${i === idx ? 'active' : ''}`}
            onClick={() => setIdx(i)}
            aria-label={`Stimme ${i + 1}`}
            role="tab"
            aria-selected={i === idx}
          />
        ))}
      </div>
    </div>
  );
}

function HomeScreen({ onNav, tweaks }) {
  uE(() => {
    if (!tweaks.motion) return;
    const onScroll = () => {
      const y = window.scrollY;
      const grid = document.querySelector('.hero-grid');
      if (grid) {
        const p = Math.min(1, y / 600);
        grid.style.setProperty('--sy', String(p));
      }
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [tweaks.motion]);
  return (
    <div className="page-enter">
      {/* HERO */}
      <section className="hero">
        <div className="hero-grid hero-parallax">
          <div className="hero-l">
            <Tag>KI-Transformationsagentur</Tag>
            <Reveal as="h1" className="display h-mega" wordReveal>
              <span style={{ fontWeight: 400 }}>Bauen<span style={{ color: 'var(--accent)' }}>.</span>{' '}
              Umsetzen<span style={{ color: 'var(--accent)' }}>.</span></span>{' '}
              Skalieren<span style={{ color: 'var(--accent)' }}>.</span>
            </Reveal>
            <p className="sub">
              Vom Workflow-Agent bis zur KI-nativen Plattform — wir liefern die digitale Infrastruktur, die dein Business 24/7 laufen lässt. Messbar in gesparten Stunden und gewonnenen Kunden.
            </p>
            <div className="cta-row">
              <Btn onClick={() => onNav('kontakt')} lg magnet={!!tweaks.motion}>Kostenloses Audit buchen </Btn>
              <Btn onClick={() => onNav('projects')} outline magnet={!!tweaks.motion}>Cases ansehen </Btn>
            </div>
          </div>
          <div className="hero-r">
            <video autoPlay muted playsInline loop preload="auto" poster="hero-poster.jpg" aria-hidden="true" ref={(v) => {
              if (!v) return;
              v.ontimeupdate = () => { if (v.currentTime >= 5) { v.currentTime = 0; v.play().catch(() => {}); } };
              if (!tweaks.motion) v.pause(); else v.play().catch(() => {});
            }}>
              <source src="hero.webm" type="video/webm" />
              <source src={(window.__resources && window.__resources.heroVideo) || "hero.mp4"} type="video/mp4" />
            </video>
            <div className="vignette" />
            <div className="strip">
              <div><b>Senior-Team</b> 1:1 Service</div>
              <div><b>15 Jahre</b> 200+ Projekte</div>
            </div>
          </div>
        </div>

        {/* KPI mini-row + logos */}
        <div className="container kpi-row" style={{ padding: 0, marginTop: 24 }}>
          <ScrollCounter num="001" to="200+" label="Projekte ausgeliefert" />
          <ScrollCounter num="002" to="530M" label="Generated Reach 25/26" />
          <ScrollCounter num="003" to="15" label="Jahre im Markt" />
          <ScrollCounter num="004" to="100%" label="Übergabefähig" />
        </div>

        <div className="container" style={{ padding: 0, marginTop: 48 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-3)', display: 'flex', justifyContent: 'space-between', padding: '0 0 12px', borderBottom: '1px solid var(--line)' }}>
            <span>Unsere Kunden</span><span>(2011–26)</span>
          </div>
          <div className={`logo-marquee ${tweaks.motion ? '' : 'paused'}`}>
            <div className="logo-track">
              {[...PARTNER_LOGOS, ...PARTNER_LOGOS].map((l, i) => (
                <span key={i} className="lg" title={l.name} style={{ '--logo-scale': l.scale || 1 }}><Img src={l.src} alt={l.name} loading="lazy" /></span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CALCULATOR */}
      <section className="section">
        <div className="container">
          <div className="split-2">
            <div className="l">
              <Tag>Calculator</Tag>
              <Reveal as="h2" className="display h-2">Jede Stunde<br /><span className="italic">hat seinen Preis.</span></Reveal>
              <p>Schiebe die Regler, um zu sehen, wieviel manuelle Arbeit dich aktuell wirklich kostet — und wieviel davon wir wegautomatisieren.</p>
            </div>
            <div className="r"><Calc /></div>
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="section">
        <div className="container">
          <div className="split-2" style={{ marginBottom: 48 }}>
            <div className="l">
              <Tag>Services</Tag>
              <Reveal as="h2" className="display h-2">Was wir liefern.</Reveal>
            </div>
            <div className="r" style={{ alignSelf: 'end' }}></div>
          </div>
          <div className="svc-grid">
            {SERVICES.map(s => (
              <div key={s.id} className="svc-card" onClick={() => onNav('service:' + s.id)}>
                <div className="num">/ {s.num}</div>
                <h3>{s.name}</h3>
                <p>{s.desc}</p>
                <ul className="bullets">{s.bullets.map(b => <li key={b}>{b}</li>)}</ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="section">
        <div className="container">
          <div className="split-2" style={{ marginBottom: 48 }}>
            <div className="l"><Tag>Wie wir arbeiten</Tag><Reveal as="h2" className="display h-2">In vier Schritten<br /><span className="italic">vom Audit zum Launch.</span></Reveal></div>
            <div className="r" style={{ alignSelf: 'end' }}></div>
          </div>
          <div className="process">
            {[
              { n: '01', h: 'Audit', p: '60-Min Tiefen-Interview, danach Quick-Audit deines Stacks. Wir mappen Hebel und schätzen Impact.' },
              { n: '02', h: 'Roadmap', p: '2-Wochen-Plan mit Prio, Aufwand, ROI. Du entscheidest, was du buchst — Module oder Komplettpaket.' },
              { n: '03', h: 'Build', p: 'Wöchentliche Releases. Kein Big-Bang nach 6 Monaten, sondern echter Output ab Tag 7.' },
              { n: '04', h: 'Scale', p: 'Hand-off oder Retainer: wir bleiben dran, monitoren, optimieren — oder schulen dein Team.' },
            ].map(s => (
              <div className="step" key={s.n}><span className="n">/ {s.n}</span><h4>{s.h}</h4><p>{s.p}</p></div>
            ))}
          </div>
        </div>
      </section>

      {/* TECH STACK — Transparenz */}
      <section className="section">
        <div className="container">
          <div className="split-2">
            <div className="l">
              <Tag>Tech Stack</Tag>
              <Reveal as="h2" className="display h-2" scramble>Keine Black Box.</Reveal>
              <p>Wir zeigen dir, womit wir bauen. Kein Lock-in, kein Snake-Oil — alles dokumentiert, alles übergebbar.</p>
            </div>
            <div className="r" style={{ display: 'flex', alignItems: 'center', height: '100%', paddingTop: 28 }}>
              <div className="tech">
                {TECH.map(t => <span key={t} className="chip"><span className="dot" />{t}</span>)}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* STREAM STUDIES */}
      <StreamSection />

      {/* CASES */}
      <section className="section">
        <div className="container">
          <div className="split-2" style={{ marginBottom: 48 }}>
            <div className="l"><Tag>Cases</Tag><Reveal as="h2" className="display h-2">Cases.</Reveal></div>
            <div className="r" style={{ alignSelf: 'end' }}></div>
          </div>
          <div className="cases cases-flush">
            {PROJECTS.slice(0, 4).map((p) => (
              <div key={p.id} className="case case-photo case-flush" onClick={() => onNav('project:' + p.slug)}>
                <Img className="case-bg" src={p.cover || p.img} alt={p.name} loading="lazy" />
                {p.logo && <Img className="case-photo-mark" src={p.logo} alt={p.name} loading="lazy" style={{ '--logo-scale': p.logoScale || 1 }} />}
              </div>
            ))}
          </div>
        </div>
      </section>



      {/* COMPARE */}
      <section className="section">
        <div className="container">
          <div className="split-2" style={{ marginBottom: 48 }}>
            <div className="l"><Tag>Vergleich</Tag><Reveal as="h2" className="display h-2">Warum Cuvir.</Reveal></div>
            <div className="r" style={{ alignSelf: 'end' }}></div>
          </div>
          <div className="compare">
            <div className="h">Was du bekommst</div>
            <div className="h">Freelancer</div>
            <div className="h">Klassische Agentur</div>
            <div className="h us">Cuvir</div>
            {[
              ['Auf KI\ngebaut', false, false, true],
              ['Jede Woche neuer Output', false, false, true],
              ['Tools komplett offengelegt', true, false, true],
              ['Audit & Plan inklusive', false, true, true],
              ['Ladezeit unter 1 Sekunde', false, false, true],
              ['Übergabe an dein Team', false, false, true],
              ['Coaching + ausführliche Berichte', false, false, true],
            ].map(([lbl, ...vs], i) => (
              <React.Fragment key={i}>
                <div className="r lbl">{lbl}</div>
                {vs.map((v, j) => <div key={j} className={`r ${v ? 'y' : 'n'}`}>{v ? 'Ja' : '–'}</div>)}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <div style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <Marquee items={['Bauen', 'Skalieren', 'Wiederholen', 'Automatisieren', 'Messen', 'Liefern', 'Optimieren', 'Wachsen', 'Verbinden', 'Beschleunigen']} paused={!tweaks.motion} outline />
      </div>

      {/* PRICING */}
      <section className="section">
        <div className="container">
          <div className="split-2" style={{ marginBottom: 48 }}>
            <div className="l"><Tag>Modelle</Tag><Reveal as="h2" className="display h-2">Klare Preise.</Reveal></div>
            <div className="r" style={{ alignSelf: 'end' }}></div>
          </div>
          <div className="pricing">
            <div className="price">
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>/ Audit</div>
              <h3 className="display" style={{ fontSize: 32, margin: 0, fontWeight: 500 }}>Audit</h3>
              <div className="price-tag">2 Wochen</div>
              <ul><li>Tiefen-Interview</li><li>Stack- & Prozess-Audit</li><li>ROI-Roadmap</li><li>100% Anrechnung bei Buchung</li></ul>
              <div style={{ marginTop: 'auto', paddingTop: 12 }}><Btn outline onClick={() => onNav('kontakt')}>Audit buchen</Btn></div>
            </div>
            <div className="price featured">
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.7 }}>/ Most popular ✦</div>
              <h3 className="display" style={{ fontSize: 32, margin: 0, fontWeight: 500 }}>Studio</h3>
              <div className="price-tag">Monatlich</div>
              <ul><li>Dediziertes 3er-Team</li><li>Wöchentliche Releases</li><li>Agents · Web · Content</li><li>Ab 6 Monaten Laufzeit</li><li>Strategie-Calls & Reporting</li></ul>
              <div style={{ marginTop: 'auto', paddingTop: 12 }}><Btn onClick={() => onNav('kontakt')}>Erstgespräch</Btn></div>
            </div>
            <div className="price">
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>/ Projekt</div>
              <h3 className="display" style={{ fontSize: 32, margin: 0, fontWeight: 500 }}>Projekt</h3>
              <div className="price-tag">Individuell</div>
              <ul><li>Festpreis · Klarer Umfang</li><li>Komplettes Build-Team</li><li>8–24 Wochen Laufzeit</li></ul>
              <div style={{ marginTop: 'auto', paddingTop: 12 }}><Btn outline onClick={() => onNav('kontakt')}>Briefing senden</Btn></div>
            </div>
          </div>
        </div>
      </section>

      {/* REVIEWS */}
      <section className="section">
        <div className="container">
          <div className="split-2" style={{ marginBottom: 48 }}>
            <div className="l"><Tag>Stimmen</Tag><Reveal as="h2" className="display h-2">Was Klienten sagen.</Reveal></div>
            <div className="r" style={{ alignSelf: 'end' }}></div>
          </div>
          <div style={{ display: 'flex', gap: 24, alignItems: 'baseline', marginBottom: 32, flexWrap: 'wrap' }}>
            <div className="display" style={{ fontSize: 80, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1 }}>4.9<span style={{ color: 'var(--ink-3)', fontSize: 32 }}>/5</span></div>
            <div style={{ color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.5, maxWidth: 360 }}>Über 100 Projekte erfolgreich umgesetzt und messbare Ergebnisse geliefert.</div>
          </div>
          <TestimonialRotator items={TESTIMONIALS} />
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="container">
          <div className="split-2">
            <div className="l"><Tag>FAQ</Tag><Reveal as="h2" className="display h-2">Fragen, die<br /><span className="italic">immer kommen.</span></Reveal></div>
            <div className="r">
              {[
                { q: 'Wie schnell startet ein Projekt?', a: 'Audit innerhalb 2 Wochen nach Erstgespräch. Build-Start meist Woche 3–4 nach Audit. Wir blocken Slots Q-weise.' },
                { q: 'Was, wenn AI nicht der richtige Hebel ist?', a: 'Sagen wir dir im Audit. Manchmal reicht ein gutes No-Code-Setup oder besseres Tooling — wir verkaufen dir keine Lösung, die du nicht brauchst.' },
                { q: 'Welche Tools nutzt ihr?', a: 'Claude Code + GPT-5 als Modelle, n8n / Make / Zapier als Workflow-Layer, Vercel + Next.js + Supabase als Infrastructure. Komplette Liste im Tech-Stack.' },
                { q: 'Was kostet das?', a: 'Audit ab €2.5k (anrechenbar), Retainer ab €18k/Monat, Fixed-Builds individuell. Im Erstgespräch geben wir nach 30 Min eine Range.' },
                { q: 'Übernehmt ihr auch Teile?', a: 'Ja. Verlängerte Werkbank, Sparring-Partner oder Quick-Strike-Team — je nachdem, was dein Setup braucht.' },
              ].map((f, i) => (
                <details key={i} className="faq"><summary>{f.q}</summary><p>{f.a}</p></details>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ===== CREATIVE / ABOUT =====
function CreativeScreen({ onNav, tweaks }) {
  return (
    <div className="page-enter">
      <section className="hero">
        <div className="hero-grid" style={{ gridTemplateColumns: '1fr', gap: 0, paddingBottom: 24 }}>
          <div className="hero-l">
            <Tag>About</Tag>
            <Reveal as="h1" className="display h-1" wordReveal>Wir bauen Systeme,<br /><span className="italic">die deine Marke skalieren.</span></Reveal>
            <p className="sub" style={{ maxWidth: 720 }}>
              Cuvir ist eine KI-Transformationsagentur aus Köln. Wir verbinden Strategie, Design und Engineering — und liefern alle digitalen Schnittpunkte, die deine Marke heute braucht.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="process" style={{ borderRadius: 18 }}>
            {[
              { n: '01', h: 'Result over rhetoric.', p: 'Wir verkaufen keine AI. Wir verkaufen gewonnene Zeit, gesparte Kosten, neue Kunden. Alles andere ist Beiwerk.' },
              { n: '02', h: 'Make it transparent.', p: 'Du siehst, womit wir bauen. Welche Modelle, welche Tools, welche Logs. Kein Lock-in.' },
              { n: '03', h: 'Ship weekly.', p: 'Jeden Freitag echtes Output. Wer 6 Monate auf einen Big-Bang wartet, hat schon verloren.' },
              { n: '04', h: 'Speed as feature.', p: '0.4s LCP-Ziel. Schnelle Builds, schnelle Sites, schnelle Antworten — alles unter 24h.' },
            ].map(b => (
              <div key={b.n} className="step"><span className="n">/ {b.n}</span><h4>{b.h}</h4><p>{b.p}</p></div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="split-2" style={{ marginBottom: 48 }}>
            <div className="l"><Tag>Capabilities</Tag><Reveal as="h2" className="display h-2">Was wir liefern.</Reveal></div>
            <div className="r" style={{ alignSelf: 'end' }}><Btn onClick={() => onNav('kontakt')}>Audit buchen</Btn></div>
          </div>
          <div className="svc-grid">
            {SERVICES.map(s => (
              <div key={s.id} className="svc-card" onClick={() => onNav('service:' + s.id)}>
                <div className="num">/ {s.num}</div><h3>{s.name}</h3><p>{s.desc}</p>
                <ul className="bullets">{s.bullets.map(b => <li key={b}>{b}</li>)}</ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section team-section">
        <div className="container">
          <div className="team-grid">
            <div className="team-l">
              <Tag>Team</Tag>
              <h2 className="display h-2">
                <span style={{ fontWeight: 700 }}>Die Köpfe</span>{' '}
                <span style={{ fontWeight: 400, color: 'var(--ink-2)' }}>hinter den Projekten.</span>
              </h2>
              <div className="team-cta">
                <div className="team-cta-title">Werde Teil unserer Mission</div>
                <p>Wenn du bereit bist, gemeinsam zu kreieren und zusammenzuarbeiten, freuen wir uns auf deine Nachricht.</p>
                <Btn onClick={() => onNav('kontakt')}>Let's talk</Btn>
              </div>
              <figure className="team-bts">
                <Img src="img/team-bts.jpg" alt="Cuvir am Set" loading="lazy" />
                <figcaption>/ Am Set</figcaption>
              </figure>
            </div>
            <div className="team-r">
              {TEAM.map((m, i) => (
                <div key={i} className="team-card">
                  <Img src={m.img} alt={m.name} loading="lazy" />
                  <div className="team-card-tint" />
                  <div className="team-card-top">
                    <span className="team-card-plus" aria-hidden>+</span>
                    <div className="team-card-role">
                      <div className="team-card-role-l">{m.role}</div>
                      <div className="team-card-role-s">bei Cuvir®</div>
                    </div>
                  </div>
                  <div className="team-card-bottom">
                    <div className="team-card-name">{m.name}</div>
                    {m.bio && <p className="team-card-bio">{m.bio}</p>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ===== PROJECTS =====
function ProjectsScreen({ onNav }) {
  return (
    <div className="page-enter">
      <section className="hero">
        <div className="hero-grid" style={{ gridTemplateColumns: '1fr', paddingBottom: 24 }}>
          <div className="hero-l">
            <Tag>Cases · 2024–2026</Tag>
            <Reveal as="h1" className="display h-1" scramble>Cases mit<br /><span className="italic">Zahlen.</span></Reveal>
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="cases-detail">
            {PROJECTS.map((p, i) => (
              <div key={i} className="case-detail" onClick={() => onNav('project:' + p.slug)} style={{ cursor: 'pointer' }}>
                <div className="case case-photo case-flush" style={{ aspectRatio: '3 / 2' }}>
                  <Img className="case-bg" src={p.cover || p.img} alt={p.name} loading="lazy" />
                  <div className="case-tint" />
                  {p.logo && <Img className="case-photo-mark" src={p.logo} alt={p.name} loading="lazy" style={{ '--logo-scale': p.logoScale || 1 }} />}
                </div>
                <div className="case-meta">
                  <div className="case-meta-top">
                    <span className="case-meta-name">{p.name.replace(/\.$/, '')}</span>
                    <span className="case-meta-year">{p.year}</span>
                  </div>
                  <p className="case-meta-desc">{p.intro && p.intro.length > 220 ? p.intro.slice(0, 220) + '…' : p.intro}</p>
                  <div className="case-meta-tags">{p.services.map(s => <span key={s} className="case-tag">{s}</span>)}</div>
                  <span className="case-read-cta">Case lesen <span className="case-read-arrow">→</span></span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section" style={{ textAlign: 'center', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <h2 className="display h-1" style={{ maxWidth: '14ch', margin: '0 auto 32px' }}>Dein Case ist als Nächstes.</h2>
          <Btn onClick={() => onNav('kontakt')} lg>Projekt anfragen</Btn>
        </div>
      </section>
    </div>
  );
}

// ===== KONTAKT =====
function KontaktScreen() {
  const [name, setName] = uS('');
  const [phone, setPhone] = uS('');
  const [sent, setSent] = uS(false);
  const submit = (e) => {
    e.preventDefault();
    if (!name.trim() || !phone.trim()) return;
    const subject = encodeURIComponent('Rückruf-Anfrage über cuvir.de');
    const body = encodeURIComponent(`Name: ${name}\nTelefon: ${phone}\n\n— gesendet via cuvir.de Rückruf-Formular`);
    window.location.href = `mailto:hello@cuvir.de?subject=${subject}&body=${body}`;
    setSent(true);
  };
  return (
    <div className="page-enter">
      <section className="hero">
        <div className="hero-grid kontakt-grid" style={{ paddingBottom: 0 }}>
          <div className="kontakt-head hero-l">
            <Tag>Kontakt</Tag>
            <Reveal as="h1" className="display h-1" wordReveal>Erzähl uns,<br /><span className="italic">was du baust.</span></Reveal>
          </div>
          <div className="kontakt-cal terminal-shimmer-wrap">
            <div className="terminal-window">
              <div className="terminal-bar">
                <span className="terminal-dot terminal-dot-r" />
                <span className="terminal-dot terminal-dot-y" />
                <span className="terminal-dot terminal-dot-g" />
                <span className="terminal-url">cal.eu/cuvir</span>
              </div>
              <iframe
                src="https://cal.eu/cuvir"
                title="Erstgespräch buchen — Cuvir"
                className="terminal-iframe"
                allow="camera; microphone; clipboard-write"
                loading="lazy"
              />
            </div>
          </div>
          <form className="callback kontakt-form" onSubmit={submit}>
            <div className="callback-title">/ Lieber kurz telefonieren?</div>
            <input
              className="callback-input"
              type="text"
              placeholder="Dein Name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
            />
            <input
              className="callback-input"
              type="tel"
              placeholder="Telefonnummer"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              required
            />
            <button type="submit" className="callback-btn">{sent ? 'Anfrage gesendet ✓' : 'Ich rufe zurück'}</button>
          </form>
        </div>
      </section>
    </div>
  );
}

// ===== SERVICE DETAIL =====
function ServiceScreen({ id, onNav }) {
  const s = SERVICES.find(x => x.id === id) || SERVICES[0];
  const idx = SERVICES.indexOf(s);
  const next = SERVICES[(idx + 1) % SERVICES.length];
  return (
    <div className="page-enter">
      <section className="hero">
        <div className="hero-grid" style={{ gridTemplateColumns: '1fr', paddingBottom: 0 }}>
          <div className="hero-l">
            <Tag>/ {s.num} Service</Tag>
            <Reveal as="h1" className="display h-1 service-title" wordReveal key={s.id}>{s.name}.</Reveal>
            <p className="sub" style={{ maxWidth: 700, fontSize: 19 }}>{s.desc}</p>
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="split-2">
            <div className="l"><Tag>Deliverables</Tag><Reveal as="h2" className="display h-2">Was du bekommst.</Reveal></div>
            <div className="r">
              <div className="dock-list">
                {['Discovery & Audit', 'Strategie + Roadmap', 'Architektur & Design', 'Implementierung & Launch', 'Reporting & Iteration', 'Ongoing Support'].map((d, i) => (
                  <div key={i} className="dock-row">
                    <span className="dock-row-name">{d}</span>
                    <span className="dock-row-num">/ 0{i + 1}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="split-2" style={{ alignItems: 'center' }}>
            <h2 className="display h-2" style={{ maxWidth: '12ch' }}>Bereit anzufangen?</h2>
            <div><p style={{ color: 'var(--ink-2)', marginBottom: 24, fontSize: 16, lineHeight: 1.5 }}>Buche ein 30-Min Audit. Wir hören zu, stellen Fragen — und sagen dir ehrlich, ob wir der richtige Partner sind.</p><Btn onClick={() => onNav('kontakt')} lg>Audit buchen</Btn></div>
          </div>
        </div>
      </section>
      <section className="service-next-section">
        <div className="container">
          <a onClick={() => onNav('service:' + next.id)} className="project-next-link service-next-link">
            <div className="project-next-k">Nächster Service</div>
            <div className="display h-1 project-next-name">{next.name} →</div>
          </a>
        </div>
      </section>
    </div>
  );
}

function NotFoundScreen({ onNav }) {
  return (
    <div className="page-enter notfound-page">
      <section className="hero">
        <div className="hero-grid" style={{ gridTemplateColumns: '1fr', paddingBottom: 0, gap: 0 }}>
          <div className="hero-l" style={{ alignItems: 'center', textAlign: 'center', gap: 24 }}>
            <Tag>Error 404</Tag>
            <h1 className="display h-mega" style={{ margin: 0 }}>
              4<span style={{ color: 'var(--accent)' }}>0</span>4<span style={{ color: 'var(--accent)' }}>.</span>
            </h1>
            <p className="sub" style={{ maxWidth: 540, textAlign: 'center' }}>
              Die Seite, die du suchst, existiert nicht — oder wurde verschoben. Zurück zur Navigation:
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', marginTop: 12 }}>
              <Btn onClick={() => onNav('home')} lg>Zur Startseite</Btn>
              <Btn onClick={() => onNav('kontakt')} outline lg>Kontakt</Btn>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeScreen, CreativeScreen, ProjectsScreen, KontaktScreen, ServiceScreen, NotFoundScreen, SERVICES, PROJECTS, PARTNER_LOGOS, TESTIMONIALS });