// V2 — Kinetic typography + portfolio UI flashes
// Bold words slam in on a strict grid. Between beats, quick glimpses of
// portfolio product UIs (mocked) flash past like signal chatter.

function V2_Kinetic() {
  const bg = window.JB.bg === 'dark' ? '#0a0a0a' : '#f4f1ec';
  const fg = window.JB.bg === 'dark' ? '#f4f1ec' : '#0a0a0a';
  const dim = window.JB.bg === 'dark' ? 'rgba(244,241,236,0.5)' : 'rgba(10,10,10,0.5)';
  const accent = window.JB.accent;
  const time = useTime();

  return (
    <div style={{ position: 'absolute', inset: 0, background: bg, overflow: 'hidden', textAlign: "justify" }}>
      <GridOverlay />

      <Sprite start={0} end={28} keepMounted>
        
      </Sprite>

      {/* Beat 1 (0-5.5): "EXPAND" */}
      <Sprite start={0.2} end={5.5}>
        <BigWord word="EXPAND" fg={fg} dim={dim} accent={accent} index="001" />
      </Sprite>

      {/* Beat 2 (5.5-10): "YOUR" */}
      <Sprite start={5.5} end={10.0}>
        <BigWord word="YOUR" fg={fg} dim={dim} accent={accent} index="002" />
      </Sprite>

      {/* Beat 3 (10-16): "HORIZONS." */}
      <Sprite start={10.0} end={16.0}>
        <BigWord word="HORIZONS." fg={fg} dim={dim} accent={accent} index="003" accentWord />
      </Sprite>

      {/* Deal ticker (16-23.5) */}
      <Sprite start={16.0} end={23.5}>
        <DealTicker bg={bg} fg={fg} dim={dim} accent={accent} />
      </Sprite>

      {/* End card (23.5-28) */}
      <Sprite start={23.5} end={28}>
        <EndCard bg={bg} fg={fg} accent={accent} />
      </Sprite>

      <GrainOverlay opacity={window.JB.bg === 'dark' ? 0.06 : 0.03} />
    </div>);

}

function BigWord({ word, fg, dim, accent, index, italic, accentWord }) {
  const { progress, localTime, duration } = useSprite();
  // Mask reveal from left
  const reveal = Easing.easeOutQuart(clamp(progress * 1.5, 0, 1));
  const exit = clamp((progress - 0.82) * 6, 0, 1);
  const exitShift = Easing.easeInCubic(exit) * -80;

  // Chars animation: stagger in
  const chars = word.split('');
  return (
    <>
      {/* Huge word */}
      <div style={{
        position: 'absolute', left: 96, right: 96,
        top: 360,
        display: 'flex', flexWrap: 'wrap',
        fontFamily: window.JB.fontDisplay,
        fontWeight: 600,
        color: fg,
        letterSpacing: '-0.055em',
        lineHeight: 0.9,
        fontStyle: italic ? 'italic' : 'normal',
        fontWeight: italic ? 400 : 600,
        opacity: 1 - exit,
        transform: `translateY(${exitShift}px)`, fontSize: "313px"
      }}>
        {chars.map((c, i) => {
          const ci = clamp((localTime - i * 0.18) * 2.2, 0, 1);
          const ep = Easing.easeOutBack(ci);
          return (
            <span key={i} style={{
              display: 'inline-block',
              transform: `translateY(${(1 - ep) * 80}px)`,
              opacity: ci,
              color: accentWord && i >= chars.length - 1 ? accent : accentWord ? fg : fg
            }}>{c}</span>);

        })}
      </div>

      {/* Subtitle */}
      <div style={{
        position: 'absolute', left: 96, bottom: 140,
        fontFamily: window.JB.fontMono, letterSpacing: '0.12em',
        color: dim, textTransform: 'uppercase',
        opacity: clamp((progress - 0.3) * 3, 0, 1) * (1 - exit), fontSize: "33px"
      }}>
        {index === '001' && 'AN ACCELERATOR FOR CORAGEOUS TRAILBLAZERS'}
        {index === '002' && 'WE BET ON AMBITIOUS FOUNDERS'}
        {index === '003' && 'DEEP TECH · AI · FRONTIER INFRA · B2B'}
      </div>

      {/* Grid anchor marks */}
      <div style={{
        position: 'absolute', right: 96, top: 160,
        fontFamily: window.JB.fontMono, letterSpacing: '0.12em',
        color: dim,
        opacity: 1 - exit, fontSize: "33px"
      }}>
        {String(Math.floor(localTime * 10)).padStart(3, '0')} / {String(Math.floor(duration * 10)).padStart(3, '0')}
      </div>

      <TickRow y={1020} count={60} />
    </>);

}

// Portfolio UI flash — multiple product mocks appearing fast
const PORTFOLIO = [
{ name: 'ORBITAL.AI', domain: 'Orbital predictive fleet OS', ui: 'chart' },
{ name: 'SYNAPSE.BIO', domain: 'Protein design studio', ui: 'mol' },
{ name: 'IRIDIA', domain: 'Neural compiler for edge devices', ui: 'code' },
{ name: 'TERRA-SAT', domain: 'Earth observation infrastructure', ui: 'map' },
{ name: 'HALIO', domain: 'Autonomous lab scheduling', ui: 'kanban' },
{ name: 'QUARK OS', domain: 'Quantum middleware', ui: 'terminal' }];


function PortfolioFlash({ bg, fg, dim, accent, seed }) {
  const { progress, localTime } = useSprite();
  const entry = clamp(progress * 5, 0, 1);
  const exit = clamp((progress - 0.8) * 6, 0, 1);
  const fade = entry * (1 - exit);

  // Pick 3 portfolio items based on seed
  const items = [
  PORTFOLIO[seed * 3 % PORTFOLIO.length],
  PORTFOLIO[(seed * 3 + 1) % PORTFOLIO.length],
  PORTFOLIO[(seed * 3 + 2) % PORTFOLIO.length]];


  return (
    <>
      {/* Big tag */}
      <div style={{
        position: 'absolute', left: 96, top: 140,
        fontFamily: window.JB.fontMono, fontSize: 13, letterSpacing: '0.22em',
        color: accent, textTransform: 'uppercase',
        opacity: fade
      }}>— PORTFOLIO · live</div>

      {/* 3 browser mocks */}
      <div style={{
        position: 'absolute', left: 96, right: 96, top: 260, bottom: 140,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32
      }}>
        {items.map((item, i) => {
          const p = clamp((localTime - i * 0.08) * 6, 0, 1);
          const ep = Easing.easeOutCubic(p);
          return (
            <div key={i} style={{
              opacity: ep * (1 - exit),
              transform: `translateY(${(1 - ep) * 40}px) scale(${0.96 + 0.04 * ep})`,
              background: window.JB.bg === 'dark' ? '#141414' : '#ffffff',
              border: `1px solid ${dim}`,
              borderRadius: 14,
              overflow: 'hidden',
              display: 'flex', flexDirection: 'column'
            }}>
              {/* Browser chrome */}
              <div style={{
                height: 36, borderBottom: `1px solid ${dim}`,
                display: 'flex', alignItems: 'center', padding: '0 12px', gap: 8
              }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: dim }} />
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: dim }} />
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: dim }} />
                <div style={{
                  flex: 1, marginLeft: 12,
                  fontFamily: window.JB.fontMono, fontSize: 11, color: dim,
                  letterSpacing: '0.08em', textTransform: 'lowercase'
                }}>{item.name.toLowerCase()}.com</div>
              </div>
              {/* Body */}
              <div style={{ flex: 1, padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div style={{
                  fontFamily: window.JB.fontMono, fontSize: 11, letterSpacing: '0.14em',
                  color: accent, textTransform: 'uppercase'
                }}>{item.name}</div>
                <div style={{
                  fontFamily: window.JB.fontDisplay, fontSize: 28, fontWeight: 500,
                  color: fg, letterSpacing: '-0.02em', lineHeight: 1.1
                }}>{item.domain}</div>
                <div style={{ flex: 1, marginTop: 12 }}>
                  <MockUI kind={item.ui} fg={fg} dim={dim} accent={accent} bg={bg} t={localTime} />
                </div>
              </div>
            </div>);

        })}
      </div>

      <TickRow y={1020} count={60} />
    </>);

}

// Tiny fake UIs — abstracted, legible at glance
function MockUI({ kind, fg, dim, accent, bg, t }) {
  const panel = window.JB.bg === 'dark' ? '#1b1b1b' : '#f4f1ec';
  if (kind === 'chart') {
    const bars = [0.4, 0.7, 0.5, 0.9, 0.6, 0.8, 0.95, 0.7];
    return (
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: '100%', paddingBottom: 16 }}>
        {bars.map((b, i) => {
          const anim = clamp((Math.sin(t * 2 + i) + 1) / 2 * 0.2 + 0.8, 0, 1);
          return <div key={i} style={{
            flex: 1, height: `${b * anim * 100}%`,
            background: i === bars.length - 1 ? accent : dim
          }} />;
        })}
      </div>);

  }
  if (kind === 'mol') {
    return (
      <svg width="100%" height="100%" viewBox="0 0 200 140">
        {[[40, 70], [80, 40], [120, 40], [160, 70], [80, 100], [120, 100]].map(([x, y], i) =>
        <circle key={i} cx={x} cy={y} r="7" fill={i % 3 === 0 ? accent : fg} />
        )}
        <path d="M40 70 L80 40 L120 40 L160 70 L120 100 L80 100 Z" stroke={dim} fill="none" strokeWidth="1.5" />
        <path d="M80 40 L120 100 M120 40 L80 100" stroke={dim} strokeWidth="1.5" />
      </svg>);

  }
  if (kind === 'code') {
    const lines = [
    { w: 60, c: accent }, { w: 85, c: dim }, { w: 40, c: dim },
    { w: 70, c: fg }, { w: 90, c: dim }, { w: 55, c: accent }, { w: 75, c: dim }];

    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontFamily: window.JB.fontMono, fontSize: 11 }}>
        {lines.map((l, i) =>
        <div key={i} style={{
          width: `${l.w}%`, height: 10, background: l.c, opacity: 0.7, borderRadius: 2
        }} />
        )}
      </div>);

  }
  if (kind === 'map') {
    return (
      <div style={{ position: 'relative', height: '100%', background: panel, border: `1px solid ${dim}` }}>
        {/* grid */}
        {[...Array(6)].map((_, i) =>
        <div key={'h' + i} style={{ position: 'absolute', left: 0, right: 0, top: `${i * 20}%`, height: 1, background: dim, opacity: 0.3 }} />
        )}
        {[...Array(8)].map((_, i) =>
        <div key={'v' + i} style={{ position: 'absolute', top: 0, bottom: 0, left: `${i * 14}%`, width: 1, background: dim, opacity: 0.3 }} />
        )}
        {[[30, 40], [60, 30], [80, 60], [45, 75], [20, 60]].map(([x, y], i) =>
        <div key={i} style={{
          position: 'absolute', left: `${x}%`, top: `${y}%`,
          width: 8, height: 8, borderRadius: '50%', background: accent,
          transform: 'translate(-50%,-50%)'
        }} />
        )}
      </div>);

  }
  if (kind === 'kanban') {
    return (
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, height: '100%' }}>
        {[0, 1, 2].map((col) =>
        <div key={col} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ height: 6, background: col === 1 ? accent : dim, opacity: 0.8 }} />
            {[0, 1, 2].map((i) =>
          <div key={i} style={{ flex: 1, background: panel, border: `1px solid ${dim}`, borderRadius: 3 }} />
          )}
          </div>
        )}
      </div>);

  }
  if (kind === 'terminal') {
    return (
      <div style={{ fontFamily: window.JB.fontMono, fontSize: 10, color: fg, display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ color: accent }}>$ quark deploy --qpu</div>
        <div style={{ color: dim }}>› compiling circuit [qasm]…</div>
        <div style={{ color: dim }}>› allocating 128 qubits</div>
        <div style={{ color: fg }}>✓ ready in 0.42s</div>
        <div style={{ color: accent, marginTop: 4 }}>$ _<span style={{ opacity: (Math.sin(t * 6) + 1) / 2 }}>█</span></div>
      </div>);

  }
  return null;
}

function Manifesto({ bg, fg, dim, accent }) {
  const { progress, localTime } = useSprite();
  const entry = clamp(progress * 4, 0, 1);
  const exit = clamp((progress - 0.82) * 6, 0, 1);
  const fade = entry * (1 - exit);

  const lines = [
  { k: 'WE BACK', v: 'brave and diligent founders.' },
  { k: '€100k', v: 'founders to good fortune.' },
  { k: 'WE BUILD', v: 'in Madrid, for the world.' }];


  return (
    <>
      <div style={{
        position: 'absolute', left: 96, top: 140,
        fontFamily: window.JB.fontMono, fontSize: 13, letterSpacing: '0.22em',
        color: accent, textTransform: 'uppercase',
        opacity: fade
      }}>— 004 / Manifesto</div>

      <div style={{
        position: 'absolute', left: 96, right: 96, top: 260, display: 'flex', flexDirection: 'column'
      }}>
        {lines.map((l, i) => {
          const p = clamp((localTime - i * 0.7 - 0.3) * 2, 0, 1);
          const ep = Easing.easeOutCubic(p);
          return (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '240px 1fr', gap: 64, alignItems: 'baseline',
              padding: '40px 0', borderBottom: `1px solid ${dim}`,
              opacity: ep * (1 - exit),
              transform: `translateY(${(1 - ep) * 32}px)`
            }}>
              <div style={{
                fontFamily: window.JB.fontMono, fontSize: 20, letterSpacing: '0.2em',
                color: accent, textTransform: 'uppercase'
              }}>{l.k}</div>
              <div style={{
                fontFamily: window.JB.fontDisplay, fontSize: 88, fontWeight: 500,
                color: fg, letterSpacing: '-0.035em', lineHeight: 1.0
              }}>{l.v}</div>
            </div>);

        })}
      </div>
    </>);

}

function DealTicker({ bg, fg, dim, accent }) {
  const { progress, localTime } = useSprite();
  const entry = clamp(progress * 5, 0, 1);
  const exit = clamp((progress - 0.82) * 6, 0, 1);
  const fade = entry * (1 - exit);

  // Footnote fades in with items[1] (€100K)
  const footP = clamp((localTime - 1 * 0.8 - 0.2) / 1.6, 0, 1);
  const footEp = Easing.easeOutCubic(footP);
  const footFade = footEp * (1 - exit);

  const items = [
  { k: '10', v: 'STARTUPS PER COHORT' },
  { k: '€100K', v: 'Investment' },
  { k: '3', v: 'months' },
  { k: 'Madrid', v: 'in person' }];


  return (
    <>
      <div style={{
        position: 'absolute', left: 96, right: 96, top: '50%',
        transform: 'translateY(-50%)',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32
      }}>
        {items.map((it, i) => {
          const p = clamp((localTime - i * 0.8 - 0.2) / 1.6, 0, 1);
          const ep = Easing.easeOutCubic(p);
          return (
            <div key={i} style={{
              opacity: ep * (1 - exit),
              transform: `translateY(${(1 - ep) * 40}px)`,
              borderLeft: `1px solid ${dim}`,
              paddingLeft: 32
            }}>
              <div style={{
                fontFamily: window.JB.fontDisplay, fontWeight: 600,
                color: i === 1 ? accent : fg, letterSpacing: '-0.045em', lineHeight: 1, height: "133px", fontSize: "133px"
              }}>
                {it.k}
                {i === 1 && <span style={{ fontSize: '40px', verticalAlign: 'top', marginLeft: 6, color: accent }}>*</span>}
              </div>
              <div style={{
                marginTop: 16,
                fontFamily: window.JB.fontMono, letterSpacing: '0.16em',
                color: dim, textTransform: 'uppercase', fontSize: "33px"
              }}>{it.v}</div>
            </div>);

        })}
      </div>

      {/* Footnote */}
      <div style={{
        position: 'absolute', left: 96, right: 96, bottom: 120,
        fontFamily: window.JB.fontMono, letterSpacing: '0.08em',
        textTransform: 'uppercase', lineHeight: 1.5,
        opacity: footFade, maxWidth: 900, fontSize: "33px", color: "rgb(255, 91, 31)",
        transform: `translateY(${(1 - footEp) * 60}px)`
      }}>
        <span style={{ marginRight: 8, lineHeight: "1", color: "rgb(255, 91, 31)", textAlign: "justify" }}>*</span>
        €100k SAFE for 7% equity at program start. Possibility for additional non-dilutive €100k with our partners (€200k total for 7% equity).
      </div>
    </>);

}

window.V2_Kinetic = V2_Kinetic;