// scene_intro.jsx — Light palette. Earth viewed from above as a cartographic
// document. No stars, no space — feels like a field notebook.

function EarthMap({ progress = 1, cx = 960, cy = 700, r = 500 }) {
  // Light cartographic globe — pale paper with contours and a forest shape.
  const t = useTime();
  const rot = t * 2; // degrees
  return (
    <svg width="1920" height="1080" style={{ position: 'absolute', inset: 0 }}>
      <defs>
        <radialGradient id="globeShade" cx="35%" cy="30%" r="75%">
          <stop offset="0%" stopColor="oklch(95% 0.02 80)" />
          <stop offset="60%" stopColor="oklch(86% 0.03 80)" />
          <stop offset="100%" stopColor="oklch(70% 0.04 70)" />
        </radialGradient>
        <clipPath id="globeClip">
          <circle cx={cx} cy={cy} r={r} />
        </clipPath>
      </defs>
      {/* Shadow under globe */}
      <ellipse cx={cx} cy={cy + r + 20} rx={r * 0.8} ry="12" fill={PAL.ink} opacity="0.08" />

      {/* Disc */}
      <circle cx={cx} cy={cy} r={r} fill="url(#globeShade)" stroke={PAL.ink} strokeWidth="1.2" opacity={progress} />

      {/* Graticule + land */}
      <g clipPath="url(#globeClip)" opacity={progress}>
        {/* Latitudes */}
        {[-0.7, -0.4, 0, 0.4, 0.7].map((k, i) => (
          <ellipse key={i} cx={cx} cy={cy + k * r} rx={r * Math.sqrt(1 - k * k)} ry="8"
            fill="none" stroke={PAL.ink} strokeWidth="0.6" opacity="0.25" />
        ))}
        {/* Longitudes */}
        {[-60, -30, 0, 30, 60].map((deg, i) => {
          const a = (deg + rot) * Math.PI / 180;
          const rx = Math.abs(r * Math.cos(a));
          return (
            <ellipse key={i} cx={cx} cy={cy} rx={rx} ry={r}
              fill="none" stroke={PAL.ink} strokeWidth="0.6" opacity="0.2" />
          );
        })}
        {/* Abstract landmass (continent-shaped blob) */}
        <path d={`M ${cx - 260} ${cy - 140}
                  Q ${cx - 140} ${cy - 240} ${cx + 40} ${cy - 180}
                  T ${cx + 260} ${cy - 40}
                  Q ${cx + 200} ${cy + 120} ${cx + 40} ${cy + 180}
                  T ${cx - 200} ${cy + 80}
                  Q ${cx - 320} ${cy - 40} ${cx - 260} ${cy - 140} Z`}
          fill={PAL.result} opacity="0.22" stroke={PAL.result} strokeWidth="1.5" strokeOpacity="0.5" />
        <path d={`M ${cx + 120} ${cy + 160}
                  Q ${cx + 240} ${cy + 120} ${cx + 320} ${cy + 220}
                  Q ${cx + 260} ${cy + 300} ${cx + 160} ${cy + 260} Z`}
          fill={PAL.result} opacity="0.18" stroke={PAL.result} strokeWidth="1.2" strokeOpacity="0.4" />
      </g>

      {/* Pin mark on Luxembourg */}
      {progress > 0.5 && (() => {
        const px = cx + 60, py = cy - 100;
        const pulse = 1 + 0.4 * Math.sin(t * 3);
        return (
          <g>
            <circle cx={px} cy={py} r={14 * pulse} fill={PAL.sat} opacity="0.15" />
            <circle cx={px} cy={py} r={5} fill={PAL.sat} />
            <circle cx={px} cy={py} r={5} fill="none" stroke={PAL.ink} strokeWidth="0.8" />
            <line x1={px} y1={py} x2={px + 80} y2={py - 80} stroke={PAL.ink} strokeWidth="0.8" />
            <g transform={`translate(${px + 86}, ${py - 100})`}>
              <text fill={PAL.ink} fontFamily={FONT_MONO} fontSize="11" letterSpacing="0.1em">
                LUXEMBOURG · 49.61°N
              </text>
            </g>
          </g>
        );
      })()}
    </svg>
  );
}

function SceneIntro() {
  const { localTime, duration } = useSprite();
  const title1T = Easing.easeOutCubic(clamp((localTime - 0.3) / 0.9, 0, 1));
  const title2T = Easing.easeOutCubic(clamp((localTime - 1.0) / 0.9, 0, 1));
  const subT = Easing.easeOutCubic(clamp((localTime - 1.6) / 0.9, 0, 1));
  const globeProg = Easing.easeOutCubic(clamp(localTime / 1.4, 0, 1));
  const outT = Easing.easeInCubic(clamp((localTime - (duration - 0.5)) / 0.5, 0, 1));
  const t = useTime();

  return (
    <div style={{ position: 'absolute', inset: 0, background: PAL.bg, opacity: 1 - outT }}>
      <GridPaper opacity={0.25} />
      <TopoLines opacity={0.18} />

      {/* Earth as a cartographic document, right side */}
      <div style={{
        position: 'absolute', inset: 0,
        transform: `translate(240px, 60px) scale(${globeProg})`,
        transformOrigin: '960px 700px',
        opacity: globeProg,
      }}>
        <EarthMap progress={globeProg} />
      </div>

      {/* Title */}
      <div style={{ position: 'absolute', left: 140, top: 380 }}>
        <div style={{
          fontFamily: FONT_MONO, fontSize: 13,
          color: PAL.sat, letterSpacing: '0.2em',
          opacity: title1T, marginBottom: 28,
        }}>
          <span style={{
            display: 'inline-block', width: 40, height: 1,
            background: PAL.sat, verticalAlign: 'middle', marginRight: 16,
          }}/>
          {tr('intro.badge')}
        </div>
        <div style={{
          fontFamily: FONT_SERIF, fontSize: 180, fontStyle: 'italic',
          fontWeight: 400, color: PAL.ink,
          lineHeight: 0.92, letterSpacing: '-0.03em',
          opacity: title1T, transform: `translateY(${(1 - title1T) * 40}px)`,
        }}>
          {tr('intro.word1')}
        </div>
        <div style={{
          fontFamily: FONT_SERIF, fontSize: 180, fontStyle: 'italic',
          fontWeight: 400, color: PAL.sat,
          lineHeight: 0.92, letterSpacing: '-0.03em',
          opacity: title2T, transform: `translateY(${(1 - title2T) * 40}px)`,
          marginTop: -16,
        }}>
          {tr('intro.word2')}
        </div>
        <div style={{
          marginTop: 36, fontFamily: FONT_SANS, fontSize: 21,
          color: PAL.inkSoft, maxWidth: 620, lineHeight: 1.55,
          opacity: subT, transform: `translateY(${(1 - subT) * 14}px)`,
        }}>
          {tr('intro.subtitle')}
        </div>
      </div>

      <FrameChrome
        label="INTRO / 00"
        coords="LAT 49.6117°N · LON 06.1319°E · LUXEMBOURG"
        opacity={title1T}
      />
    </div>
  );
}

Object.assign(window, { SceneIntro, EarthMap });