/* global React */
const { useState, useEffect, useRef } = React;

// ═══ Splitlight mark (authentic — bright blue + acid green) ═══
function SLMark({ size = 60, light = false }) {
  const w = size, h = size * 0.57;
  const ink = light ? '#FFFFFF' : '#0E1116';
  return (
    <svg className="sl-glyph" viewBox="0 0 70 40" width={w} height={h}>
      <line x1="8" y1="20" x2="20" y2="20" stroke={ink} strokeWidth="2.5" strokeLinecap="round" />
      <circle cx="30" cy="20" r="6" fill="none" stroke={ink} strokeWidth="2" />
      <line x1="40" y1="14" x2="54" y2="6" stroke="#5274ff" strokeWidth="2.5" strokeLinecap="round" />
      <line x1="40" y1="26" x2="54" y2="34" stroke="#66FF00" strokeWidth="2.5" strokeLinecap="round" />
    </svg>
  );
}

// ═══ Slide footer (auto-detects dark/light parent slide) ═══
function Foot({ idx, total, label }) {
  const ref = useRef(null);
  const [light, setLight] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const slide = ref.current.closest('.slide');
    if (!slide) return;
    const bg = getComputedStyle(slide).backgroundColor;
    // parse rgb(r,g,b) → luminance
    const m = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
    if (m) {
      const [r,g,b] = [+m[1], +m[2], +m[3]];
      const lum = (0.299*r + 0.587*g + 0.114*b) / 255;
      setLight(lum < 0.4);
    }
  }, []);
  const ink = light ? 'rgba(255,255,255,0.55)' : 'var(--ink-3)';
  return (
    <div ref={ref} className="deck-foot" style={{ color: ink }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, color: light ? '#fff' : 'var(--ink)' }}>
        <SLMark size={26} light={light} />
        <span>Splitlight × SWC Partnership</span>
      </div>
      <div className="rule" />
      <div>{label}</div>
      <div className="rule" />
      <div className="mono" style={{ letterSpacing: '0.08em' }}>{String(idx).padStart(2,'0')} / {String(total).padStart(2,'0')}</div>
    </div>
  );
}

// ═══ Co-brand lockup ═══
function Lockup({ size = 'sm', light = false }) {
  const dim = size === 'lg' ? 80 : size === 'md' ? 64 : 50;
  const fs = size === 'lg' ? 32 : size === 'md' ? 26 : 20;
  const xs = size === 'lg' ? 44 : size === 'md' ? 34 : 26;
  const logoH = size === 'lg' ? 72 : size === 'md' ? 56 : 42;
  return (
    <div className="lockup" style={{ fontSize: fs, gap: size === 'lg' ? 28 : 18, color: light ? '#FFFFFF' : 'inherit' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <SLMark size={dim} light={light} />
        <span style={{ fontWeight: 700, letterSpacing: '-0.01em' }}>splitlight</span>
      </div>
      <span className="x" style={{ fontSize: xs }}>×</span>
      <img src={light ? "swc-logo.svg" : "swc-logo-dark.svg?v=2"} alt="SWC Partnership" style={{ height: logoH, width: 'auto', display: 'block' }} />
    </div>
  );
}

// ═══ Animated counter ═══
function Counter({ to, duration = 2400, prefix = '', suffix = '', commas = true, trigger }) {
  const [v, setV] = useState(0);
  useEffect(() => {
    let start = 0; let raf;
    const t0 = performance.now();
    const ease = (x) => 1 - Math.pow(1 - x, 3);
    const step = (now) => {
      const p = Math.min(1, (now - t0) / duration);
      setV(Math.round(to * ease(p)));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [to, duration, trigger]);
  const text = commas ? v.toLocaleString('en-GB') : String(v);
  return <span>{prefix}{text}{suffix}</span>;
}

// ═══ Big bar (impressions vs clicks) ═══
function ImpressionsBar({ impressions, clicks, label, ctr, accent='var(--swc-teal)', highlight=false }) {
  const pct = (clicks / impressions) * 100;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
      <div style={{ width: 360, fontSize: 20, fontWeight: 500, color: 'var(--ink)' }}>{label}</div>
      <div style={{ flex: 1, position: 'relative' }}>
        <div style={{
          height: 38,
          background: highlight ? 'rgba(192,57,43,0.10)' : 'var(--paper-3)',
          borderRadius: 6,
          position: 'relative',
          overflow: 'hidden'
        }}>
          {/* clicks bar — visible sliver */}
          <div style={{
            position: 'absolute', left: 0, top: 0, bottom: 0,
            width: `${Math.max(pct, 0.4)}%`,
            background: accent,
            transition: 'width 1200ms cubic-bezier(.22,1,.36,1)'
          }} />
        </div>
        <div className="mono" style={{ position:'absolute', right: 12, top: 8, fontSize: 14, color: highlight ? 'var(--warn)' : 'var(--ink-2)', fontWeight: 600 }}>
          {clicks} / {impressions.toLocaleString('en-GB')} · {ctr}%
        </div>
      </div>
    </div>
  );
}

// ═══ Stat block ═══
function Stat({ value, label, accent='var(--sl-blue)' }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 6 }}>
      <div style={{ fontSize: 78, fontWeight: 700, color: accent, lineHeight: 1, letterSpacing: '-0.02em' }}>{value}</div>
      <div style={{ fontSize: 18, color: 'var(--ink-2)', textTransform: 'uppercase', letterSpacing: '2px', fontFamily:'var(--mono)' }}>{label}</div>
    </div>
  );
}

window.SLMark = SLMark;
window.Lockup = Lockup;
window.Foot = Foot;
window.Counter = Counter;
window.ImpressionsBar = ImpressionsBar;
window.Stat = Stat;