// Wrapper that puts a real AFTER app screen inside a clean phone bezel,
// scaled to fit the marketing layout. The screens were designed for ~390×844;
// we render at 380×800 and scale down with transform.
//
// Bezel is hand-drawn (not IOSDevice from the starter) because the AFTER screens
// already have their own internal top safe-area padding (64px) and aren't iOS-themed.

const APP_W = 380;   // viewport width the screen was designed against
const APP_H = 800;   // viewport height we crop to (screens scroll, this is the visible chunk)

function PhoneBezel({ children, scale = 0.74 }) {
  // Outer container reserves the SCALED size; inner is full size and transformed.
  const outerW = Math.round(APP_W * scale);
  const outerH = Math.round(APP_H * scale);
  return (
    <div style={{
      width: outerW, height: outerH,
      position: 'relative', flexShrink: 0,
    }}>
      <div style={{
        width: APP_W, height: APP_H,
        transform: `scale(${scale})`,
        transformOrigin: 'top left',
        position: 'absolute', top: 0, left: 0,
        // Bezel
        background: '#0f0f0f',
        padding: 10,
        borderRadius: 52,
        boxShadow: '0 40px 80px -24px rgba(15,15,15,0.35), 0 0 0 1px rgba(0,0,0,0.06)',
        boxSizing: 'border-box',
      }}>
        {/* screen */}
        <div style={{
          width: '100%', height: '100%',
          borderRadius: 42,
          overflow: 'hidden',
          background: '#fafaf8',
          position: 'relative',
        }}>
          {/* dynamic island */}
          <div style={{
            position: 'absolute', top: 14, left: '50%',
            transform: 'translateX(-50%)',
            width: 120, height: 34, borderRadius: 22,
            background: '#0f0f0f',
            zIndex: 50,
          }}/>
          {/* status bar text — sits beside the island */}
          <div style={{
            position: 'absolute', top: 18, left: 0, right: 0,
            padding: '0 32px',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            fontFamily: '-apple-system, "SF Pro Text", system-ui',
            fontSize: 15, fontWeight: 600, color: '#0f0f0f',
            zIndex: 51, pointerEvents: 'none',
          }}>
            <span>9:41</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              <svg width="17" height="11" viewBox="0 0 17 11" fill="#0f0f0f">
                <rect x="0" y="7" width="3" height="4" rx="0.7"/>
                <rect x="4.5" y="5" width="3" height="6" rx="0.7"/>
                <rect x="9" y="2.5" width="3" height="8.5" rx="0.7"/>
                <rect x="13.5" y="0" width="3" height="11" rx="0.7"/>
              </svg>
              <svg width="16" height="11" viewBox="0 0 16 11" fill="#0f0f0f">
                <path d="M8 2.5C10.2 2.5 12.2 3.4 13.6 4.8L14.7 3.7C13 2 10.6 1 8 1C5.4 1 3 2 1.3 3.7L2.4 4.8C3.8 3.4 5.8 2.5 8 2.5Z"/>
                <path d="M8 6C9.3 6 10.5 6.5 11.4 7.4L12.5 6.3C11.3 5.1 9.7 4.4 8 4.4C6.3 4.4 4.7 5.1 3.5 6.3L4.6 7.4C5.5 6.5 6.7 6 8 6Z"/>
                <circle cx="8" cy="9.5" r="1.4"/>
              </svg>
              <svg width="26" height="12" viewBox="0 0 26 12">
                <rect x="0.5" y="0.5" width="22" height="11" rx="3.2" stroke="#0f0f0f" strokeOpacity="0.4" fill="none"/>
                <rect x="2" y="2" width="19" height="8" rx="1.8" fill="#0f0f0f"/>
                <path d="M24 4.2V7.8C24.7 7.5 25.3 6.7 25.3 6C25.3 5.3 24.7 4.5 24 4.2Z" fill="#0f0f0f" fillOpacity="0.4"/>
              </svg>
            </span>
          </div>
          {/* the actual app screen */}
          <div style={{ width: '100%', height: '100%', position: 'relative', zIndex: 1 }}>
            {children}
          </div>
          {/* home indicator */}
          <div style={{
            position: 'absolute', bottom: 8, left: '50%',
            transform: 'translateX(-50%)',
            width: 134, height: 5, borderRadius: 100,
            background: 'rgba(15,15,15,0.25)',
            zIndex: 60,
          }}/>
        </div>
      </div>
    </div>
  );
}

// ─── Three marketing previews ────────────────────────────
function DashboardPreview() {
  return <PhoneBezel scale={0.74}><DashboardScreen /></PhoneBezel>;
}

function CoachPreview() {
  return <PhoneBezel scale={0.74}><CoachScreen /></PhoneBezel>;
}

function TrendPreview() {
  return <PhoneBezel scale={0.74}><TrendScreen /></PhoneBezel>;
}

Object.assign(window, { PhoneBezel, DashboardPreview, CoachPreview, TrendPreview });
