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

const RF_CASES = [
  {
    num: "01",
    cat: "Cloud & Architektur",
    catTag: "Greenfield",
    logoId: "logo-css",
    logoSrc: "assets/logo-css.jpg",
    name: "CSS Versicherung",
    desc: "Eine der grössten Kranken- und Lebensversicherer der Schweiz.",
    headline: "Eine neue Geschäftssparte, von null aufgebaut.",
    hook: "Greenfield: Fachprozesse, Organisation und IT in einem durchgängigen Zielbild.",
    metric: { n: "0→1", l: "Greenfield-Aufbau" },
    span: "wide",
    chips: ["Zielbild", "IT-Architektur", "RFI / RFP", "TOM"],
    challenge:
      "CSS führte eine neue Geschäftssparte ein, als Greenfield-Vorhaben ohne bestehende Strukturen. Aufzubauen war die gesamte Lösung von den Fachprozessen über die Organisation bis zur IT-Lösung, einschliesslich der durchgängigen Integration in die bestehenden Sales- und CRM-Prozesse. Gefragt waren ein tragfähiges Zielbild, die Auswahl der passenden Lösung am Markt sowie ein klares Betriebsmodell.",
    solution:
      "Aufbau der neuen Geschäftssparte entlang eines durchgängigen Zielbilds: Definition der IT-Architektur und Integration in die Sales- und CRM-Prozesse, Auswahl der Lösung über einen strukturierten RFI/RFP-Prozess inkl. Lösungsbewertung sowie Festlegung des Target Operating Models (TOM).",
    roleLabel: "Als IT-Projektleiter und Domänen-Architekt",
    roles: [
      ["IT-Architektur & Zielbild", "Architektur, Zielbild und Integration in Sales- & CRM-Prozesse."],
      ["Lösungsauswahl", "Durchführung von RFI/RFP inkl. Lösungsbewertung."],
      ["Vertragsverhandlungen", "Verhandlungsführung bis auf GL- und VR-Ebene."],
      ["Betriebsmodell", "Definition des Target Operating Models (TOM)."],
      ["Lieferantensteuerung", "Steuerung externer Lieferanten."],
    ],
    benefit:
      "CSS verfügt über eine vollständig neu aufgebaute Geschäftssparte mit klar definierten Fachprozessen, Organisation und IT-Lösung, integriert in die bestehende Sales- und CRM-Landschaft. Das strukturierte Vorgehen von der Lösungsauswahl bis zum Target Operating Model schuf eine tragfähige, skalierbare Grundlage für den nachhaltigen Betrieb.",
  },
  {
    num: "02",
    cat: "Cloud & Architektur",
    catTag: "Cloud Migration",
    logoId: "logo-swisslifeselect",
    logoSrc: "assets/logo-swisslifeselect.jpg",
    name: "Swiss Life Select",
    desc: "Einer der führenden Finanz- und Versicherungsberater der Schweiz.",
    headline: "Vier Kernsysteme in die Cloud. FINMA-konform.",
    hook: "Gehärtete Azure/Kubernetes-Landschaft, automatisiert über GitOps.",
    metric: { n: "4", l: "Kernanwendungen migriert" },
    span: null,
    chips: ["Azure", "Kubernetes", "ArgoCD", "FINMA"],
    challenge:
      "Vier geschäftskritische Kernanwendungen liefen auf einer Infrastruktur, die den Anforderungen an Sicherheit, Skalierbarkeit und Betrieb nicht mehr genügte. Als beaufsichtigtes Finanzinstitut unterliegt Swiss Life Select strengen regulatorischen Vorgaben: Die Modernisierung musste FINMA-Anforderungen, Data Residency in der Schweiz und vollständige Auditierbarkeit sicherstellen, bei minimaler Beeinträchtigung des laufenden Betriebs.",
    solution:
      "Migration der vier Kernanwendungen in eine gehärtete, Cloud-native Landschaft auf Basis von Azure und Kubernetes. Die Plattform wurde sicherheits- und compliance-konform konfiguriert (FINMA, Data Residency, volle Auditierbarkeit). Rollout, Datenmigration und Uptime-Sicherung wurden über ArgoCD gekapselt und automatisiert.",
    roleLabel: "Als Entwickler und Architekten",
    roles: [
      ["Migrationsarchitektur", "Konzeption und Umsetzung der gehärteten Azure/Kubernetes-Zielarchitektur unter regulatorischen Vorgaben."],
      ["GitOps & Automatisierung", "Aufbau ArgoCD-basierter Deployment- und Datenmigrationsprozesse für einen nachvollziehbaren Rollout."],
    ],
    benefit:
      "Swiss Life Select betreibt seine Kernanwendungen heute auf einer modernen, gehärteten Cloud-Plattform mit durchgängiger regulatorischer Konformität und Auditierbarkeit. Die GitOps-basierte Automatisierung sorgt für nachvollziehbare, wiederholbare Deployments bei hoher Verfügbarkeit.",
  },
  {
    num: "03",
    cat: "Engineering & Digital",
    catTag: "eBusiness",
    logoId: "logo-suva",
    logoSrc: "assets/logo-suva.png",
    name: "Suva",
    desc: "Führender Träger der obligatorischen Unfallversicherung in der Schweiz.",
    headline: "B2B-Prozesse end-to-end digitalisiert.",
    hook: "Formulare raus, durchgängig digitale Kundenprozesse rein.",
    metric: { n: "E2E", l: "Digitalisierung B2B" },
    span: null,
    chips: ["Angular", "Spring Boot", "OpenShift", "SAFe"],
    challenge:
      "Die B2B-Kundeninteraktion der Suva war stark formularbasiert und medienbruchbehaftet. Zentrale Prozesse in Prävention und Kundenportal liefen weitgehend manuell ab, während die bestehende Applikationslandschaft auf einer veralteten technischen Architektur basierte, ohne modernen, skalierbaren Stack und durchgängige Automatisierung.",
    solution: "Ein eBusiness-Programm zur End-to-End-Digitalisierung der B2B-Prozesse und zur Modernisierung der Plattform:",
    solutionList: [
      ["End-to-End-Digitalisierung B2B", "Durchgängig digitale Kundenkernprozesse in Prävention und Kundenportal."],
      ["Moderner Cloud-Stack", "Angular und Spring Boot, betrieben auf OpenShift in einer Private Cloud."],
      ["Architektur & Engineering", "Skalierbare Front- und Backend-Architektur mit Fokus auf Wartbarkeit."],
      ["Qualität & Automatisierung", "Hohe Testabdeckung, Testautomatisierung und moderner CI/CD-Ansatz."],
    ],
    roleLabel: "Als Entwickler und Architekten",
    roles: [
      ["Review Architektur & Prozesse", "Bewertung und Weiterentwicklung der Ziel-Architektur sowie der Entwicklungs- und Betriebsprozesse."],
      ["Architektur & Engineering", "Umsetzung der Cloud-Architektur (Angular / Spring Boot / OpenShift)."],
      ["DevOps & CI/CD", "Aufbau moderner CI/CD-Pipelines und durchgängiger Automatisierung."],
      ["Methodik", "Agile Entwicklung nach SAFe im Multi-Team-Umfeld."],
    ],
    benefit:
      "Die Suva profitiert von durchgängig digitalen B2B-Prozessen mit reduzierten manuellen Aufwänden und kürzeren Durchlaufzeiten. Der moderne Cloud-Stack und die Automatisierung ermöglichen kurze Release-Zyklen sowie hohe Releasesicherheit bei geringerem Wartungsaufwand.",
  },
  {
    num: "09",
    cat: "Cloud & Architektur",
    catTag: "eBanking",
    logoId: "logo-postfinance",
    logoSrc: "assets/logo-postfinance.png",
    name: "PostFinance",
    desc: "Eines der führenden Retail-Finanzinstitute der Schweiz.",
    headline: "eBanking von Batch auf Echtzeit umgestellt.",
    hook: "Ereignisgetriebene Services auf Kafka, Kubernetes und Spring Boot, kanalübergreifend.",
    metric: { n: "Real-time", l: "statt Batch" },
    span: null,
    chips: ["Java / Spring Boot", "Kubernetes", "Kafka", "UI / UX"],
    challenge:
      "Die eBanking-Landschaft von PostFinance basierte auf gewachsenen, teils batch-orientierten Strukturen, die den heutigen Anforderungen an Aktualität, Verfügbarkeit und Nutzererlebnis nicht mehr gerecht wurden. Gefragt war eine durchgängige Modernisierung, weg von Batch-Verarbeitung hin zu Echtzeit, mit kanalübergreifend bereitgestellten Services und einem zeitgemässen UI/UX.",
    solution: "Modernisierung und Weiterentwicklung der eBanking-Landschaft auf Basis eines modernen, skalierbaren Technologie-Stacks (Java/Spring Boot, Kubernetes, Kafka):",
    solutionList: [
      ["Real-time statt Batch", "Ablösung batch-orientierter Abläufe durch ereignisgetriebene Echtzeit-Verarbeitung auf Basis von Kafka."],
      ["Kanalübergreifende Services", "Bereitstellung wiederverwendbarer Services für alle Kanäle."],
      ["UI/UX-Modernisierung", "Weiterentwicklung von Oberflächen und Nutzererlebnis im eBanking."],
      ["Integration", "Durchgängige Anbindung an die zentralen Backend-Systeme."],
    ],
    roleLabel: "Als Entwickler und Architekten",
    roles: [
      ["Architektur & Engineering", "Konzeption und Umsetzung der Cloud-nativen Service-Architektur (Java/Spring Boot, Kubernetes, Kafka)."],
      ["Real-time & Integration", "Umsetzung der ereignisgetriebenen Echtzeit-Verarbeitung und Integration in die zentralen Systeme."],
      ["UI/UX", "Modernisierung und Weiterentwicklung der eBanking-Oberflächen."],
    ],
    benefit:
      "PostFinance verfügt über eine modernisierte eBanking-Landschaft, die Kundeninformationen in Echtzeit statt im Batch bereitstellt und Services kanalübergreifend verfügbar macht. Der moderne Cloud-native Stack schafft die Grundlage für hohe Verfügbarkeit, kurze Release-Zyklen und eine kontinuierliche Weiterentwicklung des digitalen Banking-Erlebnisses.",
  },
  {
    num: "04",
    cat: "CRM & Sales",
    catTag: "CRM",
    logoId: "logo-zurich",
    logoSrc: "assets/logo-zurich.png",
    name: "Zurich Versicherung",
    desc: "Einer der führenden Mehrspartenversicherer der Schweiz.",
    headline: "Ein CRM für 3'600 Anwender.",
    hook: "Fragmentierter Vertrieb wird zur zentralen Omnichannel-Plattform.",
    metric: { n: "3'600+", l: "Endanwender" },
    span: "wide",
    chips: ["MS Dynamics", "Omnichannel", "Private Cloud", "4 Jahre"],
    challenge:
      "Die Zurich Versicherung verfügte über eine fragmentierte Vertriebslandschaft ohne zentrales CRM-System. Die Kundenansprache über verschiedene Kanäle war nicht einheitlich gesteuert, und die Digitalisierung der Kundenkernprozesse steckte noch in den Anfängen. Gleichzeitig fehlte eine durchgängige 360-Grad-Sicht auf den Kunden.",
    solution: "Ein strategisches CRM-Programm zur Digitalisierung und Vereinheitlichung der Kundeninteraktion:",
    solutionList: [
      ["Strategische CRM-Einführung", "Zentraler Arbeitsplatz auf Microsoft Dynamics CRM für mehr als 3'600 Endanwender."],
      ["Omnichannel-Landschaft", "Kanalübergreifende Front-Systems-Architektur für digitale Kundenkernprozesse."],
      ["Systemintegration", "Durchgängige Daten- und Prozessintegration für eine konsistente Datenbasis."],
      ["Plattformmanagement", "Private-Cloud-basierte CRM-Plattform auf Basis von MS Dynamics CRM."],
    ],
    roleLabel: "Über vier Jahre in zentralen Schlüsselrollen",
    roles: [
      ["IT-Programmleitung CRM", "IT-Verantwortung für die Einführung des strategischen CRM."],
      ["Plattformarchitektur", "Umsetzung der MS Dynamics CRM-Plattform sowie der kanalübergreifenden Applikationslandschaft."],
      ["Methodik", "Agile Vorgehensweisen im Multi-Stakeholder-Umfeld für Liefergeschwindigkeit und -qualität."],
    ],
    benefit: null,
  },
  {
    num: "05",
    cat: "AI Solutions",
    catTag: "AI",
    logoId: "logo-rowatec",
    logoSrc: "assets/logo-rowatec.png",
    name: "Rowatec AG",
    desc: "Führender Anbieter für Rohrleitungssysteme und Brückenentwässerung.",
    headline: "Offerten in Minuten statt Stunden.",
    hook: "Ein AI Sales Assistant, von der Ausschreibung zum fertigen Angebot.",
    metric: { n: "AI", l: "Sales Assistant" },
    span: "wide",
    chips: ["GenAI", "Semantic Pricing", "Human-in-the-Loop", "ERP"],
    challenge:
      "Das Offertwesen bei Rowatec war geprägt von hoher Komplexität: unzählige Ausschreibungen in unterschiedlichsten Formaten, von Papier bis PDF. Das manuelle Heraussuchen von Preisen aus Tabellen und die Erstellung des finalen Outputs waren extrem zeitintensiv und fehleranfällig.",
    solution: "Ein intelligenter AI Sales Assistant, der den gesamten Prozess digitalisiert:",
    solutionList: [
      ["Datenaufbereitung", "KI-gestützte Strukturierung heterogener Anfragen."],
      ["Semantisches Pricing", "Automatisierte Analyse der Positionen mit Preisvorschlägen aus den Datenbanken."],
      ["Human-in-the-Loop", "Nachvollziehbare Entscheidungsvorschläge inkl. Angabe des Confidence Levels."],
      ["Automatisierter Output", "Professionelle Offert-Dokumente und direkte ERP-Integration."],
    ],
    roleLabel: "Von den Anforderungen bis zum Betrieb",
    roles: [
      ["Anforderungen & Konzeption", "Aufnahme der Anforderungen und Definition der Lösung gemeinsam mit Rowatec."],
      ["Rapid Prototyping & Umsetzung", "Schnelle Iteration vom Prototyp zur produktiven Lösung."],
      ["Betrieb", "Zuverlässiger Betrieb der Lösung im laufenden Geschäft."],
    ],
    benefitCards: [
      ["Höhere Geschwindigkeit", "Massive Verkürzung der Durchlaufzeit vom Input zum Angebot."],
      ["Maximale Qualität", "Präzise Pricing-Vorschläge und ein hochprofessioneller Offert-Output."],
      ["Fokus", "Mehr Zeit für komplexe Custom-Lösungen und persönliche Beratung."],
    ],
    testimonial: {
      quote:
        "Mit dem AI Sales Assistant haben wir die Brücke zwischen unstrukturierten Daten und digitaler Effizienz geschlagen. Das Ergebnis ist mehr Zeit für unsere Kunden und eine unschlagbare Antwortzeit. Die Experten von QuBit haben uns von den Anforderungen bis zum Rapid Prototyping und der Umsetzung hervorragend begleitet und betreiben die Lösung heute zuverlässig.",
      name: "Julien Maury",
      role: "Verwaltungsratspräsident (VRP), Rowatec AG",
      initials: "JM",
    },
  },
  {
    num: "06",
    cat: "CRM & Sales",
    catTag: "Transformation",
    logoId: "logo-swisslife",
    logoSrc: "assets/logo-swisslife.jpg",
    name: "Swiss Life",
    desc: "Marktführer für Vorsorge- und Finanzlösungen.",
    headline: "Vom Produktverkäufer zum Omnichannel-Anbieter.",
    hook: "Wachstumsprogramm: neue Produkte, neue Kanäle, zentrales CRM.",
    metric: { n: "60", l: "Köpfiges Team geführt" },
    span: null,
    chips: ["Unternehmensarchitektur", "CRM", "Omnichannel", "3 Jahre"],
    challenge:
      "Swiss Life agierte als klassischer Lebensversicherer mit Fokus auf Kernprodukte (2–3 Neuerungen pro Jahr). Das Potenzial an der digitalen Kundenschnittstelle war nicht ausgeschöpft, und es fehlte eine strukturierte, kanalübergreifende Marktbearbeitung.",
    solution: "Ein umfassendes Transformationsprogramm zur Diversifizierung und Digitalisierung:",
    solutionList: [
      ["Angebotserweiterung", "Neue Produkte und Ausbau der Palette (inkl. 3a-Bankprodukte)."],
      ["Omnichannel-Vertrieb", "Neue Kanäle via Chat, iPad-Apps für Broker und Endkunden sowie Direktabschluss-Strecken."],
      ["Strukturierte Marktbearbeitung", "Einführung eines zentralen CRM-Systems für gezielte Kundenansprache."],
      ["Zentrale Datenhaltung", "Fokus auf 360-Grad-Kundenorientierung über alle Touchpoints hinweg."],
    ],
    roleLabel: "Über drei Jahre in Schlüsselrollen für das 60-köpfige Team",
    roles: [
      ["Unternehmensarchitektur", "Strategische Solution-Architektur und Roadmap."],
      ["IT-Programmleitung", "Gesamtverantwortung für die technologische Umsetzung des Wachstumsprogramms."],
      ["IT-Projektleitung CRM", "Fachspezifische Leitung bei Einführung und Integration des zentralen CRM."],
      ["Methodik", "Etablierung neuer, agiler Vorgehensmethoden zur Steigerung der Liefergeschwindigkeit."],
    ],
    benefitCards: [
      ["Marktwachstum", "Erschliessung neuer Kundensegmente und digitaler Vertriebskanäle."],
      ["Effizienz", "Strukturierte Marktbearbeitung durch zentrales CRM und konsistente Daten."],
      ["Agilität", "Höhere Geschwindigkeit in der Produktentwicklung und bessere Marktreaktion."],
    ],
  },
  {
    num: "07",
    cat: "QuBit Solutions",
    catTag: "Eigene Solution",
    own: true,
    logoId: "logo-quinsights",
    logoSrc: "assets/logo-quinsights.png",
    logoDark: true,
    name: "QuInsights",
    desc: "Die erste Schweizer Plattform für AI- und datengetriebene Produkt- und Wettbewerbsanalysen im Versicherungsmarkt.",
    headline: "Unsere eigene AI-Plattform für Market Intelligence.",
    hook: "Agentenbasierte AVB-Analyse und Markt-Monitoring, end-to-end von QuBit gebaut und betrieben.",
    metric: { n: "E2E", l: "Selbst gebaut & betrieben" },
    span: "wide",
    chips: ["Agentic AI", "Domain Context Model", "AVB-Analyse", "CRM-Integration"],
    challenge:
      "Produktmanagement, Vertrieb und Beratung im Schweizer Versicherungsmarkt arbeiten bei Produkt- und Wettbewerbsanalysen weitgehend manuell und unstrukturiert. Der Vergleich von AVB-Versionen, das Erkennen von Deckungslücken und das Ableiten belastbarer Verkaufsargumente sind aufwendig und schwer reproduzierbar, eine konsistente, fachlich belastbare Datenbasis fehlt.",
    solution: "Eine AI-Plattform, die Agentenlogik mit Markt-Monitoring und AVB-Analyse zu einem neuen Standard verbindet:",
    solutionList: [
      ["Markt- & Produktanalyse", "Agentenbasierte Überwachung von Marktteilnehmern und Produkten sowie Vergleich von AVB-Versionen, KPIs und Social Signals."],
      ["Domain Context Model (DCM)", "Ein hierarchisches Wissensmodell pro Sparte, das „digitale Hirn“ für präzise Vergleiche und AI-Analysen."],
      ["AI-Sales-Assistance", "Upload bestehender Policen, Erkennung von Deckungslücken sowie automatisch generierte Verkaufsargumente und Vergleichs-Offerten."],
      ["Portfolio-Insights & Integration", "Interaktive Beratungs-Bots, portfoliobasierte Produkt-Empfehlungen und Integration ins CRM."],
    ],
    roleLabel: "Eigene QuBit-Solution, von der Idee bis zum produktiven Betrieb",
    roles: [
      ["End-to-End-Verantwortung", "Vollständige Verantwortung für Produkt, Plattform und Betrieb in eigener Hand."],
      ["AI-Engineering & Domänen-Modellierung", "Aufbau der agentenbasierten Analyse-Plattform und der spartenspezifischen Domain Context Models inkl. kontinuierlichem Training."],
      ["Architektur & Betrieb", "Auslegung auf Datensicherheit, Revisionsfähigkeit und Individualisierbarkeit, konzipiert mit Schweizer Versicherungs- und Broker-Experten."],
    ],
    benefit:
      "QuInsights macht Produkt- und Wettbewerbsanalysen schnell, konsistent und fachlich belastbar. Versicherer und Broker erhalten nachvollziehbare AI-gestützte Insights, von der AVB-Analyse bis zur fertigen Vergleichs-Offerte. Als eigene QuBit-Solution belegt QuInsights die Fähigkeit von QuBit, AI-Produkte eigenständig end-to-end zu bauen und produktiv zu betreiben.",
  },
  {
    num: "08",
    cat: "QuBit Solutions",
    catTag: "Eigene Solution",
    own: true,
    logoId: "logo-lifesciencetalent",
    logoSrc: "assets/logo-lifesciencetalent.png",
    name: "LifescienceTalent",
    desc: "AI-gestützte Plattform für die Vermittlung von Spezialisten im Biotech- und Life-Science-Umfeld.",
    headline: "Unsere eigene AI-Plattform für Talent Matching.",
    hook: "AI-Matching mit echter Life-Science-Expertise, vom Brief zum Start in wenigen Tagen.",
    metric: { n: "Tage", l: "vom Brief zum Start" },
    span: null,
    chips: ["AI-Matching", "Life Science", "Interim & Fraktional", "AI-Governance"],
    challenge:
      "Die Talentgewinnung im Life-Science-Sektor leidet unter veralteten Prozessen: lange Durchlaufzeiten, rein keyword-basiertes Matching und teure Executive-Searches. Unternehmen finden schwer die passende Expertise, und Spezialisten finden schwer erfüllende Engagements, gerade in einem Umfeld, das tiefes Verständnis für Wirkstoff- und Technologieentwicklung erfordert.",
    solution: "Eine Plattform, die AI-Technologie mit tiefer Life-Science-Expertise verbindet, echtes Potenzial statt blosser Stichworte:",
    solutionList: [
      ["AI-Matching", "AI-gestütztes Matching von Talenten und Unternehmen über alle Entwicklungsstufen hinweg statt rein keyword-basierter Suche."],
      ["Fokussiertes Netzwerk", "Kuratiertes Expertennetzwerk in BioTec, MedTec, Diagnostics sowie AI & Big Data."],
      ["Flexible Engagements", "Interim-, fraktionale und projektbasierte Modelle, die ohne fixe Personalkosten mitwachsen."],
      ["Schlanker Prozess", "Vom Brief über 2–4 kuratierte Profile und Interviews bis zum Start innerhalb weniger Tage."],
    ],
    roleLabel: "Eigene QuBit-Solution, von der Idee bis zum produktiven Betrieb",
    roles: [
      ["End-to-End-Verantwortung", "Vollständige Verantwortung für Produkt, Plattform und Betrieb in eigener Hand."],
      ["AI-Engineering", "Aufbau der AI-gestützten Matching-Logik und der durchgängigen Plattformprozesse für Unternehmen und Talente."],
      ["Architektur & Betrieb", "Auslegung auf Skalierbarkeit und AI-Governance gemäss den regulatorischen Anforderungen."],
    ],
    benefit:
      "LifescienceTalent reduziert die Komplexität in der Talentgewinnung: Unternehmen erhalten in kurzer Zeit passgenaue, kuratierte Profile und skalieren flexibel, ohne fixe Headcounts aufzubauen. Spezialisten finden erfüllende Engagements, die zu ihrem Profil passen. Als eigene QuBit-Solution zeigt LifescienceTalent, dass QuBit AI-Plattformen eigenständig end-to-end aufbauen und betreiben kann.",
  },
];

const RF_CATS = ["Alle", "QuBit Solutions", "AI Solutions", "Cloud & Architektur", "Engineering & Digital", "CRM & Sales"];

/* ───────────────────────── Highlight tile ───────────────────────── */
function RefTile({ c, onOpen }) {
  return (
    <button
      className={"rf-tile" + (c.span === "wide" ? " rf-tile--wide" : "") + (c.own ? " rf-tile--own" : "")}
      onClick={() => onOpen(c.num)}
      data-screen-label={"Referenz " + c.num + " · " + c.name}
    >
      <div className="rf-tile__glow" aria-hidden="true"></div>
      <div className="rf-tile__top">
        {c.logoSrc ? (
          <span className={"rf-tile__logoimg" + (c.logoDark ? " rf-tile__logoimg--dark" : "")}><img src={window.__rsrc(c.logoSrc)} alt={c.name} /></span>
        ) : (
          <span className="rf-tile__logo">
            <image-slot id={c.logoId} shape="rect" fit="contain" placeholder={c.name}></image-slot>
          </span>
        )}
        {c.own && <span className="rf-tile__cat rf-tile__cat--own">✦ Eigene Solution</span>}
      </div>

      <div className="rf-tile__mid">
        <h3 className="rf-tile__headline">{c.headline}</h3>
        <p className="rf-tile__hook">{c.hook}</p>
      </div>

      <div className="rf-tile__foot">
        <span className="rf-tile__name">{c.name}</span>
        <span className="rf-tile__cta">Story ansehen <span className="arr">→</span></span>
      </div>
    </button>
  );
}

/* ───────────────────────── Detail overlay ───────────────────────── */
function RefDetail({ c, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [onClose]);

  return (
    <div className="rf-modal" onClick={onClose}>
      <div className="rf-modal__panel" onClick={(e) => e.stopPropagation()} role="dialog" aria-label={c.name}>
        <button className="rf-modal__close" onClick={onClose} aria-label="Schliessen">×</button>

        {/* header */}
        <div className="rf-modal__head">
          {c.logoSrc && (
            <span className={"rf-modal__logoimg" + (c.logoDark ? " rf-modal__logoimg--dark" : "")}><img src={window.__rsrc(c.logoSrc)} alt={c.name} /></span>
          )}
          <div className="rf-modal__head-txt">
            <span className={"rf-meta__cat" + (c.own ? " rf-meta__cat--own" : "")}>
              {c.own ? "✦ Eigene QuBit Solution" : c.cat}
            </span>
            <h2 className="rf-modal__name">{c.name}</h2>
            <p className="rf-modal__desc">{c.desc}</p>
          </div>
          {c.metric && (
            <div className="rf-modal__metric">
              <span className="rf-grad">{c.metric.n}</span>
              <small>{c.metric.l}</small>
            </div>
          )}
        </div>

        <h3 className="rf-modal__headline">{c.headline}</h3>
        <div className="rf-chips rf-modal__chips">
          {c.chips.map((ch) => <span className="rf-chip" key={ch}>{ch}</span>)}
        </div>

        {/* body, two columns */}
        <div className="rf-modal__cols">
          <div className="rf-modal__col">
            <RefBlock kind="challenge" title="Die Herausforderung">
              <p className="rf-block__p">{c.challenge}</p>
            </RefBlock>
            <RefBlock kind="solution" title="Die Lösung">
              <p className="rf-block__p">{c.solution}</p>
              {c.solutionList && (
                <ul className="rf-list">
                  {c.solutionList.map(([k, v]) => (
                    <li key={k}><span className="dot"></span><span><strong>{k}:</strong> {v}</span></li>
                  ))}
                </ul>
              )}
            </RefBlock>
          </div>

          <div className="rf-modal__col">
            <RefBlock kind="qubit" title={c.own ? "QuBit als Owner & Builder" : "Unterstützung durch QuBit"}>
              {c.roleLabel && <p className="rf-rolelabel">{c.roleLabel}</p>}
              <ul className="rf-roles">
                {c.roles.map(([k, v]) => (
                  <li className="rf-role" key={k}>
                    <span className="rf-role__k">{k}</span>
                    <span className="rf-role__v">{v}</span>
                  </li>
                ))}
              </ul>
            </RefBlock>

            {(c.benefit || c.benefitCards) && (
              <RefBlock kind="benefit" title="Der Nutzen">
                {c.benefit && <p className="rf-block__p">{c.benefit}</p>}
                {c.benefitCards && (
                  <div className="rf-benefit">
                    {c.benefitCards.map(([h, p]) => (
                      <div className="rf-benefit__card" key={h}>
                        <div className="rf-benefit__h">{h}</div>
                        <p className="rf-benefit__p">{p}</p>
                      </div>
                    ))}
                  </div>
                )}
              </RefBlock>
            )}
          </div>
        </div>

        {c.testimonial && (
          <div className="rf-quote">
            <div className="rf-quote__glow" aria-hidden="true"></div>
            <div className="rf-quote__mark" aria-hidden="true">&ldquo;</div>
            <p className="rf-quote__text">{c.testimonial.quote}</p>
            <div className="rf-quote__by">
              <div className="rf-quote__avatar">{c.testimonial.initials}</div>
              <div>
                <div className="rf-quote__name">{c.testimonial.name}</div>
                <div className="rf-quote__role">{c.testimonial.role}</div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function RefBlock({ kind, title, children }) {
  return (
    <div className={`rf-block rf-block--${kind}`}>
      <h3 className="rf-block__h"><span className="rf-block__dot"></span>{title}</h3>
      {children}
    </div>
  );
}

/* ───────────────────────── Section ───────────────────────── */
function RefCases({ exclude = [] }) {
  const [open, setOpen] = useState(null);
  const [filter, setFilter] = useState("Alle");
  const cases = RF_CASES.filter((c) => !exclude.includes(c.logoId));
  const shown = filter === "Alle" ? cases : cases.filter((c) => c.cat === filter);
  const current = cases.find((c) => c.num === open);

  return (
    <section className="rf-gridsec" id="referenzen">
      <div className="rf-wrap">
        <div className="rf-filter">
          {RF_CATS.map((cat) => (
            <button
              key={cat}
              className={"rf-filter__btn" + (filter === cat ? " is-active" : "")}
              onClick={() => setFilter(cat)}
            >
              {cat}
            </button>
          ))}
        </div>

        <div className="rf-grid">
          {shown.map((c) => <RefTile c={c} key={c.num} onOpen={setOpen} />)}
        </div>
      </div>

      {current && <RefDetail c={current} onClose={() => setOpen(null)} />}
    </section>
  );
}
window.RefCases = RefCases;