// Real-screen mockups for the portfolio carousel.
// Three phones (MVNO / Cashback / Delivery) + one laptop (Fitness).
// Each frame is drawn in CSS — the screen content is the supplied image.

// ── iPhone-style frame holding a real image
const PhoneFrame = ({ width = 220, src, alt }) => {
  const w = width;
  const ar = 19.5 / 9;
  const h = w * ar;
  return (
    <div style={{
      width: w, height: h, position: 'relative',
      borderRadius: w * 0.13,
      background: '#0c0c0e',
      padding: w * 0.018,
      boxShadow: `
        inset 0 0 0 1.5px rgba(255,255,255,.08),
        0 30px 50px -10px rgba(0,0,0,.55),
        0 12px 24px -6px rgba(0,0,0,.4)
      `,
    }}>
      {/* Screen */}
      <div style={{
        position: 'absolute', inset: w * 0.018,
        borderRadius: w * 0.115,
        overflow: 'hidden',
        background: '#000',
      }}>
        <img src={src} alt={alt}
             style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
             draggable={false} />
        {/* Dynamic-island notch (sits on top of the image) */}
        <div style={{
          position: 'absolute', top: w * 0.034, left: '50%',
          width: w * 0.30, height: w * 0.078,
          borderRadius: 999, background: '#0c0c0e',
          transform: 'translateX(-50%)',
          pointerEvents: 'none',
        }} />
      </div>

      {/* Side button hints */}
      <div style={{ position: 'absolute', left: -w * 0.014, top: w * 0.22, width: w * 0.014, height: w * 0.06, background: '#1a1a1c', borderRadius: 1 }} />
      <div style={{ position: 'absolute', left: -w * 0.014, top: w * 0.32, width: w * 0.014, height: w * 0.12, background: '#1a1a1c', borderRadius: 1 }} />
      <div style={{ position: 'absolute', left: -w * 0.014, top: w * 0.48, width: w * 0.014, height: w * 0.12, background: '#1a1a1c', borderRadius: 1 }} />
      <div style={{ position: 'absolute', right: -w * 0.014, top: w * 0.34, width: w * 0.014, height: w * 0.16, background: '#1a1a1c', borderRadius: 1 }} />
    </div>
  );
};

// ── Laptop frame for the fitness web dashboard
const LaptopFrame = ({ width = 320, src, alt }) => {
  // The phone slot on the carousel is 220x~476. To keep the laptop visually
  // similar in *vertical* footprint, we let it scale by width and the height
  // derives from the device aspect.
  const w = width;
  const screenH = w * 0.625; // 16:10
  const baseH = w * 0.04;
  return (
    <div style={{
      width: w, position: 'relative',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      filter: 'drop-shadow(0 30px 40px rgba(0,0,0,.45))',
    }}>
      {/* Top lid (screen) */}
      <div style={{
        width: '100%', height: screenH,
        background: '#0c0c0e',
        padding: w * 0.018,
        borderRadius: `${w * 0.022}px ${w * 0.022}px 4px 4px`,
        boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,.05)',
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute', inset: w * 0.018,
          borderRadius: w * 0.014,
          overflow: 'hidden', background: '#fff',
        }}>
          <img src={src} alt={alt}
               style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
               draggable={false} />
        </div>
        {/* webcam dot */}
        <div style={{
          position: 'absolute', top: w * 0.008, left: '50%',
          transform: 'translateX(-50%)',
          width: w * 0.008, height: w * 0.008, borderRadius: '50%',
          background: '#1a1a1c',
        }} />
      </div>
      {/* Base */}
      <div style={{
        width: w * 1.06, height: baseH,
        background: 'linear-gradient(to bottom, #c8c9cc 0%, #9c9ea3 50%, #6e7075 100%)',
        borderRadius: `0 0 ${w * 0.012}px ${w * 0.012}px`,
        position: 'relative',
        boxShadow: 'inset 0 -1px 1px rgba(0,0,0,.35)',
      }}>
        {/* trackpad notch */}
        <div style={{
          position: 'absolute', top: 0, left: '50%',
          transform: 'translateX(-50%)',
          width: w * 0.16, height: w * 0.008,
          background: '#5b5d62',
          borderRadius: `0 0 ${w * 0.006}px ${w * 0.006}px`,
        }} />
      </div>
    </div>
  );
};

// ── Per-case mocks
const MVNOPhone = ({ width = 220 }) => (
  <PhoneFrame width={width} src="case-assets/dashboard/01-mvno.png" alt="MVNO dashboard" />
);

const EcomPhone = ({ width = 220 }) => (
  <PhoneFrame width={width} src="case-assets/dashboard/02-cashback-card.png" alt="Profile — cashback card" />
);

const DeliveryPhone = ({ width = 220 }) => (
  <PhoneFrame width={width} src="case-assets/delivery/anim-list.jpg" alt="Parcel list — undelivered" />
);

const FitnessPhone = ({ width = 220 }) => {
  // Render the laptop a bit wider than the phone slot but same vertical band
  return <LaptopFrame width={width * 1.45} src="case-assets/dashboard/04-fitness.jpg" alt="Fitness landing page" />;
};

Object.assign(window, { PhoneFrame, LaptopFrame, MVNOPhone, EcomPhone, DeliveryPhone, FitnessPhone });