// PhoneMockup.jsx — SAISA phone mockup using real screenshots

function PhoneMockup({ src, alt = "SAISA app screen", tilt = 0, scale = 1, style = {} }) {
  return (
    <div style={{
      position: 'relative',
      width: 280 * scale,
      height: 560 * scale,
      transform: `rotate(${tilt}deg)`,
      filter: 'drop-shadow(0 32px 48px rgba(0,0,0,0.55))',
      ...style,
    }}>
      {/* Phone body */}
      <div style={{
        width: '100%',
        height: '100%',
        borderRadius: 44 * scale,
        background: '#0a0a14',
        border: `1.5px solid rgba(255,255,255,0.12)`,
        overflow: 'hidden',
        position: 'relative',
        boxSizing: 'border-box',
      }}>
        {/* Dynamic Island */}
        <div style={{
          position: 'absolute',
          top: 14 * scale,
          left: '50%',
          transform: 'translateX(-50%)',
          width: 110 * scale,
          height: 32 * scale,
          borderRadius: 99,
          background: '#000',
          zIndex: 10,
        }} />
        {/* Screen content */}
        <img
          src={src}
          alt={alt}
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: 'top',
            display: 'block',
          }}
        />
        {/* Home indicator */}
        <div style={{
          position: 'absolute',
          bottom: 10 * scale,
          left: '50%',
          transform: 'translateX(-50%)',
          width: 120 * scale,
          height: 4 * scale,
          borderRadius: 99,
          background: 'rgba(255,255,255,0.4)',
          zIndex: 10,
        }} />
      </div>
    </div>
  );
}

// Three phones in a row for "How it Works"
function PhoneTrio({ screens }) {
  return (
    <div style={{ display: 'flex', gap: 20, alignItems: 'flex-end', justifyContent: 'center', flexWrap: 'wrap' }}>
      {screens.map((s, i) => (
        <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
          <div style={{
            width: 32,
            height: 32,
            borderRadius: '50%',
            background: '#4e86f5',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: 14,
            fontWeight: 700,
            color: '#fff',
          }}>{i + 1}</div>
          <PhoneMockup src={s.src} alt={s.alt} scale={0.75} tilt={i === 1 ? -3 : i === 0 ? 4 : -4} />
          <p style={{ color: '#eceffe', fontSize: 14, fontWeight: 600, textAlign: 'center', margin: 0 }}>{s.label}</p>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { PhoneMockup, PhoneTrio });