// Pitch / Presentation mode — fullscreen pitch deck for SV meetings.
// Five slides: Cover → Mission → Team → Demands → Events. Keyboard ←/→/Esc.

function Pitch({ open, onClose, t, lang }) {
  const [slide, setSlide] = React.useState(0);
  const data = window.AstroniaData;

  // Slide list — each is { id, render }
  const slides = React.useMemo(() => buildPitchSlides({ data, t, lang }), [lang, t]);

  // Keyboard navigation
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') { onClose(); return; }
      if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') {
        e.preventDefault();
        setSlide(s => Math.min(slides.length - 1, s + 1));
      }
      if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
        e.preventDefault();
        setSlide(s => Math.max(0, s - 1));
      }
      if (e.key === 'Home') setSlide(0);
      if (e.key === 'End') setSlide(slides.length - 1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, slides.length, onClose]);

  // Reset to slide 0 every time we open
  React.useEffect(() => { if (open) setSlide(0); }, [open]);

  if (!open) return null;

  const next = () => setSlide(s => Math.min(slides.length - 1, s + 1));
  const prev = () => setSlide(s => Math.max(0, s - 1));

  const Slide = slides[slide].render;

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 9000,
      background: 'oklch(0.06 0.04 268)',
      display: 'flex', flexDirection: 'column',
      animation: 'pitchFade .4s ease',
    }}>
      {/* Star backdrop */}
      <div style={{
        position: 'absolute', inset: 0,
        background:
          'radial-gradient(ellipse at 20% 20%, oklch(0.30 0.16 290 / 0.4), transparent 55%),' +
          'radial-gradient(ellipse at 85% 80%, oklch(0.30 0.18 60 / 0.35), transparent 55%),' +
          'radial-gradient(ellipse at 50% 50%, oklch(0.10 0.06 268), oklch(0.05 0.04 270))',
        pointerEvents: 'none',
      }}>
        <PitchStars />
      </div>

      {/* Top bar */}
      <div style={{
        position: 'relative', zIndex: 2,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '20px 32px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="assets/astronia-logo.png" alt="Astronia" style={{ width: 36, height: 36, borderRadius: '50%' }} />
          <div style={{
            fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
            color: 'oklch(0.78 0.10 70)',
          }}>
            ✦ {lang === 'de' ? 'Präsentation' : 'Presentation'}
          </div>
        </div>
        <button onClick={onClose} className="btn"
          style={{ padding: '8px 16px', fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
          Esc · {t('pitchExit')}
        </button>
      </div>

      {/* Slide canvas — `safe center` keeps tall content from being clipped at the top while still centering shorter content */}
      <div key={slide} style={{
        position: 'relative', zIndex: 1,
        flex: 1, display: 'flex',
        alignItems: 'safe center', justifyContent: 'safe center',
        padding: '24px 5vw',
        animation: 'slideIn .5s cubic-bezier(.2,.8,.2,1)',
        overflow: 'auto',
      }}>
        <Slide />
      </div>

      {/* Bottom controls */}
      <div style={{
        position: 'relative', zIndex: 2,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '20px 32px', gap: 16,
        borderTop: '1px solid oklch(1 0 0 / 0.08)',
        background: 'oklch(0.05 0.04 270 / 0.7)',
        backdropFilter: 'blur(10px)',
      }}>
        <button className="btn" onClick={prev} disabled={slide === 0}
          style={{ padding: '10px 18px', opacity: slide === 0 ? 0.4 : 1 }}>
          ← {t('pitchPrev')}
        </button>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ display: 'flex', gap: 8 }}>
            {slides.map((_, i) => (
              <button key={i} onClick={() => setSlide(i)}
                aria-label={`Slide ${i + 1}`}
                style={{
                  width: slide === i ? 32 : 8, height: 8, borderRadius: 999,
                  border: 'none', cursor: 'pointer', padding: 0,
                  background: slide === i ? 'var(--gold)' : 'oklch(0.4 0.06 270 / 0.6)',
                  transition: 'all .3s ease',
                  boxShadow: slide === i ? '0 0 10px oklch(0.84 0.15 82 / 0.6)' : 'none',
                }} />
            ))}
          </div>
          <span style={{
            fontSize: 12, letterSpacing: '0.18em', color: 'var(--ink-mute)',
            fontVariantNumeric: 'tabular-nums', minWidth: 60, textAlign: 'center',
          }}>
            {String(slide + 1).padStart(2, '0')} {t('pitchSlideOf')} {String(slides.length).padStart(2, '0')}
          </span>
        </div>

        <button className="btn btn-primary" onClick={next} disabled={slide === slides.length - 1}
          style={{ padding: '10px 18px', opacity: slide === slides.length - 1 ? 0.4 : 1 }}>
          {t('pitchNext')} →
        </button>
      </div>

      <style>{`
        @keyframes pitchFade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideIn {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

function PitchStars() {
  return (
    <svg viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      {Array.from({ length: 100 }).map((_, i) => {
        const cx = (i * 173 + 37) % 1920;
        const cy = (i * 91 + 53) % 1080;
        const r = (i % 7 === 0) ? 2.4 : 1;
        return <circle key={i} cx={cx} cy={cy} r={r} fill="oklch(0.99 0.02 80)"
          opacity={0.25 + (i % 5) * 0.1}
          style={{ animation: `pTw ${3 + (i % 5)}s ease-in-out ${(i % 9) * 0.3}s infinite` }} />;
      })}
      {[[300, 220], [1620, 200], [1500, 880], [380, 920], [960, 540]].map(([cx, cy], i) => (
        <g key={i}>
          <circle cx={cx} cy={cy} r="3" fill="oklch(0.99 0.02 80)" />
          <line x1={cx - 14} y1={cy} x2={cx + 14} y2={cy} stroke="oklch(0.99 0.02 80 / 0.7)" strokeWidth="0.8" />
          <line x1={cx} y1={cy - 14} x2={cx} y2={cy + 14} stroke="oklch(0.99 0.02 80 / 0.7)" strokeWidth="0.8" />
        </g>
      ))}
      <style>{`@keyframes pTw { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }`}</style>
    </svg>
  );
}

// === Slide layouts ===
// Slide-Nummerierung folgt der tatsächlichen Reihenfolge (Cover wird nicht nummeriert).
const num = (n) => String(n).padStart(2, '0');

function buildPitchSlides({ data, t, lang }) {
  return [
    { id: 'cover',          render: () => <CoverSlide t={t} lang={lang} /> },
    { id: 'lsv',            render: () => <LSVSlide t={t} lang={lang} n={num(1)} /> },
    { id: 'su',             render: () => <SchuelerunionSlide t={t} lang={lang} n={num(2)} /> },
    { id: 'mission',        render: () => <MissionSlide t={t} lang={lang} n={num(3)} /> },
    { id: 'team-overview',  render: () => <TeamOverviewSlide t={t} lang={lang} data={data} n={num(4)} /> },
    { id: 'team-roster',    render: () => <TeamRosterSlide t={t} lang={lang} data={data} n={num(5)} /> },
    { id: 'demands-intro',  render: () => <DemandsIntroSlide t={t} lang={lang} n={num(6)} /> },
    { id: 'demands-AHS',    render: () => <DemandsCategorySlide t={t} lang={lang} data={data} cat="AHS"  n={num(7)} color="oklch(0.86 0.13 82)" /> },
    { id: 'demands-BMHS',   render: () => <DemandsCategorySlide t={t} lang={lang} data={data} cat="BMHS" n={num(8)} color="oklch(0.72 0.17 45)" /> },
    { id: 'demands-BS',     render: () => <DemandsCategorySlide t={t} lang={lang} data={data} cat="BS"   n={num(9)} color="oklch(0.65 0.20 305)" /> },
    { id: 'events',         render: () => <EventsSlide t={t} lang={lang} data={data} n={num(10)} /> },
  ];
}

function LSVSlide({ t, lang, n = '01' }) {
  return (
    <div style={{ ...slideMax, width: '100%', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 14 }}>{lang === 'de' ? `${n} · Was ist die LSV?` : `${n} · What is the LSV?`}</div>
        <h2 style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontSize: 'clamp(40px, 5.4vw, 76px)', lineHeight: 1.02, fontWeight: 400,
          marginBottom: 22,
        }}>
          {lang === 'de'
            ? <>Landes&shy;schüler*innen&shy;<br/><span style={{ color: 'oklch(0.92 0.13 85)' }}>vertretung.</span></>
            : <>Lower Austria<br/><span style={{ color: 'oklch(0.92 0.13 85)' }}>Student Council.</span></>}
        </h2>
        <p style={{ fontSize: 21, color: 'var(--ink-soft)', lineHeight: 1.5, maxWidth: 560, marginBottom: 18 }}>
          {lang === 'de'
            ? 'Die gesetzliche Stimme aller Schüler*innen Niederösterreichs — direkt verankert im Schülervertretungsgesetz.'
            : 'The legal voice of all Lower Austrian students — anchored in the student representation act.'}
        </p>
        <p style={{ fontSize: 16, color: 'var(--ink-mute)', lineHeight: 1.55, maxWidth: 560 }}>
          {lang === 'de'
            ? 'Wir verhandeln mit dem Bildungsminister, der Bildungsdirektion NÖ und dem Landtag. Was wir sagen, hat Gewicht — weil wir für über 100.000 Schüler*innen sprechen.'
            : 'We negotiate with the minister of education, the regional education directorate and parliament. What we say carries weight — we speak for 100,000+ students.'}
        </p>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* LSV logo card — official mark of the Landesschüler*innenvertretung */}
        <div className="card" style={{
          padding: '22px 24px',
          display: 'flex', alignItems: 'center', gap: 20,
          background: 'linear-gradient(135deg, oklch(0.99 0.02 80 / 0.06), oklch(0.16 0.06 268 / 0.85))',
          borderColor: 'oklch(0.84 0.15 82 / 0.45)',
        }}>
          <div style={{
            width: 84, height: 84, flexShrink: 0,
            borderRadius: 16,
            background: 'oklch(0.99 0.02 80 / 0.96)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 10,
            boxShadow: '0 0 24px oklch(0.86 0.13 82 / 0.30)',
            border: '1px solid oklch(0.86 0.13 82 / 0.30)',
          }}>
            <img src="uploads/LSV-Logo.png" alt="LSV Niederösterreich"
              style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
          </div>
          <div style={{ minWidth: 0 }}>
            <div style={{
              fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
              color: 'var(--gold)', marginBottom: 6, fontWeight: 600,
            }}>
              {lang === 'de' ? 'Offizielle Vertretung' : 'Official body'}
            </div>
            <div style={{
              fontFamily: '"Cormorant Garamond", serif', fontSize: 22, lineHeight: 1.15,
              color: 'var(--ink-bright)',
            }}>
              {lang === 'de' ? 'Landesschüler*innenvertretung Niederösterreich' : 'Lower Austria Student Council'}
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {[
            { n: '100k+', l: lang === 'de' ? 'Schüler*innen' : 'students', s: lang === 'de' ? 'die wir vertreten' : 'we represent' },
            { n: '3', l: lang === 'de' ? 'Schultypen' : 'school types', s: 'AHS · BMHS · BS' },
            { n: '19', l: lang === 'de' ? 'Mandatar*innen' : 'mandates', s: lang === 'de' ? 'gewählt für 2 Jahre' : 'elected for 2 years', hi: true },
            { n: '1', l: lang === 'de' ? 'Stimme' : 'voice', s: lang === 'de' ? 'gegenüber der Politik' : 'to politics' },
          ].map((x, i) => (
            <div key={i} className="card" style={{
              padding: '24px 20px',
              ...(x.hi && {
                background: 'linear-gradient(135deg, oklch(0.84 0.15 82 / 0.18), oklch(0.62 0.20 305 / 0.10))',
                borderColor: 'oklch(0.84 0.15 82 / 0.4)',
              }),
            }}>
              <div style={{
                fontFamily: '"Cormorant Garamond", serif',
                fontSize: 56, lineHeight: 1, fontWeight: 400,
                color: x.hi ? 'var(--gold)' : 'var(--ink-bright)',
              }}>{x.n}</div>
              <div style={{
                fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
                color: x.hi ? 'var(--gold)' : 'var(--ink-soft)', marginTop: 10, fontWeight: 600,
              }}>{x.l}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 4 }}>{x.s}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SchuelerunionSlide({ t, lang, n = '02' }) {
  return (
    <div style={{ ...slideMax, width: '100%', display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 56, alignItems: 'center' }}>
      <div style={{ position: 'relative' }}>
        <div style={{
          aspectRatio: '4/5', borderRadius: 24,
          background: 'linear-gradient(160deg, oklch(0.96 0.02 80), oklch(0.88 0.04 70))',
          border: '1px solid oklch(0.84 0.15 82 / 0.4)',
          overflow: 'hidden', position: 'relative',
          boxShadow: '0 30px 60px -20px oklch(0 0 0 / 0.6)',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', gap: 24,
            padding: 'clamp(24px, 5%, 56px)', textAlign: 'center',
          }}>
            <img src="assets/schuelerunion-logo.png" alt="Schülerunion"
              style={{
                width: '78%', maxWidth: 320, height: 'auto',
                filter: 'drop-shadow(0 8px 24px oklch(0 0 0 / 0.18))',
              }} />
            <div style={{
              fontSize: 13, color: 'oklch(0.30 0.06 270)', lineHeight: 1.4, maxWidth: 260, opacity: 0.85,
            }}>
              {lang === 'de'
                ? 'Österreichs größte Schüler*innen-Organisation seit 1968.'
                : "Austria's largest student organisation since 1968."}
            </div>
          </div>
        </div>
      </div>

      <div>
        <div className="eyebrow" style={{ marginBottom: 14 }}>{lang === 'de' ? `${n} · Wer ist die Schülerunion?` : `${n} · Who is Schülerunion?`}</div>
        <h2 style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontSize: 'clamp(36px, 4.8vw, 64px)', lineHeight: 1.05, fontWeight: 400, marginBottom: 22,
        }}>
          {lang === 'de'
            ? <>Die Bewegung, mit der wir <span style={{ color: 'oklch(0.92 0.13 85)' }}>antreten.</span></>
            : <>The movement we run <span style={{ color: 'oklch(0.92 0.13 85)' }}>with.</span></>}
        </h2>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
          {[
            { k: lang === 'de' ? '40.000+ Mitglieder' : '40,000+ members', v: lang === 'de' ? 'in ganz Österreich' : 'across Austria' },
            { k: lang === 'de' ? 'Parteiunabhängig' : 'Independent', v: lang === 'de' ? 'überparteilich, eigenständig finanziert' : 'non-partisan, independently funded' },
            { k: lang === 'de' ? 'Bildung im Fokus' : 'Education first', v: lang === 'de' ? 'seit 1968 für faire, moderne Schulen' : 'fair, modern schools since 1968' },
            { k: lang === 'de' ? 'Team Astronia' : 'Team Astronia', v: lang === 'de' ? 'unsere Liste in Niederösterreich für 2026' : 'our list for Lower Austria 2026', hi: true },
          ].map((x, i) => (
            <li key={i} style={{
              display: 'grid', gridTemplateColumns: '8px 1fr', gap: 18, alignItems: 'baseline',
              padding: '14px 18px', borderRadius: 14,
              background: x.hi ? 'linear-gradient(135deg, oklch(0.84 0.15 82 / 0.15), oklch(0.20 0.06 263 / 0.5))' : 'oklch(0.16 0.05 268 / 0.45)',
              border: `1px solid ${x.hi ? 'oklch(0.84 0.15 82 / 0.5)' : 'var(--line)'}`,
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: '50%',
                background: x.hi ? 'var(--gold)' : 'oklch(0.84 0.15 82 / 0.5)',
                boxShadow: x.hi ? '0 0 12px var(--gold)' : 'none',
              }}></span>
              <div>
                <div style={{ fontSize: 19, color: 'var(--ink-bright)', fontWeight: 500, marginBottom: 2 }}>{x.k}</div>
                <div style={{ fontSize: 14, color: 'var(--ink-mute)' }}>{x.v}</div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

const slideMax = { width: '100%', maxWidth: 1280, margin: '0 auto' };

function CoverSlide({ t, lang }) {
  return (
    <div style={{ ...slideMax, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28 }}>
      <img src="assets/astronia-logo.png" alt="Astronia"
        style={{ width: 160, height: 160, borderRadius: '50%', boxShadow: '0 0 80px oklch(0.84 0.15 82 / 0.4)' }} />
      <div style={{
        fontSize: 13, letterSpacing: '0.4em', textTransform: 'uppercase',
        color: 'var(--gold)',
      }}>
        ✦ Team Astronia ✦
      </div>
      <h1 style={{
        fontFamily: '"Cormorant Garamond", serif',
        fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 1.02, fontWeight: 400,
        maxWidth: 1100,
      }}>
        {lang === 'de'
          ? <>Wir wollen das Bildungssystem zum <em style={{ color: 'oklch(0.92 0.13 85)' }}>Funkeln</em> bringen.</>
          : <>We want to make education <em style={{ color: 'oklch(0.92 0.13 85)' }}>sparkle</em>.</>}
      </h1>
      <div style={{ fontSize: 16, color: 'var(--ink-soft)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
        {lang === 'de'
          ? 'Landesschüler*innenvertretungswahl 2026 · Niederösterreich'
          : 'Lower Austria Student Election 2026'}
      </div>
    </div>
  );
}

function MissionSlide({ t, lang, n = '03' }) {
  return (
    <div style={{ ...slideMax, display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'center' }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 16 }}>{`${n} · Mission`}</div>
        <h2 style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1.05, fontWeight: 400,
          marginBottom: 24,
        }}>
          {lang === 'de' ? 'Drei Schultypen.' : 'Three school types.'}<br />
          <span style={{ color: 'oklch(0.92 0.13 85)' }}>{lang === 'de' ? 'Eine Vision.' : 'One vision.'}</span>
        </h2>
        <p style={{ fontSize: 22, color: 'var(--ink-soft)', lineHeight: 1.5, maxWidth: 580 }}>
          {lang === 'de'
            ? 'Wir sind 19 Schüler*innen aus ganz Niederösterreich. Wir teilen einen Auftrag: Bildung gerechter, moderner und mutiger zu machen.'
            : 'We are 19 students from across Lower Austria. We share one mission: to make education fairer, more modern and bolder.'}
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        {[
          { n: '9', l: 'AHS', s: lang === 'de' ? 'Höhere Schulen' : 'Academic schools' },
          { n: '7', l: 'BMHS', s: lang === 'de' ? 'Berufsbildende Schulen' : 'Vocational schools' },
          { n: '3', l: 'BS', s: lang === 'de' ? 'Berufsschulen' : 'Apprenticeship schools' },
          { n: '19', l: '✦', s: lang === 'de' ? 'Sterne, eine Konstellation' : 'Stars, one constellation', hi: true },
        ].map((x, i) => (
          <div key={i} className="card" style={{
            padding: '28px 24px',
            ...(x.hi && {
              background: 'linear-gradient(135deg, oklch(0.84 0.15 82 / 0.18), oklch(0.62 0.20 305 / 0.10))',
              borderColor: 'oklch(0.84 0.15 82 / 0.4)',
            }),
          }}>
            <div style={{
              fontFamily: '"Cormorant Garamond", serif',
              fontSize: 72, lineHeight: 1, fontWeight: 400,
              color: x.hi ? 'var(--gold)' : 'var(--ink-bright)',
            }}>{x.n}</div>
            <div style={{
              fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase',
              color: x.hi ? 'var(--gold)' : 'var(--ink-soft)', marginTop: 8,
            }}>{x.l}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-mute)', marginTop: 4 }}>{x.s}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TeamOverviewSlide({ t, lang, data, n = '04' }) {
  const counts = { AHS: 0, BMHS: 0, BS: 0 };
  data.team.forEach(m => { counts[m.role] = (counts[m.role] || 0) + 1; });
  const groups = [
    { role: 'AHS', color: 'oklch(0.86 0.13 82)', label: lang === 'de' ? 'AHS · 9 Mitglieder' : 'AHS · 9 members' },
    { role: 'BMHS', color: 'oklch(0.72 0.17 45)', label: lang === 'de' ? 'BMHS · 7 Mitglieder' : 'BMHS · 7 members' },
    { role: 'BS', color: 'oklch(0.65 0.20 305)', label: lang === 'de' ? 'BS · 3 Mitglieder' : 'BS · 3 members' },
  ];

  return (
    <div style={{ ...slideMax, width: '100%' }}>
      <div className="eyebrow" style={{ marginBottom: 12 }}>{`${n} · Team`}</div>
      <h2 style={{
        fontFamily: '"Cormorant Garamond", serif',
        fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 1.05, fontWeight: 400, marginBottom: 28,
      }}>
        {lang === 'de' ? 'Unsere Sternenkarte' : 'Our star map'}
      </h2>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
        {groups.map((g, gi) => {
          const members = data.team.filter(m => m.role === g.role);
          return (
            <div key={gi} className="card" style={{
              padding: '24px 22px',
              borderColor: `color-mix(in oklch, ${g.color} 50%, transparent)`,
              minHeight: 260,
            }}>
              <div style={{
                fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
                color: g.color, fontWeight: 600, marginBottom: 14,
              }}>
                ✦ {g.label}
              </div>
              <svg viewBox="0 0 200 120" style={{ width: '100%', height: 120, marginBottom: 14 }}>
                {members.map((_, i) => {
                  const cols = Math.ceil(Math.sqrt(members.length));
                  const x = 20 + (i % cols) * (160 / Math.max(1, cols - 1 || 1));
                  const y = 20 + Math.floor(i / cols) * 36;
                  const jx = ((i * 7) % 11) - 5;
                  const jy = ((i * 13) % 9) - 4;
                  return (
                    <g key={i} style={{ animation: `tStar ${3 + (i % 4)}s ease-in-out ${i * 0.15}s infinite` }}>
                      <circle cx={x + jx} cy={y + jy} r="3.2" fill="oklch(0.99 0.02 80)" />
                      <circle cx={x + jx} cy={y + jy} r="6" fill={g.color} opacity="0.25" />
                    </g>
                  );
                })}
              </svg>
              <div style={{
                fontFamily: '"Cormorant Garamond", serif',
                fontSize: 38, lineHeight: 1, color: g.color, fontWeight: 400,
              }}>{counts[g.role]}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 4, letterSpacing: '0.1em' }}>
                {lang === 'de' ? 'Mitglieder' : 'members'}
              </div>
            </div>
          );
        })}
      </div>
      <style>{`@keyframes tStar { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }`}</style>
    </div>
  );
}

function TeamRosterSlide({ t, lang, data, n = '05' }) {
  // All 19 members in a generous, photo-forward grid
  const colorFor = (r) => r === 'AHS' ? 'oklch(0.86 0.13 82)'
    : r === 'BMHS' ? 'oklch(0.72 0.17 45)'
    : 'oklch(0.65 0.20 305)';

  return (
    <div style={{ width: '100%', maxWidth: 1480, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 18 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 6 }}>{lang === 'de' ? `${n} · Team im Detail` : `${n} · Team up close`}</div>
          <h2 style={{
            fontFamily: '"Cormorant Garamond", serif',
            fontSize: 'clamp(34px, 4.2vw, 52px)', lineHeight: 1.05, fontWeight: 400,
          }}>
            {lang === 'de' ? 'Wir, persönlich.' : 'Us, personally.'}
          </h2>
        </div>
        <div style={{ display: 'flex', gap: 14, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
          {[
            { l: 'AHS · 9', c: 'oklch(0.86 0.13 82)' },
            { l: 'BMHS · 7', c: 'oklch(0.72 0.17 45)' },
            { l: 'BS · 3', c: 'oklch(0.65 0.20 305)' },
          ].map(x => (
            <span key={x.l} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', borderRadius: 999,
              border: `1px solid ${x.c}`, color: x.c,
              background: 'oklch(0.10 0.05 268 / 0.5)', fontWeight: 600,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: x.c, boxShadow: `0 0 8px ${x.c}` }}></span>
              {x.l}
            </span>
          ))}
        </div>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(10, 1fr)',
        gridAutoRows: '1fr',
        gap: 10,
      }}>
        {data.team.map((m, i) => {
          const c = colorFor(m.role);
          // 19 members across 10 cols × 2 rows = 20 cells. Last cell becomes a star insignia.
          return (
            <div key={i} style={{
              background: 'linear-gradient(160deg, oklch(0.18 0.06 268 / 0.85), oklch(0.12 0.05 268 / 0.85))',
              border: `1.5px solid color-mix(in oklch, ${c} 55%, transparent)`,
              borderRadius: 14,
              padding: 8,
              display: 'flex', flexDirection: 'column', gap: 6,
              animation: `rosterIn .5s ease ${i * 0.025}s both`,
              position: 'relative', overflow: 'hidden',
              boxShadow: `0 8px 20px -10px ${c.replace(')', ' / 0.45)')}`,
            }}>
              {/* Photo — falls back to a star placeholder if missing */}
              <div style={{
                width: '100%', aspectRatio: '3 / 4', borderRadius: 10,
                background: `linear-gradient(160deg, color-mix(in oklch, ${c} 22%, oklch(0.18 0.06 268)), oklch(0.12 0.05 268))`,
                border: `1px solid color-mix(in oklch, ${c} 60%, transparent)`,
                position: 'relative', overflow: 'hidden',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>
                {m.photo ? (
                  <img src={m.photo} alt={m.name} loading="lazy"
                    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                ) : (
                  <>
                    <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{
                      position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.55,
                    }}>
                      {[[18,22],[58,18],[78,40],[32,68],[68,76],[14,82],[88,68]].map(([cx,cy],k) => (
                        <circle key={k} cx={cx} cy={cy} r={(k%3===0)?0.9:0.5} fill="oklch(0.95 0.05 85)" />
                      ))}
                    </svg>
                    <div style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 28, color: c, lineHeight: 1, textShadow: `0 0 14px ${c.replace(')', ' / 0.6)')}` }}>✦</div>
                  </>
                )}
                <div style={{
                  position: 'absolute', top: 6, right: 6,
                  fontSize: 7, letterSpacing: '0.22em', textTransform: 'uppercase',
                  color: c, fontWeight: 700,
                  padding: '2px 6px', borderRadius: 999,
                  background: 'oklch(0.10 0.05 268 / 0.7)',
                  border: `1px solid ${c}`,
                }}>{m.role}</div>
              </div>
              <div style={{ padding: '0 2px' }}>
                <div style={{
                  fontFamily: '"Cormorant Garamond", serif', fontSize: 14,
                  lineHeight: 1.1, color: 'var(--ink-bright)', fontWeight: 500,
                }}>{m.name}</div>
                <div style={{ fontSize: 9, color: 'var(--ink-mute)', marginTop: 2, lineHeight: 1.2,
                  letterSpacing: '0.06em',
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>
                  {lang === 'de' ? 'Platz' : 'Rank'} {m.rank}
                </div>
              </div>
            </div>
          );
        })}
        {/* 20th cell = sparkle insignia tile */}
        <div style={{
          background: 'linear-gradient(135deg, oklch(0.84 0.15 82 / 0.22), oklch(0.62 0.20 305 / 0.18))',
          border: '1.5px solid oklch(0.84 0.15 82 / 0.5)',
          borderRadius: 14, padding: 8,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          gap: 6, textAlign: 'center',
          animation: `rosterIn .5s ease ${19 * 0.025}s both`,
          boxShadow: '0 0 24px oklch(0.84 0.15 82 / 0.25) inset',
        }}>
          <div style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 38, color: 'var(--gold)', lineHeight: 1 }}>19</div>
          <div style={{ fontSize: 8, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--gold)', fontWeight: 700 }}>
            {lang === 'de' ? 'Sterne' : 'stars'}
          </div>
          <div style={{ fontSize: 18, color: 'var(--gold)', marginTop: 2 }}>✦</div>
        </div>
      </div>

      <style>{`@keyframes rosterIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }`}</style>
    </div>
  );
}

function DemandsIntroSlide({ t, lang, n = '06' }) {
  return (
    <div style={{ ...slideMax, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28 }}>
      <div className="eyebrow">{lang === 'de' ? `${n} · Forderungen` : `${n} · Demands`}</div>
      <h2 style={{
        fontFamily: '"Cormorant Garamond", serif',
        fontSize: 'clamp(48px, 6.5vw, 88px)', lineHeight: 1.05, fontWeight: 400, maxWidth: 1100,
      }}>
        {lang === 'de'
          ? <>Drei Papiere.<br /><span style={{ color: 'oklch(0.92 0.13 85)' }}>Ein Versprechen.</span></>
          : <>Three papers.<br /><span style={{ color: 'oklch(0.92 0.13 85)' }}>One promise.</span></>}
      </h2>
      <p style={{ fontSize: 22, color: 'var(--ink-soft)', maxWidth: 760, lineHeight: 1.5 }}>
        {lang === 'de'
          ? 'Jeder Schultyp hat eigene Themen und eigene Sorgen. Wir hören zu — und schreiben für jeden ein eigenes Forderungspapier.'
          : 'Each school type has its own challenges. We listen — and write a tailored demands paper for each.'}
      </p>
      <div style={{ display: 'flex', gap: 16, marginTop: 20, flexWrap: 'wrap', justifyContent: 'center' }}>
        {[
          { l: 'AHS', c: 'oklch(0.86 0.13 82)' },
          { l: 'BMHS', c: 'oklch(0.72 0.17 45)' },
          { l: 'BS', c: 'oklch(0.65 0.20 305)' },
        ].map(x => (
          <div key={x.l} style={{
            padding: '14px 28px', borderRadius: 999,
            background: 'oklch(0.10 0.05 268 / 0.6)',
            border: `1px solid ${x.c}`,
            color: x.c, fontSize: 16, letterSpacing: '0.22em', fontWeight: 600,
            boxShadow: `0 0 18px ${x.c.replace(')', ' / 0.3)')}`,
          }}>{x.l}</div>
        ))}
      </div>
    </div>
  );
}

function DemandsCategorySlide({ t, lang, data, cat, color, n }) {
  const d = data.demands[cat];
  return (
    <div style={{ ...slideMax, width: '100%' }}>
      <div className="eyebrow" style={{ marginBottom: 10 }}>
        {lang === 'de' ? `${n} · Forderungen ${cat}` : `${n} · Demands ${cat}`}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 24, flexWrap: 'wrap', marginBottom: 18 }}>
        <h2 style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontSize: 'clamp(64px, 8vw, 112px)', lineHeight: 0.95, fontWeight: 400,
          color: color,
        }}>{cat}</h2>
        <div style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontSize: 'clamp(22px, 2.4vw, 32px)', lineHeight: 1.1,
          color: 'var(--ink-bright)', maxWidth: 700,
        }}>{d.tagline[lang]}</div>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: d.points.length >= 4 ? '1fr 1fr' : '1fr',
        gap: 14,
      }}>
        {d.points.map((p, i) => (
          <div key={i} style={{
            background: 'oklch(0.13 0.05 268 / 0.7)',
            border: `1px solid color-mix(in oklch, ${color} 45%, transparent)`,
            borderRadius: 16,
            padding: '22px 24px',
            display: 'flex', gap: 16, alignItems: 'flex-start',
            animation: `demIn .5s ease ${i * 0.08}s both`,
          }}>
            <div style={{
              flexShrink: 0,
              width: 38, height: 38, borderRadius: '50%',
              background: `linear-gradient(135deg, ${color}, color-mix(in oklch, ${color} 60%, oklch(0.99 0.02 80)))`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: '"Cormorant Garamond", serif', fontSize: 18,
              color: 'oklch(0.10 0.04 60)', fontWeight: 500,
              boxShadow: `0 0 14px ${color.replace(')', ' / 0.5)')}`,
            }}>{i + 1}</div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{
                fontFamily: '"Cormorant Garamond", serif', fontSize: 22,
                lineHeight: 1.15, color: 'var(--ink-bright)', marginBottom: 6,
              }}>{lang === 'de' ? p.de : p.en}</div>
              <div style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.45 }}>
                {p.desc[lang]}
              </div>
            </div>
          </div>
        ))}
      </div>
      <style>{`@keyframes demIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }`}</style>
    </div>
  );
}

function EventsSlide({ t, lang, data, n = '10' }) {
  const fmtDate = (d) => new Date(d).toLocaleDateString(
    lang === 'de' ? 'de-AT' : 'en-GB',
    { day: '2-digit', month: 'long', year: 'numeric' }
  );
  const today = new Date(); today.setHours(0, 0, 0, 0);
  const election = data.electionDate;
  const daysToElection = Math.max(0, Math.round((election - today) / 86400000));

  return (
    <div style={{ ...slideMax, width: '100%' }}>
      <div className="eyebrow" style={{ marginBottom: 12 }}>{`${n} · Events`}</div>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 28, gap: 24, flexWrap: 'wrap' }}>
        <h2 style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 1.05, fontWeight: 400,
        }}>
          {lang === 'de' ? 'Was als nächstes passiert' : "What's coming next"}
        </h2>
        <div style={{
          padding: '14px 22px', borderRadius: 18,
          background: 'linear-gradient(135deg, oklch(0.84 0.15 82 / 0.22), oklch(0.62 0.20 305 / 0.18))',
          border: '1px solid oklch(0.84 0.15 82 / 0.5)',
          textAlign: 'right',
        }}>
          <div style={{ fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--gold)' }}>
            {lang === 'de' ? 'Bis zum Wahltag' : 'Until election day'}
          </div>
          <div style={{
            fontFamily: '"Cormorant Garamond", serif', fontSize: 48, lineHeight: 1,
            color: 'var(--ink-bright)', marginTop: 4,
          }}>{daysToElection} <span style={{ fontSize: 20, color: 'var(--ink-soft)' }}>{lang === 'de' ? 'Tage' : 'days'}</span></div>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {data.events.map((ev, i) => {
          const date = new Date(ev.date);
          return (
            <div key={i} className="card" style={{
              padding: '18px 22px',
              display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 20, alignItems: 'center',
              ...(ev.highlight && {
                background: 'linear-gradient(135deg, oklch(0.84 0.15 82 / 0.18), oklch(0.20 0.06 263 / 0.55))',
                borderColor: 'oklch(0.84 0.15 82 / 0.5)',
              }),
            }}>
              <div style={{
                width: 64, height: 64, borderRadius: 12,
                background: ev.highlight
                  ? 'linear-gradient(135deg, oklch(0.84 0.15 82), oklch(0.72 0.17 45))'
                  : 'oklch(0.20 0.07 280 / 0.7)',
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                border: '1px solid var(--line)',
              }}>
                <div style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 28, lineHeight: 1, color: ev.highlight ? 'oklch(0.18 0.05 60)' : 'var(--ink-bright)' }}>
                  {date.getDate()}
                </div>
                <div style={{ fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: ev.highlight ? 'oklch(0.18 0.05 60)' : 'var(--ink-mute)' }}>
                  {date.toLocaleDateString(lang === 'de' ? 'de-AT' : 'en-GB', { month: 'short' })}
                </div>
              </div>
              <div>
                <div style={{ fontSize: 20, fontWeight: 500, marginBottom: 3 }}>
                  {lang === 'de' ? ev.titleDe : ev.titleEn}
                  {ev.highlight && <span style={{ marginLeft: 10, color: 'var(--gold)', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase' }}>★ {lang === 'de' ? 'Wahltag' : 'Election'}</span>}
                </div>
                <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{ev.location[lang]}</div>
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-mute)', whiteSpace: 'nowrap' }}>{fmtDate(ev.date)}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { Pitch });