// video-shared-lys.jsx — VikingHeat infografik video, LIGHT theme.
// Same shape as video-shared.jsx; only the VC token values and a couple of
// hardcoded rgba's in EdgeBadge differ. Elements and scenes that read
// VC.ink / VC.paper / VC.line etc. pick up the inverted palette automatically.

const W = 1920, H = 1080;

const VC = {
  // "ink" is now the warm cream PAGE background.
  ink:        '#F2EBDD',   // page bg — warm off-white
  ink2:       '#EEE6D2',   // panel / vignette mid-tone (subtler — was #EAE0CB)
  ink3:       '#DFD2B7',   // panel deep tone
  // "paper" is now the dark warm FOREGROUND text colour.
  paper:      '#1A1612',   // near-black, warm
  copper:     '#E87B45',
  copperDeep: '#C4622E',
  blue:       '#3D7AA8',   // B - external (darkened for legibility on cream)
  green:      '#4A8B6B',   // C - market   (darkened for legibility on cream)
  yellow:     '#D9A52C',   // sun / solar surplus
  muted:      '#6B5F4E',   // warm dark gray
  houseStroke:'#6B5F4E',   // muted warm gray for house outline + 100% in light mode
  mutedDim:   '#9D9080',   // warm mid gray
  line:       '#D6CAB4',   // hairline on cream
  fontSans:   '"Geist", "Helvetica Neue", Helvetica, Arial, sans-serif',
  fontMono:   '"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace',
};

// Triangle vertices in stage coords (1920x1080)
const TRI = {
  A: { x: 960,  y: 230, color: VC.copper, key: 'A', label: 'A · BYGNING' },
  B: { x: 1320, y: 820, color: VC.blue,   key: 'B', label: 'B · VEJR' },
  C: { x: 600,  y: 820, color: VC.green,  key: 'C', label: 'C · PRIS' },
};
TRI.cx = (TRI.A.x + TRI.B.x + TRI.C.x) / 3;
TRI.cy = (TRI.A.y + TRI.B.y + TRI.C.y) / 3;

const lerp = (a, b, t) => a + (b - a) * t;
const smooth = (t) => (t < 0 ? 0 : t > 1 ? 1 : t * t * (3 - 2 * t));

function ramp(t, start, end) {
  if (t <= start) return 0;
  if (t >= end) return 1;
  return (t - start) / (end - start);
}

function fadeWindow(t, inStart, inEnd, outStart, outEnd) {
  if (t < inStart) return 0;
  if (t < inEnd)   return smooth(ramp(t, inStart, inEnd));
  if (t < outStart) return 1;
  if (t < outEnd)  return 1 - smooth(ramp(t, outStart, outEnd));
  return 0;
}

function Tag({ x, y, children, color = VC.copper, opacity = 1, align = 'left' }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: align === 'center' ? 'translateX(-50%)' :
                 align === 'right'  ? 'translateX(-100%)' : 'none',
      fontFamily: VC.fontMono, fontSize: 18,
      letterSpacing: '0.14em', textTransform: 'uppercase',
      color, opacity,
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <span style={{
        display: 'inline-block', width: 28, height: 1,
        background: 'currentColor',
      }}/>
      {children}
    </div>
  );
}

function MonoLabel({ x, y, size = 16, color = VC.muted, opacity = 1, align = 'left', children }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: align === 'center' ? 'translateX(-50%)' :
                 align === 'right'  ? 'translateX(-100%)' : 'none',
      fontFamily: VC.fontMono, fontSize: size,
      letterSpacing: '0.04em', color, opacity,
      whiteSpace: 'pre',
    }}>{children}</div>
  );
}

function Headline({ x, y, size = 72, color = VC.paper, opacity = 1, weight = 500, align = 'left', children, ls = '-0.025em', maxWidth }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: align === 'center' ? 'translateX(-50%)' :
                 align === 'right'  ? 'translateX(-100%)' : 'none',
      fontFamily: VC.fontSans, fontWeight: weight, fontSize: size,
      letterSpacing: ls, color, opacity,
      lineHeight: 1.05, textWrap: 'balance', maxWidth,
    }}>{children}</div>
  );
}

function Logo({ x, y, opacity = 1, color = VC.paper }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y, opacity,
      display: 'flex', alignItems: 'center', gap: 14,
      fontFamily: VC.fontSans, color,
    }}>
      <svg width="30" height="28" viewBox="0 0 30 28" style={{ display: 'block', overflow: 'visible' }}>
        <defs>
          <clipPath id="vh-tri-clip">
            <polygon points="15,3 28,25 2,25" />
          </clipPath>
          <clipPath id="vh-dot-clip">
            <circle cx="15" cy="17" r="3.2" />
          </clipPath>
        </defs>
        {/* On cream bg: left half cream (matches page), right half dark — outline in dark */}
        <g clipPath="url(#vh-tri-clip)">
          <rect x="0" y="0" width="15" height="28" fill={VC.ink}/>
          <rect x="15" y="0" width="15" height="28" fill={VC.paper}/>
        </g>
        <polygon points="15,3 28,25 2,25"
          fill="none" stroke={VC.paper} strokeWidth="1.5"
          strokeLinejoin="round"/>
        <g clipPath="url(#vh-dot-clip)">
          <rect x="11" y="13" width="4" height="8" fill={VC.paper}/>
          <rect x="15" y="13" width="4" height="8" fill={VC.ink}/>
        </g>
      </svg>
      <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' }}>
        Viking<span style={{ color: '#E87B45' }}>Heat</span>
      </div>
    </div>
  );
}

function BackgroundField() {
  return (
    <>
      {/* Warm cream radial */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 50% 45%, ${VC.ink} 0%, ${VC.ink2} 70%)`,
      }}/>
      {/* dot grid — soft warm hairlines */}
      <svg width={W} height={H} style={{ position: 'absolute', inset: 0, opacity: 0.25 }}>
        <defs>
          <pattern id="dots-lys" width="40" height="40" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="1" fill={VC.line} />
          </pattern>
        </defs>
        <rect width={W} height={H} fill="url(#dots-lys)" />
      </svg>
    </>
  );
}

function HUD() {
  const t = useTime();
  const tick = (x, y, w = 18, h = 18, anchor = 'tl') => {
    const stroke = VC.mutedDim;
    return (
      <svg key={`${x}-${y}`} width={w} height={h} style={{ position: 'absolute', left: x, top: y }}>
        {anchor === 'tl' && <path d={`M0 ${h} L0 0 L${w} 0`} stroke={stroke} strokeWidth={1.2} fill="none"/>}
        {anchor === 'tr' && <path d={`M0 0 L${w} 0 L${w} ${h}`} stroke={stroke} strokeWidth={1.2} fill="none"/>}
        {anchor === 'bl' && <path d={`M0 0 L0 ${h} L${w} ${h}`} stroke={stroke} strokeWidth={1.2} fill="none"/>}
        {anchor === 'br' && <path d={`M0 ${h} L${w} ${h} L${w} 0`} stroke={stroke} strokeWidth={1.2} fill="none"/>}
      </svg>
    );
  };
  const fmt = `T+${t.toFixed(1).padStart(4,'0')}s`;
  return (
    <>
      {tick(36, 36, 18, 18, 'tl')}
      {tick(W - 54, 36, 18, 18, 'tr')}
      {tick(36, H - 54, 18, 18, 'bl')}
      {tick(W - 54, H - 54, 18, 18, 'br')}
      <div style={{
        position: 'absolute', bottom: 36, right: 64,
        fontFamily: VC.fontMono, fontSize: 13, letterSpacing: '0.1em',
        color: VC.mutedDim, textTransform: 'uppercase',
      }}>{fmt} · VikingHeat / Optimisation Pipeline</div>
      <div style={{
        position: 'absolute', top: 38, right: 64,
        fontFamily: VC.fontMono, fontSize: 13, letterSpacing: '0.1em',
        color: VC.mutedDim, textTransform: 'uppercase',
      }}>SoftNordic · Infografik 01</div>
    </>
  );
}

function ScreenLabelUpdater() {
  const t = useTime();
  const sec = Math.floor(t);
  React.useEffect(() => {
    const root = document.getElementById('video-root');
    if (root) root.dataset.screenLabel = `t=${sec.toString().padStart(2, '0')}s`;
  }, [sec]);
  return null;
}

function EdgeBadge({ opacity = 1 }) {
  const t = useTime();
  const pulse = 0.6 + 0.4 * Math.abs(Math.sin(t * 1.6));
  return (
    <div style={{
      position: 'absolute', left: 64, bottom: 56,
      display: 'flex', alignItems: 'center', gap: 14,
      fontFamily: VC.fontMono, fontSize: 13, letterSpacing: '0.16em',
      color: VC.paper, textTransform: 'uppercase', opacity,
      padding: '10px 16px',
      border: `1px solid ${VC.line}`, borderRadius: 4,
      background: 'rgba(245,239,222,0.8)',
      backdropFilter: 'blur(6px)',
    }}>
      <span style={{
        width: 9, height: 9, borderRadius: '50%',
        background: VC.copper,
        boxShadow: `0 0 ${10 * pulse}px ${VC.copper}`,
      }}/>
      <span style={{ color: VC.copper }}>EDGE</span>
      <span style={{ width: 1, height: 14, background: VC.line }}/>
      <span>Lokal beregning — ingen cloud</span>
    </div>
  );
}

Object.assign(window, {
  W, H, VC, TRI,
  lerp, smooth, ramp, fadeWindow,
  Tag, MonoLabel, Headline, Logo,
  BackgroundField, HUD, EdgeBadge, ScreenLabelUpdater,
});