// Events: cosmic timeline / orbit + countdown
function useCountdown(target) {
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target.getTime() - now);
  return {
    days: Math.floor(diff / 86400000),
    hours: Math.floor((diff % 86400000) / 3600000),
    minutes: Math.floor((diff % 3600000) / 60000),
    seconds: Math.floor((diff % 60000) / 1000),
    raw: diff,
  };
}

function EventsSection({ t, lang }) {
  const { electionDate, events } = window.AstroniaData;
  const c = useCountdown(electionDate);
  const [focused, setFocused] = React.useState(() => {
    const i = events.findIndex(e => e.highlight);
    return i >= 0 ? i : 0;
  });

  const fmtDate = (d) => new Date(d).toLocaleDateString(
    lang === 'de' ? 'de-AT' : 'en-GB',
    { day: '2-digit', month: 'long', year: 'numeric' }
  );

  return (
    <section className="section">
      <div className="eyebrow">{t('eventsEyebrow')}</div>
      <h2 style={{ fontSize: 'clamp(40px, 6vw, 72px)', lineHeight: 1.05, marginBottom: 18 }}>
        {t('eventsTitle')}
      </h2>
      <p style={{ fontSize: 17, color: 'var(--ink-soft)', maxWidth: 640, marginBottom: 32 }}>
        {t('eventsLead')}
      </p>

      {/* === Hero countdown === */}
      <CountdownHero c={c} t={t} fmtDate={fmtDate} target={electionDate} />

      {/* === Cosmic timeline === */}
      <div style={{ marginTop: 56 }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          flexWrap: 'wrap', gap: 16, marginBottom: 8,
        }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--ink-soft)' }}>
              {lang === 'de' ? 'Unsere Reise durchs All' : 'Our journey through space'}
            </div>
            <div style={{
              fontFamily: '"Cormorant Garamond", serif',
              fontSize: 'clamp(22px, 2.4vw, 30px)', lineHeight: 1.2, marginTop: 6,
            }}>
              {lang === 'de' ? 'Klick dich durch unsere Stationen' : 'Click through our stops'}
            </div>
          </div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '8px 16px', borderRadius: 999,
            background: 'oklch(0.84 0.15 82 / 0.12)',
            border: '1px solid oklch(0.84 0.15 82 / 0.45)',
            color: 'var(--gold)', fontSize: 12, fontWeight: 500,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            animation: 'ctaGlow 2.4s ease-in-out infinite',
          }}>
            <span style={{
              display: 'inline-block', width: 18, height: 18, borderRadius: '50%',
              background: 'radial-gradient(circle, oklch(0.99 0.02 80) 0%, oklch(0.84 0.15 82) 60%, transparent 80%)',
              boxShadow: '0 0 10px oklch(0.84 0.15 82 / 0.8)',
            }}></span>
            {lang === 'de' ? 'Tippe einen Stern an' : 'Tap a star'}
          </div>
        </div>

        <CosmicTimeline events={events} focused={focused} setFocused={setFocused} lang={lang} />

        {/* Stepper controls */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 12, marginTop: -12, marginBottom: 18, flexWrap: 'wrap',
        }}>
          <button className="btn"
            onClick={() => setFocused(f => (f - 1 + events.length) % events.length)}
            style={{ padding: '10px 18px', fontSize: 13 }}>
            ← {lang === 'de' ? 'Vorheriges' : 'Previous'}
          </button>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            {events.map((_, i) => (
              <button key={i}
                onClick={() => setFocused(i)}
                aria-label={`Event ${i + 1}`}
                style={{
                  width: focused === i ? 28 : 8, height: 8, borderRadius: 999,
                  border: 'none', cursor: 'pointer', padding: 0,
                  background: focused === i ? 'var(--gold)' : 'oklch(0.40 0.06 270 / 0.6)',
                  transition: 'all .3s ease',
                  boxShadow: focused === i ? '0 0 10px oklch(0.84 0.15 82 / 0.6)' : 'none',
                }} />
            ))}
            <span style={{
              marginLeft: 12, fontSize: 12, color: 'var(--ink-mute)',
              letterSpacing: '0.18em', fontVariantNumeric: 'tabular-nums',
            }}>
              {String(focused + 1).padStart(2, '0')} / {String(events.length).padStart(2, '0')}
            </span>
          </div>
          <button className="btn btn-primary"
            onClick={() => setFocused(f => (f + 1) % events.length)}
            style={{ padding: '10px 18px', fontSize: 13 }}>
            {lang === 'de' ? 'Nächstes' : 'Next'} →
          </button>
        </div>

        {/* Featured event detail panel */}
        <EventDetail ev={events[focused]} lang={lang} fmtDate={fmtDate} t={t} />
      </div>

      <style>{`
        @keyframes ctaGlow {
          0%, 100% { box-shadow: 0 0 0 0 oklch(0.84 0.15 82 / 0.4); }
          50% { box-shadow: 0 0 0 10px oklch(0.84 0.15 82 / 0); }
        }
      `}</style>
    </section>
  );
}

function SaturnArt() {
  return (
    <div style={{
      position: 'relative', width: '100%', height: '100%',
      animation: 'saturnBob 7s ease-in-out infinite',
    }}>
      <svg viewBox="-100 -100 200 200" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', overflow: 'visible' }}>
        <defs>
          {/* Astronia-logo blue planet body — deep navy with subtle highlight */}
          <radialGradient id="planetBody" cx="0.32" cy="0.30" r="0.95">
            <stop offset="0" stopColor="oklch(0.42 0.10 268)" />
            <stop offset="0.35" stopColor="oklch(0.30 0.10 268)" />
            <stop offset="0.75" stopColor="oklch(0.20 0.10 268)" />
            <stop offset="1" stopColor="oklch(0.13 0.08 268)" />
          </radialGradient>
          <linearGradient id="bandGrad" x1="0" x2="1">
            <stop offset="0" stopColor="oklch(0.55 0.10 268 / 0)" />
            <stop offset="0.5" stopColor="oklch(0.55 0.10 268 / 0.45)" />
            <stop offset="1" stopColor="oklch(0.55 0.10 268 / 0)" />
          </linearGradient>
          <radialGradient id="planetGlow" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0" stopColor="oklch(0.55 0.18 270 / 0.55)" />
            <stop offset="1" stopColor="oklch(0.55 0.18 270 / 0)" />
          </radialGradient>
          <clipPath id="planetClip">
            <circle cx="0" cy="0" r="44" />
          </clipPath>
        </defs>

        {/* Outer aura glow — soft violet/blue like the logo background */}
        <circle cx="0" cy="0" r="80" fill="url(#planetGlow)" />

        {/* Back half of rings (thin white lines, like the logo's hand-drawn rings) */}
        <g transform="rotate(-20)">
          <ellipse cx="0" cy="0" rx="78" ry="13" fill="none"
            stroke="oklch(0.96 0.02 270 / 0.7)" strokeWidth="1.2"
            strokeDasharray="180 360"
            style={{ animation: 'ringSpin 18s linear infinite' }} />
          <ellipse cx="0" cy="0" rx="86" ry="15" fill="none"
            stroke="oklch(0.96 0.02 270 / 0.35)" strokeWidth="0.8"
            strokeDasharray="60 200" />
          <ellipse cx="0" cy="0" rx="70" ry="11" fill="none"
            stroke="oklch(0.96 0.02 270 / 0.4)" strokeWidth="0.6"
            strokeDasharray="30 70" />
        </g>

        {/* Planet body — deep Astronia navy (rotates) */}
        <g style={{ animation: 'planetSpin 28s linear infinite' }}>
          <circle cx="0" cy="0" r="44" fill="url(#planetBody)" />
          <g clipPath="url(#planetClip)">
            <ellipse cx="-10" cy="-18" rx="60" ry="3" fill="url(#bandGrad)" opacity="0.5" />
            <ellipse cx="6" cy="-6" rx="60" ry="2" fill="url(#bandGrad)" opacity="0.35" />
            <ellipse cx="-4" cy="8" rx="60" ry="4" fill="url(#bandGrad)" opacity="0.45" />
            <ellipse cx="4" cy="22" rx="60" ry="2.5" fill="url(#bandGrad)" opacity="0.4" />
          </g>
          {/* Soft shadow side */}
          <g clipPath="url(#planetClip)">
            <circle cx="14" cy="6" r="44" fill="oklch(0.08 0.05 268 / 0.45)" />
          </g>
        </g>

        {/* Stationary "ASTRONIA" wordmark — sits like a nameplate, doesn't spin */}
        <g style={{ filter: 'drop-shadow(0 1px 4px oklch(0.08 0.05 268 / 0.6))' }}>
          <text x="0" y="3" textAnchor="middle"
            style={{
              fontFamily: '"Cormorant Garamond", serif',
              fontSize: 11, letterSpacing: '0.34em',
              fill: 'oklch(0.99 0.02 270 / 0.95)',
              fontWeight: 500,
            }}>
            ASTRONIA
          </text>
          <line x1="-30" y1="9" x2="30" y2="9" stroke="oklch(0.99 0.02 270 / 0.55)" strokeWidth="0.5" />
          <line x1="-26" y1="-7" x2="26" y2="-7" stroke="oklch(0.99 0.02 270 / 0.45)" strokeWidth="0.4" />
        </g>

        {/* Front half of rings */}
        <g transform="rotate(-20)">
          <path d="M -78 0 A 78 13 0 0 0 78 0"
            fill="none" stroke="oklch(0.96 0.02 270 / 0.85)" strokeWidth="1.2" />
          <path d="M -86 0 A 86 15 0 0 0 86 0"
            fill="none" stroke="oklch(0.96 0.02 270 / 0.4)" strokeWidth="0.8" />
          <path d="M -70 0 A 70 11 0 0 0 70 0"
            fill="none" stroke="oklch(0.96 0.02 270 / 0.5)" strokeWidth="0.6" />
        </g>

        {/* Small comet/star on the ring — references the logo's tiny shooting star */}
        <g style={{ animation: 'moonOrbit 11s linear infinite', transformOrigin: '0 0' }}>
          <g transform="translate(80 -8)">
            <circle cx="0" cy="0" r="2.4" fill="oklch(0.99 0.02 80)"
              style={{ filter: 'drop-shadow(0 0 5px oklch(0.96 0.02 270))' }} />
            {/* 4-point sparkle flares */}
            <line x1="-5" y1="0" x2="5" y2="0" stroke="oklch(0.99 0.02 80 / 0.7)" strokeWidth="0.4" />
            <line x1="0" y1="-5" x2="0" y2="5" stroke="oklch(0.99 0.02 80 / 0.7)" strokeWidth="0.4" />
          </g>
        </g>

        {/* Twinkles around — white, like the logo's surrounding stars */}
        {[[-72, -55], [70, -50], [-86, 30], [80, 60], [-30, -82], [-60, 70], [90, 30]].map(([cx, cy], i) => (
          <g key={i} style={{ animation: `twinkleAlt ${3 + (i % 4)}s ease-in-out ${i * 0.5}s infinite` }}>
            <circle cx={cx} cy={cy} r={i % 2 ? 1.4 : 1} fill="oklch(0.99 0.02 80)" />
            <line x1={cx - 3} y1={cy} x2={cx + 3} y2={cy} stroke="oklch(0.99 0.02 80 / 0.6)" strokeWidth="0.3" />
            <line x1={cx} y1={cy - 3} x2={cx} y2={cy + 3} stroke="oklch(0.99 0.02 80 / 0.6)" strokeWidth="0.3" />
          </g>
        ))}
      </svg>
      <style>{`
        @keyframes saturnBob {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
        @keyframes planetSpin { to { transform: rotate(360deg); } }
        @keyframes ringSpin { to { stroke-dashoffset: -560; } }
        @keyframes moonOrbit { to { transform: rotate(360deg); } }
        @keyframes twinkleAlt { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
      `}</style>
    </div>
  );
}

function CountdownHero({ c, t, fmtDate, target }) {
  return (
    <div style={{
      position: 'relative',
      borderRadius: 28,
      overflow: 'hidden',
      padding: 'clamp(32px, 4vw, 56px)',
      background:
        'radial-gradient(ellipse at 80% 20%, oklch(0.30 0.16 60 / 0.45), transparent 55%),' +
        'radial-gradient(ellipse at 15% 85%, oklch(0.28 0.18 305 / 0.40), transparent 60%),' +
        'linear-gradient(135deg, oklch(0.16 0.06 268 / 0.85), oklch(0.13 0.05 285 / 0.85))',
      border: '1px solid oklch(0.84 0.15 82 / 0.4)',
    }}>
      {/* Animated Saturn — kept fully inside the hero so rings/aura aren't clipped */}
      <div style={{
        position: 'absolute', right: 'clamp(16px, 2vw, 28px)', top: '50%',
        transform: 'translateY(-50%)',
        width: 'clamp(160px, 20vw, 260px)',
        aspectRatio: '1 / 1',
        pointerEvents: 'none',
      }}>
        <SaturnArt />
      </div>

      <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', gap: 24, maxWidth: '64%' }}>
        <div style={{
          fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
          color: 'var(--gold)', display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ animation: 'pulse 2s ease-in-out infinite' }}>✦</span>
          {t('countdownLabel')}
          <span style={{ color: 'var(--ink-mute)', letterSpacing: '0.18em' }}>· {fmtDate(target)}</span>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
          gap: 12,
          maxWidth: 720,
        }}>
          <FlipUnit n={c.days} label={t('days')} />
          <FlipUnit n={c.hours} label={t('hours')} />
          <FlipUnit n={c.minutes} label={t('minutes')} />
          <FlipUnit n={c.seconds} label={t('seconds')} />
        </div>
      </div>

      <style>{`
        @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } }
        @keyframes flipIn { from { transform: rotateX(-90deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }
      `}</style>
    </div>
  );
}

function FlipUnit({ n, label }) {
  return (
    <div style={{
      background: 'oklch(0.10 0.04 268 / 0.7)',
      border: '1px solid oklch(0.40 0.08 270 / 0.4)',
      borderRadius: 16,
      padding: '20px 8px 16px',
      textAlign: 'center',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        height: '50%',
        background: 'linear-gradient(to bottom, oklch(1 0 0 / 0.04), transparent)',
        pointerEvents: 'none',
      }} />
      <div key={n} style={{
        fontFamily: '"Cormorant Garamond", serif',
        fontSize: 'clamp(40px, 6vw, 64px)',
        lineHeight: 1, fontWeight: 400,
        color: 'var(--ink-bright)',
        fontVariantNumeric: 'tabular-nums',
        animation: 'flipIn .5s cubic-bezier(.2,.7,.2,1)',
        transformStyle: 'preserve-3d',
      }}>{String(n).padStart(2, '0')}</div>
      <div style={{
        fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
        color: 'var(--ink-mute)', marginTop: 10,
      }}>{label}</div>
    </div>
  );
}

function CosmicTimeline({ events, focused, setFocused, lang }) {
  return (
    <div style={{
      position: 'relative',
      marginTop: 16,
      marginBottom: 32,
    }}>
      {/* Orbit path — covers the same area as the scroll container */}
      <svg viewBox="0 0 1000 120" preserveAspectRatio="none" style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%', pointerEvents: 'none',
      }}>
        <defs>
          <linearGradient id="orbitGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="oklch(0.84 0.15 82)" stopOpacity="0" />
            <stop offset="0.15" stopColor="oklch(0.84 0.15 82)" stopOpacity="0.5" />
            <stop offset="0.85" stopColor="oklch(0.65 0.20 305)" stopOpacity="0.5" />
            <stop offset="1" stopColor="oklch(0.65 0.20 305)" stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d="M 20 80 Q 250 10, 500 60 T 980 50"
          fill="none" stroke="url(#orbitGrad)" strokeWidth="1.2"
          strokeDasharray="4 6" />
      </svg>

      {/* Scroll container — generous vertical padding so planet pulse + glow + node offsets don't clip */}
      <div style={{
        position: 'relative',
        display: 'flex',
        justifyContent: 'space-between',
        gap: 8,
        flexWrap: 'nowrap',
        overflowX: 'auto',
        overflowY: 'hidden',
        padding: '50px 4px 30px',
        scrollbarWidth: 'thin',
      }}>
        {events.map((ev, i) => (
          <TimelineNode
            key={i}
            ev={ev}
            i={i}
            total={events.length}
            active={focused === i}
            onClick={() => setFocused(i)}
            lang={lang}
          />
        ))}
      </div>
    </div>
  );
}

function TimelineNode({ ev, i, total, active, onClick, lang }) {
  const date = new Date(ev.date);
  const day = ev.tbd ? '—' : date.getDate();
  const month = ev.tbd ? (lang === 'de' ? 'TBD' : 'TBA') : date.toLocaleDateString(lang === 'de' ? 'de-AT' : 'en-GB', { month: 'short' });
  const [hov, setHov] = React.useState(false);

  // Slight vertical offset for orbit feel
  const offset = [4, -10, 6, -4][i % 4];

  return (
    <button onClick={onClick}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      title={lang === 'de' ? 'Klicken für Details' : 'Click for details'}
      style={{
      background: 'transparent', border: 'none', cursor: 'pointer',
      padding: '4px 6px',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
      minWidth: 110, flex: '1 1 0',
      transform: `translateY(${offset + (hov && !active ? -6 : 0)}px)`,
      transition: 'transform .3s ease',
      position: 'relative',
    }}>
      {/* Top label */}
      <div style={{
        fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
        color: active ? 'var(--gold)' : 'var(--ink-mute)',
        fontWeight: 500, transition: 'color .25s ease',
      }}>
        {day} {month}
      </div>

      {/* Planet/star node */}
      <div style={{
        position: 'relative',
        width: active ? 56 : 42, height: active ? 56 : 42,
        transition: 'all .35s cubic-bezier(.2,.9,.2,1)',
      }}>
        {ev.highlight ? (
          <PlanetNode active={active} />
        ) : (
          <StarNode active={active} hue={['gold', 'violet', 'orange'][i % 3]} />
        )}
      </div>

      {/* Title */}
      <div style={{
        fontFamily: '"Cormorant Garamond", serif',
        fontSize: 14, lineHeight: 1.2, textAlign: 'center',
        color: active ? 'var(--ink-bright)' : (hov ? 'var(--gold)' : 'var(--ink-soft)'),
        maxWidth: 130, fontWeight: 500,
        transition: 'color .25s ease',
      }}>
        {lang === 'de' ? ev.titleDe : ev.titleEn}
      </div>
      {/* Click hint chevron under non-active nodes */}
      {!active && (
        <div style={{
          fontSize: 10, color: hov ? 'var(--gold)' : 'var(--ink-mute)',
          letterSpacing: '0.2em', textTransform: 'uppercase',
          opacity: hov ? 1 : 0.5, transition: 'all .25s ease',
        }}>↓ {lang === 'de' ? 'Details' : 'details'}</div>
      )}
    </button>
  );
}

function PlanetNode({ active }) {
  // Saturn-style planet with proper inclined ring drawn in SVG.
  return (
    <svg viewBox="-50 -50 100 100" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', overflow: 'visible' }}>
      <defs>
        <radialGradient id="planet-body" cx="0.32" cy="0.30" r="0.85">
          <stop offset="0" stopColor="oklch(0.96 0.10 85)" />
          <stop offset="0.55" stopColor="oklch(0.78 0.18 60)" />
          <stop offset="1" stopColor="oklch(0.45 0.18 35)" />
        </radialGradient>
        <linearGradient id="ring-grad" x1="0" x2="1">
          <stop offset="0" stopColor="oklch(0.84 0.15 82 / 0)" />
          <stop offset="0.4" stopColor="oklch(0.84 0.15 82)" />
          <stop offset="0.6" stopColor="oklch(0.99 0.02 80)" />
          <stop offset="1" stopColor="oklch(0.84 0.15 82 / 0)" />
        </linearGradient>
        <clipPath id="ring-front-clip"><rect x="-50" y="0" width="100" height="50" /></clipPath>
        <clipPath id="ring-back-clip"><rect x="-50" y="-50" width="100" height="50" /></clipPath>
        <clipPath id="planet-clip-front"><circle r="22" cx="0" cy="0" /></clipPath>
      </defs>
      {/* glow */}
      {active && <circle r="38" fill="oklch(0.84 0.15 82 / 0.18)" />}
      <g transform="rotate(-18)">
        {/* Back half of ring */}
        <g clipPath="url(#ring-back-clip)">
          <ellipse rx="36" ry="9" fill="none" stroke="url(#ring-grad)" strokeWidth={active ? 2.5 : 2} opacity={active ? 1 : 0.75} />
          <ellipse rx="32" ry="8" fill="none" stroke="oklch(0.99 0.02 80 / 0.6)" strokeWidth="0.8" />
        </g>
        {/* Body */}
        <circle r="22" fill="url(#planet-body)" />
        {/* atmospheric bands */}
        <g clipPath="url(#planet-clip-front)">
          <ellipse cx="-2" cy="-8" rx="30" ry="1.5" fill="oklch(0.99 0.02 80 / 0.35)" />
          <ellipse cx="0" cy="-2" rx="30" ry="1" fill="oklch(0.45 0.18 35 / 0.4)" />
          <ellipse cx="2" cy="6" rx="30" ry="2" fill="oklch(0.99 0.02 80 / 0.28)" />
          <ellipse cx="0" cy="12" rx="30" ry="1.2" fill="oklch(0.45 0.18 35 / 0.35)" />
          {/* night side shading */}
          <circle cx="6" cy="3" r="22" fill="oklch(0.10 0.05 60 / 0.4)" />
        </g>
        {/* Front half of ring (passes in front of planet) */}
        <g clipPath="url(#ring-front-clip)">
          <ellipse rx="36" ry="9" fill="none" stroke="url(#ring-grad)" strokeWidth={active ? 2.5 : 2} />
          <ellipse rx="32" ry="8" fill="none" stroke="oklch(0.99 0.02 80 / 0.7)" strokeWidth="0.8" />
        </g>
      </g>
      {/* Active pulse */}
      {active && (
        <circle r="26" fill="none" stroke="oklch(0.84 0.15 82)" strokeWidth="1"
          style={{ animation: 'planetPulse 2s ease-out infinite', transformOrigin: 'center' }} />
      )}
      <style>{`
        @keyframes planetPulse {
          0% { transform: scale(0.85); opacity: 0.9; }
          100% { transform: scale(1.7); opacity: 0; }
        }
      `}</style>
    </svg>
  );
}

function StarNode({ active, hue }) {
  const colors = {
    gold:   { core: 'oklch(0.99 0.02 80)', mid: 'oklch(0.84 0.15 82)', outer: 'oklch(0.65 0.18 65)' },
    violet: { core: 'oklch(0.99 0.02 80)', mid: 'oklch(0.65 0.20 305)', outer: 'oklch(0.40 0.18 290)' },
    orange: { core: 'oklch(0.99 0.02 80)', mid: 'oklch(0.72 0.17 45)', outer: 'oklch(0.50 0.18 35)' },
  };
  const c = colors[hue] || colors.gold;
  // 4-point star (sparkle) — concave kite shape, the recognisable "twinkle star"
  return (
    <svg viewBox="-50 -50 100 100" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', overflow: 'visible' }}>
      <defs>
        <radialGradient id={`star-grad-${hue}`} cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor={c.core} />
          <stop offset="0.45" stopColor={c.mid} />
          <stop offset="1" stopColor={c.outer} stopOpacity="0.4" />
        </radialGradient>
      </defs>
      {/* Outer glow halo */}
      <circle r={active ? 36 : 26} fill={`url(#star-grad-${hue})`} opacity={active ? 0.55 : 0.35} />
      {/* Cross flares (only on active) */}
      {active && (
        <g stroke={c.mid} strokeWidth="1" strokeLinecap="round" opacity="0.85">
          <line x1="-44" y1="0" x2="44" y2="0" />
          <line x1="0" y1="-44" x2="0" y2="44" />
          <line x1="-30" y1="-30" x2="30" y2="30" opacity="0.5" />
          <line x1="-30" y1="30" x2="30" y2="-30" opacity="0.5" />
        </g>
      )}
      {/* 4-point sparkle (classic concave kite) */}
      <path
        d="M 0 -28 Q 4 -4, 28 0 Q 4 4, 0 28 Q -4 4, -28 0 Q -4 -4, 0 -28 Z"
        fill={c.mid}
        style={{
          filter: `drop-shadow(0 0 ${active ? 6 : 3}px ${c.mid})`,
          transformOrigin: 'center',
          animation: active ? 'starPulse 2.4s ease-in-out infinite' : 'none',
        }}
      />
      {/* Inner bright core */}
      <path
        d="M 0 -14 Q 2 -2, 14 0 Q 2 2, 0 14 Q -2 2, -14 0 Q -2 -2, 0 -14 Z"
        fill={c.core}
      />
      <style>{`
        @keyframes starPulse {
          0%, 100% { transform: scale(1); opacity: 1; }
          50% { transform: scale(1.08); opacity: 0.85; }
        }
      `}</style>
    </svg>
  );
}

// ===== Rich event detail =====
function EventDetail({ ev, lang, fmtDate, t }) {
  const [rsvp, setRsvp] = React.useState(false);
  const date = new Date(ev.date);
  const today = new Date(); today.setHours(0, 0, 0, 0);
  const evDay = new Date(date); evDay.setHours(0, 0, 0, 0);
  const daysAway = Math.round((evDay - today) / 86400000);

  const status = ev.tbd ? (lang === 'de' ? 'Termin folgt' : 'Date to be announced')
    : daysAway === 0 ? t('evDayOf')
    : daysAway < 0 ? t('evPast')
    : `${daysAway} ${lang === 'de' ? 'Tage' : 'days'} ${t('evCountdownLeft')}`;

  const onCalendar = () => {
    const start = ev.date.replace(/-/g, '');
    const dt = new Date(ev.date);
    dt.setDate(dt.getDate() + 1);
    const end = dt.toISOString().slice(0, 10).replace(/-/g, '');
    const ics = [
      'BEGIN:VCALENDAR', 'VERSION:2.0', 'PRODID:-//Astronia//EN', 'BEGIN:VEVENT',
      `UID:${ev.date}@astronia`, `DTSTAMP:${start}T000000Z`,
      `DTSTART;VALUE=DATE:${start}`, `DTEND;VALUE=DATE:${end}`,
      `SUMMARY:${lang === 'de' ? ev.titleDe : ev.titleEn}`,
      `LOCATION:${ev.location[lang]}`,
      `DESCRIPTION:${ev.desc[lang]}`,
      'END:VEVENT', 'END:VCALENDAR',
    ].join('\r\n');
    const blob = new Blob([ics], { type: 'text/calendar' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = `astronia-${ev.date}.ics`;
    a.click();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
  };

  const onShare = async () => {
    const text = `${lang === 'de' ? ev.titleDe : ev.titleEn} — ${fmtDate(ev.date)} · ${ev.location[lang]}`;
    if (navigator.share) {
      try { await navigator.share({ title: 'Astronia', text }); } catch {}
    } else {
      navigator.clipboard?.writeText(text);
    }
  };

  return (
    <div key={ev.date} className="card" style={{
      padding: 0, overflow: 'hidden',
      animation: 'sectionIn .45s ease',
      ...(ev.highlight ? {
        background: 'linear-gradient(135deg, oklch(0.84 0.15 82 / 0.10), oklch(0.16 0.06 268 / 0.85))',
        borderColor: 'oklch(0.84 0.15 82 / 0.55)',
        boxShadow: '0 0 60px -10px oklch(0.84 0.15 82 / 0.3)',
      } : {}),
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(260px, 1.4fr) minmax(240px, 1fr)',
        gap: 0,
      }}>
        {/* === LEFT — Hero visual + content === */}
        <div style={{
          position: 'relative',
          padding: 'clamp(28px, 3vw, 44px)',
          borderRight: '1px solid var(--line)',
          minHeight: 380,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        }}>
          {/* Decorative scene specific to event */}
          <EventScene icon={ev.icon} highlight={ev.highlight} />

          <div style={{ position: 'relative', zIndex: 1 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 14px', borderRadius: 999,
              background: ev.highlight ? 'oklch(0.84 0.15 82 / 0.20)' : 'oklch(0.65 0.20 305 / 0.18)',
              border: `1px solid ${ev.highlight ? 'oklch(0.84 0.15 82 / 0.55)' : 'oklch(0.65 0.20 305 / 0.5)'}`,
              fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
              color: ev.highlight ? 'var(--gold)' : 'oklch(0.85 0.14 305)',
              marginBottom: 18,
            }}>
              <span style={{ animation: 'pulse 2s ease-in-out infinite' }}>✦</span>
              {ev.tag ? ev.tag[lang] : (ev.highlight ? (lang === 'de' ? 'Wahltag' : 'Election Day') : (lang === 'de' ? 'Veranstaltung' : 'Event'))}
            </div>

            <h3 style={{
              fontFamily: '"Cormorant Garamond", serif',
              fontSize: 'clamp(28px, 3.4vw, 42px)', lineHeight: 1.05,
              fontWeight: 400, marginBottom: 14,
              maxWidth: 520,
            }}>
              {lang === 'de' ? ev.titleDe : ev.titleEn}
            </h3>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 520, marginBottom: 22 }}>
              {ev.desc[lang]}
            </p>
          </div>

          {/* Programm */}
          {ev.program && (
            <div style={{ position: 'relative', zIndex: 1, marginTop: 'auto' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>{t('evProgram')}</div>
              <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {ev.program[lang].map((step, i) => (
                  <li key={i} style={{
                    display: 'flex', alignItems: 'flex-start', gap: 12,
                    fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.4,
                  }}>
                    <span style={{
                      flexShrink: 0, marginTop: 5,
                      width: 6, height: 6, borderRadius: '50%',
                      background: 'var(--gold)',
                      boxShadow: '0 0 6px oklch(0.84 0.15 82 / 0.7)',
                    }}></span>
                    {step}
                  </li>
                ))}
              </ol>
            </div>
          )}
        </div>

        {/* === RIGHT — Meta + actions === */}
        <div style={{
          padding: 'clamp(24px, 2.6vw, 36px)',
          background: 'oklch(0.10 0.04 270 / 0.45)',
          display: 'flex', flexDirection: 'column', gap: 22,
        }}>
          {/* Big date block */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 16,
            paddingBottom: 18,
            borderBottom: '1px solid var(--line)',
          }}>
            <div style={{
              width: 78, height: 78, flexShrink: 0,
              borderRadius: 14,
              background: ev.highlight
                ? 'linear-gradient(135deg, oklch(0.84 0.15 82), oklch(0.72 0.17 45))'
                : 'linear-gradient(135deg, oklch(0.24 0.10 280), oklch(0.20 0.08 270))',
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              border: '1px solid var(--line-bright)',
              boxShadow: ev.highlight ? '0 0 18px oklch(0.84 0.15 82 / 0.5)' : 'none',
            }}>
              <div style={{
                fontFamily: '"Cormorant Garamond", serif', fontSize: ev.tbd ? 28 : 36, lineHeight: 1,
                color: ev.highlight ? 'oklch(0.18 0.05 60)' : 'var(--ink-bright)',
              }}>{ev.tbd ? '?' : date.getDate()}</div>
              <div style={{
                fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
                marginTop: 3,
                color: ev.highlight ? 'oklch(0.18 0.05 60)' : 'var(--ink-mute)',
              }}>{ev.tbd ? (lang === 'de' ? 'TBD' : 'TBA') : date.toLocaleDateString(lang === 'de' ? 'de-AT' : 'en-GB', { month: 'short' })}</div>
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 15, color: 'var(--ink-bright)', fontWeight: 500, marginBottom: 4 }}>
                {ev.tbd ? (lang === 'de' ? 'Datum folgt' : 'Date TBA') : fmtDate(ev.date)}
              </div>
              <div style={{
                fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: daysAway === 0 ? 'var(--gold)' : 'var(--ink-mute)',
                fontWeight: 500,
              }}>
                {daysAway === 0 && '★ '}{status}
              </div>
            </div>
          </div>

          {/* Meta rows */}
          <MetaRow icon="clock" label={t('evWhen')} value={ev.time ? ev.time[lang] : (lang === 'de' ? 'tagsüber' : 'daytime')} />
          <MetaRow icon="pin" label={t('evWhere')} value={ev.location[lang]} />
          {ev.bring && <MetaRow icon="bag" label={t('evBring')} value={ev.bring[lang]} />}
          {ev.cost && <MetaRow icon="ticket" label={t('evCost')} value={ev.cost[lang]} />}

          {/* Actions */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 'auto', paddingTop: 8 }}>
            <button className="btn btn-primary"
              onClick={() => setRsvp(r => !r)}
              style={{ justifyContent: 'center', padding: '12px 16px' }}>
              {rsvp ? t('evRsvpDone') : `${t('evRsvp')} →`}
            </button>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              <button className="btn" onClick={onCalendar} disabled={ev.tbd}
                title={ev.tbd ? (lang === 'de' ? 'Termin folgt' : 'Date to be announced') : ''}
                style={{ justifyContent: 'center', alignItems: 'center', gap: 8, padding: '10px 12px', fontSize: 13, opacity: ev.tbd ? 0.45 : 1, cursor: ev.tbd ? 'not-allowed' : 'pointer' }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="5" width="18" height="16" rx="2" />
                  <path d="M 8 3 V 7 M 16 3 V 7 M 3 10 H 21" />
                </svg>
                {t('evCalendar')}
              </button>
              <button className="btn" onClick={onShare} style={{ justifyContent: 'center', alignItems: 'center', gap: 8, padding: '10px 12px', fontSize: 13 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M 4 12 V 19 a 2 2 0 0 0 2 2 H 18 a 2 2 0 0 0 2 -2 V 12" />
                  <path d="M 16 6 L 12 2 L 8 6" />
                  <path d="M 12 2 V 15" />
                </svg>
                {t('evShare')}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function MetaIcon({ name }) {
  const stroke = 'currentColor';
  const sw = 1.6;
  const common = {
    width: 14, height: 14, viewBox: '0 0 24 24',
    fill: 'none', stroke, strokeWidth: sw,
    strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  switch (name) {
    case 'clock':
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="9" />
          <path d="M 12 7 L 12 12 L 15.5 14" />
        </svg>
      );
    case 'pin':
      return (
        <svg {...common}>
          <path d="M 12 21 C 12 21 5 14.5 5 10 a 7 7 0 0 1 14 0 c 0 4.5 -7 11 -7 11 z" />
          <circle cx="12" cy="10" r="2.5" />
        </svg>
      );
    case 'bag':
      return (
        <svg {...common}>
          <path d="M 5 8 H 19 L 18 21 H 6 L 5 8 Z" />
          <path d="M 9 8 V 6 a 3 3 0 0 1 6 0 V 8" />
        </svg>
      );
    case 'ticket':
      return (
        <svg {...common}>
          <path d="M 3 8 a 2 2 0 0 1 2 -2 H 19 a 2 2 0 0 1 2 2 V 10 a 2 2 0 0 0 0 4 V 16 a 2 2 0 0 1 -2 2 H 5 a 2 2 0 0 1 -2 -2 V 14 a 2 2 0 0 0 0 -4 Z" />
          <path d="M 10 6 V 18" strokeDasharray="2 2" />
        </svg>
      );
    default:
      return null;
  }
}

function MetaRow({ icon, label, value }) {
  return (
    <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
      <span style={{
        width: 28, height: 28, flexShrink: 0,
        borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'oklch(0.84 0.15 82 / 0.14)',
        border: '1px solid oklch(0.84 0.15 82 / 0.35)',
        color: 'var(--gold)',
      }}>
        <MetaIcon name={icon} />
      </span>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{
          fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--ink-mute)', marginBottom: 3, fontWeight: 500,
        }}>{label}</div>
        <div style={{ fontSize: 14, color: 'var(--ink-bright)', lineHeight: 1.4, wordBreak: 'break-word' }}>
          {value}
        </div>
      </div>
    </div>
  );
}

// ===== Decorative scene per event type =====
function EventScene({ icon, highlight }) {
  const gold = 'oklch(0.84 0.15 82)';
  const goldDeep = 'oklch(0.65 0.15 65)';
  const ivory = 'oklch(0.99 0.02 80)';
  const ivoryDim = 'oklch(0.99 0.02 80 / 0.7)';
  const shadow = 'oklch(0.30 0.05 60 / 0.55)';

  return (
    <svg viewBox="0 0 600 380" preserveAspectRatio="xMidYMid slice"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.92 }}>
      <defs>
        <radialGradient id={`scene-${icon}`} cx="0.7" cy="0.3" r="0.7">
          <stop offset="0" stopColor={highlight ? 'oklch(0.84 0.15 82 / 0.22)' : 'oklch(0.55 0.18 290 / 0.22)'} />
          <stop offset="1" stopColor="oklch(0.10 0.04 268 / 0)" />
        </radialGradient>
        <radialGradient id={`vb-${icon}`} cx="0.35" cy="0.30" r="0.85">
          <stop offset="0" stopColor={ivory} />
          <stop offset="0.7" stopColor="oklch(0.92 0.03 80)" />
          <stop offset="1" stopColor="oklch(0.78 0.04 80)" />
        </radialGradient>
        <linearGradient id={`stone-${icon}`} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor={ivory} />
          <stop offset="1" stopColor={goldDeep} />
        </linearGradient>
      </defs>
      <rect width="600" height="380" fill={`url(#scene-${icon})`} />
      {/* tiny stars */}
      {Array.from({ length: 24 }).map((_, i) => {
        const cx = (i * 71 + 13) % 600;
        const cy = (i * 47 + 7) % 380;
        return <circle key={i} cx={cx} cy={cy} r={i % 4 === 0 ? 1.6 : 0.9} fill={ivory} opacity={0.4 + (i % 5) * 0.1} />;
      })}
      {/* per-icon motif */}
      <g style={{ animation: 'sceneFloat 6s ease-in-out infinite', transformOrigin: '480px 100px' }}>
        {icon === 'volleyball' && (
          <g transform="translate(480 100)">
            {/* drop shadow */}
            <ellipse cx="0" cy="58" rx="40" ry="5" fill="oklch(0 0 0 / 0.35)" />
            {/* ball body with subtle shading */}
            <circle r="50" fill={`url(#vb-${icon})`} stroke={shadow} strokeWidth="0.8" />
            {/* Standard 6-panel volleyball seam pattern: 3 curves emanating from one pole */}
            <g fill="none" stroke={shadow} strokeWidth="1.6" strokeLinecap="round">
              {/* Top "Y" of seams meeting near upper-right pole */}
              <path d="M 18 -47 C 8 -30, -2 -10, -50 -2" />
              <path d="M 18 -47 C 26 -28, 38 -8, 50 12" />
              <path d="M 18 -47 C 14 -22, 10 6, -8 50" />
              {/* Bottom "Y" of seams meeting near lower-left pole (offset 180°) */}
              <path d="M -18 47 C -8 30, 2 10, 50 2" />
              <path d="M -18 47 C -26 28, -38 8, -50 -12" />
              <path d="M -18 47 C -14 22, -10 -6, 8 -50" />
            </g>
            {/* highlight */}
            <ellipse cx="-18" cy="-22" rx="14" ry="9" fill={ivory} opacity="0.55" />
          </g>
        )}
        {icon === 'parliament' && (
          <g transform="translate(480 110)">
            {/* drop shadow */}
            <ellipse cx="0" cy="62" rx="80" ry="5" fill="oklch(0 0 0 / 0.35)" />
            {/* Stylobate / steps */}
            <rect x="-78" y="48" width="156" height="6" fill={ivory} />
            <rect x="-72" y="42" width="144" height="6" fill={ivoryDim} />
            <rect x="-66" y="36" width="132" height="6" fill={ivory} />
            {/* Column row — 8 Corinthian columns of the Hohes Haus */}
            {[-56, -40, -24, -8, 8, 24, 40, 56].map((x, i) => (
              <g key={i}>
                {/* capital */}
                <rect x={x - 5} y="-22" width="10" height="3" fill={ivory} />
                {/* shaft with subtle fluting via inner stroke */}
                <rect x={x - 4} y="-19" width="8" height="55" fill={`url(#stone-${icon})`} />
                <line x1={x - 1} y1="-17" x2={x - 1} y2="34" stroke={shadow} strokeWidth="0.4" opacity="0.6" />
                <line x1={x + 1} y1="-17" x2={x + 1} y2="34" stroke={shadow} strokeWidth="0.4" opacity="0.6" />
                {/* base */}
                <rect x={x - 5} y="34" width="10" height="3" fill={ivory} />
              </g>
            ))}
            {/* Architrave / entablature */}
            <rect x="-72" y="-26" width="144" height="5" fill={ivory} />
            <rect x="-72" y="-32" width="144" height="6" fill={ivoryDim} />
            {/* Pediment */}
            <path d="M -78 -32 L 0 -68 L 78 -32 Z" fill={ivory} stroke={shadow} strokeWidth="0.5" />
            {/* Tympanum relief — central figure suggestion */}
            <circle cx="0" cy="-44" r="3.5" fill={gold} />
            <path d="M -3 -41 L -10 -33 M 3 -41 L 10 -33" stroke={gold} strokeWidth="1" />
            {/* Acroteria (corner ornaments) */}
            <circle cx="-78" cy="-32" r="2" fill={gold} />
            <circle cx="78" cy="-32" r="2" fill={gold} />
            <circle cx="0" cy="-68" r="2.5" fill={gold} />
            {/* Pallas-Athene fountain in front — column with statue + basin */}
            <g transform="translate(0 64)">
              {/* basin */}
              <ellipse cx="0" cy="14" rx="22" ry="3" fill={ivoryDim} />
              <path d="M -22 14 Q 0 22, 22 14" fill="none" stroke={ivory} strokeWidth="1" />
              {/* pedestal */}
              <rect x="-3" y="0" width="6" height="14" fill={ivory} />
              {/* Athena silhouette: helmeted figure */}
              <circle cx="0" cy="-6" r="3" fill={gold} />
              <rect x="-2.5" y="-3" width="5" height="6" fill={gold} />
              {/* helmet plume */}
              <path d="M 0 -9 L -1.5 -12 L 1.5 -12 Z" fill={gold} />
            </g>
          </g>
        )}
        {icon === 'budapest' && (
          <g transform="translate(480 110)">
            {/* moon over the Danube */}
            <circle cx="-90" cy="-50" r="12" fill={ivory} opacity="0.95" />
            <circle cx="-85" cy="-54" r="11" fill="oklch(0.10 0.04 268)" opacity="0.4" />
            {/* drop shadow */}
            <ellipse cx="0" cy="64" rx="100" ry="4" fill="oklch(0 0 0 / 0.35)" />
            {/* Bridge deck */}
            <rect x="-100" y="42" width="200" height="3" fill={ivory} />
            <rect x="-100" y="45" width="200" height="2" fill={ivoryDim} />
            {/* Cable suspenders (verticals from chain to deck) */}
            {(() => {
              const xs = [];
              for (let x = -90; x <= 90; x += 8) xs.push(x);
              return xs.map((x, i) => {
                // catenary y from arches: between towers chain dips, outside towers chain rises to abutments
                let chainY;
                if (x < -56) chainY = -10 + (x + 56) * 0.3; // left abutment slope
                else if (x > 56) chainY = -10 - (x - 56) * 0.3; // right abutment slope
                else chainY = -28 + (x * x) * 0.012; // central catenary, dips at midspan
                return <line key={i} x1={x} y1={chainY} x2={x} y2="42"
                  stroke={ivoryDim} strokeWidth="0.5" />;
              });
            })()}
            {/* Two main chain catenaries — between the towers and out to abutments */}
            <path d="M -100 8 Q -78 -2, -56 -10" fill="none" stroke={gold} strokeWidth="1.6" />
            <path d="M -56 -10 Q 0 -42, 56 -10" fill="none" stroke={gold} strokeWidth="1.6" />
            <path d="M 56 -10 Q 78 -2, 100 8" fill="none" stroke={gold} strokeWidth="1.6" />
            {/* Second chain (parallel, slightly offset for depth) */}
            <path d="M -100 11 Q -78 1, -56 -7" fill="none" stroke={goldDeep} strokeWidth="1.2" opacity="0.7" />
            <path d="M -56 -7 Q 0 -38, 56 -7" fill="none" stroke={goldDeep} strokeWidth="1.2" opacity="0.7" />
            <path d="M 56 -7 Q 78 1, 100 8" fill="none" stroke={goldDeep} strokeWidth="1.2" opacity="0.7" />
            {/* Stone towers — neoclassical with arched gateway */}
            {[-56, 56].map((x, i) => (
              <g key={i} transform={`translate(${x} 0)`}>
                {/* base */}
                <rect x="-9" y="36" width="18" height="6" fill={ivory} />
                {/* shaft */}
                <rect x="-7" y="-26" width="14" height="62" fill={`url(#stone-${icon})`} />
                {/* arched gateway opening */}
                <path d="M -4 36 L -4 22 Q -4 18, 0 18 Q 4 18, 4 22 L 4 36 Z" fill="oklch(0.10 0.04 268)" />
                {/* upper arch detail */}
                <rect x="-7" y="-2" width="14" height="2" fill={shadow} opacity="0.6" />
                <rect x="-8" y="-30" width="16" height="4" fill={ivory} />
                {/* small spire/cap */}
                <rect x="-5" y="-34" width="10" height="4" fill={ivoryDim} />
              </g>
            ))}
            {/* River shimmer */}
            <line x1="-100" y1="56" x2="-60" y2="56" stroke={ivoryDim} strokeWidth="0.6" opacity="0.4" />
            <line x1="-40" y1="58" x2="20" y2="58" stroke={ivoryDim} strokeWidth="0.6" opacity="0.4" />
            <line x1="40" y1="56" x2="100" y2="56" stroke={ivoryDim} strokeWidth="0.6" opacity="0.4" />
          </g>
        )}
        {icon === 'vote' && (
          <g transform="translate(480 105)">
            {/* drop shadow */}
            <ellipse cx="0" cy="62" rx="55" ry="5" fill="oklch(0 0 0 / 0.4)" />
            {/* Ballot paper rising from slot, slightly tilted */}
            <g transform="rotate(-10)">
              <rect x="-22" y="-58" width="44" height="38" rx="2" fill={ivory} stroke={shadow} strokeWidth="0.5" />
              {/* Lines representing text */}
              <line x1="-16" y1="-50" x2="14" y2="-50" stroke={shadow} strokeWidth="0.7" />
              <line x1="-16" y1="-46" x2="10" y2="-46" stroke={shadow} strokeWidth="0.5" opacity="0.6" />
              {/* Checkbox marked with X */}
              <rect x="-14" y="-38" width="8" height="8" fill="none" stroke={shadow} strokeWidth="0.8" />
              <path d="M -13 -37 L -7 -31 M -7 -37 L -13 -31" stroke={gold} strokeWidth="1.6" strokeLinecap="round" />
              <line x1="-2" y1="-34" x2="14" y2="-34" stroke={shadow} strokeWidth="0.6" />
              <line x1="-2" y1="-30" x2="10" y2="-30" stroke={shadow} strokeWidth="0.5" opacity="0.6" />
            </g>
            {/* Ballot box */}
            <rect x="-46" y="-12" width="92" height="60" rx="3" fill={`url(#stone-${icon})`} stroke={shadow} strokeWidth="0.6" />
            {/* Slot — the ballot is going into this */}
            <rect x="-22" y="-15" width="44" height="6" rx="1" fill="oklch(0.10 0.04 268)" />
            {/* Front panel highlight */}
            <rect x="-46" y="-12" width="92" height="3" fill={ivory} opacity="0.6" />
            {/* Star/checkmark insignia on box front */}
            <g transform="translate(0 22)">
              <circle r="10" fill="none" stroke={gold} strokeWidth="1.2" />
              <path d="M -5 0 L -1 4 L 6 -4" fill="none" stroke={gold} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
            </g>
            {/* Side handles / corners */}
            <rect x="-46" y="44" width="92" height="4" fill={shadow} opacity="0.5" />
          </g>
        )}
      </g>
      <style>{`
        @keyframes sceneFloat {
          0%, 100% { transform: translateY(0) rotate(0deg); }
          50% { transform: translateY(-6px) rotate(1.4deg); }
        }
      `}</style>
    </svg>
  );
}

Object.assign(window, { EventsSection });