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

// ============================ Icons (small inline) ============================
const Arrow = ({ size = 16, rot = -45 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none"
style={{ transform: `rotate(${rot}deg)`, transition: "transform .2s ease" }}>
    <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


const Dot = () => <span style={{ width: 4, height: 4, background: "currentColor", borderRadius: "50%", display: "inline-block", opacity: 0.5 }} />;

// ============================ NAV ============================
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="index.html" className="brand">
          <span className="dot" />
          <span>ALL&nbsp;IN <span style={{ color: "var(--fg-mute)" }}>Diversity</span></span>
        </a>
        <div className="nav-links">
          <a href="loesungen.html">Lösungen</a>
          <a href="termine.html">Termine</a>
          <a href="index.html#themen">Themen</a>
          <a href="ueber.html">Über</a>
          <a href="tools.html">Tools</a>
          <a href="index.html#kontakt">Kontakt</a>
        </div>
        <div className="nav-cta">
          <a href="index.html#kontakt" className="btn btn-primary">
            30-Min-Gespräch <Arrow size={14} />
          </a>
        </div>
      </div>
    </nav>);

}

// ============================ HERO ============================
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-grad" />
      <div className="hero-noise" />
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div className="hero-inner">
          <div className="hero-top">
            <span>ALL&nbsp;IN · Diversity · Berlin</span>
            <span>{new Date().getFullYear()} — Linda Brack</span>
          </div>

          <h1 className="hero-claim">
            Wer die Besten<br />
            will, muss <em>alle</em><br />
            sehen.
          </h1>

          <div className="hero-foot">
            <div className="hero-subline">
              <div className="tags">KI · Leadership · Diversity · Sichtbarkeit</div>
              Für Unternehmen, die Diversität nicht nur sichtbar machen, sondern
              strukturell verankern wollen. Workshops, Beratung und Impulse zu
              Diversity, Leadership, Kultur und KI.
            </div>
            <div className="hero-ctas">
              <a href="https://cal.eu/lindabrack/30min" target="_blank" rel="noreferrer" className="btn btn-light">
                30-Min-Gespräch buchen <Arrow size={14} />
              </a>
              <a href="loesungen.html" className="btn btn-glass">
                ALL IN Lösungen
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================ INTRO / SEITENEINSTIEG ============================
function Intro() {
  const benefits = [
  { c: "var(--violet)", g: "linear-gradient(135deg, oklch(0.55 0.21 295), oklch(0.72 0.18 45))", t: "Stärkere Teams", d: "Psychologische Sicherheit, bessere Entscheidungen, echte Zusammenarbeit." },
  { c: "var(--orange)", g: "linear-gradient(135deg, oklch(0.78 0.20 50), oklch(0.62 0.22 340))", t: "Talente gewinnen & binden", d: "Eine Arbeitgebermarke, die die Besten anzieht – und hält." },
  { c: "var(--blue)", g: "linear-gradient(135deg, oklch(0.58 0.18 255), oklch(0.55 0.21 295))", t: "Zukunftsfähig & sicher", d: "Mehr Innovation und Sicherheit von AGG bis EU-Entgelttransparenz." }];

  return (
    <section className="section intro-section" id="einstieg">
      <div className="wrap">
        <div className="intro-grid">
          <div className="intro-head">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Was wir tun · und warum</div>
            <h2 className="h1 intro-claim">
              Vielfalt, die Unternehmen <em>messbar</em> stärker macht.
            </h2>
            <p className="intro-lead">
              <strong>ALL IN Diversity</strong> verankert Vielfalt strukturell – mit Diversity,
              Leadership und KI. Weil diverse Organisationen bessere Entscheidungen treffen,
              attraktiver für Talente sind und schneller innovieren.
            </p>
          </div>
          <div className="intro-benefits">
            <div className="intro-benefits-label mono">Was unsere Kundschaft davon hat</div>
            <div className="intro-benefit-grid">
              {benefits.map((b) =>
              <div className="intro-benefit" key={b.t} style={{ "--benefit-accent": b.c, "--benefit-grad": b.g }}>
                  <h3 className="intro-benefit-t">{b.t}</h3>
                  <p className="intro-benefit-d">{b.d}</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================ POSITION / WER STECKT DAHINTER ============================
function Position() {
  return (
    <section className="section" id="wer">
      <div className="wrap">
        <div className="themen-head" style={{ marginBottom: 28 }}>
          <div>
            <h2 className="h1">Wer steckt <em className="italic">dahinter?</em></h2>
          </div>
        </div>
        <div className="position">
          <div className="side">
            <div className="position-photo">
              <img className="portrait-img" src="assets/linda-portrait.png" alt="Linda Brack" />
            </div>
          </div>
          <div className="position-body" style={{ paddingTop: 0 }}>
            <p className="position-lead">
              Hinter ALL IN Diversity steht <strong>Linda Brack</strong> – mit einem Netzwerk aus
              Expert:innen für KI, Leadership und Diversity und über 40 Organisationen, die bereits
              mit ihr gearbeitet haben.
            </p>
            <p>
              <strong>ALL IN DIVERSITY</strong> unterstützt Unternehmen dabei, vielfältige, innovative
              und zukunftsfähige Teams aufzubauen. Wir verbinden Diversity, Leadership und KI mit dem Ziel,
              Organisationen stärker, attraktiver und erfolgreicher zu machen – für Mitarbeitende,
              Führungskräfte und Kund:innen.
            </p>
            <p>
              Im Mittelpunkt stehen Unternehmenskulturen, in denen Menschen ihr Potenzial entfalten können:
              mit psychologischer Sicherheit, besseren Entscheidungen, stärkerer Zusammenarbeit und echter
              Zugehörigkeit. So entstehen Organisationen, die Talente gewinnen, Mitarbeitende langfristig
              binden und Innovation nachhaltig fördern.
            </p>
            <p>
              Wir arbeiten mit <strong>Vorständen, HR- und People-Teams, Führungskräften und Diversity-Verantwortlichen</strong>
              {' '}zusammen, um Vielfalt strategisch zu verankern – durch Beratung, Trainings und konkrete Umsetzung.
              Diversity verstehen wir dabei als echten Zukunftsfaktor für Unternehmen.
            </p>
            <div className="flex-row" style={{ marginTop: 16 }}>
              <a href="ueber.html" className="btn btn-outline">Über Linda <Arrow size={14} /></a>
              <a href="loesungen.html" className="btn btn-ghost">ALL IN Lösungen →</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================ LOGOS / REFERENZEN ============================
// Filenames (in assets/logos/) — full filename with extension.
const LOGO_FILES = {
  "Auswärtiges Amt": "trimmed/auswaertiges-amt.png",
  "Endress+Hauser": "trimmed/endress-hauser.png",
  "Bumble": "trimmed/bumble.png",
  "XING": "trimmed/xing.png",
  "Sopra Steria": "trimmed/sopra-steria.png",
  "Friedrich-Ebert-Stiftung": "trimmed/fes.png",
  "Hamburg Messe + Congress": "trimmed/hamburg-messe.png",
  "Viva con Agua": "trimmed/viva-con-agua.png",
  "Peter Schmidt Group": "trimmed/peter-schmidt.png",
  "Frischepost": "trimmed/frischepost.png",
  "re:publica": "trimmed/republica.png",
  "New Work Experience": "trimmed/new-work-experience.png",
  "EVVC": "trimmed/evvc.png",
  "THW": "trimmed/thw.png",
  "Land Brandenburg": "trimmed/land-brandenburg.png",
  "BTU Cottbus-Senftenberg": "trimmed/btu.png",
  "MIZ Babelsberg": "trimmed/miz.png",
  "IFB Hamburg": "trimmed/ifb.png",
  "DZ-4": "trimmed/dz4.png",
  "Brandenburgische Frauenwochen": "trimmed/frauenwochen.png",
  "Star Finanz": "trimmed/starfinanz.png",
  "Land Berlin": "trimmed/berlin.png",
  "SAP": "sap.png",
  "Schindler": "schindler.png",
  "Sparkasse": "sparkasse.png",
  "Kontist": "kontist.png",
  "IHK": "ihk.png",
  "Academic Work": "academic-work.svg",
  "International Media Academy": "ima.png",
  "BEN dA": "ben-da.png",
  "BV-NEMO": "bv-nemo.png",
  "Landesstelle für Gleichbehandlung": "landesstelle-gleichbehandlung.png"
};

function LogoItem({ name }) {
  const file = LOGO_FILES[name];
  const [failed, setFailed] = useState(false);
  const hasFile = file && !failed;
  const initials = name.replace(/^#/, "").split(/\s+/).map((w) => w[0]).slice(0, 3).join("");
  return (
    <div className="logo-chip" title={name}>
      {hasFile ?
      <img
        className="logo-img"
        src={`assets/logos/${file}`}
        alt={name}
        loading="lazy"
        onError={() => setFailed(true)} /> :


      <>
          <span className="logo-mark" aria-hidden="true">{initials}</span>
          <span className="logo-name">{name}</span>
        </>
      }
    </div>);

}

function Logos() {
  const logos = window.DATA.references;
  return (
    <section className="section-pad-sm logos-section" aria-label="Referenzen">
      <div className="wrap">
        <div className="logos-head">
          <div className="eyebrow">Referenzen · Auswahl</div>
          <p className="logos-lead">
            <strong>40+ Organisationen</strong> begleitet — vom DAX-Konzern bis zur Initiative.
            Hier eine Auswahl, mit denen ich in den letzten Jahren gearbeitet habe.
          </p>
        </div>
      </div>
      <div className="logo-marquee" aria-hidden="false">
        <div className="logo-marquee-edge logo-marquee-edge-l" />
        <div className="logo-marquee-edge logo-marquee-edge-r" />
        <div className="logo-marquee-track">
          {[...logos, ...logos].map((name, i) =>
          <LogoItem key={i} name={name} />
          )}
        </div>
      </div>
      <div className="logo-marquee logo-marquee-reverse" aria-hidden="true">
        <div className="logo-marquee-edge logo-marquee-edge-l" />
        <div className="logo-marquee-edge logo-marquee-edge-r" />
        <div className="logo-marquee-track">
          {[...logos.slice().reverse(), ...logos.slice().reverse()].map((name, i) =>
          <LogoItem key={i} name={name} />
          )}
        </div>
      </div>
    </section>);

}

// ============================ STATS ============================
function Stats() {
  const stats = [
  { num: "8.000+", lbl: "Follower:innen auf LinkedIn – aktive, lesende, mitdiskutierende Community." },
  { num: <>120<em>+</em></>, lbl: "Keynotes, Panels und Trainings in DACH seit 2019." },
  { num: <>9<em>+</em></>, lbl: "Jahre Erfahrung in Beratung & Diversity Management – Mittelstand bis DAX." },
  { num: <>40<em>+</em></>, lbl: "Unternehmen begleitet – vom Mittelstand bis DAX, von Tech bis Industrie." }];

  return (
    <section className="section-pad-sm">
      <div className="wrap">
        <div className="stats">
          {stats.map((s, i) =>
          <div className="stat" key={i}>
              <div className="num serif">{s.num}</div>
              <div className="lbl">{s.lbl}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================ SOLUTIONS ============================
function Solutions() {
  const [active, setActive] = useState(0);
  const sol = window.DATA.solutions[active];
  return (
    <section className="section solutions" id="loesungen">
      <div className="wrap">
        <div className="sol-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>ALL IN Lösungen</div>
            <h2 className="h1">
              Vier Wege.<br />
              <em className="italic">Eine</em> Haltung.
            </h2>
          </div>
          <div className="sol-tabs">
            {window.DATA.solutions.map((s, i) =>
            <button
              key={s.key}
              className={`pill ${active === i ? "active" : ""}`}
              onClick={() => setActive(i)}>
              
                <span style={{ opacity: 0.6, marginRight: 4 }}>{s.no}</span> {s.title}
              </button>
            )}
          </div>
        </div>

        <div className="sol-stage">
          <div className="sol-visual">
            <div className="index">{sol.no} / 04 · ALL IN</div>
            <div className="title-big">{sol.title.split(" & ").map((p, i, arr) =>
              <span key={i}>
                {i > 0 && <span style={{ opacity: 0.7 }}> & </span>}
                {i === arr.length - 1 ? <em>{p}</em> : p}
              </span>
              )}</div>
            <div className="meta">{sol.meta}</div>
          </div>
          <div className="sol-body">
            <div className="eyebrow no-line">Format · {sol.no}</div>
            <p className="lead">{sol.lead}</p>
            <p style={{ color: "var(--fg-soft)", fontSize: 15, lineHeight: 1.55, margin: 0 }}>{sol.desc}</p>
            <div className="sol-list">
              {sol.items.map(([n, lbl, d], i) =>
              <div className="item" key={i}>
                  <span className="num">{n}</span>
                  <span className="lbl">{lbl}</span>
                  <span className="desc">{d}</span>
                </div>
              )}
            </div>
            <div className="sol-cta">
              <a href="#kontakt" className="btn btn-primary">Anfragen <Arrow size={14} /></a>
              <a href="index.html#themen" className="btn btn-ghost">Themen sehen →</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================ THEMEN ============================
function Themen() {
  const [filter, setFilter] = useState("Alle");
  const [openKey, setOpenKey] = useState(null);
  const grads = [
  "linear-gradient(135deg, oklch(0.72 0.20 295), oklch(0.78 0.20 50))",
  "linear-gradient(135deg, oklch(0.48 0.20 275), oklch(0.62 0.22 340))",
  "linear-gradient(135deg, oklch(0.78 0.20 50), oklch(0.55 0.21 295))",
  "linear-gradient(135deg, oklch(0.55 0.20 280), oklch(0.86 0.10 30))",
  "linear-gradient(135deg, oklch(0.62 0.22 340), oklch(0.55 0.20 260))",
  "linear-gradient(135deg, oklch(0.85 0.16 30), oklch(0.48 0.20 275))",
  "linear-gradient(135deg, oklch(0.55 0.21 295), oklch(0.78 0.20 50))",
  "linear-gradient(135deg, oklch(0.58 0.18 255), oklch(0.72 0.18 45))",
  "linear-gradient(135deg, oklch(0.72 0.20 295), oklch(0.58 0.18 255))"];

  const themen = window.DATA.themen;
  const filtered = filter === "Alle" ? themen : themen.filter((t) => t.tags.includes(filter));

  const toggle = (key) => setOpenKey(openKey === key ? null : key);

  return (
    <section className="section" id="themen">
      <div className="wrap">
        <div className="themen-head">
          <div>
            <h2 className="h1">
              Diversity bedeutet <em className="italic">Innovation.</em>
            </h2>
          </div>
          <p className="lead">
            Filterbar nach Schwerpunkt. Jedes Thema lässt sich als Keynote, Workshop oder
            Beratungsstrang buchen – einzeln oder als Programm.
          </p>
        </div>

        <div className="themen-filter">
          {window.DATA.filters.map((f) =>
          <button
            key={f}
            className={`pill ${filter === f ? "active" : ""}`}
            onClick={() => {setFilter(f);setOpenKey(null);}}>
            
              {f}
              <span style={{ opacity: 0.5, marginLeft: 4, fontSize: 11 }}>
                {f === "Alle" ? themen.length : themen.filter((t) => t.tags.includes(f)).length}
              </span>
            </button>
          )}
        </div>

        <div className="themen-grid">
          {filtered.map((t) => {
            const isOpen = openKey === t.title;
            const grad = grads[themen.indexOf(t) % grads.length];
            return (
              <button
                type="button"
                className={`thema ${isOpen ? "open" : ""}`}
                key={t.title}
                onClick={() => toggle(t.title)}
                style={{ "--thema-grad": grad }}
                aria-expanded={isOpen}>
                
                <div className="thema-cat">{t.cat}</div>
                <h3 className="thema-title">{t.title}</h3>
                <p className="thema-desc">{t.desc}</p>

                {isOpen && t.more &&
                <div className="thema-more" onClick={(e) => e.stopPropagation()}>
                    <div className="thema-more-lead">{t.more.lead}</div>
                    <p className="thema-more-body">{t.more.body}</p>
                    <ul className="thema-more-list">
                      {t.more.points.map((p, pi) =>
                    <li key={pi}>{p}</li>
                    )}
                    </ul>
                    <div className="thema-more-foot">
                      <span className="thema-more-formats">{t.more.formats}</span>
                      <a href="index.html#kontakt" className="btn btn-light btn-sm">
                        Anfragen <Arrow size={12} />
                      </a>
                    </div>
                  </div>
                }

                <div className="thema-foot">
                  <span>{isOpen ? "Schließen" : "Mehr"}</span>
                  <span className="arrow-circle" style={{ transform: isOpen ? "rotate(90deg)" : "none" }}>
                    <Arrow size={14} />
                  </span>
                </div>
              </button>);

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

}

// ============================ ABOUT ============================
function About() {
  return (
    <section className="section about" id="ueber">
      <div className="wrap">
        <div className="about-grid">
          <div>
            <div className="about-photo about-photo--full">
              <img className="portrait-img" src="assets/linda-ueber.png" alt="Linda Brack · Porträt" />
              <span className="badge">Linda Brack · she/her</span>
            </div>
            <div className="flex-row" style={{ marginTop: 16, color: "var(--fg-mute)", fontSize: 13 }}>
              <span className="mono">Berlin · Jahrgang 1989</span>
              <span><Dot /></span>
              <span className="mono">Inclusion & Diversity Lead</span>
            </div>
            <div className="about-quote">
              „Linda wirkt als Grenzgängerin zwischen Wirtschaft, Gesellschaft, Medien, Politik,
              Vielfalt, Führung und Zukunft. Klar, emotional, beobachtend, direkt –
              und nicht glattgebügelt."
            </div>
            <div className="about-cta">
              <a href="#kontakt" className="btn btn-primary">Linda buchen <Arrow size={14} /></a>
              <a href="https://www.linkedin.com/in/linda-brack-a8186287/" target="_blank" rel="noreferrer" className="btn btn-outline">
                LinkedIn · 8.000+
              </a>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Über mich</div>
            <h2 className="h1" style={{ marginBottom: 28 }}>
              Grenzgängerin zwischen<br />
              Wirtschaft, <em className="italic">Politik</em><br /> und <em className="italic">Vielfalt.</em>
            </h2>
            <div className="about-text">
              <p>
                Linda Brack, Jahrgang 1989, aus Finsterwalde und praktizierende Ästhetin.
                Inclusion & Diversity Lead bei Schindler Deutschland und Gründerin der
                Initiative <strong>#Frauenmacht</strong>.
              </p>
              <p>
                Ich setze mich dafür ein, Chancengleichheit und Diversität nachhaltig in
                Unternehmen zu verankern. Mein Fokus: inklusive Strukturen, diverse Netzwerke und
                eine Unternehmenskultur, in der jede Stimme zählt.
              </p>
              <p>
                Mediengestalterin, Marketing Manager:in, Head of Communication, dann eigene Initiative,
                dann selbstständig. Heute lebe ich in Berlin, spreche fließend Ostdeutsch und springe
                gern aus funktionierenden Flugzeugen.
              </p>
              <p>
                Mein Ziel: <strong>nicht nur Frauen fördern, sondern Strukturen verändern</strong> –
                damit echte Gleichberechtigung möglich wird.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================ REFERENCES ============================
function References() {
  const refs = window.DATA.references;
  const testimonials = window.DATA.testimonials;
  return (
    <>
      <section className="section refs-testimonials">
        <div className="wrap">
          <div className="themen-head" style={{ marginBottom: 24 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>Stimmen aus der Praxis</div>
              <h2 className="h1">Was nach der<br /> Zusammenarbeit <em>bleibt.</em></h2>
            </div>
            <p className="lead">
              Anonymisierte O-Töne aus DEIB-Auditberichten, Workshop-Evaluationen und Keynote-Feedbacks
              der letzten 24 Monate.
            </p>
          </div>
          <div className="testimonials">
            {testimonials.map((t, i) =>
            <div className="testimonial" key={i}>
                <div className="q">„{t.q}"</div>
                <div className="who">
                  <span className="avatar" style={{
                  background: i === 0 ?
                  "linear-gradient(135deg, var(--violet), var(--orange))" :
                  i === 1 ?
                  "linear-gradient(135deg, var(--blue), var(--magenta))" :
                  "linear-gradient(135deg, var(--orange), var(--indigo))"
                }} />
                  <div>
                    <div className="name">{t.name}</div>
                    <div className="role">{t.role}</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
    </>);

}

// ============================ GOODIES (KI Prompt, Rentenlücke, Hiring-Check) ============================
function Goodies() {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    navigator.clipboard?.writeText(window.DATA.promptText);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };
  const download = () => {
    const blob = new Blob([window.DATA.promptText], { type: "text/plain" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "ALL-IN-Diversity-KI-Prompt.txt";
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <section className="section goodies" id="goodies">
      <div className="wrap">
        <div className="themen-head" style={{ marginBottom: 20 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Goodies · kostenlos</div>
            <h2 className="h1">Werkzeuge, die <em>jetzt</em> helfen.</h2>
          </div>
          <p className="lead">
            Drei kleine, nutzbare Sachen – ohne Mail-Adresse, ohne Funnel. Einfach runterladen,
            nutzen, weitergeben.
          </p>
        </div>

        <div className="goodie-grid">
          <div className="goodie feature">
            <div>
              <span className="tag">KI-Assistent · GPT / Claude</span>
              <h3 style={{ marginTop: 16 }}>Diversity-Compliance Assistant – als Prompt zum Mitnehmen.</h3>
              <p style={{ marginTop: 12 }}>
                Ein vorgefertigter System-Prompt für GPT-4 oder Claude. Beantwortet Fragen zu AGG,
                EU-Entgelttransparenz, LkSG und KI-Act – mit Paragraf, Pflicht-Status und nächster Aktion.
              </p>
            </div>
            <div className="prompt-panel">
              <div className="prompt-panel-bar">
                <span className="prompt-dot" /><span className="prompt-dot" /><span className="prompt-dot" />
                <span className="prompt-file">diversity-compliance.prompt</span>
              </div>
              <pre className="prompt-panel-body">{window.DATA.promptText}</pre>
            </div>
            <div className="row">
              <button className="btn btn-light" onClick={download}>
                .txt herunterladen <Arrow size={14} />
              </button>
              <button className="btn btn-glass" onClick={copy}>
                {copied ? "Kopiert ✓" : "In Zwischenablage"}
              </button>
            </div>
          </div>

          <div style={{ display: "grid", gap: 16 }}>
            <div className="goodie">
              <div>
                <span className="tag" style={{ borderColor: "var(--hairline)", color: "var(--fg-mute)" }}>
                  Live-Tool · KI-gestützt
                </span>
                <h3 style={{ marginTop: 16 }}>Rentenlücke berechnen.</h3>
                <p style={{ marginTop: 10 }}>
                  Trage Alter, Gehalt, Teilzeit- und Care-Jahre ein – die KI schätzt deine
                  individuelle Rentenlücke und nennt drei konkrete nächste Schritte.
                  Besonders relevant für Frauen, Teilzeit, Care-Arbeit.
                </p>
              </div>
              <div className="row">
                <a href="#rentenluecke" className="btn btn-primary">Rechner öffnen <Arrow size={14} /></a>
                <span className="mono muted">anonym · KI</span>
              </div>
            </div>

            <div className="goodie">
              <div>
                <span className="tag" style={{ borderColor: "var(--hairline)", color: "var(--fg-mute)" }}>
                  Self-Assessment
                </span>
                <h3 style={{ marginTop: 16 }}>Inclusive Hiring · Quick-Check.</h3>
                <p style={{ marginTop: 10 }}>
                  12 Fragen für Hiring-Verantwortliche – mit individueller Auswertung
                  und drei konkreten nächsten Schritten.
                </p>
              </div>
              <div className="row">
                <a href="#check" className="btn btn-outline">Check starten <Arrow size={14} /></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================ EINDRÜCKE (Video + Galerie zusammengeführt) ============================
function Eindruecke() {
  const VIDEO_ID = "-zz-pWQs2V4";
  const [playing, setPlaying] = useState(false);
  const [thumbFailed, setThumbFailed] = useState(false);
  const thumb = `https://i.ytimg.com/vi/${VIDEO_ID}/maxresdefault.jpg`;
  const thumbFallback = `https://i.ytimg.com/vi/${VIDEO_ID}/hqdefault.jpg`;

  return (
    <section className="section gallery-section impressions-section" id="eindruecke">
      <div className="wrap">
        <div className="themen-head" style={{ marginBottom: 32 }}>
          <div>
            <h2 className="h1">Keynotes, Workshops,<br /> <em>Bühnen.</em></h2>
          </div>
          <p className="lead">
            Ein Gesamteindruck aus der Arbeit der letzten Monate – Konferenzen, Trainings, Panels,
            Klausuren mit Führungskräften. Mittendrin: ein Ausschnitt aus einer Moderation auf der re:publica.
          </p>
        </div>

        <div className="video-frame impressions-video">
          {playing ?
          <iframe
            className="video-iframe"
            src={`https://www.youtube-nocookie.com/embed/${VIDEO_ID}?autoplay=1&rel=0&modestbranding=1`}
            title="Linda Brack · ALL IN Diversity · re:publica"
            allow="accelerated-rotation; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerPolicy="strict-origin-when-cross-origin"
            allowFullScreen /> :


          <button
            type="button"
            className="video-facade"
            onClick={() => setPlaying(true)}
            aria-label="Video abspielen">
            
              <img
              className="video-thumb"
              src={thumbFailed ? thumbFallback : thumb}
              alt=""
              onError={() => setThumbFailed(true)} />
            
              <span className="video-scrim" />
              <span className="video-play">
                <svg width="26" height="30" viewBox="0 0 26 30" fill="none" aria-hidden="true">
                  <path d="M2 2.5 24 15 2 27.5V2.5Z" fill="currentColor" stroke="currentColor" strokeWidth="3" strokeLinejoin="round" />
                </svg>
              </span>
              <span className="video-cap">
                <span className="video-cap-mono">re:publica · Moderation</span>
                <span className="video-cap-title">Was tun, wenn „DEI" zum Reizwort wird – aber die Probleme bleiben?</span>
              </span>
            </button>
          }
        </div>

        <div className="impressions-stills-label mono">Mehr Eindrücke · Keynotes, Workshops, Panels</div>
        <div className="gallery-grid">
          <image-slot id="ein-1" src="assets/ein-1.webp" placeholder="Keynote auf Bühne" shape="rounded" radius="20" style={{ width: "100%", aspectRatio: "3 / 4" }}></image-slot>
          <image-slot id="ein-2" src="assets/ein-2.webp" placeholder="Workshop · Team" shape="rounded" radius="20" style={{ width: "100%", aspectRatio: "3 / 4", marginTop: "24px" }}></image-slot>
          <image-slot id="ein-3" src="assets/ein-3.webp" placeholder="Panel · Moderation" shape="rounded" radius="20" style={{ width: "100%", aspectRatio: "3 / 4" }}></image-slot>
          <image-slot id="ein-4" src="assets/ein-4.webp" placeholder="Backstage · Portrait" shape="rounded" radius="20" style={{ width: "100%", aspectRatio: "3 / 4", marginTop: "24px" }}></image-slot>
        </div>

        <div className="gallery-cta">
          <a href="loesungen.html#keynotes" className="btn btn-primary">Keynotes &amp; Angebot ansehen <Arrow size={14} /></a>
          <span className="gallery-cta-note mono">Formate, Themen &amp; Konditionen im Überblick</span>
        </div>
      </div>
    </section>);

}

// ============================ ALEX BERLIN VIDEO (Über) ============================
function AlexVideo() {
  const POSTER = "https://assets.nexx.cloud/media/20/14/93/43QUP7KT0JYFUVIx3.jpg";
  const SRC = "https://assets.nexx.cloud/media/57/67/42/T3K80J10D5TN2FL.mp4";
  const SOURCE_URL = "https://www.alex-berlin.de/videos/2180837-unternehmen-und-demokratie-mehr-als-nur-ein-arbeitsplatz-deine-stadt-deine-stimme";
  const [playing, setPlaying] = useState(false);
  const videoRef = React.useRef(null);

  useEffect(() => {
    if (playing && videoRef.current) {
      videoRef.current.play().catch(() => {});
    }
  }, [playing]);

  return (
    <section className="section video-section" id="alex-video">
      <div className="wrap">
        <div className="themen-head" style={{ marginBottom: 32 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Im Gespräch · ALEX Berlin</div>
            <h2 className="h1">Unternehmen<br /> und <em>Demokratie.</em></h2>
          </div>
          <p className="lead">
            „Mehr als nur ein Arbeitsplatz" – im Format <em>Deine Stadt? Deine Stimme!</em> diskutiert
            Linda Brack mit Thomas Gill (Berliner Landeszentrale für politische Bildung), warum
            Unternehmen demokratische Strukturen aktiv leben sollten.
          </p>
        </div>

        <div className="video-frame">
          {playing ?
          <video
            ref={videoRef}
            className="video-iframe"
            src={SRC}
            poster={POSTER}
            controls
            playsInline /> :


          <button
            type="button"
            className="video-facade"
            onClick={() => setPlaying(true)}
            aria-label="Video abspielen">
            
              <img className="video-thumb" src={POSTER} alt="" />
              <span className="video-scrim" />
              <span className="video-play">
                <svg width="26" height="30" viewBox="0 0 26 30" fill="none" aria-hidden="true">
                  <path d="M2 2.5 24 15 2 27.5V2.5Z" fill="currentColor" stroke="currentColor" strokeWidth="3" strokeLinejoin="round" />
                </svg>
              </span>
              <span className="video-cap">
                <span className="video-cap-mono">Video · ALEX Kosmos</span>
                <span className="video-cap-title">Unternehmen und Demokratie — mehr als nur ein Arbeitsplatz</span>
              </span>
            </button>
          }
        </div>

        <div className="video-source">
          <span className="mono">Quelle · ALEX Berlin</span>
          <a href={SOURCE_URL} target="_blank" rel="noreferrer">
            Auf alex-berlin.de ansehen <Arrow size={13} />
          </a>
        </div>
      </div>
    </section>);

}

// ============================ YOUTUBE TALK (Über) ============================
function UeberTalk() {
  const VIDEO_ID = "w5ek3igDyCo";
  const START = 319;
  const [playing, setPlaying] = useState(false);
  const [thumbFailed, setThumbFailed] = useState(false);
  const thumb = `https://i.ytimg.com/vi/${VIDEO_ID}/maxresdefault.jpg`;
  const thumbFallback = `https://i.ytimg.com/vi/${VIDEO_ID}/hqdefault.jpg`;

  return (
    <section className="section video-section" id="ueber-talk">
      <div className="wrap">
        <div className="themen-head" style={{ marginBottom: 32 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Im Gespräch · Interview</div>
            <h2 className="h1">Haltung,<br /> im <em>Klartext.</em></h2>
          </div>
          <p className="lead">
            Linda Brack im Gespräch – über Diversity, Leadership und die Frage,
            wie aus Haltung wirksame Strukturen werden.
          </p>
        </div>

        <div className="video-frame">
          {playing ?
          <iframe
            className="video-iframe"
            src={`https://www.youtube-nocookie.com/embed/${VIDEO_ID}?start=${START}&autoplay=1&rel=0&modestbranding=1`}
            title="Linda Brack · im Gespräch"
            allow="accelerated-rotation; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerPolicy="strict-origin-when-cross-origin"
            allowFullScreen /> :


          <button
            type="button"
            className="video-facade"
            onClick={() => setPlaying(true)}
            aria-label="Video abspielen">
            
              <img
              className="video-thumb"
              src={thumbFailed ? thumbFallback : thumb}
              alt=""
              onError={() => setThumbFailed(true)} />
            
              <span className="video-scrim" />
              <span className="video-play">
                <svg width="26" height="30" viewBox="0 0 26 30" fill="none" aria-hidden="true">
                  <path d="M2 2.5 24 15 2 27.5V2.5Z" fill="currentColor" stroke="currentColor" strokeWidth="3" strokeLinejoin="round" />
                </svg>
              </span>
              <span className="video-cap">
                <span className="video-cap-mono">Video · YouTube</span>
                <span className="video-cap-title">Linda Brack — im Gespräch</span>
              </span>
            </button>
          }
        </div>
      </div>
    </section>);

}

// ============================ EXTERNAL TOOLS (Empfehlungen) ============================
function ExternalTools() {
  const tools = [
  {
    tag: "Rassismus · anonym · kostenlos",
    title: "YOUNA – Ersthilfe bei Rassismus",
    desc:
    "Ein sensibler, spezialisierter KI-Chatbot für Menschen mit Rassismuserfahrung – und für Verbündete, Führung und HR, die besser unterstützen wollen. Anonym, sicher, rund um die Uhr.",
    host: "youarenotalone.ai",
    href: "https://www.youarenotalone.ai/"
  },
  {
    tag: "Gewaltschutz · anonym · 24/7",
    title: "Maya – Hilfe-Chat bei häuslicher Gewalt",
    desc:
    "Ein anonymer KI-Hilfe-Chat bei häuslicher und Partnerschaftsgewalt – gemeinsam mit Betroffenen entwickelt. Kostenlos, ohne Anmeldung, in vielen Sprachen.",
    host: "myprotectify.org",
    href: "https://myprotectify.org/"
  }];

  return (
    <section className="section ext-tools" id="hilfe">
      <div className="wrap">
        <div className="themen-head" style={{ marginBottom: 18 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Empfehlung · Externe Tools</div>
            <h2 className="h1">Hilfe, die wir <em>empfehlen.</em></h2>
          </div>
          <p className="lead">
            Zwei kostenlose, anonyme KI-Anlaufstellen von Partner-Organisationen – für
            Menschen, die Diskriminierung oder Gewalt erleben, und für alle, die unterstützen wollen.
          </p>
        </div>

        <div className="ext-grid">
          {tools.map((t, i) =>
          <a className="ext-card" key={i} href={t.href} target="_blank" rel="noreferrer">
              <div className="ext-card-top">
                <span className="ext-tag mono">{t.tag}</span>
                <span className="ext-arrow"><Arrow size={16} /></span>
              </div>
              <h3>{t.title}</h3>
              <p>{t.desc}</p>
              <span className="ext-host mono">{t.host} ↗</span>
            </a>
          )}
        </div>
      </div>
    </section>);

}

// ============================ DIVERSITY DATA (Studien-Zahlen) ============================
function DiversityData() {
  const business = [
  { num: "39", unit: "%", color: "var(--violet)", lbl: "höhere Wahrscheinlichkeit, finanziell überdurchschnittlich abzuschneiden – bei Unternehmen mit hoher Geschlechterdiversität im Top-Management.", src: "McKinsey · „Diversity Matters Even More“, 2023" },
  { num: "+19", unit: "%", color: "var(--orange)", lbl: "mehr Innovationsumsatz erzielen Unternehmen mit überdurchschnittlich diversen Management-Teams (45 % statt 26 % des Umsatzes).", src: "Boston Consulting Group, 2018" }];

  const reality = [
  { num: "29", unit: "%", color: "var(--blue)", lbl: "der Führungspositionen in Deutschland sind von Frauen besetzt – im EU-Schnitt sind es 35 %.", src: "Eurostat / Statistisches Bundesamt, 2024" },
  { num: "44", unit: "%", color: "var(--magenta)", lbl: "mehr unbezahlte Sorge- und Care-Arbeit übernehmen Frauen als Männer (Gender Care Gap).", src: "Statistisches Bundesamt · Zeitverwendung, 2022" },
  { num: "~30", unit: "%", color: "var(--coral)", lbl: "der Menschen in Deutschland haben eine Migrationsgeschichte – in den Führungsetagen sind sie deutlich seltener vertreten.", src: "Statistisches Bundesamt · Mikrozensus" }];

  function Fact({ f }) {
    const ref = React.useRef(null);
    const target = parseInt(String(f.num).replace(/[^0-9]/g, ""), 10);
    const prefix = String(f.num).replace(/[0-9].*$/, "");
    const [val, setVal] = useState(0);

    useEffect(() => {
      const el = ref.current;
      if (!el) return;
      let started = false;
      const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      if (reduce) {setVal(target);return;}
      const io = new IntersectionObserver((entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !started) {
            started = true;
            const dur = 1200;
            const t0 = performance.now();
            const tick = (now) => {
              const p = Math.min(1, (now - t0) / dur);
              const eased = 1 - Math.pow(1 - p, 3);
              setVal(Math.round(eased * target));
              if (p < 1) requestAnimationFrame(tick);
            };
            requestAnimationFrame(tick);
            io.disconnect();
          }
        });
      }, { threshold: 0.4 });
      io.observe(el);
      return () => io.disconnect();
    }, [target]);

    return (
      <div className="ev-fact" ref={ref} style={{ "--fact-accent": f.color }}>
        <div className="ev-fact-num serif" style={{ color: f.color }}>{prefix}{val}<span>{f.unit}</span></div>
        <div className="ev-fact-lbl">{f.lbl}</div>
        <div className="ev-fact-src mono">{f.src}</div>
      </div>);

  }

  return (
    <section className="section evidence" id="zahlen">
      <div className="wrap">
        <div className="themen-head" style={{ marginBottom: 22 }}>
          <div>
            <h2 className="h1">Der <em>Business Case.</em></h2>
          </div>
        </div>

        <div className="ev-block-label mono">Was Vielfalt bringt</div>
        <div className="ev-facts ev-facts--2">
          {business.map((f, i) => <Fact f={f} key={i} />)}
        </div>

        <div className="ev-block-label mono" style={{ marginTop: 28 }}>Die Realität in Deutschland</div>
        <div className="ev-facts ev-facts--3">
          {reality.map((f, i) => <Fact f={f} key={i} />)}
        </div>
      </div>
    </section>);

}

window.Sections = { Nav, Hero, Intro, Position, Logos, Stats, Solutions, Themen, About, References, Goodies, Eindruecke, AlexVideo, UeberTalk, ExternalTools, DiversityData, Arrow };