// mockscreens.jsx
// The user's own colorful design references — the "content" that flows
// phone → ScreenSync → Figma. Color lives HERE (per the brand: the chrome is
// monochrome, the captured assets carry the color). Designed at a fixed
// 320 x 690 base; scale with a CSS transform for thumbnails / Figma frames.

const SCREEN_W = 320;
const SCREEN_H = 690;

// shared tiny status bar
function MockStatusBar({ dark }) {
  const c = dark ? 'rgba(255,255,255,0.92)' : 'rgba(0,0,0,0.82)';
  return (
    <div style={{
      height: 30, display: 'flex', alignItems: 'center',
      justifyContent: 'space-between', padding: '0 18px',
      fontFamily: 'Geist, sans-serif', fontSize: 12, fontWeight: 600, color: c,
      letterSpacing: '-0.01em', flexShrink: 0,
    }}>
      <span>9:41</span>
      <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
        <span style={{ display: 'inline-block', width: 16, height: 9, borderRadius: 2, border: `1.4px solid ${c}`, opacity: 0.9 }} />
        <span style={{ display: 'inline-block', width: 14, height: 9, borderRadius: 2, background: c }} />
      </div>
    </div>
  );
}

function Pic({ from, to, h, r = 14, children, deg = 145 }) {
  return (
    <div style={{
      height: h, borderRadius: r, flexShrink: 0,
      background: `linear-gradient(${deg}deg, ${from}, ${to})`,
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
    }}>{children}</div>
  );
}

// 1 — TRAVEL  (warm coral / amber)
function TravelScreen() {
  return (
    <div style={{ width: SCREEN_W, height: SCREEN_H, background: '#fff8f3', display: 'flex', flexDirection: 'column', fontFamily: 'Geist, sans-serif' }}>
      <MockStatusBar />
      <div style={{ padding: '6px 18px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 12, color: '#c2724a', fontWeight: 600 }}>Explore</div>
          <div style={{ fontSize: 23, fontWeight: 700, color: '#3a2a1f', letterSpacing: '-0.03em', marginTop: 2 }}>Kyoto, Japan</div>
        </div>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'linear-gradient(135deg,#ff9a62,#ff6a3d)' }} />
      </div>
      <div style={{ padding: '14px 18px 0' }}>
        <Pic from="#ff8a5c" to="#e6492d" h={232} deg={160}>
          <div style={{ position: 'absolute', top: 14, right: 14, width: 30, height: 30, borderRadius: 15, background: 'rgba(255,255,255,0.25)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 16 }}>♥</div>
          <div style={{ padding: 16, color: '#fff' }}>
            <div style={{ fontSize: 11, fontWeight: 600, opacity: 0.9, letterSpacing: '0.04em' }}>4.9 ★ · 2,310 reviews</div>
            <div style={{ fontSize: 21, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 3 }}>Fushimi Inari Shrine</div>
          </div>
        </Pic>
      </div>
      <div style={{ padding: '16px 18px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <Pic from="#ffd27a" to="#ff9e45" h={120} r={12}>
          <div style={{ padding: 10, color: '#5a3712', fontWeight: 700, fontSize: 13 }}>Gion district</div>
        </Pic>
        <Pic from="#ffb38a" to="#ef6f50" h={120} r={12}>
          <div style={{ padding: 10, color: '#fff', fontWeight: 700, fontSize: 13 }}>Arashiyama</div>
        </Pic>
      </div>
      <div style={{ marginTop: 'auto', padding: 16 }}>
        <div style={{ height: 46, borderRadius: 23, background: 'linear-gradient(135deg,#ff8a5c,#e6492d)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 600, fontSize: 14 }}>Plan this trip</div>
      </div>
    </div>
  );
}

// 2 — MUSIC  (deep violet / magenta)
function MusicScreen() {
  return (
    <div style={{ width: SCREEN_W, height: SCREEN_H, background: '#160a2b', display: 'flex', flexDirection: 'column', fontFamily: 'Geist, sans-serif' }}>
      <MockStatusBar dark />
      <div style={{ padding: '4px 18px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: 'rgba(255,255,255,0.7)' }}>
        <span style={{ fontSize: 18 }}>⌄</span>
        <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.04em' }}>NOW PLAYING</span>
        <span style={{ fontSize: 18 }}>⋯</span>
      </div>
      <div style={{ padding: '20px 26px 0' }}>
        <Pic from="#a838ff" to="#ff3d8b" h={268} r={20} deg={135}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), transparent 55%)' }} />
        </Pic>
      </div>
      <div style={{ padding: '24px 26px 0' }}>
        <div style={{ fontSize: 22, fontWeight: 700, color: '#fff', letterSpacing: '-0.02em' }}>Midnight Bloom</div>
        <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>Aurelia · Neon Gardens</div>
      </div>
      <div style={{ padding: '20px 26px 0' }}>
        <div style={{ height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.18)', position: 'relative' }}>
          <div style={{ position: 'absolute', left: 0, width: '42%', height: 4, borderRadius: 2, background: 'linear-gradient(90deg,#a838ff,#ff3d8b)' }} />
          <div style={{ position: 'absolute', left: '42%', top: -3, width: 10, height: 10, borderRadius: 5, background: '#fff' }} />
        </div>
      </div>
      <div style={{ marginTop: 26, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 30, color: '#fff' }}>
        <span style={{ fontSize: 22, opacity: 0.8 }}>⏮</span>
        <div style={{ width: 64, height: 64, borderRadius: 32, background: 'linear-gradient(135deg,#a838ff,#ff3d8b)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24 }}>❚❚</div>
        <span style={{ fontSize: 22, opacity: 0.8 }}>⏭</span>
      </div>
    </div>
  );
}

// 3 — FITNESS / HEALTH  (fresh green / teal)
function FitnessScreen() {
  return (
    <div style={{ width: SCREEN_W, height: SCREEN_H, background: '#f1fbf5', display: 'flex', flexDirection: 'column', fontFamily: 'Geist, sans-serif' }}>
      <MockStatusBar />
      <div style={{ padding: '8px 18px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 12, color: '#1f9d6b', fontWeight: 600 }}>Good morning</div>
          <div style={{ fontSize: 22, fontWeight: 700, color: '#0f3a28', letterSpacing: '-0.03em', marginTop: 2 }}>Today's rings</div>
        </div>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'linear-gradient(135deg,#34e89e,#0f9b6c)' }} />
      </div>
      <div style={{ padding: '16px 18px 0', display: 'flex', justifyContent: 'center' }}>
        <div style={{ width: 168, height: 168, borderRadius: 84, background: 'conic-gradient(#10b981 0 78%, #d6f3e3 78% 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ width: 124, height: 124, borderRadius: 62, background: '#fff', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ fontSize: 30, fontWeight: 700, color: '#0f3a28', letterSpacing: '-0.03em' }}>78%</div>
            <div style={{ fontSize: 11, color: '#1f9d6b', fontWeight: 600 }}>8,420 steps</div>
          </div>
        </div>
      </div>
      <div style={{ padding: '20px 18px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <Pic from="#34e89e" to="#0f9b6c" h={96} r={14}>
          <div style={{ padding: 12, color: '#fff' }}><div style={{ fontSize: 19, fontWeight: 700 }}>540</div><div style={{ fontSize: 11, opacity: 0.9 }}>kcal burned</div></div>
        </Pic>
        <Pic from="#7be8c2" to="#16b886" h={96} r={14}>
          <div style={{ padding: 12, color: '#0f3a28' }}><div style={{ fontSize: 19, fontWeight: 700 }}>32′</div><div style={{ fontSize: 11, opacity: 0.85 }}>active time</div></div>
        </Pic>
      </div>
      <div style={{ marginTop: 'auto', padding: 16 }}>
        <div style={{ height: 46, borderRadius: 23, background: 'linear-gradient(135deg,#10b981,#0f9b6c)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 600, fontSize: 14 }}>Start workout</div>
      </div>
    </div>
  );
}

const SCREENS = {
  travel: { Comp: TravelScreen, label: 'Kyoto explore', accent: '#e6492d' },
  music: { Comp: MusicScreen, label: 'Now playing', accent: '#c13bd6' },
  fitness: { Comp: FitnessScreen, label: 'Activity rings', accent: '#10b981' },
};

// MockScreen: renders a named screen, scaled to a target width.
function MockScreen({ variant = 'travel', scale = 1 }) {
  const { Comp } = SCREENS[variant] || SCREENS.travel;
  return (
    <div style={{ width: SCREEN_W * scale, height: SCREEN_H * scale, overflow: 'hidden', flexShrink: 0 }}>
      <div style={{ width: SCREEN_W, height: SCREEN_H, transform: `scale(${scale})`, transformOrigin: 'top left' }}>
        <Comp />
      </div>
    </div>
  );
}

Object.assign(window, { MockScreen, SCREENS, SCREEN_W, SCREEN_H });