/* global React, useReveal, Topo, ArrowRight */
const { useState, useEffect, useMemo } = React;

/* ---------- Mini Topo backdrop for case media ---------- */

function MiniTopo({ seed = 1 }) {
  const W = 400,H = 300;
  const lines = 6;
  const paths = [];
  for (let i = 0; i < lines; i++) {
    const baseY = H / (lines + 1) * (i + 1);
    const amp = 18 + (i + seed) % 3 * 8;
    let d = `M -10 ${baseY}`;
    for (let s = 1; s <= 5; s++) {
      const x = W / 5 * s + 10;
      const y = baseY + Math.sin((s + i + seed) * 1.3) * amp;
      d += ` Q ${x - 30} ${baseY + Math.sin((s + i) * 0.8) * amp * 1.4} ${x} ${y}`;
    }
    paths.push(d);
  }
  return (
    <svg className="topo-mini" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice">
      {paths.map((d, i) => <path key={i} d={d} />)}
    </svg>);

}

/* ---------- Projects data ----------
   Real projects from ki-alpin.at + the three KI ALPIN own products.
   `kind`:
     - "own"      → in-house product (Aderato, Idea Validator, Interview Expert)
     - "client"   → delivered for a client
     - "workshop" → training / workshop engagement
   `pm`: marks projects relevant to the PM focus area (highlight filter).
   Listed in deliberate order: WIFI featured first, then own products,
   then customer projects.
------------------------------------------------------------------ */

const PROJECTS = [
// ---- Own products
{
  id: "idea-validator",
  kind: "own",
  pm: false,
  tag: "Produktentwicklung",
  badge: "Eigenprodukt",
  title: "Idea Validator · Von der Idee zum MVP",
  desc: "Multi-Agent-KI, die eine vollständige Ideenvalidierung orchestriert: Recherche, Markt-Check, Hypothesen, automatische MVP-Generierung. Aus dem KI ALPIN Lab.",
  result: "Live",
  meta: ["Multi-Agent", "MVP-Builder"],
  href: "https://validateandlaunch.com",
  img: "https://validateandlaunch.com/1.png",
  detail: {
    stats: [
    { v: "Live", k: "validateandlaunch.com" },
    { v: "Multi-Agent", k: "Orchestrierung" },
    { v: "≤ 1 Tag", k: "von Idee zu MVP-Entwurf" },
    { v: "Eigenprodukt", k: "KI ALPIN Lab" }],

    situation: "Frühe Ideen scheitern selten an der Idee selbst, sondern am ungeprüften Sprung in den Bau. Klassische Validierung dauert Wochen, ist teuer und wird oft übersprungen.",
    approach: "Wir haben einen Multi-Agent-Stack gebaut: Researcher, Critic, Market-Analyst, Hypothesis-Builder und ein MVP-Compiler arbeiten orchestriert zusammen. Ergebnis: eine validierte Hypothese plus erster MVP-Entwurf in unter einem Tag.",
    learning: "Agenten brauchen klare Rollen, nicht nur Prompts. Das Orchestration-Pattern entscheidet über Qualität und damit auch über die Wartbarkeit nach drei Monaten.",
    before: "Validierung: Wochen, oft übersprungen",
    after: "Strukturierte Validierung: Stunden"
  }
},
{
  id: "aderato",
  kind: "own",
  pm: false,
  tag: "Kreativwirtschaft · Ads",
  badge: "Eigenprodukt",
  title: "Aderato · Automatisierte Ads-Erstellung",
  desc: "KI-Pipeline für die kontinuierliche Erzeugung von Ad-Creatives über Meta, TikTok und Google. Briefing rein, performance-getestete Varianten raus.",
  result: "B2B SaaS",
  meta: ["Ads Automation", "Multi-Channel"],
  href: null,
  detail: {
    stats: [
    { v: "10×", k: "Creative-Output pro Briefing" },
    { v: "Meta · TikTok · Google", k: "Channels" },
    { v: "B2B SaaS", k: "Geschäftsmodell" },
    { v: "Eigenprodukt", k: "KI ALPIN Lab" }],

    situation: "Performance-Marketing-Teams brauchen ständig neue Creative-Varianten. Hand-erstellt skaliert nicht; generische KI-Outputs konvertieren nicht.",
    approach: "Aderato verbindet Brand-Voice-Modelle mit Performance-Daten aus den Ad-Plattformen. Briefing rein, Varianten raus, automatisch ge-A/B-getestet, Lerneffekt zurück ins Modell.",
    learning: "Brand-Konsistenz und Performance sind kein Trade-off, wenn das Modell die richtigen Constraints kennt. Die Schnittstelle zum Brand-Team ist wichtiger als das Modell.",
    before: "1 Briefing → 2 Creatives in 3 Tagen",
    after: "1 Briefing → 20 Creatives in 1 Stunde"
  }
},
{
  id: "interview-expert",
  kind: "own",
  pm: false,
  tag: "Consulting-Tool",
  badge: "Eigenprodukt",
  title: "Interview Expert · Hypothesenarbeit für Consultants",
  desc: "Begleiter für Consultants in Diskovery-Phasen: führt strukturiert durch Hypothesen, prüft Konsistenz mit bisherigen Interviews und schlägt nächste Fragen vor.",
  result: "Beta",
  meta: ["Consultant Tool", "Strategie-Support"],
  href: null,
  detail: {
    stats: [
    { v: "Beta", k: "interne Nutzung" },
    { v: "Hypothesen-Tree", k: "Kernkonzept" },
    { v: "Consulting", k: "Zielgruppe" },
    { v: "Eigenprodukt", k: "KI ALPIN Lab" }],

    situation: "In Diskovery-Phasen verlieren Beratungsteams Hypothesen aus den Augen, wenn 15 Interviews parallel laufen. Manuelle Synthese ist zeitraubend und fehleranfällig.",
    approach: "Der Interview Expert hält den Hypothesen-Baum, prüft Konsistenz, markiert Widersprüche, und schlägt vor jedem Termin die drei wichtigsten offenen Fragen vor. Lernt mit jedem Interview.",
    learning: "KI ist im Consulting kein Antwort-Generator, sondern eine Gedächtnishilfe. Genau dort entsteht Vertrauen, und genau dort akzeptiert das erfahrene Beratungsteam das Tool.",
    before: "Hypothesen-Drift nach 8 Interviews",
    after: "Konsistente Argumentationslinie über Wochen"
  }
},

// ---- Customer projects
{
  id: "holzkonzern",
  kind: "client",
  pm: false,
  tag: "Prozessautomatisierung · Holzindustrie",
  badge: null,
  title: "Internationaler Holzkonzern · Angebote in Minuten statt Wochen",
  desc: "Ein Holzkonzern mit über 1.000 Produktvarianten hat Angebote auf Basis von Bauplänen erstellt. Das hat bis zu zwei Wochen gedauert. Wir haben ein Agent-System gebaut, das Baupläne ausliest, Vertriebssignale erkennt und über das firmeninterne CRM in Minuten ein fertiges Angebot zusammenstellt.",
  result: "2 Wochen → 10 Min",
  meta: ["Agent-System", "CRM-Anbindung"],
  href: null,
  detail: {
    stats: [
    { v: "2 Wo → 10 Min", k: "Zeit bis zum Angebot" },
    { v: "1.000+", k: "Produktvarianten" },
    { v: "Agent-System", k: "Baupläne → Angebot" },
    { v: "Dataverse", k: "saubere Datenbasis" }],

    situation: "Ein Holzkonzern mit über 1.000 Produktvarianten hat Angebote auf Basis von Bauplänen erstellt. Das hat bis zu zwei Wochen gedauert. In der Zeit waren viele Kunden schon beim Wettbewerb.",
    approach: "Wir haben ein Agent-System gebaut, das Baupläne ausliest, Vertriebssignale erkennt und über das firmeninterne CRM in Minuten ein fertiges Angebot zusammenstellt. Zwei Wochen runter auf zehn Minuten. Nebenbei ist ein Produktdaten-Assistent für den Vertrieb entstanden, weil niemand in hunderten Datenblättern schnell die richtige Spezifikation gefunden hat.",
    learning: "Die eigentliche Hürde war nicht die KI. Microsofts Copilot hat die Produkttabelle als Fließtext interpretiert statt als strukturierte Daten, was zu falschen Ergebnissen geführt hat. Erst als wir die Daten in eine Dataverse-Struktur überführt und sauber angebunden haben, hat es funktioniert.",
    before: "Angebote manuell aus Bauplänen, bis zu zwei Wochen",
    after: "Fertiges Angebot in rund zehn Minuten"
  }
},
{
  id: "healthtech-recovery",
  kind: "client",
  pm: false,
  tag: "KI-Strategie · Digital Health",
  badge: null,
  title: "HealthTech-Startup · Recovery-App für Sucht-Recovery",
  desc: "Ein niederländisches Startup hatte eine KI-gestützte Recovery-App für Menschen mit Suchterkrankungen gebaut, einen WhatsApp-Chatbot mit enormer Absprungrate. Wir haben das Produkt grundlegend neu gedacht: ein gamifizierter Lernpfad nach dem Duolingo-Prinzip, mit täglichen Modulen und therapeutisch fundierten Übungen.",
  result: "Co-Founder-Nähe",
  meta: ["Produkt neu gedacht", "Agent-Orchestrierung"],
  href: null,
  detail: {
    stats: [
    { v: "Duolingo-Prinzip", k: "gamifizierter Lernpfad" },
    { v: "WhatsApp → App", k: "Produkt neu gedacht" },
    { v: "Agent-Backend", k: "Orchestrierung & Prompts" },
    { v: "Co-Founder", k: "Nähe statt Beratung" }],

    situation: "Ein niederländisches Startup hatte eine Recovery-App für Menschen mit Suchterkrankungen gebaut. Ein WhatsApp-Chatbot, KI-gestützt. Die Absprungrate war enorm. Wer sich gerade aus einer Abhängigkeit kämpft, bleibt nicht bei einem Textfeld hängen.",
    approach: "Wir haben das Produkt grundlegend neu gedacht: ein gamifizierter Lernpfad nach dem Duolingo-Prinzip, mit täglichen Modulen, Fortschrittsanzeige und therapeutisch fundierten Übungen. Dazu kam der Aufbau des technischen Teams, die Orchestrierung der KI-Agents im Backend und die Prompt-Entwicklung für den therapeutischen Kontext.",
    learning: "In der Praxis war die Rolle näher am Co-Founder als am klassischen Berater. Bei einem AI-First-Produkt in einem so sensiblen Kontext entscheidet die enge, kontinuierliche Zusammenarbeit.",
    before: "WhatsApp-Chatbot mit hoher Absprungrate",
    after: "Gamifizierter Lernpfad, therapeutisch fundiert"
  }
},
{
  id: "sozialorganisation",
  kind: "client",
  pm: false,
  tag: "KI-Strategie · Workshops · Non-Profit",
  badge: null,
  title: "Sozialorganisation Österreich · KI-Einführung als Prozess",
  desc: "Bei einer großen österreichischen Sozialorganisation begleiten wir seit über einem Jahr die KI-Einführung. Nicht als einmaliges Projekt, sondern als laufender Prozess: von Workflows in der Energieberatung über eine Rechtsauskunft für die internen Juristen bis zu einer vierteiligen Workshop-Serie für Key-User.",
  result: "1+ Jahr",
  meta: ["Strategie + Technik", "Workshop-Serie"],
  href: null,
  detail: {
    stats: [
    { v: "1+ Jahr", k: "laufende Begleitung" },
    { v: "10 → 60+", k: "Key-User tragen Wissen weiter" },
    { v: "350 Mails", k: "in der Testphase verarbeitet" },
    { v: "3 Felder", k: "Strategie · Technik · Befähigung" }],

    situation: "Bei einer großen österreichischen Sozialorganisation begleiten wir seit über einem Jahr die KI-Einführung. Nicht als einmaliges Projekt, sondern als laufender Prozess.",
    approach: "In der Energieberatung kamen Förderanfragen per E-Mail rein, jede musste einzeln auf Anspruchsberechtigung geprüft werden. Wir haben einen Workflow gebaut, der Mails analysiert, Dokumente prüft und Antwortentwürfe vorbereitet. 350 Mails in der Testphase verarbeitet. Daneben eine Rechtsauskunftslösung für die internen Juristen, die verlässlicher arbeitet als die gängigen Tools am Markt. Und eine vierteilige Workshop-Serie, in der rund zehn Key-User ausgebildet wurden, die das Wissen an über 60 Kolleginnen und Kollegen weitertragen.",
    learning: "Strategie, Technik und Befähigung aus einer Hand, über einen längeren Zeitraum. Die Automatisierung in der Energieberatung läuft technisch sauber; dass sie noch nicht im Echtbetrieb steht, liegt weniger an der KI als an über Jahre gewachsenen Abläufen mit uneinheitlichen Formaten und vielen Eingangskanälen.",
    before: "Förderanfragen einzeln, manuell geprüft",
    after: "Analyse, Prüfung und Antwortentwurf vorbereitet"
  }
}];


const FILTERS = [
{ id: "all", label: "Alle Projekte" },
{ id: "own", label: "Eigenprodukte" },
{ id: "client", label: "Kundenprojekte" }];


/* ---------- Projekte (formerly Cases) ---------- */

function Cases({ onOpen }) {
  const ref = useReveal();
  const [filter, setFilter] = useState("all");

  const visible = useMemo(() => {
    if (filter === "all") return PROJECTS;
    if (filter === "pm") return PROJECTS.filter((p) => p.pm);
    if (filter === "own") return PROJECTS.filter((p) => p.kind === "own");
    if (filter === "client") return PROJECTS.filter((p) => p.kind === "client" || p.kind === "workshop");
    return PROJECTS;
  }, [filter]);

  const counts = useMemo(() => ({
    all: PROJECTS.length,
    own: PROJECTS.filter((p) => p.kind === "own").length,
    client: PROJECTS.filter((p) => p.kind === "client" || p.kind === "workshop").length,
    pm: PROJECTS.filter((p) => p.pm).length
  }), []);

  return (
    <section className="section projects" id="arbeiten">
      <div className="wrap reveal" ref={ref}>
        <div className="section-head">
          <div className="label-col">
            <span className="num">N° 05</span>
            <span className="name">Referenzprojekte</span>
          </div>
          <div>
            <span className="eyebrow">Eigene Produkte & Kundenprojekte</span>
            <h2 className="h-1" style={{ marginTop: 16, maxWidth: '24ch' }}>
              Was im Alltag steht. <span className="serif-it" style={{ color: 'var(--accent)' }}>Eigene Produkte und echte Projekte.</span>
            </h2>
            <p className="lead" style={{ marginTop: 16, maxWidth: '54ch' }}>
              Wir bauen nicht nur für andere, wir betreiben auch eigene KI-Produkte. Diese Erfahrung fließt in jedes Projekt zurück.
            </p>
            <p className="proj-note" style={{ marginTop: 12, maxWidth: '54ch', color: 'var(--fg-muted)', fontSize: 14 }}>
              Das sind ausgewählte Projekte. Auf Anfrage gerne weitere Referenzen.
            </p>
          </div>
        </div>

        {/* Filter chips */}
        <div className="proj-filters" role="tablist" aria-label="Projekte filtern">
          {FILTERS.map((f) =>
          <button
            key={f.id}
            role="tab"
            aria-selected={filter === f.id}
            className={`proj-filter ${filter === f.id ? 'active' : ''} ${f.id === 'own' ? 'is-own' : ''} ${f.id === 'pm' ? 'is-pm' : ''}`}
            onClick={() => setFilter(f.id)}>
            
              <span className="lbl">{f.label}</span>
              <span className="ct">{counts[f.id]}</span>
            </button>
          )}
        </div>

        <div className="cases-grid">
          {visible.map((c, idx) =>
          <article
            key={c.id}
            className={`case ${c.kind === "own" ? "is-own" : ""} ${c.pm ? "is-pm" : ""}`}
            onClick={() => onOpen(c)}>
            
              <div className="case-media">
                <MiniTopo seed={(idx + 1) * 2} />
                {c.img ?
              <img
                src={c.img}
                alt={c.title}
                loading="lazy"
                className="case-img"
                data-filled=""
                onError={(e) => { e.currentTarget.style.display = 'none'; }}
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: c.kind === 'own' ? '50% 0%' : '50% 50%', display: 'block' }} /> :

              <image-slot
                id={`case-img-${c.id}`}
                className="case-img"
                shape="rect"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }}
                placeholder={c.title}>
                  </image-slot>
              }
                <span className="case-scrim" aria-hidden="true"></span>
                <span className="case-tag">{c.tag}</span>
                {c.badge &&
              <span className={`case-badge ${c.kind === "own" ? "case-badge--own" : "case-badge--focus"}`}>
                    {c.badge}
                  </span>
              }
              </div>
              <div className="case-body">
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
                <div className="meta">
                  {c.meta.map((m, i) => <span key={i}>{m}</span>)}
                  {c.href &&
                <a
                  href={c.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="case-link"
                  onClick={(e) => e.stopPropagation()}>
                  
                      ↗ Live
                    </a>
                }
                </div>
              </div>
            </article>
          )}
        </div>

        {visible.length === 0 &&
        <div className="proj-empty">Keine Projekte in dieser Auswahl.</div>
        }

        <div style={{ marginTop: 48, display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
          <a href="#kontakt" className="link">Alle Referenzen auf Anfrage</a>
        </div>
      </div>
    </section>);

}

/* ---------- Case detail drawer ---------- */

function CaseDrawer({ activeCase, onClose }) {
  useEffect(() => {
    const handler = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose]);

  const c = activeCase;
  const open = !!c;
  const detail = c?.detail;

  return (
    <>
      <div className={`drawer-backdrop ${open ? 'open' : ''}`} onClick={onClose}></div>
      <aside className={`drawer ${open ? 'open' : ''}`} aria-hidden={!open}>
        {c &&
        <>
            <div className="drawer-head">
              <span className="mono" style={{ fontSize: 11 }}>
                {c.kind === "own" ? "Eigenprodukt · KI ALPIN Lab" : c.kind === "workshop" ? "Workshop · Training" : "Case Study"}
              </span>
              <button className="drawer-close" onClick={onClose} aria-label="Schließen">
                <svg viewBox="0 0 14 14" width="14" height="14" fill="none">
                  <path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.2" />
                </svg>
              </button>
            </div>
            <div className="drawer-body">
              <div>
                <span className="eyebrow">{c.tag}</span>
                <h2 style={{ marginTop: 16 }}>{c.title}</h2>
              </div>

              {detail ?
            <>
                  <div className="drawer-grid">
                    {detail.stats.map((s, i) =>
                <div key={i} className="drawer-stat">
                        <span className="v">{s.v}</span>
                        <span className="k">{s.k}</span>
                      </div>
                )}
                  </div>

                  <div className="drawer-section">
                    <h4>Ausgangslage</h4>
                    <p>{detail.situation}</p>
                  </div>

                  <div className="drawer-section">
                    <h4>Vorher · Nachher</h4>
                    <div className="process-line">
                      <div className="col"><span className="lbl">Vorher</span><span className="v">{detail.before}</span></div>
                      <div className="col after"><span className="lbl">Nachher</span><span className="v">{detail.after}</span></div>
                    </div>
                  </div>

                  <div className="drawer-section">
                    <h4>Vorgehen</h4>
                    <p>{detail.approach}</p>
                  </div>

                  <div className="drawer-section">
                    <h4>Was wir mitgenommen haben</h4>
                    <p>{detail.learning}</p>
                  </div>
                </> :

            <div className="drawer-section">
                  <h4>Kurzfassung</h4>
                  <p>{c.desc}</p>
                  <p style={{ marginTop: 12, color: 'var(--fg-muted)' }}>
                    Ausführliche Fallstudie auf Anfrage. Wir teilen Details persönlich,
                    nicht öffentlich.
                  </p>
                </div>
            }

              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                {c.href &&
              <a href={c.href} target="_blank" rel="noopener noreferrer" className="btn">
                    Live ansehen ↗
                  </a>
              }
                <a href="#kontakt" onClick={onClose} className={`btn ${c.href ? 'ghost' : ''}`}>
                  Ähnliches Projekt besprechen
                </a>
              </div>
            </div>
          </>
        }
      </aside>
    </>);

}

/* ---------- Network (KI ALPIN core + Advisory Board + extended network) ---------- */

function NetAvatar({ node, size = 48, slotId = null }) {
  const s = size;
  // Center brand node: show the KI ALPIN summit-path mark, not initials.
  if (node && node.id === 'center') {
    return (
      <span
        className="net-avatar net-avatar--center"
        style={{ width: s, height: s }}
        aria-hidden="true">
        <img
          src="assets/ki-alpin-icon-only-reverse-pine-bg.svg"
          alt=""
          className="net-avatar-logo" />
      </span>);

  }
  // For people nodes: render an <image-slot> placeholder, so the user can drop
  // a real headshot in later. Falls back to initials inside the slot.
  if (slotId) {
    return (
      <span
        className={`net-avatar net-avatar--${node.ring} net-avatar--slot`}
        style={{ width: s, height: s }}
        aria-hidden="true">
        
        <image-slot
          id={slotId}
          shape="circle"
          style={{ width: '100%', height: '100%', display: 'block', position: 'absolute', inset: 0, borderRadius: '50%' }}
          placeholder={node.label}>
        </image-slot>
      </span>);

  }
  return (
    <span
      className={`net-avatar net-avatar--${node.ring}`}
      style={{ width: s, height: s }}
      aria-hidden="true">
      
      <span className="net-avatar-initials">{node.initials}</span>
    </span>);

}

function Network() {
  const ref = useReveal();
  const [hovered, setHovered] = useState(null);
  const [focused, setFocused] = useState(null);
  const [ready, setReady] = useState(false);

  const active = hovered || focused;

  // Trigger entrance animation when section is in view
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      ([e]) => {if (e.isIntersecting) {setReady(true);io.disconnect();}},
      { threshold: 0.2 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [ref]);

  const center = {
    id: 'center',
    label: 'KI ALPIN',
    role: 'Strategie & Lieferung',
    note: 'Das Atelier im Kern: Strategie, Bau und Adoption aus einer Hand. Liefert direkt, holt Verstärkung dort, wo es Sinn macht.',
    initials: 'KA'
  };

  // ring: 'core' = delivery duo, 'spar' = advisory board, 'ext' = extended network
  // slotId: id of <image-slot> for headshot placeholder (people only)
  // cardPos: 'below' | 'above' — where the name card sits relative to the avatar
  const nodes = [
  // Advisory Board (top)
  {
    id: 'martin', label: 'Martin Setnicka', role: 'Advisory Board · Sparring',
    note: 'Institutsleiter Informationstechnologie & Wirtschaftsinformatik an der Ferdinand Porsche FernFH und langjähriger Unternehmer (S!MART thinking, CareFact, Taxelerate, prognoserechnung.at). Zuvor über zehn Jahre im österreichischen Finanzministerium, zuletzt als Executive Director des Predictive Analytics Competence Center. Wir tauschen uns regelmäßig über Geschäftsmodell- und Strategiefragen aus.',
    x: 50, y: 14, ring: 'spar', initials: 'MS', slotId: 'net-photo-martin', cardPos: 'below'
  },

  // Core (mid)
  {
    id: 'simon', label: 'Simon Micheler', role: 'Strategie · Founder',
    note: 'Hält die Strategie, sitzt im Workshop, verantwortet die Lieferung. Ansprechperson im Projekt.',
    x: 17, y: 32, ring: 'core', initials: 'SM', slotId: 'net-photo-simon', cardPos: 'below'
  },
  {
    id: 'nikolay', label: 'Nikolay Krastev', role: 'AI · Data Science · Architektur',
    note: 'Baut die Systeme, die aus den Workshops hervorgehen, und verantwortet die quantitative Tiefenarbeit in Data Science, ML und Architektur. Studium der Artificial Intelligence an der JKU Linz, mehrere Jahre Praxis im Bau produktiver Software.',
    x: 83, y: 32, ring: 'core', initials: 'NK', slotId: 'net-photo-nikolay', cardPos: 'below'
  },

  // Extended network (corners)
  {
    id: 'brand', label: 'Oliver Heiss', role: 'Marke und Positionierung',
    note: 'Marken- und Positionierungs-Profil für die Übersetzung von Systemen in kundennahe Oberflächen. Themen: Markenführung, Identität, Sprache.',
    x: 17, y: 68, ring: 'ext', initials: 'OH', slotId: 'net-photo-oliver', cardPos: 'above'
  },
  {
    id: 'innov', label: 'Julian Eberling', role: 'Innovationsmanagement',
    note: 'Senior-Profil aus Konzern- und Mittelstands-Innovationsarbeit. Wir holen ihn dazu, wenn ein Vorhaben methodisch tiefer aufgehängt werden muss.',
    x: 83, y: 68, ring: 'ext', initials: 'JE', slotId: 'net-photo-julian', cardPos: 'above'
  },
  {
    id: 'change', label: 'Georg Braun', role: 'Change Expert',
    note: 'Organisationsentwicklung und Training. Begleitet KI-Adoption in Teams. Nach dem Workshop fängt die eigentliche Arbeit an.',
    x: 50, y: 86, ring: 'ext', initials: 'GB', slotId: 'net-photo-georg', cardPos: 'above'
  }];


  const detail = active ?
  active === 'center' ? center : nodes.find((n) => n.id === active) :
  center;

  return (
    <section className="section network" id="netzwerk">
      <div className="wrap reveal" ref={ref}>
        <div className="section-head">
          <div className="label-col">
            <span className="num">N° 07</span>
            <span className="name">Netzwerk</span>
          </div>
          <span className="eyebrow">Wie wir liefern</span>
        </div>

        <div className="network-grid">
          <div className="network-text">
            <h2>
              KI ALPIN im Kern. <span className="serif-it" style={{ color: 'var(--accent)' }}>Verstärkung, wo sie hilft.</span>
            </h2>
            <p>
              Im Kern arbeiten Simon Micheler und Nikolay Krastev gemeinsam an Ihrem Vorhaben. Strategie
              und Bau aus einer Hand, eng abgestimmt. So bleiben wir schnell, persönlich und durchgängig
              verantwortlich.
            </p>
            <p>
              <strong>Advisory Board.</strong> Mit <em>Martin Setnicka</em>, Institutsleiter
              Informationstechnologie an der Ferdinand Porsche FernFH und langjähriger Unternehmer,
              diskutieren wir Geschäftsmodell- und Positionierungsfragen.
            </p>
            <p>
              <strong>Erweitertes Netzwerk.</strong> Wenn ein Projekt mehr Spezialisierung braucht, ziehen
              wir Profile aus einem kuratierten Kreis hinzu: Marke und Positionierung, Innovation,
              Data Science, Change. Wer in Ihrem Projekt mitarbeitet, wird vorab konkret benannt.
            </p>
            <div className="network-legend">
              <div className="legend-item"><span className="sw core"></span> Kern · Strategie & Bau</div>
              <div className="legend-item"><span className="sw spar"></span> Advisory Board</div>
              <div className="legend-item"><span className="sw ext"></span> Netzwerk · Projektbezogen</div>
            </div>
          </div>

          <div className="network-stage">
            <div className={`network-diagram network-diagram--v3 ${ready ? 'is-ready' : ''}`}>

              {/* Topographic backdrop — the brand's visual DNA, very faint */}
              <Topo seed={5} opacity={0.12} lines={9} />

              {/* Compositional crosshair guides — subtle Swiss-grid alignment */}
              <svg className="net-guides" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
                <line x1="50" y1="0" x2="50" y2="100" />
                <line x1="0" y1="50" x2="100" y2="50" />
              </svg>

              {/* Concentric orbit rings — one solid, one dashed */}
              <svg className="net-orbits" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
                <ellipse className="orbit orbit--outer" cx="50" cy="50" rx="38" ry="36" />
                <ellipse className="orbit orbit--inner" cx="50" cy="50" rx="22" ry="20" />
              </svg>

              {/* Connection lines from center to each node */}
              <svg className="net-lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
                {nodes.map((n, i) => {
                  const isActive = active === n.id;
                  const isDim = active && active !== n.id && active !== 'center';
                  let cls = `net-line net-line--${n.ring}`;
                  if (isActive) cls += ' is-active';
                  if (isDim) cls += ' is-dim';
                  return (
                    <line
                      key={n.id}
                      x1="50" y1="50"
                      x2={n.x} y2={n.y}
                      className={cls}
                      vectorEffect="non-scaling-stroke"
                      style={{ '--i': i }} />);


                })}
              </svg>

              {/* Center brand mark — quietly confident, not loud */}
              <button
                type="button"
                className={`net-center ${active === 'center' ? 'is-active' : ''} ${active && active !== 'center' ? 'is-dim' : ''}`}
                style={{ left: '50%', top: '50%' }}
                onMouseEnter={() => setHovered('center')}
                onMouseLeave={() => setHovered(null)}
                onFocus={() => setFocused('center')}
                onBlur={() => setFocused(null)}
                aria-label="KI ALPIN · im Kern">
                
                <span className="net-center-disc">
                  <span className="net-center-mark" aria-hidden="true"></span>
                  <span className="net-center-wordmark">
                    <span className="net-center-line1">KI ALPIN</span>
                  </span>
                </span>
                <span className="net-center-halo" aria-hidden="true"></span>
              </button>

              {/* Nodes */}
              {nodes.map((n, i) =>
              <button
                type="button"
                key={n.id}
                className={`net-node net-node--${n.ring} net-node--card-${n.cardPos || 'below'} ${active === n.id ? 'is-active' : ''} ${active && active !== n.id ? 'is-dim' : ''}`}
                style={{ left: `${n.x}%`, top: `${n.y}%`, '--i': i }}
                onMouseEnter={() => setHovered(n.id)}
                onMouseLeave={() => setHovered(null)}
                onFocus={() => setFocused(n.id)}
                onBlur={() => setFocused(null)}
                aria-describedby="net-detail">
                
                  <NetAvatar
                  node={n}
                  size={60}
                  slotId={n.slotId || null} />
                
                  <span className="net-node-card">
                    <span className="net-node-label">{n.label}</span>
                    <span className="net-node-role">{n.role}</span>
                  </span>
                </button>
              )}
            </div>

            {/* Detail panel */}
            <div className="net-detail" id="net-detail" aria-live="polite">
              <div className="net-detail-aside">
                <NetAvatar
                  node={detail}
                  size={detail.id === 'center' ? 64 : 56}
                  slotId={detail.slotId || null} />
                
                <span className="net-detail-kicker">
                  {detail.id === 'center' ? 'Im Kern' :
                  detail.id === 'martin' ? 'Advisory Board' :
                  detail.id === 'simon' || detail.id === 'nikolay' ? 'Fix-Team' :
                  'Erweitertes Netzwerk'}
                </span>
              </div>
              <div className="net-detail-body">
                <div className="net-detail-name">{detail.label}</div>
                <div className="net-detail-role">{detail.role}</div>
                <p className="net-detail-note">{detail.note}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- About · Simon & Nikolay ---------- */

function About() {
  const ref = useReveal();
  return (
    <section className="section about" id="simon">
      <div className="wrap reveal" ref={ref}>
        <div className="section-head">
          <div className="label-col">
            <span className="num" style={{ color: 'var(--mist)' }}>N° 06</span>
            <span className="name" style={{ color: 'var(--mist)' }}>Im Kern</span>
          </div>
          <div>
            <span className="eyebrow">Die Personen hinter KI ALPIN</span>
            <h2 className="h-1" style={{ marginTop: 16, color: 'var(--mist)', maxWidth: '22ch' }}>
              Zwei Köpfe. <span className="serif-it" style={{ color: 'var(--accent)' }}>Strategie und Umsetzung in einer Hand.</span>
            </h2>
          </div>
        </div>

        <div className="about-duo">
          {/* Simon — headshot, peer treatment */}
          <article className="about-person about-person--lead">
            <div className="about-person-portrait about-person-portrait--headshot">
              <image-slot
                id="about-portrait-simon"
                style={{ width: '100%', height: '100%', display: 'block', position: 'absolute', inset: 0 }}
                shape="rect"
                placeholder="Portrait Simon · Headshot">
              </image-slot>
              <div className="name-tag">
                <div className="n">Simon Micheler</div>
                <div className="r">Strategie & Lieferung</div>
              </div>
            </div>

            <div className="about-person-content">
              <blockquote>
                Ich halte die Strategie, ich sitze im Workshop, ich bin bei der Übergabe dabei.
                {" "}
                <span className="em">Und ich weiß, wann ich jemanden Besseren dazu hole.</span>
              </blockquote>

              <p>
                Studium der Kommunikationswissenschaften, Abschlussarbeit 2017 über KI im
                Journalismus. Seitdem arbeite ich an der Schnittstelle von Sprache, System und
                Geschäft.
              </p>
              <p>
                Über zehn Jahre Produktarbeit und Teamführung. Genug gescheiterte Projekte gesehen,
                um zu wissen, wo KI hilft und wo sie nur Lärm macht.
              </p>

              <dl className="about-person-meta" data-comment-anchor="dd27d55ea1-dl-802-15">
                <div><dt>Studium</dt><dd>Kommunikationswissenschaften · Thesis KI im Journalismus (2017) · Oxford AI Programme</dd></div>
                <div><dt>Erfahrung</dt><dd>10+ Jahre · Strategie, Umsetzung & Workshops</dd></div>
                <div><dt>Lehre</dt><dd>WIFI Wien Managementforum</dd></div>
                <div><dt>Track</dt><dd>Exit 3D Yacht Manuals · KMU & Public Sector</dd></div>
              </dl>

              <a className="about-person-linkedin" href="https://www.linkedin.com/in/simon-micheler" target="_blank" rel="noopener noreferrer">
                <svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"></path></svg>
                <span>Simon auf LinkedIn</span>
              </a>
            </div>
          </article>

          {/* Nikolay — compact, headshot */}
          <article className="about-person about-person--compact">
            <div className="about-person-portrait about-person-portrait--headshot">
              <image-slot
                id="about-portrait-nikolay"
                style={{ width: '100%', height: '100%', display: 'block', position: 'absolute', inset: 0 }}
                shape="rect"
                placeholder="Portrait Nikolay · Headshot">
              </image-slot>
              <div className="name-tag">
                <div className="n">Nikolay Krastev</div>
                <div className="r">AI · JKU Linz</div>
              </div>
            </div>

            <div className="about-person-content">
              <blockquote>
                Sauber gebaut heißt: es läuft auch noch,
                {" "}
                <span className="em">wenn niemand mehr draufschaut.</span>
              </blockquote>

              <p>
                <strong style={{ color: 'var(--mist)' }}>Mehrere Jahre Erfahrung im Bau von Software</strong>, vom
                Prototyp bis zur produktiven Übergabe. Studium der Artificial Intelligence an der JKU Linz.
              </p>
              <p>
                Breites KI-Wissen entlang agentischer Systeme und Architektur. Was er mitbringt: ein Auge
                für Genauigkeit und die Geduld, ein System so lange zu schleifen, bis es im Alltag steht. Auch dort,
                wo Standard nicht reicht und wir individuelle Lösungen bauen.
              </p>

              <dl className="about-person-meta">
                <div><dt>Studium</dt><dd>Artificial Intelligence · JKU Linz</dd></div>
                <div><dt>Schwerpunkt</dt><dd>Agentische Systeme · Software-Architektur · Custom-Builds</dd></div>
                <div><dt>Track</dt><dd>Zahlreiche hochwertige KI-Lösungen produktiv im Kundeneinsatz</dd></div>
              </dl>
            </div>
          </article>
        </div>

        {/* Buch & Podcast */}
        <div className="about-features">
          <article className="feature feature--book">
            <div className="feature-media">
              <image-slot
                id="about-book-cover"
                style={{ width: '100%', height: '100%', display: 'block' }}
                shape="rect"
                fit="contain"
                placeholder="Buch-Cover hochladen">
              </image-slot>
            </div>
            <div className="feature-body">
              <span className="feature-kind">Buch · 2025</span>
              <h3>Digital Translator.</h3>
              <p className="feature-sub serif-it">Die Schnittstelle zwischen Business und KI.</p>
              <p>
                Warum die meisten KI-Projekte an der Übersetzung zwischen Geschäftslogik und Modell scheitern,
                nicht an der Technologie. Ein Buch für Führungskräfte, die KI verstehen wollen,
                bevor sie einkaufen. Mit praktischen Mustern, ehrlichen Fallbeispielen und einem
                klaren Vokabular.
              </p>
              <div className="feature-actions">
                <a href="https://shop.lindeverlag.at/buch/digital-translator-20491" target="_blank" rel="noopener noreferrer" className="btn" style={{ background: 'var(--accent)', borderColor: 'var(--accent)', color: 'var(--graphite)' }}>
                  Buch ansehen
                </a>
              </div>
            </div>
          </article>

          <article className="feature feature--podcast">
            <div className="feature-podcast-embed">
              <span className="podcast-label-top">Podcast · WIFI Wien</span>
              <iframe
                title="KI im Mittelstand · Spotify"
                src="https://open.spotify.com/embed/episode/3Hl81rjJfO2qzSsLzpvTNx?utm_source=generator"
                width="100%"
                height="152"
                frameBorder="0"
                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                loading="lazy"
                allowFullScreen
                style={{ border: 0, display: 'block' }}>
              </iframe>
            </div>
            <div className="feature-body">
              <span className="feature-kind">Podcast · WIFI Wien</span>
              <h3>KI für KMUs.</h3>
              <p>
                Im Gespräch mit dem WIFI Wien Management Forum: Wie kleine und mittlere Unternehmen
                in Österreich KI realistisch in ihren Alltag bringen. Ohne Hype, ohne Beraterfloskeln.
              </p>
            </div>
          </article>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Cases, CaseDrawer, Network, About });