// SceneSyncPay.jsx — Beat 3: integrations strip + payment card
// Time window: 7.2 – 10.8s
// Inspired by "WERKT MET TOOLS DIE JE AL GEBRUIKT" footer from brand screenshot

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

  const entryOp = interpolate([0, 0.4], [0, 1], Easing.easeOutCubic)(localTime);
  const exitT = clamp((localTime - 3.1) / 0.4, 0, 1);
  const exitOp = 1 - Easing.easeInCubic(exitT);

  const capOp = interpolate([0.1, 0.7, 2.8, 3.1], [0, 1, 1, 0], Easing.easeOutCubic)(localTime);
  const capY = interpolate([0.1, 0.7], [10, 0], Easing.easeOutCubic)(localTime);

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

      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        gap: 40,
        opacity: entryOp,
      }}>
        <div style={{
          fontFamily: CAL.font,
          fontSize: 48, fontWeight: 600,
          color: CAL.ink, letterSpacing: '-0.035em',
          opacity: capOp,
          transform: `translateY(${capY}px)`,
          textAlign: 'center',
        }}>
          Werkt met tools die je al <span style={{ color: CAL.blue }}>gebruikt</span>.
        </div>

        <IntegrationsStrip localTime={localTime} />

        <PaymentCard localTime={localTime} />
      </div>
    </div>
  );
}

function IntegrationsStrip({ localTime }) {
  const tools = [
    { name: 'Google Calendar', color: '#4285F4' },
    { name: 'Google Meet',     color: '#00897B' },
    { name: 'Resend',          color: '#000000' },
    { name: 'Vercel',          color: '#000000' },
    { name: 'Webhooks',        color: '#6b7280' },
    { name: 'Zapier (soon)',   color: '#9aa3b2' },
  ];
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 48,
      padding: '22px 40px',
      background: '#fff',
      border: `1px solid ${CAL.line}`,
      borderRadius: 18,
      boxShadow: '0 20px 50px -20px rgba(47,107,255,0.15)',
      fontFamily: CAL.font,
    }}>
      {tools.map((t, i) => {
        const op = Easing.easeOutCubic(clamp((localTime - 0.3 - i * 0.08) / 0.4, 0, 1));
        const faded = t.name.includes('soon');
        return (
          <div key={t.name} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            fontSize: 15, color: faded ? CAL.inkMuted : CAL.ink,
            fontWeight: 500,
            opacity: op * (faded ? 0.7 : 1),
            transform: `translateY(${(1 - op) * 8}px)`,
          }}>
            <div style={{
              width: 8, height: 8, borderRadius: 4,
              background: t.color,
            }}/>
            {t.name}
          </div>
        );
      })}
    </div>
  );
}

function PaymentCard({ localTime }) {
  const cardT = clamp((localTime - 1.0) / 0.5, 0, 1);
  const paidT = clamp((localTime - 1.9) / 0.5, 0, 1);
  const paidScale = Easing.easeOutBack(paidT);

  return (
    <div style={{
      width: 520,
      background: '#fff',
      borderRadius: 18,
      border: `1px solid ${CAL.line}`,
      boxShadow: '0 24px 50px -18px rgba(47,107,255,0.22)',
      padding: '24px 28px',
      fontFamily: CAL.font,
      opacity: cardT,
      transform: `translateY(${(1 - Easing.easeOutCubic(cardT)) * 16}px)`,
      position: 'relative',
    }}>
      <div style={{
        fontSize: 12, color: CAL.inkMuted,
        letterSpacing: '0.1em', textTransform: 'uppercase',
        fontWeight: 500, marginBottom: 14,
      }}>
        Betaling · Factuur #INV-2481
      </div>

      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        marginBottom: 16,
      }}>
        <div style={{ fontSize: 44, fontWeight: 600, color: CAL.ink, letterSpacing: '-0.03em', lineHeight: 1 }}>
          € 45,00
        </div>
        <div style={{
          padding: '8px 14px',
          borderRadius: 999,
          background: CAL.greenSoft,
          color: CAL.green,
          fontWeight: 600, fontSize: 13,
          display: 'flex', alignItems: 'center', gap: 6,
          transform: `scale(${paidScale})`,
          opacity: paidT,
        }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12l5 5 10-11"/>
          </svg>
          BETAALD
        </div>
      </div>

      <Line label="Service" value="30-min strategiegesprek"/>
      <Line label="Klant"   value="Jordan Reyes"/>
      <Line label="Methode" value="Visa ···· 4242"/>
    </div>
  );
}

function Line({ label, value }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between',
      padding: '10px 0',
      borderTop: `1px solid ${CAL.lineSoft}`,
      fontSize: 14,
    }}>
      <span style={{ color: CAL.inkSoft }}>{label}</span>
      <span style={{ color: CAL.ink, fontWeight: 500 }}>{value}</span>
    </div>
  );
}

window.SceneSyncPay = SceneSyncPay;