// scene_shared.jsx
// Shared visual primitives — LIGHT, realistic palette.

// ── Palette ─────────────────────────────────────────────────────────────────
const PAL = {
  bg: '#f4efe6',           // warm paper
  bgSoft: '#ebe4d5',
  bgDeep: '#e0d8c5',
  ink: '#1c1d18',          // near-black warm
  inkSoft: 'rgba(28,29,24,0.6)',
  inkDim: 'rgba(28,29,24,0.3)',
  line: 'rgba(28,29,24,0.12)',
  lineStrong: 'rgba(28,29,24,0.25)',

  sat: 'oklch(48% 0.13 250)',       // deep slate-blue — satellite
  ml: 'oklch(52% 0.14 60)',         // burnt ochre — machine learning
  human: 'oklch(42% 0.08 30)',      // chestnut — human expert
  result: 'oklch(42% 0.11 160)',    // forest green — results
  danger: 'oklch(52% 0.18 25)',
};

const FONT_SERIF = "'Instrument Serif', 'Times New Roman', serif";
const FONT_SANS = "'Inter', system-ui, sans-serif";
const FONT_MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace";

// ── Sky (no stars — subtle cloud-like wash) ────────────────────────────────
function Sky({ opacity = 1 }) {
  const t = useTime();
  return (
    <svg width="1920" height="1080" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity }}>
      <defs>
        <radialGradient id="skyGrad" cx="50%" cy="0%" r="80%">
          <stop offset="0%" stopColor="oklch(78% 0.05 230 / 0.4)" />
          <stop offset="60%" stopColor="oklch(88% 0.02 80 / 0)" />
        </radialGradient>
      </defs>
      <rect width="1920" height="1080" fill="url(#skyGrad)" />
    </svg>
  );
}

// ── Frame chrome (corners, labels) ─────────────────────────────────────────
function FrameChrome({ label, coords, step, opacity = 1 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      opacity,
      fontFamily: FONT_MONO,
      fontSize: 12,
      color: PAL.inkSoft,
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
    }}>
      {[[40, 40], [1880, 40], [40, 1040], [1880, 1040]].map(([cx, cy], i) => (
        <svg key={i} width="24" height="24" style={{
          position: 'absolute', left: cx - 12, top: cy - 12,
        }}>
          <path d="M12 0v24M0 12h24" stroke={PAL.lineStrong} strokeWidth="1" />
        </svg>
      ))}
      {step && (
        <div style={{ position: 'absolute', right: 60, top: 48 }}>
          <span style={{ color: PAL.ink, fontSize: 14 }}>{step}</span>
          <span style={{ color: PAL.inkDim, marginLeft: 8 }}>{tr('frame.of')} 04</span>
        </div>
      )}
      {coords && (
        <div style={{ position: 'absolute', left: 60, bottom: 48 }}>{coords}</div>
      )}
      <div style={{ position: 'absolute', right: 60, bottom: 48, color: PAL.inkDim }}>
        {tr('frame.footer')}
      </div>
    </div>
  );
}

// ── Topographic contour lines (cartographic feel) ──────────────────────────
function TopoLines({ opacity = 0.3, color = PAL.line, yOffset = 0 }) {
  const lines = [];
  for (let i = 0; i < 16; i++) {
    const y = 80 + i * 64 + yOffset;
    let d = `M -40 ${y}`;
    for (let x = 0; x <= 2000; x += 30) {
      const off = Math.sin((x + i * 60) * 0.005) * 24 + Math.cos((x + i * 35) * 0.011) * 14;
      d += ` L ${x} ${y + off}`;
    }
    lines.push(d);
  }
  return (
    <svg width="1920" height="1080" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity }}>
      {lines.map((d, i) => (
        <path key={i} d={d} stroke={color} strokeWidth="1" fill="none" />
      ))}
    </svg>
  );
}

// Graph-paper grid
function GridPaper({ opacity = 0.5, step = 40 }) {
  const lines = [];
  for (let x = 0; x <= 1920; x += step) {
    lines.push(<line key={`v${x}`} x1={x} y1="0" x2={x} y2="1080" stroke={PAL.line} strokeWidth="0.5" />);
  }
  for (let y = 0; y <= 1080; y += step) {
    lines.push(<line key={`h${y}`} x1="0" y1={y} x2="1920" y2={y} stroke={PAL.line} strokeWidth="0.5" />);
  }
  return (
    <svg width="1920" height="1080" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity }}>
      {lines}
    </svg>
  );
}

// ── Chapter heading (num + serif italic title + subtitle) ──────────────────
function ChapterHead({ num, title, subtitle, color = PAL.sat, x = 60, y = 240, width = 560 }) {
  const { localTime } = useSprite();
  const numT = Easing.easeOutCubic(clamp(localTime / 0.3, 0, 1));
  const titleT = Easing.easeOutCubic(clamp((localTime - 0.15) / 0.4, 0, 1));
  const subT = Easing.easeOutCubic(clamp((localTime - 0.4) / 0.5, 0, 1));
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width,
      pointerEvents: 'none',
      background: 'rgba(255,255,255,0.72)',
      border: `1px solid ${PAL.lineStrong}`,
      borderLeft: `4px solid ${color}`,
      padding: '28px 32px 32px 32px',
      backdropFilter: 'blur(4px)',
    }}>
      <div style={{
        fontFamily: FONT_MONO, fontSize: 14,
        color, letterSpacing: '0.18em',
        opacity: numT, transform: `translateY(${(1 - numT) * 10}px)`,
        marginBottom: 20,
      }}>
        <span style={{
          display: 'inline-block', width: 40, height: 1,
          background: color, verticalAlign: 'middle', marginRight: 16,
        }}/>
        CHAPTER {num} / 04
      </div>
      <div style={{
        fontFamily: FONT_SERIF, fontSize: 76,
        color: PAL.ink, lineHeight: 0.95,
        letterSpacing: '-0.02em',
        fontStyle: 'italic', fontWeight: 400,
        opacity: titleT, transform: `translateY(${(1 - titleT) * 20}px)`,
      }}>
        {title}
      </div>
      <div style={{
        marginTop: 20,
        fontFamily: FONT_SANS, fontSize: 17, fontWeight: 400,
        color: PAL.inkSoft, lineHeight: 1.5,
        opacity: subT, transform: `translateY(${(1 - subT) * 14}px)`,
      }}>
        {subtitle}
      </div>
    </div>
  );
}

// ── Step indicator ─────────────────────────────────────────────────────────
function StepIndicator({ active, y = 980 }) {
  const steps = [tr('steps.sat'), tr('steps.ml'), tr('steps.expert'), tr('steps.results')];
  const colors = [PAL.sat, PAL.ml, PAL.human, PAL.result];
  return (
    <div style={{
      position: 'absolute', left: 140, top: y,
      display: 'flex', gap: 44,
      fontFamily: FONT_MONO, fontSize: 11,
      letterSpacing: '0.12em', textTransform: 'uppercase',
      pointerEvents: 'none',
    }}>
      {steps.map((s, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          color: i === active ? PAL.ink : PAL.inkDim,
          transition: 'color 300ms',
        }}>
          <span style={{
            width: 8, height: 8, borderRadius: 8,
            background: i === active ? colors[i] : 'transparent',
            border: `1px solid ${i === active ? colors[i] : PAL.lineStrong}`,
          }}/>
          <span>0{i + 1} · {s}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  PAL, FONT_SERIF, FONT_SANS, FONT_MONO,
  Sky, FrameChrome, TopoLines, GridPaper, ChapterHead, StepIndicator,
});