// V2 — Kinetic typography (Portrait 1080×1920)
// Same timeline & beats as v2_kinetic.jsx, re-laid out for portrait.

function V2_Kinetic_Portrait() {
  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;

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

      {/* Beat 1 (0-5.5): "EXPAND" */}
      <Sprite start={0.2} end={5.5}>
        <BigWordP word="EXPAND" fg={fg} dim={dim} accent={accent} index="001" sub={["AN ACCELERATOR FOR", "COURAGEOUS TRAILBLAZERS"]} />
      </Sprite>

      {/* Beat 2 (5.5-10): "YOUR" */}
      <Sprite start={5.5} end={10.0}>
        <BigWordP word="YOUR" fg={fg} dim={dim} accent={accent} index="002" sub={["WE BET ON", "AMBITIOUS FOUNDERS"]} />
      </Sprite>

      {/* Beat 3 (10-16): "HORIZONS." */}
      <Sprite start={10.0} end={16.0}>
        <BigWordP word="HORIZONS." fg={fg} dim={dim} accent={accent} index="003" accentWord sub={["DEEP TECH · AI", "FRONTIER INFRA · B2B"]} />
      </Sprite>

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

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

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

function BigWordP({ word, fg, dim, accent, index, accentWord, sub }) {
  const { progress, localTime, duration } = useSprite();
  const exit = clamp((progress - 0.82) * 6, 0, 1);
  const exitShift = Easing.easeInCubic(exit) * -60;

  const chars = word.split('');

  // Conservative auto-fit: keep font under a sensible cap and well within
  // the 1080-wide canvas with generous safe-area padding (120px each side).
  // Char width ≈ 0.64em for Fraunces 600 with -0.055em tracking.
  const availWidth = 1080 - 320;
  const perCharRatio = 0.64;
  const fontSize = Math.min(180, Math.floor(availWidth / (chars.length * perCharRatio)));

  return (
    <>
      {/* Top eyebrow row: index + counter */}
      <div style={{
        position: 'absolute', left: 160, right: 160, top: 240,
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        fontFamily: window.JB.fontMono, fontSize: 26,
        letterSpacing: '0.22em', textTransform: 'uppercase',
        opacity: clamp((progress - 0.05) * 5, 0, 1) * (1 - exit),
      }}>
        <span style={{ color: accent }}>— {index}</span>
        <span style={{ color: dim, letterSpacing: '0.14em' }}>
          {String(Math.floor(localTime * 10)).padStart(3, '0')} / {String(Math.floor(duration * 10)).padStart(3, '0')}
        </span>
      </div>

      {/* Word — centered vertically, safe horizontal padding */}
      <div style={{
        position: 'absolute', left: 160, right: 160,
        top: '50%',
        transform: `translateY(-50%) translateY(${exitShift}px)`,
        display: 'flex', flexWrap: 'nowrap', justifyContent: 'center',
        fontFamily: window.JB.fontDisplay,
        fontWeight: 600,
        color: fg,
        letterSpacing: '-0.045em',
        lineHeight: 0.95,
        opacity: 1 - exit,
        fontSize: `${fontSize}px`,
      }}>
        {chars.map((c, i) => {
          const ci = clamp((localTime - i * 0.12) * 2.4, 0, 1);
          const ep = Easing.easeOutBack(ci);
          return (
            <span key={i} style={{
              display: 'inline-block',
              transform: `translateY(${(1 - ep) * 60}px)`,
              opacity: ci,
              color: accentWord && i >= chars.length - 1 ? accent : fg,
            }}>{c}</span>
          );
        })}
      </div>

      {/* Subtitle, bottom */}
      <div style={{
        position: 'absolute', left: 160, right: 160, bottom: 320,
        fontFamily: window.JB.fontMono, letterSpacing: '0.18em',
        color: dim, textTransform: 'uppercase',
        opacity: clamp((progress - 0.35) * 3, 0, 1) * (1 - exit),
        fontSize: 28, lineHeight: 1.55, textAlign: 'center',
      }}>
        {sub && sub.map((line, i) => (
          <div key={i}>{line}</div>
        ))}
      </div>

      <TickRow y={1840} count={32} width={1080} />
    </>
  );
}

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

  const footP = clamp((localTime - 3 * 0.55 - 0.6) / 1.6, 0, 1);
  const footEp = Easing.easeOutCubic(footP);
  const footFade = footEp * (1 - exit);

  const items = [
    { k: '11', v: 'STARTUPS · COHORT' },
    { k: '€100K', v: 'INVESTMENT*' },
    { k: '3', v: 'MONTHS · IN PERSON' },
    { k: 'Madrid', v: 'PROGRAM CITY' },
  ];

  return (
    <>
      {/* Eyebrow */}
      <div style={{
        position: 'absolute', left: 160, right: 160, top: 240,
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        fontFamily: window.JB.fontMono, fontSize: 24, letterSpacing: '0.22em',
        textTransform: 'uppercase',
        opacity: clamp(progress * 5, 0, 1) * (1 - exit),
      }}>
        <span style={{ color: accent }}>— 004 / The deal</span>
        <span style={{ color: dim, letterSpacing: '0.14em' }}>04 stats</span>
      </div>

      {/* 4 vertical rows — mono label left, big number right */}
      <div style={{
        position: 'absolute', left: 160, right: 160,
        top: 540, bottom: 460,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        {items.map((it, i) => {
          const p = clamp((localTime - i * 0.55 - 0.2) / 1.4, 0, 1);
          const ep = Easing.easeOutCubic(p);
          const isAccent = i === 1;
          // Adapt number font-size to character count so wide values (€100K, Madrid) still feel commanding
          const len = it.k.length;
          const num = len <= 2 ? 180 : len <= 4 ? 150 : 120;
          return (
            <div key={i} style={{
              opacity: ep * (1 - exit),
              transform: `translateY(${(1 - ep) * 28}px)`,
              display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
              gap: 32,
              borderTop: i === 0 ? `1px solid ${dim}` : 'none',
              borderBottom: `1px solid ${dim}`,
              padding: '18px 0 16px',
            }}>
              <div style={{
                fontFamily: window.JB.fontDisplay, fontSize: 28,
                fontStyle: 'italic',
                letterSpacing: '0.01em',
                color: dim,
                flex: '0 0 auto', maxWidth: 360,
              }}>{it.v}</div>
              <div style={{
                fontFamily: window.JB.fontDisplay, fontWeight: 600,
                color: isAccent ? accent : fg,
                letterSpacing: '-0.04em', lineHeight: 1,
                fontSize: num,
                textAlign: 'right',
              }}>
                {it.k}
                {isAccent && <span style={{ fontSize: 0.22 * num, verticalAlign: 'top', marginLeft: 6, color: accent }}>*</span>}
              </div>
            </div>
          );
        })}
      </div>

      {/* Footnote */}
      <div style={{
        position: 'absolute', left: 160, right: 160, bottom: 200,
        fontFamily: window.JB.fontDisplay,
        lineHeight: 1.5,
        opacity: footFade, fontSize: 30, color: accent,
        transform: `translateY(${(1 - footEp) * 60}px)`,
      }}>
        <span style={{ marginRight: 8 }}>*</span>
        €100k SAFE for 7% equity at program start. Possibility for additional non-dilutive €100k with our partners (€200k total for 7% equity).
      </div>

      <TickRow y={1840} count={32} width={1080} />
    </>
  );
}

function EndCardP({ bg, fg, accent }) {
  const { progress } = useSprite();
  const p = Easing.easeOutCubic(clamp(progress * 2.5, 0, 1));
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: bg,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      zIndex: 20,
    }}>
      <div style={{ opacity: p, transform: `translateY(${(1 - p) * 16}px)` }}>
        <img
          src={window.JUPITER_LOGO_DATA_URL || "jupiter/jupiter-base-logo.png"}
          alt="Jupiter Base"
          style={{
            display: 'block',
            filter: window.JB.bg === 'dark' ? 'invert(1)' : 'none',
            objectFit: 'contain',
            width: 640, height: 'auto',
          }}
        />
      </div>
      <div style={{
        marginTop: 48,
        width: clamp((progress - 0.15) * 2, 0, 1) * 200,
        height: 3,
        background: accent,
      }} />
    </div>
  );
}

window.V2_Kinetic_Portrait = V2_Kinetic_Portrait;