/* Services — 3 Varianten
   A: Numbered editorial list (default)
   B: Bento grid
   C: Hover-reveal horizontal rail
*/

const SERVICES = [
{ id: '01', title: 'KI-Audit', icon: 'spark', track: 'build',
  description: 'Wir kommen ins Büro, mappen Ihren Workflow und identifizieren die 3–5 Prozesse mit dem höchsten Automatisierungs-Hebel.',
  detail: 'Ergebnis: priorisierte Roadmap mit ROI-Schätzung pro Maßnahme.' },
{ id: '02', title: 'Custom Toolchain', icon: 'grid', track: 'build',
  description: 'Auf Basis des Audits stellen wir eine Toolchain zusammen, die exakt zu Ihren Objekten, Teams und Portalen passt — kein One-Size-fits-All.',
  detail: 'CRM, Portale, KI-Stack, Datenflüsse — orchestriert, dokumentiert, übergabefähig.' },
{ id: '03', title: 'Workflow-Integration', icon: 'cpu', track: 'build',
  description: 'Wir verbinden Ihre Tools — CRM, Portale, E-Mail — zu einem automatisierten Flow. Einmal sauber gebaut, läuft von allein.',
  detail: 'Zapier, Make, n8n oder Custom. Sie behalten die Kontrolle, die Maschine macht die Arbeit.' },
{ id: '04', title: 'Team-Enablement', icon: 'layers', track: 'build',
  description: 'Workshops, Playbooks und interne Tools, damit Ihr Team KI täglich nutzt — nicht nur bewundert.',
  detail: 'Kein Standardkurs. Maßgeschneidert auf Ihre Objekte und Prozesse.' },

{ id: '05', title: 'Visualisierung & Exposés', icon: 'home', track: 'done',
  description: 'Homestaging, Fassaden, Varianten und komplette Exposés — hyperrealistisch, in 48 Stunden statt vier Wochen. Wir liefern direkt portal-ready.',
  detail: 'Von leerer Wohnung zu Exposé-ready ohne Möbelwagen und Fotograf.' },
{ id: '06', title: 'Content & Social', icon: 'pen', track: 'done',
  description: 'Exposé-Texte, Social-Posts, Newsletter und Kampagnen — generiert aus Objektdaten, im Tonfall Ihrer Marke. Wir übernehmen oder Sie machen mit.',
  detail: 'Ein Prompt-System, das Sie behalten und selbst bedienen können.' },
{ id: '07', title: 'Websites & Landingpages', icon: 'monitor', track: 'done',
  description: 'Objekt-Microsites, Makler-Websites und Kampagnen-Landingpages — gebaut, gehostet und mit Lead-Capture direkt ans CRM angebunden.',
  detail: 'Design, Build, Deployment. In Wochen, nicht Monaten.' },
{ id: '08', title: 'Lead- & Marktanalyse', icon: 'chart', track: 'done',
  description: 'Wettbewerbs-Scouting, Preis-Benchmarks und Käufer-Matching — wir liefern die Analyse, Sie treffen die Entscheidung.',
  detail: 'Live-Dashboards für Standort, Mikrolage und Konkurrenzobjekte.' }];


function Services() {
  const { tweaks } = React.useContext(TweakCtx);
  const v = tweaks.servicesVariant || 'A';
  if (v === 'B') return <ServicesB />;
  if (v === 'C') return <ServicesC />;
  return <ServicesA />;
}

/* Two delivery modes — Agentur (fast) oder Toolchain (nachhaltig).
   Lebt als erklärender Rahmen über jeder Services-Variante. */
function TrackSwitch({ onFilter, onHover, active, pseudoHover }) {
  const MODES = [
  {
    key: 'build',
    kicker: 'Consulting',
    title: 'Wir bauen mit.',
    desc: 'Nach einem Audit stellen wir eine Toolchain und Workflows zusammen, die Ihr Team dauerhaft selbst bedient - dokumentiert und übergabefähig.',
    meta: 'Typisch: 4 – 12 Wo. · Einmalprojekt + Enablement',
    icon: 'wrench'
  },
  {
    key: 'done',
    kicker: 'Agentur',
    title: 'Wir liefern.',
    desc: 'Gib uns das Objekt - wir liefern Exposé, Visuals, Website und Kampagne portal-ready. Agenturleistung, in Tagen statt Wochen.',
    meta: 'Typisch: 48 h – 3 Wo. · Pro Objekt oder Retainer',
    icon: 'bolt'
  }];

  return (
    <div className="reveal" style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
      marginBottom: 64
    }} id="svc-modes">
      {MODES.map((m) => {
        const isActive = active === m.key;
        const isOther = active && active !== m.key;
        const modeColor = m.key === 'build' ? 'var(--accent)' : 'var(--cool)';
        const modeTextOnColor = m.key === 'build' ? '#000' : '#fff';
        return (
          <div key={m.key}
          onClick={() => onFilter && onFilter(isActive ? null : m.key)}
          onMouseEnter={() => onHover && onHover(m.key)}
          onMouseLeave={() => onHover && onHover(null)}
          className="card edge-gradient track-card"
          data-mode={m.key}
          data-pseudo-hover={pseudoHover === m.key ? "true" : undefined}
          style={{
            padding: 28,
            cursor: onFilter ? 'pointer' : 'default',
            borderColor: isActive ? modeColor : undefined,
            opacity: isOther ? 0.5 : 1,
            transition: 'all .3s var(--ease-out)',
            display: 'flex', flexDirection: 'column', gap: 14,
            position: 'relative', overflow: 'hidden'
          }}>
            
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10,
                  background: isActive ? modeColor : 'rgba(255,255,255,0.04)',
                  color: isActive ? modeTextOnColor : 'var(--text)',
                  border: '1px solid var(--border)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  transition: 'all .3s'
                }}>
                  <Icon name={m.icon} size={18} stroke={1.6} />
                </div>
                <span className="mono" style={{ fontSize: 10, color: isActive ? modeColor : 'var(--text-3)', letterSpacing: '0.22em' }}>
                  {m.kicker.toUpperCase()}
                </span>
              </div>
            </div>
            <div className="display" style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
              {m.title}
            </div>
            <div className="body" style={{ fontSize: 14, maxWidth: 440 }}>{m.desc}</div>
          </div>);

      })}
      <style>{`
        @media(max-width:860px){#svc-modes{grid-template-columns:1fr!important;}}
        .track-card {
          transition: box-shadow .35s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out), opacity .3s var(--ease-out) !important;
        }
        .track-card[data-mode="done"]:hover,
        .track-card[data-mode="done"][data-pseudo-hover="true"] {
          border-color: color-mix(in oklab, var(--cool) 55%, var(--border)) !important;
          box-shadow:
            0 0 0 1px color-mix(in oklab, var(--cool) 25%, transparent) inset,
            0 8px 30px -12px color-mix(in oklab, var(--cool) 40%, transparent),
            0 0 48px -8px color-mix(in oklab, var(--cool) 18%, transparent);
        }
        .track-card[data-mode="build"]:hover,
        .track-card[data-mode="build"][data-pseudo-hover="true"] {
          border-color: color-mix(in oklab, var(--accent) 55%, var(--border)) !important;
          box-shadow:
            0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent) inset,
            0 8px 30px -12px color-mix(in oklab, var(--accent) 35%, transparent),
            0 0 48px -8px color-mix(in oklab, var(--accent) 14%, transparent);
        }
      `}</style>
    </div>);

}

function TrackTag({ track }) {
  const label = track === 'build' ? 'BUILD' : 'DONE-FOR-YOU';
  const color = track === 'build' ? 'var(--accent)' : 'var(--cool)';
  const borderCol = track === 'build' ? 'var(--accent)' : 'var(--cool)';
  return (
    <span className="mono" style={{
      fontSize: 9, letterSpacing: '0.2em', color, padding: '3px 8px',
      border: `1px solid ${borderCol}`,
      borderRadius: 999, whiteSpace: 'nowrap'
    }}>{label}</span>);

}

function SectionHeader({ eyebrow, title, sub, id }) {
  return (
    <div id={id} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'end', marginBottom: 80, padding: "20px" }} className="svc-head">
      <div>
        <div className="eyebrow reveal" style={{ marginBottom: 20 }}>{eyebrow}</div>
        <h2 className="display display-xl reveal" style={{ width: "700px" }}>{title}</h2>
      </div>
      {sub && <p className="body-lg reveal" style={{ maxWidth: 440 }}>{sub}</p>}
      <style>{`@media(max-width:860px){.svc-head{grid-template-columns:1fr!important;gap:20px!important;}}`}</style>
    </div>);

}

function ServicesA() {
  const [hoverIdx, setHoverIdx] = useState(null);
  const [filter, setFilter] = useState(null);
  const list = filter ? SERVICES.filter((s) => s.track === filter) : SERVICES;
  return (
    <section id="services" className="section" data-screen-label="Services">
      <div className="container">
        <SectionHeader
          eyebrow={null}
          title={<><span style={{ color: 'var(--text-3)' }}>Zwei Wege.</span><br />Ein Partner.</>}
          sub="Entweder wir liefern fertig — Exposés, Visuals, Websites. Oder wir bauen Ihnen eine Toolchain, mit der Sie es selbst können. Kein Retainer ohne Proof." />

        <TrackSwitch onFilter={setFilter} active={filter} />

        <div style={{ borderTop: '1px solid var(--border)' }}>
          {list.map((s, i) => {
            const isOpen = hoverIdx === i;
            return (
              <div key={s.id}
              className="reveal"
              onMouseEnter={() => setHoverIdx(i)}
              onMouseLeave={() => setHoverIdx(null)}
              style={{
                display: 'grid', gridTemplateColumns: '72px 1fr auto 56px 28px', gap: 24,
                padding: '20px 0', borderBottom: '1px solid var(--border)',
                alignItems: 'center', cursor: 'pointer',
                transition: 'padding .3s var(--ease-out), background .3s',
                paddingLeft: isOpen ? 12 : 0,
                background: isOpen ? 'rgba(255,255,255,0.015)' : 'transparent'
              }}>
                
                <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.2em' }}>{s.id}</div>
                <div>
                  <div className="display" style={{ fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1 }}>{s.title}</div>
                  <div style={{
                    overflow: 'hidden',
                    maxHeight: isOpen ? 120 : 0,
                    opacity: isOpen ? 1 : 0,
                    transition: 'max-height .35s var(--ease-out), opacity .3s, margin-top .3s',
                    marginTop: isOpen ? 6 : 0
                  }}>
                    <div className="body" style={{ maxWidth: 620, fontSize: 14, lineHeight: 1.5 }}>{s.description}</div>
                    <div className="mono" style={{ fontSize: 11, color: s.track === 'build' ? 'var(--accent)' : 'var(--cool)', marginTop: 6, letterSpacing: '0.05em' }}>
                      → {s.detail}
                    </div>
                  </div>
                </div>
                <TrackTag track={s.track} />
                <Icon name={s.icon} size={22} stroke={1.2} />
                <Icon name="arrow" size={18} style={{ opacity: isOpen ? 1 : 0.3, transition: 'all .3s', transform: isOpen ? 'translateX(4px)' : 'none' }} />
              </div>);

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

}

function ServicesB() {
  const [filter, setFilter] = useState(null);
  const list = filter ? SERVICES.filter((s) => s.track === filter) : SERVICES;
  return (
    <section id="services" className="section" data-screen-label="Services">
      <div className="container">
        <SectionHeader
          eyebrow={null}
          title={<>Zwei Wege.<br /><span style={{ color: 'var(--text-3)' }}>Ein Partner.</span></>}
          sub="Wir liefern fertig — oder bauen Ihnen das Setup, mit dem Sie es selbst können." />

        <TrackSwitch onFilter={setFilter} active={filter} />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gridAutoRows: 'minmax(220px, auto)', gap: 12 }} id="bento">
          {list.map((s, i) => {
            // Verteile Spans für visuelles Rhythm
            const spans = list.length >= 6 ?
            [3, 3, 2, 2, 2, 6, 3, 3] :
            [3, 3, 3, 3, 6, 6, 6, 6];
            const span = spans[i] || 3;
            const large = span >= 3;
            const wide = span === 6;
            return <BentoCard key={s.id} s={s} span={span} large={large} wide={wide} img={s.track === 'done' && i === 1} />;
          })}
        </div>
      </div>
      <style>{`@media(max-width:860px){#bento{grid-template-columns:1fr!important;}#bento > *{grid-column:span 1!important;}}`}</style>
    </section>);

}

function BentoCard({ s, span, large, wide, img }) {
  return (
    <div className="card edge-gradient reveal" style={{
      gridColumn: `span ${span}`,
      padding: large ? 32 : 24,
      display: 'flex', flexDirection: wide ? 'row' : 'column', justifyContent: 'space-between',
      minHeight: wide ? 180 : 'auto',
      position: 'relative', overflow: 'hidden',
      alignItems: wide ? 'center' : 'flex-start',
      gap: wide ? 40 : 20
    }}>
      {img && <div className="img-placeholder" style={{ position: 'absolute', inset: 0, opacity: 0.35, zIndex: 0 }}>RENDER PREVIEW</div>}
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
        <div style={{
          width: 42, height: 42, borderRadius: 12, background: 'rgba(255,255,255,0.04)',
          border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
          <Icon name={s.icon} size={20} stroke={1.4} />
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.2em' }}>{s.id}</div>
        <TrackTag track={s.track} />
      </div>
      <div style={{ position: 'relative', zIndex: 1, flex: wide ? 1 : 'none' }}>
        <div className="display" style={{ fontSize: large ? 32 : 24, fontWeight: 500, marginBottom: 8 }}>{s.title}</div>
        <div className="body" style={{ maxWidth: 440 }}>{s.description}</div>
      </div>
    </div>);

}

/* ------- Service visuals — eine individuelle Grafik pro Service ------- */
// Alle Metriken als "Aufwand / Zeit pro Einheit Output" — kurzer Balken = gut.
// autoPct < manualPct IMMER. manualPct ist fast immer 100 (Referenz).
const SERVICE_FACTS = {
  '01': { label: 'Zeit pro priorisiertem Hebel', auto: '2 h', manual: '1 Tag', factor: '4× schneller', sub: 'Audit-Tempo bis zur nächsten Maßnahme', autoPct: 25, manualPct: 100 },
  '02': { label: 'Tool-Wechsel pro Vorgang', auto: '1', manual: '6', factor: '6× weniger Reibung', sub: 'CRM · Portale · KI · Datenflüsse im Cockpit', autoPct: 17, manualPct: 100 },
  '03': { label: 'Lead-Response-Zeit', auto: '2 Min', manual: '~4 Std', factor: '120× schneller', sub: 'bis zur ersten qualifizierten Antwort', autoPct: 3, manualPct: 100 },
  '04': { label: 'Onboarding bis KI-Alltag', auto: '4 Wo', manual: '6 Mon', factor: '6× schneller live', sub: 'bis das Team KI täglich nutzt', autoPct: 15, manualPct: 100 },
  '05': { label: 'Time-to-first-image', auto: '8 Min', manual: '~2 Tage', factor: '360× schneller', sub: 'Exposé-Bild portal-ready', autoPct: 3, manualPct: 100 },
  '06': { label: 'Zeit pro Content-Variante', auto: '5 Min', manual: '40 Min', factor: '8× effizienter', sub: 'Kanäle · Längen · Tonalitäten', autoPct: 12, manualPct: 100 },
  '07': { label: 'Landingpage bis Live', auto: '5 Tage', manual: '6–8 Wo', factor: '8× schneller live', sub: 'Design · Build · Deploy · CRM-Sync', autoPct: 12, manualPct: 100 },
  '08': { label: 'Zeit pro Vergleichsobjekt', auto: '1 Sek', manual: '~30 Sek', factor: '27× dichter', sub: 'Marktanalyse in voller Tiefe', autoPct: 4, manualPct: 100 }
};

function ServiceFacts({ id, track }) {
  const f = SERVICE_FACTS[id];
  if (!f) return null;
  const isBuild = track === 'build';
  return (
    <div className={`svc-facts ${isBuild ? 'svc-facts-build' : ''}`}>
      <div className="svc-facts-row">
        <div className="svc-facts-label">{f.label}</div>
        <div className="svc-facts-factor">{f.factor}</div>
      </div>

      <div className="svc-bars">
        <div className="svc-bar-row">
          <span className="mono svc-facts-tag">MANUELL</span>
          <div className="svc-bar-rail">
            <div className="svc-bar-fill svc-bar-fill-manual" style={{ width: `${f.manualPct}%` }} />
          </div>
          <span className="svc-facts-val svc-facts-val-manual">{f.manual}</span>
        </div>
        <div className="svc-bar-row">
          <span className="mono svc-facts-tag svc-facts-tag-auto">MIT KI</span>
          <div className="svc-bar-rail">
            <div className="svc-bar-fill svc-bar-fill-auto" style={{ width: `${f.autoPct}%` }} />
          </div>
          <span className="svc-facts-val svc-facts-val-auto">{f.auto}</span>
        </div>
      </div>

      <div className="svc-facts-sub">{f.sub}</div>
      <style>{`
        .svc-facts {
          border-top: 1px solid var(--border);
          padding-top: 18px;
          margin-top: 4px;
          display: flex; flex-direction: column; gap: 14px;
          width: 100%;
        }
        .svc-facts-row {
          display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
        }
        .svc-facts-label {
          font-family: var(--font-mono, ui-monospace, monospace);
          font-size: 10px; color: var(--text-3);
          letter-spacing: 0.2em; text-transform: uppercase;
        }
        .svc-facts-factor {
          font-family: var(--font-display);
          font-size: 13px; font-weight: 500;
          color: var(--cool); letter-spacing: -0.01em;
        }
        .svc-facts-build .svc-facts-factor { color: var(--accent); }
        .svc-bars { display: flex; flex-direction: column; gap: 10px; }
        .svc-bar-row {
          display: grid;
          grid-template-columns: 72px 1fr 96px;
          align-items: center; gap: 16px;
        }
        .svc-facts-tag {
          font-size: 9px; letter-spacing: 0.18em; color: var(--text-4);
          padding: 3px 6px; border: 1px solid var(--border); border-radius: 2px;
          white-space: nowrap; text-align: center;
        }
        .svc-facts-tag-auto {
          color: var(--cool); border-color: var(--cool);
        }
        .svc-facts-build .svc-facts-tag-auto {
          color: var(--accent); border-color: var(--accent);
        }
        .svc-bar-rail {
          height: 14px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--border);
          border-radius: 2px;
          overflow: hidden;
          position: relative;
        }
        .svc-bar-fill {
          height: 100%;
          transition: width .7s var(--ease-out);
        }
        .svc-bar-fill-auto {
          background: linear-gradient(90deg,
            oklch(0.72 0.04 230 / 0.8) 0%,
            oklch(0.82 0.05 230) 100%);
          box-shadow: 0 0 12px -2px oklch(0.72 0.04 230 / 0.5);
        }
        .svc-facts-build .svc-bar-fill-auto {
          background: linear-gradient(90deg,
            oklch(0.88 0.18 98 / 0.8) 0%,
            oklch(0.88 0.18 98) 100%);
          box-shadow: 0 0 12px -2px oklch(0.88 0.18 98 / 0.5);
        }
        .svc-bar-fill-manual {
          background: linear-gradient(90deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.32) 100%);
        }
        .svc-facts-val {
          font-family: var(--font-display);
          font-size: 16px; font-weight: 500; letter-spacing: -0.02em;
          text-align: right;
        }
        .svc-facts-val-auto { color: var(--text); }
        .svc-facts-val-manual { color: var(--text-3); }
        .svc-facts-sub {
          font-size: 11px; color: var(--text-4); line-height: 1.4;
          margin-top: 4px;
        }
      `}</style>
    </div>);

}

function ServicePreview({ id, track }) {
  const A = track === 'build' ? 'var(--accent)' : 'var(--cool)';
  const stroke = 'rgba(255,255,255,0.22)';
  const strokeDim = 'rgba(255,255,255,0.12)';
  const text2 = 'rgba(255,255,255,0.55)';
  const text3 = 'rgba(255,255,255,0.38)';
  const wrap = {
    position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
    zIndex: 0, overflow: 'hidden'
  };
  const mono = { fontFamily: 'var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)', fontSize: 10, letterSpacing: '0.18em' };

  switch (id) {
    case '01': // KI-Audit — Prozess-Map mit Hebel-Scoring
      return (
        <div style={wrap}>
          <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }} fill="none">
            <defs>
              <pattern id="grid01" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M20 0H0V20" stroke={strokeDim} strokeWidth="0.5" />
              </pattern>
            </defs>
            <rect width="400" height="300" fill="url(#grid01)" opacity="0.5" />
            {/* Prozesse als Punkte, y=Häufigkeit, x=Aufwand */}
            {[[60, 220, 14, 0.5], [110, 170, 10, 0.55], [150, 90, 26, 1], [200, 140, 18, 0.8], [245, 200, 12, 0.55], [290, 110, 22, 0.95], [330, 180, 10, 0.6]].map(([x, y, r, o], i) => {
              const top = o > 0.9;
              return (
                <g key={i}>
                  <circle cx={x} cy={y} r={r} fill={top ? A : 'none'} stroke={top ? A : stroke} strokeWidth="1" opacity={o} />
                  {top && <circle cx={x} cy={y} r={r + 8} stroke={A} strokeWidth="1" opacity="0.3" />}
                </g>);

            })}
            {/* Achsen */}
            <line x1="30" y1="260" x2="370" y2="260" stroke={stroke} strokeWidth="1" />
            <line x1="30" y1="30" x2="30" y2="260" stroke={stroke} strokeWidth="1" />
            <text x="30" y="20" fill={text3} style={mono}>HEBEL ↑</text>
            <text x="310" y="280" fill={text3} style={mono}>AUFWAND →</text>
            {/* Highlight label */}
            <text x="168" y="86" fill={A} style={{ ...mono, fontSize: 9 }}>TOP-HEBEL</text>
          </svg>
        </div>);


    case '02': // Custom Toolchain — verbundene Tool-Nodes
      return (
        <div style={wrap}>
          <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }} fill="none">
            {(() => {
              const nodes = [
              { x: 70, y: 90, l: 'CRM' },
              { x: 200, y: 50, l: 'PORTAL' },
              { x: 330, y: 100, l: 'MAIL' },
              { x: 80, y: 220, l: 'DOCS' },
              { x: 200, y: 180, l: 'KI-CORE', hero: true },
              { x: 330, y: 230, l: 'CMS' }];

              const links = [[4, 0], [4, 1], [4, 2], [4, 3], [4, 5], [0, 1], [2, 5]];
              return (
                <>
                  {links.map(([a, b], i) =>
                  <line key={i} x1={nodes[a].x} y1={nodes[a].y} x2={nodes[b].x} y2={nodes[b].y}
                  stroke={a === 4 || b === 4 ? A : stroke} strokeWidth="1" strokeDasharray={a === 4 || b === 4 ? '' : '3 3'} opacity={a === 4 || b === 4 ? 0.55 : 0.45} />
                  )}
                  {nodes.map((n, i) =>
                  <g key={i}>
                      <rect x={n.x - 40} y={n.y - 16} width="80" height="32" rx="4"
                    fill={n.hero ? A : '#0e0e10'} stroke={n.hero ? A : stroke} strokeWidth="1" />
                      <text x={n.x} y={n.y + 4} fill={n.hero ? '#000' : text2} textAnchor="middle" style={mono}>{n.l}</text>
                    </g>
                  )}
                </>);

            })()}
          </svg>
        </div>);


    case '03': // Workflow-Integration — horizontaler Flow mit Trigger→Logic→Action
      return (
        <div style={wrap}>
          <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }} fill="none">
            {(() => {
              const steps = [
              { x: 55, l: 'TRIGGER', s: 'Lead-In', y: 150 },
              { x: 155, l: 'LOGIC', s: 'Score + Match', y: 110 },
              { x: 155, l: 'LOGIC', s: 'Enrich', y: 190 },
              { x: 260, l: 'LOGIC', s: 'Route', y: 150 },
              { x: 360, l: 'ACTION', s: 'Reply + CRM', y: 150 }];

              const paths = [[0, 1], [0, 2], [1, 3], [2, 3], [3, 4]];
              return (
                <>
                  {paths.map(([a, b], i) => {
                    const A1 = steps[a],B1 = steps[b];
                    const midX = (A1.x + B1.x) / 2;
                    return <path key={i} d={`M${A1.x + 30} ${A1.y} C ${midX} ${A1.y} ${midX} ${B1.y} ${B1.x - 30} ${B1.y}`} stroke={b === 4 ? A : stroke} strokeWidth="1.2" fill="none" />;
                  })}
                  {steps.map((s, i) => {
                    const hero = i === 4;
                    return (
                      <g key={i}>
                        <rect x={s.x - 30} y={s.y - 16} width="60" height="32" rx="4"
                        fill={hero ? A : '#0e0e10'} stroke={hero ? A : stroke} strokeWidth="1" />
                        <text x={s.x} y={s.y + 4} fill={hero ? '#000' : text2} textAnchor="middle" style={{ ...mono, fontSize: 9 }}>{s.l}</text>
                        <text x={s.x} y={s.y + 30} fill={text3} textAnchor="middle" style={{ ...mono, fontSize: 9, letterSpacing: '0.1em' }}>{s.s}</text>
                      </g>);

                  })}
                  {/* flowing dot */}
                  <circle r="3" fill={A}>
                    <animateMotion dur="3s" repeatCount="indefinite"
                    path="M85 150 C 105 150 105 110 155 110 L 155 110 C 205 110 205 150 260 150 C 310 150 310 150 360 150" />
                  </circle>
                </>);

            })()}
          </svg>
        </div>);


    case '04': // Team-Enablement — Team-Setup mit Levels
      return (
        <div style={wrap}>
          <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }} fill="none">
            {[
            { y: 60, l: 'PLAYBOOKS', w: 310, fill: 0.9 },
            { y: 110, l: 'PROMPT-BIBLIOTHEK', w: 260, fill: 0.7 },
            { y: 160, l: 'TRAINING + HANDS-ON', w: 300, fill: 0.95 },
            { y: 210, l: 'INTERNE TOOLS', w: 220, fill: 0.55 },
            { y: 260, l: 'DOKUMENTATION', w: 180, fill: 0.4 }].
            map((b, i) =>
            <g key={i}>
                <rect x="45" y={b.y - 14} width={b.w} height="28" rx="2"
              fill={i === 2 ? A : 'rgba(255,255,255,0.03)'} stroke={i === 2 ? A : stroke} strokeWidth="1" />
                <text x="55" y={b.y + 4} fill={i === 2 ? '#000' : text2} style={mono}>{b.l}</text>
                <text x={45 + b.w + 10} y={b.y + 4} fill={text3} style={{ ...mono, fontSize: 9 }}>{Math.round(b.fill * 100)}%</text>
              </g>
            )}
            <text x="45" y="35" fill={text3} style={mono}>TEAM-SETUP · 4 WOCHEN</text>
          </svg>
        </div>);


    case '05': // Visualisierung & Exposés — Vorher/Nachher Split
      return (
        <div style={wrap}>
          <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }} fill="none">
            <defs>
              <pattern id="dots05" width="6" height="6" patternUnits="userSpaceOnUse">
                <circle cx="1" cy="1" r="0.6" fill="rgba(255,255,255,0.2)" />
              </pattern>
            </defs>
            {/* leerer Raum links */}
            <rect x="30" y="60" width="160" height="180" fill="url(#dots05)" stroke={strokeDim} strokeWidth="1" />
            {/* Raum-Linien */}
            <path d="M30 60 L70 90 L70 220 L30 240 Z" stroke={stroke} strokeWidth="1" fill="rgba(255,255,255,0.02)" />
            <path d="M190 60 L150 90 L150 220 L190 240 Z" stroke={stroke} strokeWidth="1" fill="rgba(255,255,255,0.02)" />
            <line x1="70" y1="90" x2="150" y2="90" stroke={stroke} strokeWidth="1" />
            <line x1="70" y1="220" x2="150" y2="220" stroke={stroke} strokeWidth="1" />
            {/* gestaged rechts */}
            <rect x="210" y="60" width="160" height="180" fill="rgba(255,204,0,0.04)" stroke={A} strokeWidth="1" />
            <path d="M210 60 L250 90 L250 220 L210 240 Z" stroke={A} strokeWidth="1" opacity="0.4" fill="none" />
            <path d="M370 60 L330 90 L330 220 L370 240 Z" stroke={A} strokeWidth="1" opacity="0.4" fill="none" />
            {/* Möbel */}
            <rect x="260" y="170" width="60" height="35" fill={A} opacity="0.25" stroke={A} strokeWidth="1" />
            <circle cx="285" cy="130" r="10" fill="none" stroke={A} strokeWidth="1" />
            <rect x="260" y="115" width="20" height="8" fill="none" stroke={A} strokeWidth="1" />
            {/* Labels */}
            <text x="30" y="50" fill={text3} style={mono}>VORHER</text>
            <text x="210" y="50" fill={A} style={mono}>NACHHER · 48 H</text>
            {/* Divider */}
            <line x1="200" y1="40" x2="200" y2="260" stroke={stroke} strokeWidth="1" strokeDasharray="2 4" />
          </svg>
        </div>);


    case '06': // Content & Social — Post-Varianten aus Objektdaten
      return (
        <div style={wrap}>
          <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }} fill="none">
            {/* Quelle */}
            <rect x="30" y="120" width="90" height="60" rx="2" fill="#0e0e10" stroke={stroke} />
            <text x="75" y="145" fill={text2} textAnchor="middle" style={mono}>OBJEKT-</text>
            <text x="75" y="160" fill={text2} textAnchor="middle" style={mono}>DATEN</text>
            {/* Fan-out */}
            {[{ y: 55, l: 'EXPOSÉ' }, { y: 110, l: 'INSTAGRAM' }, { y: 165, l: 'NEWSLETTER' }, { y: 220, l: 'PORTAL-TEXT' }].map((o, i) =>
            <g key={i}>
                <path d={`M120 150 C 180 150 180 ${o.y + 20} 240 ${o.y + 20}`} stroke={i === 1 ? A : stroke} strokeWidth="1" fill="none" />
                <rect x="240" y={o.y} width="120" height="40" rx="2"
              fill={i === 1 ? A : 'rgba(255,255,255,0.02)'} stroke={i === 1 ? A : stroke} />
                <text x="252" y={o.y + 18} fill={i === 1 ? '#000' : text2} style={mono}>{o.l}</text>
                <text x="252" y={o.y + 32} fill={i === 1 ? 'rgba(0,0,0,0.6)' : text3} style={{ ...mono, fontSize: 9, letterSpacing: '0.08em' }}>AUTO · IM TON</text>
              </g>
            )}
          </svg>
        </div>);


    case '07': // Websites & Landingpages — stacked device frames
      return (
        <div style={wrap}>
          <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }} fill="none">
            {/* Desktop frame */}
            <rect x="60" y="55" width="240" height="160" rx="4" fill="#0e0e10" stroke={stroke} />
            <rect x="60" y="55" width="240" height="18" fill="rgba(255,255,255,0.04)" stroke={stroke} />
            <circle cx="72" cy="64" r="2" fill={text3} />
            <circle cx="80" cy="64" r="2" fill={text3} />
            <circle cx="88" cy="64" r="2" fill={text3} />
            <rect x="72" y="85" width="130" height="10" fill={A} opacity="0.8" />
            <rect x="72" y="102" width="180" height="4" fill={text3} />
            <rect x="72" y="112" width="150" height="4" fill={text3} />
            <rect x="72" y="130" width="80" height="22" fill="none" stroke={A} />
            <text x="112" y="145" fill={A} textAnchor="middle" style={mono}>ANFRAGE →</text>
            <rect x="168" y="175" width="120" height="32" fill="rgba(255,255,255,0.04)" stroke={strokeDim} />

            {/* Mobile frame */}
            <rect x="310" y="90" width="60" height="120" rx="6" fill="#0e0e10" stroke={stroke} />
            <rect x="316" y="105" width="48" height="36" fill={A} opacity="0.6" />
            <rect x="316" y="148" width="40" height="3" fill={text3} />
            <rect x="316" y="156" width="36" height="3" fill={text3} />
            <rect x="316" y="175" width="48" height="14" fill="none" stroke={A} />

            <text x="60" y="240" fill={text3} style={mono}>DESIGN · BUILD · DEPLOY</text>
            <text x="60" y="258" fill={A} style={mono}>→ CRM-ANGEBUNDEN</text>
          </svg>
        </div>);


    case '08': // Lead- & Marktanalyse — Dashboard mit Chart
      return (
        <div style={wrap}>
          <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }} fill="none">
            <defs>
              <linearGradient id="area08" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor={A} stopOpacity="0.35" />
                <stop offset="100%" stopColor={A} stopOpacity="0" />
              </linearGradient>
            </defs>
            {/* KPI row */}
            {[{ l: 'OBJEKTE', v: '142' }, { l: 'PREIS/M²', v: '5.280 €' }, { l: 'DOM', v: '38 T' }].map((k, i) =>
            <g key={i}>
                <rect x={30 + i * 120} y="40" width="110" height="52" rx="2" fill="rgba(255,255,255,0.02)" stroke={stroke} />
                <text x={40 + i * 120} y="58" fill={text3} style={{ ...mono, fontSize: 9 }}>{k.l}</text>
                <text x={40 + i * 120} y="82" fill={i === 1 ? A : text2} style={{ fontFamily: 'inherit', fontSize: 18, fontWeight: 500 }}>{k.v}</text>
              </g>
            )}
            {/* Chart */}
            <rect x="30" y="110" width="340" height="150" fill="rgba(255,255,255,0.01)" stroke={stroke} />
            {/* grid lines */}
            {[0, 1, 2, 3].map((i) => <line key={i} x1="30" y1={140 + i * 30} x2="370" y2={140 + i * 30} stroke={strokeDim} strokeWidth="0.5" />)}
            {/* area */}
            <path d="M40 230 L80 215 L120 220 L160 200 L200 205 L240 175 L280 165 L320 145 L360 135 L360 255 L40 255 Z" fill="url(#area08)" />
            <path d="M40 230 L80 215 L120 220 L160 200 L200 205 L240 175 L280 165 L320 145 L360 135" stroke={A} strokeWidth="1.5" fill="none" />
            {/* comparison line */}
            <path d="M40 245 L360 200" stroke={text3} strokeWidth="1" strokeDasharray="3 3" fill="none" />
            <text x="30" y="280" fill={text3} style={mono}>WETTBEWERB · STANDORT · MATCHING</text>
          </svg>
        </div>);


    default:
      return null;
  }
}

function MorphingWord({ words, intervalMs = 3400, onChange, targetIdx }) {
  const [pair, setPair] = useState({ prev: null, current: 0 });

  // Auto-rotation only when user is NOT actively controlling (targetIdx null)
  useEffect(() => {
    if (targetIdx != null) return;
    const t = setInterval(() => {
      setPair(({ current }) => ({ prev: current, current: (current + 1) % words.length }));
    }, intervalMs);
    return () => clearInterval(t);
  }, [words.length, intervalMs, targetIdx]);

  // Manual control: jump to targetIdx when user hovers/filters
  useEffect(() => {
    if (targetIdx == null) return;
    setPair(({ current }) => current === targetIdx ? { prev: null, current } : { prev: current, current: targetIdx });
  }, [targetIdx]);

  useEffect(() => {
    if (onChange) onChange(words[pair.current].track);
  }, [pair.current]);

  const longest = words.reduce((a, b) => (a.text.length >= b.text.length ? a : b)).text;

  function stateFor(i) {
    if (i === pair.current) return 'active';
    if (i === pair.prev) return 'outgoing';
    return 'idle';
  }

  return (
    <span className="morph-stack">
      <span aria-hidden="true" className="morph-placeholder">{longest}</span>
      {words.map((w, i) => {
        const state = stateFor(i);
        const letters = w.text.split('');
        return (
          <span
            key={i}
            className={`morph-word state-${state}`}
            style={{ color: w.color }}
            aria-hidden={state !== 'active'}
          >
            {letters.map((c, li) => (
              <span
                key={`${pair.current}-${pair.prev}-${li}`}
                className="morph-letter"
                style={{ animationDelay: `${li * 18}ms` }}
              >
                {c === ' ' ? '\u00A0' : c}
              </span>
            ))}
          </span>
        );
      })}
    </span>
  );
}

const MORPH_WORDS = [
  { text: "KI-Consulting.", color: "var(--accent-yellow)", track: "build" },
  { text: "Agentur.", color: "var(--cool)", track: "done" }
];

function ServicesC() {
  const [active, setActive] = useState(0);
  const [filter, setFilter] = useState(null);
  const [hovered, setHovered] = useState(null);
  const [morphTrack, setMorphTrack] = useState(null);
  const effectiveFilter = hovered || filter;
  const userControl = hovered || filter;
  const morphTargetIdx = userControl ? MORPH_WORDS.findIndex(w => w.track === userControl) : null;
  const list = effectiveFilter ? SERVICES.filter((s) => s.track === effectiveFilter) : SERVICES;
  const revealed = hovered !== null || filter !== null;
  useEffect(() => { setActive(0); }, [effectiveFilter]);
  const total = list.length;
  return (
    <section id="services" className="section" data-screen-label="Services" style={{ padding: "40px 0px" }}>
      <div className="container">
        <h2 className="display display-xl reveal" style={{ width: "700px", maxWidth: "100%", marginBottom: 40 }}>
          <MorphingWord words={MORPH_WORDS} onChange={setMorphTrack} targetIdx={morphTargetIdx} />
          <br />
          <span style={{ color: 'var(--text-3)' }}>Sie entscheiden.</span>
        </h2>

        <TrackSwitch onFilter={setFilter} onHover={setHovered} active={filter} pseudoHover={!hovered && !filter ? morphTrack : null} />

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 60,
          minHeight: revealed ? 520 : 0,
          maxHeight: revealed ? 'none' : 0,
          overflow: 'hidden',
          opacity: revealed ? 1 : 0,
          transition: 'opacity .4s var(--ease-out), max-height .5s var(--ease-out), min-height .5s var(--ease-out)',
          pointerEvents: revealed ? 'auto' : 'none',
          userSelect: revealed ? 'auto' : 'none'
        }} id="svcC">
          <div style={{ borderTop: '1px solid var(--border)' }}>
            {list.map((s, i) =>
            <div key={s.id} onMouseEnter={() => setActive(i)}
            style={{
              borderBottom: '1px solid var(--border)',
              padding: '22px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              cursor: 'pointer', transition: 'all .3s',
              opacity: active === i ? 1 : 0.45
            }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 20 }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>{s.id}</span>
                  <span className="display display-md" style={{ fontWeight: 500 }}>{s.title}</span>
                  <TrackTag track={s.track} />
                </div>
                <Icon name="arrow" size={18} style={{ transform: active === i ? 'translateX(4px)' : 'none', transition: 'transform .3s' }} />
              </div>
            )}
          </div>
          <div style={{ position: 'sticky', top: 120, alignSelf: 'start' }}>
            <div className="card edge-gradient" style={{ padding: 0, minHeight: 560, display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>
              {/* Visual fills top area */}
              <div style={{ position: 'relative', height: 220, flexShrink: 0, borderBottom: '1px solid var(--border)', background: 'radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.03), transparent 70%)' }}>
                <ServicePreview id={list[active]?.id} track={list[active]?.track} />
                <div style={{ position: 'absolute', top: 16, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', zIndex: 2, pointerEvents: 'none' }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', letterSpacing: '0.2em' }}>
                    {list[active]?.id} / {String(total).padStart(2, '0')} · PREVIEW
                  </div>
                  {list[active] && <TrackTag track={list[active].track} />}
                </div>
              </div>
              {/* Text area */}
              <div style={{ padding: '28px 28px 28px', display: 'flex', flexDirection: 'column', gap: 20, flex: 1 }}>
                <div>
                  <div className="mono" style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14, fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                    <Icon name={list[active]?.icon} size={14} stroke={1.4} />
                    <span>{list[active]?.id} · Service</span>
                  </div>
                  <h3 className="display" style={{ margin: 0, marginBottom: 18, fontWeight: 500, lineHeight: 1.1, fontSize: 'clamp(26px, 3vw, 38px)', letterSpacing: '-0.02em' }}>{list[active]?.title}</h3>
                  <div className="body" style={{ fontSize: 14, color: 'var(--text-2)', maxWidth: '52ch', lineHeight: 1.55 }}>{list[active]?.description}</div>
                </div>
                <div style={{ flex: 1, display: 'flex', alignItems: 'flex-end' }}>
                  <ServiceFacts id={list[active]?.id} track={list[active]?.track} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media(max-width:860px){#svcC{grid-template-columns:1fr!important;}}`}</style>
    </section>);

}

Object.assign(window, { Services });