import { BRAND, DURATION } from './config.js';

// The side is a continuous brand strip: it can accompany any of the three films.
// All periodic motion completes inside 15 seconds; the wordmark never disappears.
export function renderSide(c, logo, time) {
  const t = ((time % DURATION) + DURATION) % DURATION;
  const phase = t / DURATION * Math.PI * 2;
  const background = c.createLinearGradient(0, 0, 64, 512);
  background.addColorStop(0, BRAND.blue);
  background.addColorStop(.58, '#2058df');
  background.addColorStop(1, '#133aab');
  c.fillStyle = background;
  c.fillRect(0, 0, 64, 512);

  // Soft moving illumination stays behind the steady, high contrast lettering.
  const lightY = 256 + Math.sin(phase) * 205;
  const light = c.createRadialGradient(10, lightY, 0, 10, lightY, 145);
  light.addColorStop(0, '#85b9ff32');
  light.addColorStop(1, '#85b9ff00');
  c.fillStyle = light;
  c.fillRect(0, 0, 64, 512);

  c.fillStyle = '#ffffff18';
  c.fillRect(3, 0, 1, 512);
  c.fillRect(60, 0, 1, 512);
  for (const [x, shift] of [[3, 0], [60, 260]]) {
    const y = ((t / DURATION * 1024 + shift) % 512);
    for (const wrap of [-512, 0, 512]) {
      const line = c.createLinearGradient(0, y + wrap - 70, 0, y + wrap + 25);
      line.addColorStop(0, '#ffffff00');
      line.addColorStop(.72, '#d8ecffbf');
      line.addColorStop(1, '#ffffff00');
      c.fillStyle = line;
      c.fillRect(x, y + wrap - 70, 1, 95);
    }
  }

  // Use the supplied brand mark at its original proportions inside a white disc.
  c.save();
  c.beginPath();
  c.arc(32, 45, 24, 0, Math.PI * 2);
  c.clip();
  c.fillStyle = '#fff';
  c.fillRect(8, 21, 48, 48);
  c.drawImage(logo, 8, 21, 48, 48);
  c.restore();

  c.font = '800 43px Barlow';
  c.textAlign = 'center';
  c.textBaseline = 'alphabetic';
  c.letterSpacing = '0px';
  c.fillStyle = '#fff';
  const bounds = [];
  [...BRAND.name].forEach((letter, i) => {
    const y = 126 + i * 34;
    const m = c.measureText(letter);
    c.fillText(letter, 32, y);
    bounds.push({ str: letter, left: 32 - m.width / 2, right: 32 + m.width / 2, top: y - m.actualBoundingBoxAscent, bottom: y + m.actualBoundingBoxDescent, size: 43 });
  });

  // Three connected strokes echo the campaign's electrical routes and signature.
  c.strokeStyle = '#ffffff78';
  c.lineWidth = 1.5;
  c.lineCap = 'round';
  c.lineJoin = 'round';
  c.beginPath();
  c.moveTo(17, 465); c.lineTo(26, 465); c.lineTo(38, 453); c.lineTo(47, 453);
  c.moveTo(17, 477); c.lineTo(26, 477); c.lineTo(38, 465); c.lineTo(47, 465);
  c.stroke();
  c.fillStyle = '#ffffff';
  c.beginPath(); c.arc(32 + Math.sin(phase) * 9, 459 - Math.sin(phase) * 9, 2, 0, Math.PI * 2); c.fill();
  return bounds;
}
