// scenes-end.jsx — Scene 5 (YouTube paste) and Scene 6 (outro)

// ─────────────────────────────────────────────────────────────────────────────
// SCENE 5 — Paste YouTube → bilingual reader (15 → 19s) [localTime 0..4]
// A URL pill drops into a "factory" funnel; gears turn; out the bottom comes
// the bilingual reader strip. No real YouTube branding — just a generic
// "VIDEO" pill.
// ─────────────────────────────────────────────────────────────────────────────
function SceneFactory() {
  const { localTime } = useSprite();
  const L = useLang();
  const t = localTime;

  // Title fade
  const capOp = animate({ from: 0, to: 1, start: 0.1, end: 0.6 })(t) * animate({ from: 1, to: 0, start: 3.5, end: 3.9 })(t);

  // URL pill drops in
  const pillY = animate({ from: -120, to: 360, start: 0.4, end: 1.2, ease: Easing.easeInQuad })(t);
  const pillVisible = t > 0.4 && t < 1.4;
  const pillIntoFunnel = animate({ from: 1, to: 0, start: 1.1, end: 1.4, ease: Easing.easeInCubic })(t);

  // Funnel pulse on absorb
  const funnelPulse = (t > 1.1 && t < 1.5) ? 1 + Math.sin((t - 1.1) / 0.4 * Math.PI) * 0.08 : 1;

  // Gears spin throughout
  const gearAngle = t * 80;

  // Output strip emerges
  const outOp = animate({ from: 0, to: 1, start: 1.8, end: 2.4 })(t);
  const outY = animate({ from: -40, to: 0, start: 1.8, end: 2.4, ease: Easing.easeOutCubic })(t);

  // Stamp: "BILINGUAL"
  const stampOp = animate({ from: 0, to: 1, start: 2.6, end: 2.85, ease: Easing.easeOutBack })(t);
  const stampScale = animate({ from: 2.4, to: 1, start: 2.6, end: 2.9, ease: Easing.easeOutBack })(t);

  // Exit
  const exitT = animate({ from: 0, to: 1, start: 3.6, end: 4.0, ease: Easing.easeInCubic })(t);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: PAL.paper,
      overflow: 'hidden',
      opacity: 1 - exitT,
    }}>
      <Grain />

      {/* Caption — top */}
      <div style={{
        position: 'absolute',
        left: 80, top: 100,
        opacity: capOp,
        maxWidth: 700,
      }}>
        <div style={{
          fontFamily: FONT_MONO,
          fontSize: 16,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          color: PAL.pop,
          marginBottom: 18,
        }}>
          {L.factory_kicker}
        </div>
        <div style={{
          fontFamily: FONT_DISPLAY,
          fontSize: 84,
          fontStyle: 'italic',
          color: PAL.ink,
          lineHeight: 0.95,
          letterSpacing: '-0.02em',
        }}>
          {L.factory_l1}<br/>{L.factory_l2}
        </div>
      </div>

      {/* Factory machine — center */}
      <div style={{
        position: 'absolute',
        left: '50%', top: 380,
        transform: 'translateX(-50%)',
        width: 600,
      }}>
        {/* Funnel top opening */}
        <div style={{
          position: 'relative',
          width: 600,
          height: 100,
          margin: '0 auto',
        }}>
          {/* URL pill falling */}
          {pillVisible && (
            <div style={{
              position: 'absolute',
              left: '50%',
              top: pillY,
              transform: `translateX(-50%) scale(${pillIntoFunnel})`,
              opacity: pillIntoFunnel,
              background: PAL.ink,
              color: PAL.paper,
              padding: '12px 22px',
              borderRadius: 999,
              fontFamily: FONT_MONO,
              fontSize: 18,
              display: 'flex',
              alignItems: 'center',
              gap: 10,
            }}>
              <div style={{
                width: 22, height: 16,
                background: PAL.pop,
                borderRadius: 4,
                position: 'relative',
              }}>
                <div style={{
                  position: 'absolute',
                  left: 7, top: 3,
                  width: 0, height: 0,
                  borderLeft: `8px solid ${PAL.paper}`,
                  borderTop: '5px solid transparent',
                  borderBottom: '5px solid transparent',
                }} />
              </div>
              video.url/clip
            </div>
          )}
        </div>

        {/* Funnel + machine body */}
        <div style={{
          position: 'relative',
          width: 600,
          transform: `scale(${funnelPulse})`,
          transformOrigin: 'center top',
        }}>
          {/* Funnel */}
          <svg width="600" height="200" viewBox="0 0 600 200">
            <path d="M40,0 L560,0 L380,200 L220,200 Z"
              fill={PAL.paperDeep}
              stroke={PAL.ink}
              strokeWidth="3" />
            <line x1="40" y1="0" x2="560" y2="0" stroke={PAL.ink} strokeWidth="6" strokeLinecap="round"/>
          </svg>

          {/* Machine box */}
          <div style={{
            width: 360,
            height: 220,
            margin: '-2px auto 0',
            background: PAL.ink,
            border: `3px solid ${PAL.ink}`,
            borderRadius: '0 0 16px 16px',
            position: 'relative',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-around',
          }}>
            {/* Gears */}
            <Gear angle={gearAngle} size={100} color={PAL.pop} />
            <Gear angle={-gearAngle * 1.4} size={70} color={PAL.popSoft} />
            <Gear angle={gearAngle * 0.8} size={90} color={PAL.pop} />

            {/* Indicator lights */}
            <div style={{
              position: 'absolute',
              top: 14, left: 16,
              display: 'flex', gap: 8,
            }}>
              {[0, 1, 2].map(i => (
                <div key={i} style={{
                  width: 10, height: 10,
                  borderRadius: '50%',
                  background: ((Math.floor(t * 3) + i) % 3 === 0) ? PAL.pop : '#3a342c',
                }} />
              ))}
            </div>
            {/* Label */}
            <div style={{
              position: 'absolute',
              bottom: 12, right: 16,
              fontFamily: FONT_MONO,
              fontSize: 11,
              color: PAL.popSoft,
              letterSpacing: '0.14em',
            }}>{L.factory_engine}</div>
          </div>
        </div>

        {/* Output strip */}
        <div style={{
          width: 540,
          margin: '24px auto 0',
          background: PAL.paper,
          border: `2.5px solid ${PAL.ink}`,
          borderRadius: 12,
          padding: 24,
          opacity: outOp,
          transform: `translateY(${outY}px)`,
          boxShadow: `4px 4px 0 ${PAL.ink}`,
          position: 'relative',
        }}>
          {/* Stamp */}
          <div style={{
            position: 'absolute',
            top: -20, right: -28,
            transform: `rotate(-8deg) scale(${stampScale})`,
            opacity: stampOp,
            background: PAL.pop,
            color: PAL.paper,
            padding: '8px 16px',
            fontFamily: FONT_MONO,
            fontSize: 15,
            letterSpacing: '0.18em',
            border: `3px solid ${PAL.ink}`,
            borderRadius: 4,
          }}>{L.factory_stamp}</div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 24,
          }}>
            <div>
              <div style={{
                fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.14em',
                color: PAL.pop, marginBottom: 6,
              }}>DE</div>
              <div style={{ fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontSize: 22, color: PAL.ink, lineHeight: 1.3 }}>
                Wir gehen heute ins Kino.
              </div>
            </div>
            <div>
              <div style={{
                fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.14em',
                color: PAL.inkSoft, marginBottom: 6,
              }}>{L.lang_label || 'EN'}</div>
              <div style={{ fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontSize: 22, color: PAL.inkSoft, lineHeight: 1.3 }}>
                {L.sentence_3_en}
              </div>
            </div>
          </div>

          {/* Mini wave */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 3,
            marginTop: 18, height: 24,
          }}>
            {Array.from({ length: 50 }).map((_, i) => (
              <div key={i} style={{
                width: 3,
                height: 6 + Math.abs(Math.sin(i * 0.4 + t * 4)) * 18,
                background: PAL.inkSoft,
                opacity: 0.6,
                borderRadius: 1,
              }} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function Gear({ angle, size, color }) {
  const teeth = 10;
  const points = [];
  for (let i = 0; i < teeth * 2; i++) {
    const r = i % 2 === 0 ? size / 2 : size / 2 * 0.82;
    const a = (i / (teeth * 2)) * Math.PI * 2;
    points.push(`${Math.cos(a) * r + size / 2},${Math.sin(a) * r + size / 2}`);
  }
  return (
    <svg width={size} height={size} style={{ transform: `rotate(${angle}deg)` }}>
      <polygon points={points.join(' ')} fill={color} stroke={PAL.paper} strokeWidth="2" />
      <circle cx={size / 2} cy={size / 2} r={size * 0.2} fill={PAL.ink} />
      <circle cx={size / 2} cy={size / 2} r={size * 0.08} fill={color} />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SCENE 6 — Outro stats + CTA (19 → 24s) [localTime 0..5]
// ─────────────────────────────────────────────────────────────────────────────
function SceneOutro() {
  const { localTime } = useSprite();
  const L = useLang();
  const t = localTime;

  // Stats appear sequentially
  const stat1 = animate({ from: 0, to: 1, start: 0.2, end: 0.7, ease: Easing.easeOutBack })(t);
  const stat2 = animate({ from: 0, to: 1, start: 0.6, end: 1.1, ease: Easing.easeOutBack })(t);
  const stat3 = animate({ from: 0, to: 1, start: 1.0, end: 1.5, ease: Easing.easeOutBack })(t);
  const stat4 = animate({ from: 0, to: 1, start: 1.4, end: 1.9, ease: Easing.easeOutBack })(t);

  // Stats slide off
  const statsOff = animate({ from: 0, to: 1, start: 2.6, end: 3.1, ease: Easing.easeInCubic })(t);

  // Big closing line
  const lineOp = animate({ from: 0, to: 1, start: 3.0, end: 3.6 })(t);
  const lineY = animate({ from: 30, to: 0, start: 3.0, end: 3.6, ease: Easing.easeOutCubic })(t);

  // CTA
  const ctaOp = animate({ from: 0, to: 1, start: 3.7, end: 4.1, ease: Easing.easeOutBack })(t);
  const ctaScale = animate({ from: 0.8, to: 1, start: 3.7, end: 4.1, ease: Easing.easeOutBack })(t);

  // Final wordmark
  const wmOp = animate({ from: 0, to: 1, start: 4.2, end: 4.6 })(t);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: PAL.ink,
      overflow: 'hidden',
    }}>
      {/* Stats grid */}
      <div style={{
        position: 'absolute', inset: 0,
        opacity: 1 - statsOff,
        transform: `translateY(${-statsOff * 50}px)`,
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gridTemplateRows: '1fr 1fr',
          padding: 80,
          gap: 20,
        }}>
          <Stat n="200" label={L.stat_stories_label} sub={L.stat_stories_sub} op={stat1} />
          <Stat n="128" label={L.stat_lessons_label} sub={L.stat_lessons_sub} op={stat2} />
          <Stat n="8" label={L.stat_trainers_label} sub={L.stat_trainers_sub} op={stat3} />
          <Stat n="4" label={L.stat_langs_label} sub={L.stat_langs_sub} op={stat4} />
        </div>
      </div>

      {/* Closing line */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0,
        top: '32%',
        textAlign: 'center',
        opacity: lineOp,
        transform: `translateY(${lineY}px)`,
      }}>
        <div style={{
          fontFamily: FONT_DISPLAY,
          fontStyle: 'italic',
          fontSize: 110,
          color: PAL.paper,
          lineHeight: 0.95,
          letterSpacing: '-0.03em',
        }}>
          {L.outro_l1}<br/>
          <span style={{ color: PAL.pop }}>{L.outro_l2}</span>
        </div>
      </div>

      {/* CTA */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '64%',
        transform: `translate(-50%, 0) scale(${ctaScale})`,
        opacity: ctaOp,
        textAlign: 'center',
      }}>
        <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 14,
          background: PAL.pop,
          color: PAL.paper,
          padding: '22px 44px',
          borderRadius: 999,
          fontFamily: FONT_DISPLAY,
          fontSize: 38,
          fontStyle: 'italic',
          border: `3px solid ${PAL.paper}`,
        }}>
          <span style={{
            fontFamily: FONT_MONO,
            fontSize: 13,
            letterSpacing: '0.18em',
            background: PAL.paper,
            color: PAL.pop,
            padding: '4px 10px',
            borderRadius: 999,
            fontStyle: 'normal',
          }}>{L.cta_pill}</span>
          {L.cta_text}
        </div>
        <div style={{
          marginTop: 20,
          fontFamily: FONT_MONO,
          fontSize: 16,
          color: 'rgba(243,237,224,0.6)',
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
        }}>
          {L.cta_platforms}
        </div>
      </div>

      {/* Wordmark with fox */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0,
        bottom: 40,
        textAlign: 'center',
        opacity: wmOp,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 16,
      }}>
        <div style={{ width: 80, height: 80, position: 'relative' }}>
          <img src="vokki-icon.png" alt="Vokki" style={{
            width: '100%', height: '100%',
            objectFit: 'contain',
            display: 'block',
            borderRadius: 16,
          }} />
        </div>
        <div style={{
          fontFamily: FONT_DISPLAY,
          fontStyle: 'italic',
          fontSize: 60,
          fontWeight: 500,
          color: PAL.paper,
          letterSpacing: '-0.02em',
        }}>
          vokki<span style={{ color: PAL.pop }}>.</span>
        </div>
      </div>
    </div>
  );
}

function Stat({ n, label, sub, op }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateRows: 'auto auto auto',
      alignContent: 'center',
      justifyItems: 'start',
      rowGap: 4,
      padding: 28,
      border: `2px solid rgba(243,237,224,0.15)`,
      borderRadius: 24,
      opacity: op,
      transform: `scale(${0.85 + op * 0.15})`,
      background: 'rgba(243,237,224,0.03)',
      overflow: 'hidden',
      minHeight: 0,
      minWidth: 0,
    }}>
      <div style={{
        fontFamily: FONT_DISPLAY,
        fontStyle: 'italic',
        fontSize: 120,
        color: PAL.pop,
        lineHeight: 1,
        letterSpacing: '-0.04em',
      }}>{n}</div>
      <div style={{
        fontFamily: FONT_DISPLAY,
        fontSize: 22,
        color: PAL.paper,
        lineHeight: 1.15,
        marginTop: 4,
      }}>{label}</div>
      <div style={{
        fontFamily: FONT_MONO,
        fontSize: 11,
        color: 'rgba(243,237,224,0.55)',
        letterSpacing: '0.12em',
        textTransform: 'uppercase',
        lineHeight: 1.3,
        marginTop: 4,
      }}>{sub}</div>
    </div>
  );
}

Object.assign(window, { SceneFactory, SceneOutro });