// Home: hero with polar bear constellation + mission stats
function Constellation() {
  // Polar bear constellation — points form: ear, head, eye, snout, back, rump, 4 legs, tail
  // Grid is 100 wide, 60 tall (preserveAspectRatio fits to container)
  const points = [
    // Head & face
    { x: 22, y: 24, size: 5, label: 'ear' },        // 0 - ear tip
    { x: 26, y: 28, size: 3, label: 'ear-base' },   // 1
    { x: 19, y: 32, size: 6, label: 'head-top' },   // 2 - top of head
    { x: 14, y: 36, size: 4, label: 'snout-top' },  // 3
    { x: 11, y: 41, size: 5, label: 'snout' },      // 4 - nose
    { x: 16, y: 42, size: 3, label: 'mouth' },      // 5
    { x: 22, y: 38, size: 4, label: 'cheek' },      // 6
    { x: 18, y: 30, size: 3, label: 'eye' },        // 7 - bright eye-star
    // Back
    { x: 30, y: 28, size: 4, label: 'neck' },       // 8
    { x: 45, y: 25, size: 5, label: 'shoulder' },   // 9
    { x: 62, y: 26, size: 4, label: 'mid-back' },   // 10
    { x: 78, y: 28, size: 5, label: 'rump' },       // 11
    // Tail
    { x: 84, y: 33, size: 3, label: 'tail' },       // 12
    // Belly / underline back to front legs
    { x: 76, y: 44, size: 3, label: 'belly-back' }, // 13
    { x: 60, y: 46, size: 3, label: 'belly-mid' },  // 14
    { x: 42, y: 46, size: 3, label: 'belly-front' },// 15
    { x: 30, y: 44, size: 3, label: 'chest' },      // 16
    // Front legs
    { x: 32, y: 54, size: 4, label: 'front-leg-1' },// 17
    { x: 40, y: 54, size: 4, label: 'front-leg-2' },// 18
    // Back legs
    { x: 62, y: 54, size: 4, label: 'back-leg-1' }, // 19
    { x: 74, y: 54, size: 4, label: 'back-leg-2' }, // 20
  ];

  // Connections forming the bear silhouette
  const lines = [
    // Ear
    [0, 1], [1, 2],
    // Head outline
    [2, 3], [3, 4], [4, 5], [5, 6], [6, 8],
    // Back & tail
    [8, 9], [9, 10], [10, 11], [11, 12],
    // Underline
    [11, 13], [13, 14], [14, 15], [15, 16], [16, 8],
    // Front legs
    [16, 17], [15, 18],
    // Back legs
    [14, 19], [13, 20],
  ];

  return (
    <svg viewBox="0 0 100 60" preserveAspectRatio="xMidYMid meet" style={{
      position: 'absolute', inset: 0, width: '100%', height: '100%',
      pointerEvents: 'none',
    }}>
      <defs>
        <linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="oklch(0.84 0.15 82)" stopOpacity="0.0" />
          <stop offset="0.5" stopColor="oklch(0.84 0.15 82)" stopOpacity="0.7" />
          <stop offset="1" stopColor="oklch(0.84 0.15 82)" stopOpacity="0.0" />
        </linearGradient>
        <radialGradient id="starGlow">
          <stop offset="0" stopColor="oklch(0.98 0.02 80)" stopOpacity="1" />
          <stop offset="0.4" stopColor="oklch(0.84 0.15 82)" stopOpacity="0.5" />
          <stop offset="1" stopColor="oklch(0.84 0.15 82)" stopOpacity="0" />
        </radialGradient>
        <radialGradient id="bearGlow" cx="0.5" cy="0.5" r="0.6">
          <stop offset="0" stopColor="oklch(0.84 0.15 82)" stopOpacity="0.10" />
          <stop offset="1" stopColor="oklch(0.84 0.15 82)" stopOpacity="0" />
        </radialGradient>
      </defs>

      {/* Soft background glow behind the bear */}
      <ellipse cx="48" cy="38" rx="42" ry="20" fill="url(#bearGlow)" />

      {/* Connecting lines */}
      {lines.map(([a, b], i) => {
        const A = points[a], B = points[b];
        return (
          <line key={i}
            x1={A.x} y1={A.y} x2={B.x} y2={B.y}
            stroke="url(#lineGrad)" strokeWidth="0.18"
            style={{
              animation: `lineDraw 1.6s ease ${1 + i * 0.08}s both`,
              strokeDasharray: 200, strokeDashoffset: 200,
            }}
          />
        );
      })}

      {/* Stars at each joint */}
      {points.map((p, i) => (
        <g key={i} style={{
          animation: `starPop .8s cubic-bezier(.2,1.4,.4,1) ${0.3 + i * 0.07}s both, twinkle ${3 + (i % 4)}s ease-in-out ${1.5 + i * 0.2}s infinite`,
          transformOrigin: `${p.x}px ${p.y}px`,
        }}>
          <circle cx={p.x} cy={p.y} r={p.size * 0.55} fill="url(#starGlow)" opacity="0.55" />
          <circle cx={p.x} cy={p.y} r={p.size * 0.16} fill="oklch(0.99 0.02 80)" />
          {/* Cross flare on the bigger stars */}
          {p.size >= 5 && (
            <g opacity="0.5">
              <line x1={p.x - p.size * 0.6} y1={p.y} x2={p.x + p.size * 0.6} y2={p.y} stroke="oklch(0.95 0.10 85)" strokeWidth="0.06" />
              <line x1={p.x} y1={p.y - p.size * 0.6} x2={p.x} y2={p.y + p.size * 0.6} stroke="oklch(0.95 0.10 85)" strokeWidth="0.06" />
            </g>
          )}
        </g>
      ))}

      {/* Tiny label, low-key */}
      <text x="48" y="58" textAnchor="middle"
        style={{
          fontFamily: 'Outfit, sans-serif', fontSize: 1.6,
          letterSpacing: '0.4em', textTransform: 'uppercase',
          fill: 'oklch(0.62 0.04 260)',
          animation: 'labelIn 1s ease 3s both',
          opacity: 0,
        }}>
        ✦ Team Astronia ✦
      </text>

      <style>{`
        @keyframes lineDraw { to { stroke-dashoffset: 0; } }
        @keyframes starPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
        @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
        @keyframes labelIn { to { opacity: 1; } }
      `}</style>
    </svg>
  );
}

function HomeSection({ t, setActive, lang = 'de' }) {
  return (
    <section className="section">
      <div style={{
        position: 'relative',
        minHeight: '78vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        padding: '40px 0',
      }}>
        <Constellation />
        <div style={{ position: 'relative', zIndex: 2, maxWidth: 880 }}>
          <div className="eyebrow">{t('heroEyebrow')}</div>
          <h1 style={{
            fontSize: 'clamp(44px, 7vw, 92px)',
            lineHeight: 1.02,
            fontWeight: 400,
            marginBottom: 28,
            letterSpacing: '-0.01em',
          }}>
            <SparkleText text={t('heroTitle')} highlight="Funkeln" highlightAlt="sparkle" />
          </h1>
          <p style={{
            fontSize: 'clamp(16px, 1.4vw, 19px)',
            lineHeight: 1.55,
            color: 'var(--ink-soft)',
            maxWidth: 620,
            marginBottom: 36,
          }}>
            {t('heroLead')}
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={() => setActive('team')}>
              {t('heroCtaPrimary')}
              <span style={{ fontSize: 16 }}>→</span>
            </button>
            <button className="btn" onClick={() => setActive('demands')}>
              {t('heroCtaSecondary')}
            </button>
          </div>
        </div>
      </div>

      {/* Mission strip */}
      <div style={{ marginTop: 80 }}>
        <div className="eyebrow">{t('missionTitle')}</div>
        <p style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontSize: 'clamp(28px, 3.5vw, 44px)',
          lineHeight: 1.2,
          maxWidth: 820,
          marginBottom: 48,
        }}>
          {t('missionLead')}
        </p>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 16,
        }}>
          <StatCard num="9" label="AHS" subtitle={lang === 'de' ? 'Allgemein­bildende Höhere Schulen' : 'Academic Secondary Schools'} />
          <StatCard num="7" label="BMHS" subtitle={lang === 'de' ? 'Berufs­bildende Schulen' : 'Vocational Secondary Schools'} />
          <StatCard num="3" label="BS" subtitle={lang === 'de' ? 'Berufs­schulen' : 'Apprenticeship Schools'} />
          <StatCard num="19" label="✦" subtitle={lang === 'de' ? 'Sterne, eine Konstellation' : 'Stars, one constellation'} highlight />
        </div>
      </div>

      {/* Instagram news feed */}
      <div style={{ marginTop: 96 }}>
        <window.InstaFeed lang={lang} />
      </div>
    </section>
  );
}

// === Team Video — cinema-style placeholder, ready for real footage ===
function TeamVideo({ t, lang }) {
  const videoRef = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const [hasVideo, setHasVideo] = React.useState(false);

  // Try to detect a real video file at assets/team-video.mp4
  React.useEffect(() => {
    fetch('assets/team-video.mp4', { method: 'HEAD' })
      .then(r => setHasVideo(r.ok))
      .catch(() => setHasVideo(false));
  }, []);

  const onPlay = () => {
    if (!hasVideo) return;
    setPlaying(true);
    setTimeout(() => videoRef.current?.play(), 30);
  };

  return (
    <div style={{ position: 'relative' }}>
      <div className="eyebrow">{t('videoEyebrow')}</div>
      <h3 style={{
        fontSize: 'clamp(28px, 3.4vw, 40px)', lineHeight: 1.05,
        marginTop: 6, marginBottom: 12, fontWeight: 400, maxWidth: 720,
        fontFamily: '"Cormorant Garamond", serif',
      }}>
        {t('videoTitle')}
      </h3>
      <p style={{ color: 'var(--ink-soft)', maxWidth: 640, fontSize: 16, marginBottom: 22 }}>
        {t('videoLead')}
      </p>

      <div style={{
        position: 'relative',
        aspectRatio: '16 / 9',
        width: '100%',
        borderRadius: 24,
        overflow: 'hidden',
        background: 'linear-gradient(135deg, oklch(0.16 0.06 268), oklch(0.13 0.07 290))',
        border: '1px solid oklch(0.84 0.15 82 / 0.35)',
        boxShadow: '0 24px 60px -20px oklch(0.05 0.05 268 / 0.7), 0 0 0 1px oklch(1 0 0 / 0.04) inset',
      }}>
        {/* Background star scene (only when not playing) */}
        {!playing && (
          <>
            <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <defs>
                <radialGradient id="vidGlow" cx="0.5" cy="0.55" r="0.55">
                  <stop offset="0" stopColor="oklch(0.45 0.18 305 / 0.55)" />
                  <stop offset="1" stopColor="oklch(0.10 0.06 268 / 0)" />
                </radialGradient>
                <radialGradient id="vidGlow2" cx="0.85" cy="0.2" r="0.4">
                  <stop offset="0" stopColor="oklch(0.55 0.18 60 / 0.45)" />
                  <stop offset="1" stopColor="oklch(0.10 0.06 268 / 0)" />
                </radialGradient>
              </defs>
              <rect width="1600" height="900" fill="url(#vidGlow)" />
              <rect width="1600" height="900" fill="url(#vidGlow2)" />
              {/* Decorative stars */}
              {Array.from({ length: 60 }).map((_, i) => {
                const cx = (i * 173 + 37) % 1600;
                const cy = (i * 91 + 53) % 900;
                const r = (i % 5 === 0) ? 2.4 : 1.2;
                return <circle key={i} cx={cx} cy={cy} r={r} fill="oklch(0.99 0.02 80)" opacity={0.3 + (i % 7) * 0.1} />;
              })}
              {/* Big sparkle stars */}
              {[[300, 220], [1280, 660], [820, 180], [200, 720], [1380, 350]].map(([cx, cy], i) => (
                <g key={i} style={{ animation: `vidTwinkle ${2.5 + i * 0.4}s ease-in-out ${i * 0.3}s infinite` }}>
                  <circle cx={cx} cy={cy} r="3.5" 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="1" />
                  <line x1={cx} y1={cy - 14} x2={cx} y2={cy + 14} stroke="oklch(0.99 0.02 80 / 0.7)" strokeWidth="1" />
                </g>
              ))}
              {/* Faint horizon line */}
              <line x1="0" y1="640" x2="1600" y2="640" stroke="oklch(0.84 0.15 82 / 0.2)" strokeWidth="1" />
            </svg>

            {/* Letterbox bars to feel cinematic */}
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 48, background: 'oklch(0 0 0 / 0.55)', backdropFilter: 'blur(2px)' }} />
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 48, background: 'oklch(0 0 0 / 0.55)', backdropFilter: 'blur(2px)' }} />

            {/* REC dot top-left */}
            <div style={{
              position: 'absolute', top: 16, left: 18,
              display: 'flex', alignItems: 'center', gap: 8,
              fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
              color: 'oklch(0.85 0.12 25)', fontWeight: 600,
            }}>
              <span style={{
                width: 9, height: 9, borderRadius: '50%',
                background: 'oklch(0.65 0.22 25)',
                animation: 'recBlink 1.4s ease-in-out infinite',
                boxShadow: '0 0 8px oklch(0.65 0.22 25)',
              }}></span>
              REC
              <span style={{ color: 'oklch(0.99 0.02 80 / 0.5)', marginLeft: 14 }}>
                ASTRONIA · 16:9 · 24 fps
              </span>
            </div>

            {/* Timecode top-right */}
            <div style={{
              position: 'absolute', top: 16, right: 18,
              fontFamily: '"Cormorant Garamond", serif',
              fontSize: 13, letterSpacing: '0.18em',
              color: 'oklch(0.99 0.02 80 / 0.7)',
              fontVariantNumeric: 'tabular-nums',
            }}>
              00:00:00:00
            </div>

            {/* Big play / coming-soon center */}
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              gap: 18,
            }}>
              <button onClick={onPlay} disabled={!hasVideo}
                aria-label={t('videoCta')}
                style={{
                  width: 92, height: 92, borderRadius: '50%',
                  border: '1.5px solid oklch(0.84 0.15 82 / 0.7)',
                  background: hasVideo
                    ? 'radial-gradient(circle, oklch(0.84 0.15 82 / 0.35), oklch(0.84 0.15 82 / 0.05))'
                    : 'radial-gradient(circle, oklch(0.30 0.10 268 / 0.6), oklch(0.20 0.08 280 / 0.3))',
                  cursor: hasVideo ? 'pointer' : 'default',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  position: 'relative',
                  transition: 'transform .25s ease',
                  backdropFilter: 'blur(8px)',
                }}
                onMouseEnter={e => hasVideo && (e.currentTarget.style.transform = 'scale(1.08)')}
                onMouseLeave={e => hasVideo && (e.currentTarget.style.transform = 'scale(1)')}>
                <span style={{
                  width: 0, height: 0,
                  borderLeft: '22px solid oklch(0.99 0.02 80)',
                  borderTop: '14px solid transparent',
                  borderBottom: '14px solid transparent',
                  marginLeft: 6,
                }}></span>
                {/* Pulse ring */}
                <span style={{
                  position: 'absolute', inset: -2,
                  borderRadius: '50%',
                  border: '1px solid oklch(0.84 0.15 82 / 0.6)',
                  animation: 'playPulse 2.4s ease-out infinite',
                  pointerEvents: 'none',
                }}></span>
              </button>

              <div style={{
                fontFamily: '"Cormorant Garamond", serif',
                fontSize: 22, color: 'oklch(0.99 0.02 80 / 0.95)',
                letterSpacing: '0.04em', textAlign: 'center',
              }}>
                {hasVideo ? t('videoCta') : (lang === 'de' ? 'Coming Soon' : 'Coming soon')}
              </div>
              {!hasVideo && (
                <div style={{
                  fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
                  color: 'oklch(0.84 0.15 82 / 0.85)',
                  padding: '6px 14px', borderRadius: 999,
                  border: '1px solid oklch(0.84 0.15 82 / 0.45)',
                  background: 'oklch(0.10 0.05 268 / 0.6)',
                }}>
                  ✦ {t('videoSoon')}
                </div>
              )}
            </div>
          </>
        )}

        {playing && hasVideo && (
          <video
            ref={videoRef}
            controls
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', background: 'black' }}
            src="assets/team-video.mp4"
          />
        )}
      </div>

      <style>{`
        @keyframes recBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
        @keyframes playPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
        @keyframes vidTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
      `}</style>
    </div>
  );
}

function StatCard({ num, label, subtitle, highlight }) {
  return (
    <div className="card" style={{
      padding: '24px',
      display: 'flex',
      flexDirection: 'column',
      gap: 6,
      ...(highlight && {
        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: highlight ? 'var(--gold)' : 'var(--ink-bright)',
      }}>{num}</div>
      <div style={{
        fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: highlight ? 'var(--gold)' : 'var(--ink-soft)', fontWeight: 500,
      }}>{label}</div>
      <div style={{ fontSize: 13, color: 'var(--ink-mute)', marginTop: 4 }}>{subtitle}</div>
    </div>
  );
}

function SparkleText({ text, highlight, highlightAlt }) {
  if (!highlight || !text.includes(highlight)) {
    if (highlightAlt && text.includes(highlightAlt)) {
      const parts = text.split(highlightAlt);
      return (<>{parts[0]}<HL>{highlightAlt}</HL>{parts[1]}</>);
    }
    return text;
  }
  const parts = text.split(highlight);
  return (
    <>
      {parts[0]}
      <HL>{highlight}</HL>
      {parts[1]}
    </>
  );
}

function HL({ children }) {
  return (
    <span style={{
      position: 'relative',
      backgroundImage: 'linear-gradient(135deg, oklch(0.92 0.13 85), oklch(0.78 0.18 60), oklch(0.84 0.15 82))',
      backgroundSize: '200% 200%',
      WebkitBackgroundClip: 'text',
      backgroundClip: 'text',
      color: 'transparent',
      fontStyle: 'italic',
      animation: 'shimmer 5s ease-in-out infinite',
    }}>
      {children}
      <span style={{
        position: 'absolute', top: '-0.1em', right: '-0.4em',
        fontSize: '0.5em', color: 'oklch(0.92 0.13 85)',
        animation: 'spin 3.5s linear infinite',
        display: 'inline-block', transformOrigin: 'center',
      }}>✦</span>
      <style>{`
        @keyframes shimmer { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 100%; } }
        @keyframes spin { to { transform: rotate(360deg); } }
      `}</style>
    </span>
  );
}

Object.assign(window, { HomeSection, TeamVideo });