// scenes/Scene2_Link.jsx
// 4.3 → 9.0s — The "after" begins: create a secure link → client side receives
// the branded collecte page → files drop in. Cut from the end-wipe of Scene 1.

function Scene2_Link({ start = 4.3, end = 9.0 }) {
  return (
    <Sprite start={start} end={end}>
      <SceneBg color={FP.bg}>
        <SubtleGrain />

        {/* Split: left = sender's "nouvelle collecte" dialog, right = client's collecte page */}
        <Sprite start={start + 0.05} end={end}>
          <SenderPanel stageStart={start + 0.05} />
        </Sprite>

        {/* Link flies across */}
        <Sprite start={start + 1.4} end={start + 2.2}>
          <LinkFly />
        </Sprite>

        <Sprite start={start + 1.9} end={end}>
          <ClientPanel stageStart={start + 1.9} />
        </Sprite>

        <Sprite start={start + 0.2} end={end - 0.2}>
          <Caption text="Un lien sécurisé, une page de dépôt brandée." />
        </Sprite>

        <Sprite start={end - 0.5} end={end}>
          <FadeOut />
        </Sprite>
      </SceneBg>
    </Sprite>
  );
}

// Left panel: sender creating a new collecte
function SenderPanel({ stageStart }) {
  const t = useTime() - stageStart;
  const sec = getSector();
  // slide in from left
  const slideIn = Easing.easeOutCubic(clamp(t / 0.5, 0, 1));
  const tx = (1 - slideIn) * -40;

  // "Envoyer" button press around t=1.1
  const pressed = t > 1.1 && t < 1.4;

  return (
    <div style={{
      position: 'absolute',
      left: 120, top: 160,
      width: 700, height: 600,
      background: FP.card,
      border: `1px solid ${FP.border}`,
      borderRadius: 14,
      boxShadow: '0 24px 60px rgba(0,0,0,0.45)',
      opacity: slideIn,
      transform: `translateX(${tx}px)`,
      padding: 32,
      fontFamily: SANS,
    }}>
      {/* Window chrome dots */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 24 }}>
        <div style={{ width: 10, height: 10, borderRadius: 999, background: 'rgba(255,255,255,0.14)' }} />
        <div style={{ width: 10, height: 10, borderRadius: 999, background: 'rgba(255,255,255,0.14)' }} />
        <div style={{ width: 10, height: 10, borderRadius: 999, background: 'rgba(255,255,255,0.14)' }} />
      </div>

      <div style={{ fontSize: 13, color: FP.muted, marginBottom: 6 }}>Nouvelle collecte</div>
      <div style={{ fontSize: 28, color: FP.text, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 24 }}>
        {sec.senderTitle} — <span style={{ color: FP.muted, fontWeight: 500 }}>{sec.senderClient}</span>
      </div>

      {/* Document checklist */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24 }}>
        {sec.senderDocs.map((label, i) => {
          const revealAt = 0.15 + i * 0.08;
          const op = clamp((t - revealAt) / 0.25, 0, 1);
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '10px 14px',
              background: FP.cardHi,
              border: `1px solid ${FP.borderSoft}`,
              borderRadius: 8,
              opacity: op, transform: `translateX(${(1 - op) * -10}px)`,
            }}>
              <FileIcon size={16} color={FP.muted} />
              <span style={{ fontSize: 15, color: FP.text, flex: 1 }}>{label}</span>
              <span style={{ fontFamily: MONO, fontSize: 12, color: FP.muted }}>requis</span>
            </div>
          );
        })}
      </div>

      {/* CTA button */}
      <button style={{
        width: '100%',
        padding: '14px 20px',
        background: FP.primary,
        color: FP.bg,
        border: 'none',
        borderRadius: 8,
        fontFamily: SANS,
        fontSize: 16, fontWeight: 500,
        letterSpacing: '-0.01em',
        boxShadow: pressed ? 'inset 0 2px 6px rgba(0,0,0,0.2)' : '0 2px 0 rgba(0,0,0,0.2)',
        transform: pressed ? 'translateY(1px)' : 'none',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      }}>
        <LockIcon size={15} color={FP.bg} />
        Envoyer le lien sécurisé
      </button>
    </div>
  );
}

// The link payload flying from sender → client
function LinkFly() {
  const { localTime, duration } = useSprite();
  const p = clamp(localTime / duration, 0, 1);
  const eased = Easing.easeInOutCubic(p);

  // start near the sender's CTA button, end at the client panel
  const startX = 470, startY = 690;
  const endX   = 1100, endY = 260;
  const x = startX + (endX - startX) * eased;
  // arc up slightly
  const y = startY + (endY - startY) * eased - Math.sin(p * Math.PI) * 80;
  const opacity = Math.sin(p * Math.PI);

  return (
    <>
      <div style={{
        position: 'absolute', left: x - 140, top: y - 26,
        padding: '10px 16px',
        background: FP.card,
        border: `1px solid ${FP.primary}`,
        borderRadius: 999,
        fontFamily: MONO, fontSize: 13,
        color: FP.primary,
        display: 'flex', alignItems: 'center', gap: 8,
        boxShadow: `0 0 40px ${FP.primaryDim}`,
        opacity,
      }}>
        <LockIcon size={14} color={FP.primary} />
        filepilot.io/c/dupont-bilan24
      </div>
    </>
  );
}

// Right panel: the client's branded drop page, with docs landing
function ClientPanel({ stageStart }) {
  const t = useTime() - stageStart;
  const sec = getSector();
  const slideIn = Easing.easeOutCubic(clamp(t / 0.45, 0, 1));
  const opacity = slideIn;
  const tx = (1 - slideIn) * 40;

  // docs drop in sequentially
  const docs = sec.clientFiles.map((f, i) => ({ ...f, delay: 0.7 + i * 0.3 }));

  return (
    <div style={{
      position: 'absolute',
      right: 120, top: 160,
      width: 700, height: 600,
      background: FP.card,
      border: `1px solid ${FP.border}`,
      borderRadius: 14,
      boxShadow: '0 24px 60px rgba(0,0,0,0.45)',
      opacity,
      transform: `translateX(${tx}px)`,
      padding: 32,
      fontFamily: SANS,
      overflow: 'hidden',
    }}>
      {/* Brand bar */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 20,
      }}>
        <div style={{ color: FP.muted, fontSize: 13 }}>Espace sécurisé</div>
        <Badge variant="primary" icon={<LockIcon size={11} color={FP.primary} />}>Chiffré</Badge>
      </div>

      <div style={{ fontSize: 13, color: FP.muted, marginBottom: 4 }}>Bonjour,</div>
      <div style={{ fontSize: 24, color: FP.text, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 6, lineHeight: 1.2 }}>
        {sec.senderClient} a besoin de <span style={{ fontFamily: SERIF, fontStyle: 'italic' }}>{sec.senderDocs.length} documents</span>
      </div>
      <div style={{ fontSize: 14, color: FP.muted, marginBottom: 20 }}>Déposez-les ici — l'ordre n'a pas d'importance.</div>

      {/* Drop zone */}
      <div style={{
        border: `1.5px dashed ${FP.border}`,
        borderRadius: 10,
        padding: 14,
        minHeight: 360,
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        {docs.map((doc, i) => {
          const drop = clamp((t - doc.delay) / 0.3, 0, 1);
          const eased = Easing.easeOutCubic(drop);
          const dropY = (1 - eased) * -30;
          const op = clamp((t - doc.delay) / 0.2, 0, 1);
          if (op <= 0) return null;
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '10px 12px',
              background: FP.cardHi,
              border: `1px solid ${FP.borderSoft}`,
              borderRadius: 8,
              opacity: op,
              transform: `translateY(${dropY}px)`,
            }}>
              <div style={{
                width: 34, height: 34,
                background: 'rgba(255,255,255,0.06)',
                borderRadius: 6,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: FP.primary,
              }}>
                <FileIcon size={17} color={FP.primary} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, color: FP.text, fontWeight: 500 }}>{doc.label}</div>
                <div style={{ fontFamily: MONO, fontSize: 11, color: FP.muted, marginTop: 2 }}>{doc.size}</div>
              </div>
              <CheckIcon size={16} color={FP.success} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

function FadeOut() {
  const { localTime, duration } = useSprite();
  const p = clamp(localTime / duration, 0, 1);
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: FP.bg,
      opacity: Easing.easeInCubic(p) * 0.9,
      pointerEvents: 'none',
    }} />
  );
}

Object.assign(window, { Scene2_Link });