/* casestudy-missionmittelstand-content.de.jsx — Mission Mittelstand, deutsche Ausgabe.
   Gleiche Struktur & Komponenten wie casestudy-missionmittelstand-content.jsx,
   deutsche Copy. Exportiert <MMCase/>, <MMDisclaimer/>, <MMPrototypeModal/>.
   Wird aus prod/de/ geladen — daher die "../"-Pfade. */

const MMI = "../mm/";
const PROTOTYPE_FILE = "../mm/prototype-mobile.html";

/* ---- Browser-Chrome-Screenshot (Desktop); URL ist statischer Text, nie ein Link ---- */
function MMShot({ src, caption, alt = "Mission Mittelstand Landingpage", url = "mission-mittelstand.de", badge, badgeKind, placeholder }) {
  const open = useLightbox();
  return (
    <figure className="mm-shot">
      <div className="mm-shell">
        <div className="mm-chrome">
          <span className="mm-dots" aria-hidden="true"><i></i><i></i><i></i></span>
          <span className="mm-url">{url}</span>
          {badge && <span className={"mm-badge" + (badgeKind ? " is-" + badgeKind : "")}>{badge}</span>}
        </div>
        {src ? (
          <button type="button" className="mm-shot-img" data-hot onClick={() => open({ src, alt, caption })} aria-label={"Bild vergrößern: " + alt}>
            <img src={src} alt={alt} loading="eager" />
            <span className="mm-zoom" aria-hidden="true">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" /></svg>
            </span>
          </button>
        ) : <Placeholder label={placeholder} />}
      </div>
      {caption && <figcaption className="cs-cap">{caption}</figcaption>}
    </figure>
  );
}

/* ---- Phone-Rahmen (Mobile) ---- */
function MMPhone({ src, caption, alt = "Mission Mittelstand mobil", placeholder, tag, tagKind }) {
  const open = useLightbox();
  return (
    <figure className="mm-phone">
      <div className="mm-phone-frame">
        {tag && <span className={"mm-phone-tag" + (tagKind ? " is-" + tagKind : "")}>{tag}</span>}
        {src ? (
          <button type="button" className="mm-phone-shot" data-hot onClick={() => open({ src, alt, caption })} aria-label={"Bild vergrößern: " + alt}>
            <img src={src} alt={alt} loading="eager" />
          </button>
        ) : <Placeholder label={placeholder} />}
      </div>
      {caption && <figcaption className="cs-cap">{caption}</figcaption>}
    </figure>
  );
}

function Placeholder({ label }) {
  return (
    <div className="mm-ph">
      <span className="mm-ph-ico" aria-hidden="true">
        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 15l5-5 4 4 3-3 6 6" /><circle cx="8.5" cy="8.5" r="1.5" />
        </svg>
      </span>
      <span className="mm-ph-t">{label || "Screen"}</span>
      <span className="mm-ph-s">Prototyp-Export kommt hierhin</span>
    </div>
  );
}

/* ---- animierte Kennzahl ---- */
function MMStat({ to, pre = "", suf = "", text, label }) {
  const ref = useRef(null);
  const [run, setRun] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const inView = () => { const r = el.getBoundingClientRect(); return r.top < (window.innerHeight || 800) * 0.85 && r.bottom > 0; };
    if (inView()) { setRun(true); return; }
    const onScroll = () => { if (inView()) { setRun(true); cleanup(); } };
    const t = setTimeout(() => { setRun(true); cleanup(); }, 2500);
    function cleanup() { window.removeEventListener("scroll", onScroll); clearTimeout(t); }
    window.addEventListener("scroll", onScroll, { passive: true });
    return cleanup;
  }, []);
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!run) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setVal(to == null ? 0 : to); return; }
    let raf = 0, start = 0, done = false; const target = to == null ? 0 : to; const dur = 1300;
    const tick = (t) => { if (!start) start = t; const p = Math.min((t - start) / dur, 1); setVal(Math.round((1 - Math.pow(1 - p, 3)) * target)); if (p < 1) raf = requestAnimationFrame(tick); else done = true; };
    raf = requestAnimationFrame(tick);
    const fb = setTimeout(() => { if (!done) setVal(target); }, dur + 500);
    return () => { cancelAnimationFrame(raf); clearTimeout(fb); };
  }, [run, to]);
  return (
    <div className="gm-stat" ref={ref}>
      <div className="gm-stat-n">{text ? text : <span className="accent">{pre}{val}{suf}</span>}</div>
      <div className="gm-stat-k">{label}</div>
    </div>
  );
}

function MPlain({ items }) {
  return <ul className="cs-steps">{items.map((t, i) => <li className="cs-li" key={i}>{t}</li>)}</ul>;
}
function KL({ items }) {
  return <ul className="cs-steps">{items.map(([b, t], i) => <li className="cs-li" key={i}><strong>{b}</strong> {t}</li>)}</ul>;
}

/* die fünf Schwachstellen */
const GAPS = [
  ["01 · Nutzen", "Verkauft die Firma stärker als die Vorlage", "Die Seite bewirbt Mission Mittelstand als Unternehmen weit stärker als die Vorlage selbst. Der konkrete Nutzen des Templates \u2014 das Einzige, was eine Lead-Magnet-Conversion wirklich antreibt \u2014 bekommt kaum ein Wort ab."],
  ["02 · Momentum", "Zwei CTAs, eine ganze Seite auseinander", "Es gibt nur zwei Handlungsaufrufe, getrennt durch die komplette Seite. Verpasst man den ersten, folgt ein langer Scroll ohne zweite Chance zu handeln."],
  ["03 · Vertrauen", "Ein \u201EDownload\u201C, der nie herunterlädt", "Jeder Button verspricht \u201EVorlage herunterladen\u201C, doch nichts landet auf dem Handy: Ein Modal sammelt die Daten, das PDF kommt erst danach per E-Mail. Der Wortlaut verspricht eine sofortige Datei, die der Flow nie liefert."],
  ["04 · Mobile-Handwerk", "Holprig auf dem Handy", "Riesige, informationsarme Abschnitte, ein Layout, das gegen Ende zu zerfallen beginnt, und ein überdimensionierter, ungepflegter Footer \u2014 auf kleinem Screen alles mühsam, dabei kommt genau von dort der meiste Traffic."],
  ["05 · Belege", "Trustpilot, verschenkt", "Eine starke 4,5-Bewertung mit 870 Rezensionen auf Trustpilot ist da \u2014 aber nur im Modal, nicht klickbar und nie auf der Landingpage selbst sichtbar. Der beste Beweis liegt versteckt."],
];

/* Vorher-Belege (ihre Landingpage, im Phone-Rahmen) */
const BEFORE = [
  [MMI + "before-hero.png", "Der Hero verspricht \u201EVorlage herunterladen\u201C \u2014 die Vorlage herunterladen."],
  [MMI + "before-modal.png", "\u2026 doch der Klick öffnet ein Modal-Formular, und die Datei kommt erst danach per E-Mail."],
  [MMI + "before-modal-trustpilot.png", "Die 4,5-Trustpilot-Bewertung taucht nur im Modal auf \u2014 ohne Möglichkeit, durchzuklicken."],
  [MMI + "before-wissen.png", "Große Abschnitte transportieren sehr wenig Information \u2014 auf dem Handy teuer erkauft."],
  [MMI + "before-footer.png", "Der Footer ist überdimensioniert und ungepflegt und zieht die Seite in die Länge."],
];

/* Nachher — der Redesign, Abschnitt für Abschnitt (nutzenorientiert; GIF führt) */
const VISUALS = [
  { n: "01", k: "Sticky-CTA", h: "Der Button, der dir nach unten folgt", img: MMI + "sticky-button.gif",
    desc: "Mein liebstes kleines Detail, deshalb kommt es zuerst. Scrollt man am Hero-Button vorbei, schiebt sich ein schmaler CTA ein und bleibt in Daumenreichweite \u2014 ein Tipp zum Formular. Sobald das Formular im Bild ist, zieht er sich wieder zurück, hilft also, ohne je zu nerven. Diese lange, CTA-lose Strecke in der Mitte der alten Seite? Weg." },
  { n: "02", k: "Nutzen", h: "Was du bekommst, in drei kurzen Zeilen", img: MMI + "after-value.png",
    desc: "Direkt unter dem Hero machen drei kurze Punkte den Mehrwert der Vorlage sofort klar \u2014 ohne Scrollen, ohne Raten. Du weißt, was in der Datei steckt und warum sie deine Daten wert ist, bevor irgendetwas danach fragt." },
  { n: "03", k: "Vertrauen", h: "Erst harte Zahlen, dann ein echtes Gesicht", img: MMI + "after-stats.png",
    desc: "Ein paar harte Zahlen tragen zuerst die Glaubwürdigkeit, dann zeigt sich Matthias \u2014 der Gründer und Inhaber von Mission Mittelstand \u2014 persönlich. Den Menschen hinter der Firma auf die Seite zu holen, tut fürs Vertrauen mehr als jede Logo-Wand, und die Marke wirkt endlich wie echte Menschen." },
  { n: "04", k: "FAQ", h: "Der Abschnitt, den das Original nie hatte", img: MMI + "after-faq.png",
    desc: "Vorher gab es kein FAQ \u2014 ein echter Fehler, denn es arbeitet dreifach: Es räumt die letzten Zweifel aus (ist das wirklich kostenlos? warum meine Telefonnummer?), es hebt die Conversion, indem es Einwände direkt vor dem Formular klärt, und es stützt nebenbei noch die SEO-Sichtbarkeit." },
  { n: "05", k: "Conversion", h: "Ein CTA, der die Wahrheit sagt", img: MMI + "after-form.png",
    desc: "Kein Modal, kein Köder. Das Formular sitzt direkt auf der Seite, der Button liest sich \u201EPDF kostenlos erhalten\u201C, und eine Zeile darunter erklärt offen, warum jedes Feld da ist und was als Nächstes passiert. Nichts an der Abfrage soll dich kalt erwischen." },
  { n: "06", k: "Footer", h: "Ein Footer, der weiß, wann Schluss ist", img: MMI + "after-footer.png",
    desc: "Der alte Footer nahm kein Ende. Ich habe ihn kompakt und aufgeräumt neu gebaut \u2014 kleiner, schöner und wirklich nützlich als das Letzte, an dem du vorbeiscrollst." },
];

/* ---- Hauptartikel ---- */
function MMCase({ onPrototype }) {
  return (
    <div className="cs-view">

      {/* ── Hero ── */}
      <section className="cs-section cs-hero">
        <div className="cs-wrap">
          <div className="cs-kicker">
            <Reveal><MonoLabel>Fallstudie · Mission Mittelstand</MonoLabel></Reveal>
            <Reveal as="span" className="mono-sm" style={{ color: "var(--ink-faint)" }}>· 2026 · Landingpage · Konzept</Reveal>
          </div>
          <div className="ax-hero-grid">
            <Reveal className="ax-hero-text">
              <h1 className="cs-title">Ein Lead-Magnet,<br /><span className="accent">neu gebaut zum Konvertieren.</span></h1>
              <p className="cs-sub">Ein Mobile-First-Redesign der Gratis-Vorlagen-Landingpage von Mission Mittelstand — neu aufgebaut um einen klareren Funnel, eine ehrliche Download-Logik und ein stärkeres Argument für die Vorlage selbst.</p>
              <p className="cs-lead">
                Mission Mittelstand bietet eine kostenlose Vorlage fürs Mitarbeitergespräch als Lead-Magnet an. Das einzige Ziel der Seite ist es, Besucher zum Download zu bewegen. Der Auftrag der Firma war unmissverständlich: dieses Seite so umgestalten, dass sie maximal viele Downloads bringt — mobil zuerst, Desktop optional — in der Schrift Barlow und weiterhin unverkennbar Mission Mittelstand.
              </p>
              <p className="cs-lead">
                Der eigentliche Fokus lag auf der Strategie hinter der Struktur: welcher Abschnitt was leistet, warum er dort steht, wo er steht, und warum der Neubau besser konvertieren sollte als das Original.
              </p>
              <div className="ax-skip-wrap" style={{ display: "flex", gap: ".8rem", flexWrap: "wrap" }}>
                <a href="#visuals" className="btn btn-accent ax-skip-btn" data-hot>
                  Direkt zu den Visuals
                  <span className="btn-arrow"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M6 13l6 6 6-6" /></svg></span>
                </a>
                <button type="button" className="btn ax-skip-btn" data-hot onClick={onPrototype}>
                  Den mobilen Prototyp live sehen
                  <span className="btn-arrow"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12M8 11l4 4 4-4M5 19h14" /></svg></span>
                </button>
              </div>
            </Reveal>
            <Reveal className="ax-hero-media">
              <MMPhone src={MMI + "after-hero.png"} alt="Neu gestalteter mobiler Hero von Mission Mittelstand"
                caption={<><strong>Der neu gestaltete mobile Hero.</strong> Angebot, konkreter Nutzen und Vertrauen im ersten Screen — mobil war Pflicht im Briefing und zugleich die wichtigste Fläche der Seite.</>} />
            </Reveal>
          </div>
        </div>
      </section>

      {/* ── Stats ── */}
      <section className="cs-section gm-stats-sec">
        <div className="cs-wrap">
          <div className="gm-statband mm-statband">
            <MMStat to={6} label="ABSCHNITTE IM NEUEN FUNNEL" />
            <MMStat to={5} label="DIAGNOSTIZIERTE CONVERSION-SCHWACHSTELLEN" />
            <MMStat to={3} label="PROTOTYP-RICHTUNGEN VERGLICHEN" />
            <MMStat to={1} label="STICKY-CTA, DER DEN SCROLL ÜBERBRÜCKT" />
          </div>
        </div>
      </section>

      {/* ── Nutshell ── */}
      <section className="cs-section">
        <div className="cs-wrap">
          <div className="cs-head"><h2 className="cs-h">Das Projekt in Kürze</h2></div>
          <Reveal className="cs-meta">
            <div className="cs-meta-cell">
              <div className="cs-meta-k">Meine Rolle</div>
              <div className="cs-meta-v">Funnel-Strategie, Landing-UX, UX-Writing, Mobile-First-UI-Design und ein interaktiver HTML-Prototyp</div>
            </div>
            <div className="cs-meta-cell">
              <div className="cs-meta-k">Format</div>
              <div className="cs-meta-v">Ein Briefing der Firma — Konzeptbau, keine echten Analytics bereitgestellt</div>
            </div>
            <div className="cs-meta-cell">
              <div className="cs-meta-k">Rahmenbedingungen</div>
              <div className="cs-meta-v">Schrift Barlow · Corporate Design von Mission Mittelstand · mobil Pflicht / Desktop optional · realistisch baubar, ohne Component-Libraries</div>
            </div>
          </Reveal>
          <Reveal className="cs-chips cs-mt-m" style={{ justifyContent: "center" }}>
            {["Funnel-Strategie", "Landing-UX", "UX-Writing", "Mobile-First-UI", "Conversion-Architektur", "Vertrauen & Social Proof", "Interaktiver Prototyp"].map((c) => (
              <span className="tag" key={c}>{c}</span>
            ))}
          </Reveal>
          <div className="cs-grid2 ax-equal cs-mt-l">
            <Reveal className="cs-panel">
              <h4>Was ich geliefert habe</h4>
              <MPlain items={[
                "Eine neu aufgebaute Informationsarchitektur für die Vorlagen-Landingpage",
                "Einen interaktiven mobilen HTML-Prototyp als wichtigstes Deliverable",
                "Eine Desktop-Version, bewusst als MVP gebaut",
                "Überarbeitete CTA-Texte plus einen Sticky-CTA, der dem Scroll folgt",
                "Ein transparentes Inline-Formular, das das ursprüngliche Download-Modal ersetzt",
              ]} />
            </Reveal>
            <Reveal className="cs-panel cs-panel-accent">
              <h4>Die Hypothese</h4>
              <MPlain items={[
                "Traffic kommt größtenteils aus gezielten Kampagnen, Besucher haben also schon Grundinteresse",
                "Die Originalseite verliert sie bei Nutzen, Momentum, Download-Logik und Mobile-Handwerk",
                "Ein strafferer Funnel, der mit dem Nutzen führt und ehrlich bleibt, sollte Downloads heben",
                "Jede Aussage hier ist eine Hypothese, die auf echte Daten zur Bestätigung wartet",
              ]} />
            </Reveal>
          </div>
        </div>
      </section>

      {/* ── Mögliche Reibungspunkte ── */}
      <section className="cs-section" id="process">
        <span className="ax-anchor" aria-hidden="true"></span>
        <div className="cs-wrap">
          <div className="cs-head"><h3 className="cs-h">Mögliche Reibungspunkte</h3></div>
          <p className="cs-p" style={{ maxWidth: "72ch" }}>
            Mit dem Briefing kamen keine Analytics, also fing ich dort an, wo ich konnte: bei der Seite selbst, wem sie dient und woher ihr Traffic kommt. Aus der Vermutung heraus, dass die meisten Besucher vorgewärmt aus gezielten Anzeigen landen — schon neugierig auf die Vorlage — lief der Job auf eine Sache hinaus: sie nicht mehr zu verlieren. So gelesen hat die Originalseite fünf Stellen, an denen ein downloadbereiter Besucher still vom Haken rutschen kann.
          </p>
          <div className="mm-gaps mm-gaps--5 cs-mt-l">
            {GAPS.map(([n, t, d]) => (
              <Reveal className="mm-gap" key={n}>
                <span className="mm-gap-n">{n}</span>
                <span className="mm-gap-t">{t}</span>
                <span className="mm-gap-d">{d}</span>
              </Reveal>
            ))}
          </div>

          <p className="cs-p cs-mt-l" style={{ maxWidth: "72ch" }}>
            Manches davon wirkt stärker, wenn man es einfach sieht:
          </p>
          <div className="mm-scrollhint cs-mt-s" aria-hidden="true">
            <span>Weiterscrollen</span>
            <svg width="22" height="12" viewBox="0 0 22 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M1 6h19M15 1l5 5-5 5" /></svg>
          </div>
          <div className="mm-carousel cs-mt-s">
            {BEFORE.map(([src, cap]) => (
              <MMPhone key={src} src={src} tag="Vorher" tagKind="before" alt="Originale Mission Mittelstand Landingpage"
                caption={cap} />
            ))}
          </div>
        </div>
      </section>

      {/* ── Wie ich sie neu gebaut habe ── */}
      <section className="cs-section">
        <div className="cs-wrap">
          <div className="cs-head"><h3 className="cs-h">Wie ich sie neu gebaut habe</h3></div>
          <p className="cs-p" style={{ maxWidth: "72ch" }}>
            Ohne Daten, auf die ich mich stützen konnte, stützte ich mich auf den Prozess. Grob, wie die Arbeit von Anfang bis Ende lief:
          </p>
          <div className="mm-journey cs-mt-l">
            {[
              ["Die Seite wie ein Besucher lesen.", "Ich bin das Original so durchgegangen, wie es sein Traffic tut \u2014 auf dem Handy \u2014 und habe herausgearbeitet, für wen sie wirklich da ist und woher diese Menschen kommen, bevor ich irgendetwas verändert habe."],
              ["Reibung und Chancen markieren.", "Die offensichtlichen Absprungpunkte markiert \u2014 und ebenso wichtig die Stellen mit klarem Wachstumspotenzial."],
              ["Sich auf eine Hypothese festlegen.", "Das alles in eine Haltung übersetzt: mit dem Nutzen der Vorlage führen, beim Download ehrlich bleiben, einen CTA immer in Reichweite halten."],
              ["Drei Richtungen skizzieren.", "Drei strukturell unterschiedliche erste Prototypen gebaut und nebeneinander verglichen, bevor ich mich festgelegt habe."],
              ["Den Finalisten wählen.", "Die Richtung gewählt, die dem einen Ziel am besten dient \u2014 die Vorlage heruntergeladen zu bekommen \u2014 und die beiden anderen beiseitegelegt."],
              ["Auf Hi-Fi bringen.", "Den Sieger in vollem Mission-Mittelstand-Styling gekleidet, gesetzt in Barlow: markengerecht und realistisch tatsächlich baubar."],
              ["Klickbar machen.", "Als interaktiven, mobile-first HTML-Prototyp ausgeliefert, den man wirklich durchtippen kann \u2014 weit über ein flaches Mockup hinaus."],
            ].map(([b, t], i) => (
              <Reveal className="mm-jstep" key={i}>
                <span className="mm-jnode" aria-hidden="true">{String(i + 1).padStart(2, "0")}</span>
                <div className="mm-jcard">
                  <h4 className="mm-jt">{b}</h4>
                  <p className="mm-jd">{t}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ── Visuals (Zickzack) ── */}
      <section className="cs-section" id="visuals">
        <span className="ax-anchor" aria-hidden="true"></span>
        <div className="cs-wrap">
          <div className="cs-head"><h3 className="cs-h">Das Redesign, Abschnitt für Abschnitt</h3></div>
          <div className="ax-screens cs-mt-l">
            {VISUALS.map((s, i) => (
              <div className={"ax-screen" + (i % 2 ? " rev" : "")} key={s.n}>
                <Reveal className="ax-screen-text">
                  <div className="ax-index"><span className="ax-index-n">{s.n}</span><span className="ax-index-k">{s.k}</span></div>
                  <h4 className="ax-screen-h">{s.h}</h4>
                  <p className="cs-p">{s.desc}</p>
                </Reveal>
                <Reveal className="ax-screen-media">
                  <MMPhone src={s.img} alt={s.h} />
                </Reveal>
              </div>
            ))}
          </div>
          <Reveal className="mm-proto-cta cs-mt-l">
            <div>
              <h4 className="gm-subh" style={{ marginTop: 0 }}>Probier das Echte aus</h4>
              <p className="cs-p" style={{ margin: 0 }}>Der ganze Flow ist ein funktionierender, in sich geschlossener HTML-Prototyp — am besten auf dem Handy geöffnet.</p>
            </div>
            <button type="button" className="btn btn-accent" data-hot onClick={onPrototype}>
              Den mobilen Prototyp live sehen
              <span className="btn-arrow"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12M8 11l4 4 4-4M5 19h14" /></svg></span>
            </button>
          </Reveal>
        </div>
      </section>

      {/* ── Desktop ── */}
      <section className="cs-section">
        <div className="cs-wrap">
          <div className="cs-head"><h3 className="cs-h">Desktop, als bewusstes MVP</h3></div>
          <Reveal>
            <p className="cs-p" style={{ maxWidth: "72ch" }}>
              Da mobil der Pflichtfokus war, habe ich die Desktop-Version als bewusstes MVP gebaut: derselbe Funnel und dieselbe Botschaft, umgesetzt als funktionierender Prototyp, mit weniger Zeit für das breitere Layout. Mit mehr Zeit würde ich die Skalierung schärfen und die Abschnitte in der Seitenmitte reichhaltiger gestalten — aber die ganze Geschichte steht bereits hier.
            </p>
          </Reveal>
          <Reveal className="mm-mvp-shot">
            <MMShot src={MMI + "after-desktop.png"} url="Neuer Desktop-Hero" badge="Nachher" badgeKind="after"
              alt="Neu gestaltete Mission Mittelstand Landingpage auf dem Desktop"
              caption={<>Derselbe Funnel, breitere Leinwand. Der Desktop-Bau ist ein ehrliches MVP — die Geschichte steht komplett, auch wenn ich dem Layout mit mehr Zeit mehr Luft zum Atmen gäbe.</>} />
          </Reveal>
        </div>
      </section>

      {/* ── Learnings ── */}
      <section className="cs-section">
        <div className="cs-prose">
          <div className="cs-head" style={{ justifyContent: "center" }}><h3 className="cs-h">Erkenntnisse</h3></div>
          <ul className="cs-steps cs-mt-m">
            {[
              ["Mit einer Haltung führen.", "Auch ohne Daten macht eine explizite Hypothese die Arbeit überprüfbar und den nächsten Schritt offensichtlich. Das Redesign ist das Argument; Daten sind, womit man es entscheidet."],
              ["Ehrlichkeit ist eine Conversion-Taktik.", "Das CTA-Versprechen an das anzugleichen, was tatsächlich passiert, ist die testbarste \u2014 und wahrscheinlich wirkungsvollste \u2014 Änderung im ganzen Neubau."],
              ["Erst die Sache, dann die Marke.", "Wenn das Ziel ein Download ist, muss der Mehrwert der Vorlage vor der Firmengeschichte ankommen."],
            ].map(([b, t], i) => <li className="cs-li" key={i}><strong>{b}</strong> {t}</li>)}
          </ul>
        </div>
      </section>

    </div>
  );
}

/* ---- Download-Modal für den interaktiven Prototyp ---- */
function MMPrototypeModal({ open, onClose }) {
  const closeRef = useRef(null);
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    closeRef.current && closeRef.current.focus();
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="contact-modal" role="dialog" aria-modal="true" aria-label="Mobiler Prototyp"
      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="contact-modal-card mm-proto-card">
        <button className="legal-x contact-modal-x" onClick={onClose} aria-label="Schließen" data-hot ref={closeRef}>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true"><path d="M3 3l12 12M15 3L3 15" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
        </button>
        <div className="contact-modal-head">
          <MonoLabel>Mobiler Prototyp</MonoLabel>
          <h2 className="contact-modal-title">Sieh ihn dir auf dem Handy an</h2>
          <p className="contact-modal-sub">Das ist eine in sich geschlossene Offline-Seite — sie existiert nur als diese eine Datei. Lade sie herunter und öffne sie dann in einem beliebigen Browser (ein Handy oder die mobile Ansicht deines Browsers funktioniert am besten).</p>
        </div>
        <div className="mm-proto-actions">
          <a className="btn btn-accent" href={PROTOTYPE_FILE} download="mission-mittelstand-prototype.html" data-hot onClick={onClose}>
            Den Prototyp herunterladen
            <span className="btn-arrow"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12M8 11l4 4 4-4M5 19h14" /></svg></span>
          </a>
          <button className="btn" onClick={onClose} data-hot>Vielleicht später</button>
        </div>
      </div>
    </div>
  );
}

/* ---- Marken- / Nutzungshinweis (vom Shell unter dem Abschluss-CTA gerendert) ---- */
function MMDisclaimer() {
  return (
    <section className="cs-section mm-disclaimer-sec">
      <div className="cs-wrap">
        <div className="mm-disclaimer">
          <span className="mm-disclaimer-ico" aria-hidden="true">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 8h.01M11 12h1v4h1" /></svg>
          </span>
          <div>
            <p>
              <strong style={{ color: "var(--ink-soft)" }}>Marken &amp; Nutzung.</strong> „Mission Mittelstand“, die BVMW-Marke sowie alle zugehörigen Namen, Logos, Bilder und Markenelemente, die hier gezeigt werden, sind Eigentum ihrer jeweiligen Inhaber. Ich besitze daran keine Rechte und erhebe auch keinen Anspruch darauf.
            </p>
            <p>
              Diese Fallstudie entstand zu einem Briefing der Firma, und alle gezeigten Markenmaterialien wurden mir zu diesem Zweck bereitgestellt — hier ausschließlich wiedergegeben, um meine Arbeit zu dokumentieren. Es handelt sich um ein unabhängiges Konzept: nicht mit Mission Mittelstand verbunden, nicht von ihr unterstützt und kein offizielles Produkt, und es wurde nie auf einer Live-Seite eingesetzt.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MMCase, MMDisclaimer, MMPrototypeModal });