// SceneOneLink.jsx — Beat 1: share link copied
// Time window: 0.0 – 3.2s

function SceneOneLink() {
  const { localTime } = useSprite();

  const winScale = interpolate([0, 0.5], [0.96, 1], Easing.easeOutCubic)(localTime);
  const winOpacity = interpolate([0, 0.4], [0, 1], Easing.easeOutCubic)(localTime);

  // Copy button press at 1.6s
  const pressT = clamp((localTime - 1.6) / 0.2, 0, 1);
  const btnScale = pressT < 0.5 ? 1 - pressT * 0.1 : 0.95 + (pressT - 0.5) * 0.1;

  const toastT = clamp((localTime - 1.8) / 0.4, 0, 1);

  // Cursor: bottom-right → copy button (around x=1360, y=470)
  const cx = interpolate([0, 1.0, 1.6], [1500, 1360, 1360], Easing.easeInOutCubic)(localTime);
  const cy = interpolate([0, 1.0, 1.6], [780, 470, 470], Easing.easeInOutCubic)(localTime);

  const exitT = clamp((localTime - 2.7) / 0.5, 0, 1);
  const exitOp = 1 - Easing.easeInCubic(exitT);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: exitOp,
      transform: `scale(${1 + exitT * 0.02})`,
      background: CAL.bg,
    }}>
      {/* Soft halo backdrop */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 60% 40% at 50% 60%, ${CAL.haloA} 0%, transparent 70%)`,
      }}/>

      <div style={{
        position: 'absolute',
        left: 260, top: 110,
        transform: `scale(${winScale})`, transformOrigin: 'center top',
        opacity: winOpacity,
      }}>
        <BrowserChrome x={0} y={0} width={1400} height={540} url="jouw-site.nl/contact">
          <div style={{ padding: '52px 64px', fontFamily: CAL.font }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 28 }}>
              <div style={{
                width: 64, height: 64, borderRadius: 12,
                background: CAL.blue,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', fontSize: 26, fontWeight: 700,
                letterSpacing: '-0.02em',
              }}>M</div>
              <div>
                <div style={{ fontSize: 16, color: CAL.inkSoft, fontWeight: 500 }}>Mark de Vries</div>
                <div style={{ fontSize: 28, fontWeight: 700, color: CAL.ink, letterSpacing: '-0.025em', marginTop: 2 }}>
                  30-min strategiegesprek
                </div>
              </div>
            </div>

            <div style={{ fontSize: 44, fontWeight: 600, color: CAL.ink, letterSpacing: '-0.03em', lineHeight: 1.1, marginBottom: 20, maxWidth: 900 }}>
              Deel één link. Laat gasten zelf inplannen.
            </div>
            <div style={{ fontSize: 17, color: CAL.inkSoft, marginBottom: 36, maxWidth: 720, lineHeight: 1.5 }}>
              Calendify.ai handelt de rest af — kalender, bevestiging, reminders.
            </div>

            {/* Share link card */}
            <div style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '14px 14px 14px 20px',
              background: '#fff',
              border: `1px solid ${CAL.line}`,
              borderRadius: 12,
              maxWidth: 700,
              boxShadow: '0 4px 12px -4px rgba(47,107,255,0.08)',
            }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={CAL.blue} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07L11 5"/>
                <path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07L10 19"/>
              </svg>
              <div style={{
                flex: 1,
                fontFamily: CAL.mono, fontSize: 15, color: CAL.ink,
              }}>
                calendify.ai/mark
              </div>
              <button style={{
                padding: '10px 18px',
                background: CAL.blue, color: '#fff',
                border: 'none', borderRadius: 8,
                fontFamily: CAL.font, fontSize: 14, fontWeight: 600,
                cursor: 'pointer',
                transform: `scale(${btnScale})`,
                display: 'flex', alignItems: 'center', gap: 6,
                boxShadow: '0 4px 12px -2px rgba(47,107,255,0.35)',
              }}>
                {toastT > 0 ? (
                  <>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M5 12l5 5 10-11"/>
                    </svg>
                    Gekopieerd
                  </>
                ) : (
                  <>Kopieer link</>
                )}
              </button>
            </div>
          </div>
        </BrowserChrome>
      </div>

      <Cursor x={cx} y={cy} />
    </div>
  );
}

window.SceneOneLink = SceneOneLink;