// Phone mock + per-app stylized "screen" placeholders. Replace with real
// screenshots later — each AppScreen takes the same outer shape.

function PhoneFrame({ children, scale = 1, accent = 'var(--accent)', tilt = 0, float = 1, floatDelay = 0, accentGlow = true, style }) {
  // Roughly iPhone proportions — 320x680 design size scaled
  // float: 0 = no animation, 1 = subtle, 2 = stronger
  const floatAmt = 8 * float;
  const animName = float > 0 ? `bz-float-${Math.round(float * 10)}-${Math.round(tilt * 10)}` : 'none';
  // Inject a unique keyframe per (float, tilt) combo so tilt + float compose
  React.useEffect(() => {
    if (float <= 0) return;
    const id = `kf-${animName}`;
    if (document.getElementById(id)) return;
    const s = document.createElement('style');
    s.id = id;
    s.textContent = `@keyframes ${animName} {
      0%,100% { transform: rotate(${tilt}deg) translateY(0); }
      50%     { transform: rotate(${tilt}deg) translateY(-${floatAmt}px); }
    }`;
    document.head.appendChild(s);
  }, [animName, float, tilt, floatAmt]);

  const boxShadow = accentGlow
    ? `0 0 0 ${1 * scale}px rgba(255,255,255,0.08), 0 0 0 ${2 * scale}px rgba(0,0,0,0.6), 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 60px -10px ${accent}55`
    : `0 0 0 ${1 * scale}px rgba(255,255,255,0.08), 0 0 0 ${2 * scale}px rgba(0,0,0,0.6), 0 30px 80px -20px rgba(0,0,0,0.6)`;

  return (
    <div
      style={{
        width: 320 * scale,
        height: 660 * scale,
        borderRadius: 48 * scale,
        background: '#0A0A0C',
        padding: 8 * scale,
        boxShadow,
        transform: `rotate(${tilt}deg)`,
        animation: float > 0 ? `${animName} ${5 + floatDelay * 0.7}s ease-in-out ${floatDelay * 0.4}s infinite` : 'none',
        position: 'relative',
        ...style,
      }}
    >
      <div style={{
        position: 'relative',
        width: '100%', height: '100%',
        borderRadius: 40 * scale,
        overflow: 'hidden',
        background: '#0A0A0C',
      }}>
        {/* Notch */}
        <div style={{
          position: 'absolute', top: 8 * scale, left: '50%',
          transform: 'translateX(-50%)',
          width: 96 * scale, height: 26 * scale,
          background: '#000',
          borderRadius: 999,
          zIndex: 5,
        }} />
        {/* Status bar */}
        <div style={{
          position: 'absolute', top: 14 * scale, left: 0, right: 0,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: `0 ${24 * scale}px`,
          fontFamily: 'var(--font-mono)',
          fontSize: 11 * scale,
          color: 'var(--fg)',
          zIndex: 6,
          fontWeight: 600,
        }}>
          <span>9:41</span>
          <span style={{ display: 'inline-flex', gap: 4 * scale, alignItems: 'center' }}>
            <span style={{ width: 14 * scale, height: 8 * scale, border: `${1 * scale}px solid var(--fg)`, borderRadius: 2 }} />
          </span>
        </div>
        {children}
      </div>
    </div>
  );
}

// — Per-app stylized screens (placeholders, but on-brand) —

function PulseScreen() {
  // Habit tracker — orbit ring of habits, central streak number
  const habits = [
    { name: 'Read', done: true },
    { name: 'Walk', done: true },
    { name: 'Stretch', done: true },
    { name: 'Write', done: false },
    { name: 'Meditate', done: true },
    { name: 'Sleep 8h', done: false },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, padding: '64px 22px 22px', display: 'flex', flexDirection: 'column', color: 'var(--fg)' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '.14em', textTransform: 'uppercase' }}>Tuesday · April 30</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, marginTop: 4, letterSpacing: '-0.02em' }}>Today's ring</div>

      <div style={{ position: 'relative', flex: 1, display: 'grid', placeItems: 'center', marginTop: 8 }}>
        <svg viewBox="0 0 200 200" width="100%" style={{ maxWidth: 220 }}>
          <circle cx="100" cy="100" r="78" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="2" />
          <circle cx="100" cy="100" r="78" fill="none" stroke="#F2A900" strokeWidth="3" strokeDasharray="490" strokeDashoffset="160" strokeLinecap="round" transform="rotate(-90 100 100)" />
          {habits.map((h, i) => {
            const t = (i / habits.length) * Math.PI * 2 - Math.PI / 2;
            const x = 100 + Math.cos(t) * 78;
            const y = 100 + Math.sin(t) * 78;
            return (
              <g key={i}>
                <circle cx={x} cy={y} r="6" fill={h.done ? '#F2A900' : '#1B1B20'} stroke={h.done ? '#F2A900' : 'rgba(255,255,255,0.4)'} strokeWidth="1" />
              </g>
            );
          })}
          <text x="100" y="98" textAnchor="middle" fill="#F5F4EE" fontFamily="Space Grotesk" fontSize="42" fontWeight="700">42</text>
          <text x="100" y="118" textAnchor="middle" fill="rgba(245,244,238,0.55)" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="2">DAY STREAK</text>
        </svg>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {habits.slice(0, 3).map((h, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 14px',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 14,
            background: 'rgba(255,255,255,0.02)',
            fontSize: 13,
          }}>
            <div style={{
              width: 18, height: 18, borderRadius: 6,
              background: h.done ? '#F2A900' : 'transparent',
              border: h.done ? 'none' : '1.5px solid rgba(255,255,255,0.4)',
            }} />
            <span style={{ flex: 1, color: h.done ? 'var(--fg-3)' : 'var(--fg)', textDecoration: h.done ? 'line-through' : 'none' }}>{h.name}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)' }}>{h.done ? '✓' : '·'}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function RelayScreen() {
  // Async standups — voice notes feed
  const notes = [
    { name: 'Maya R.', role: 'Design',  dur: '0:48', mins: 'now',   color: '#3A86FF' },
    { name: 'Kenji T.', role: 'iOS',     dur: '1:12', mins: '12m',  color: '#A7F432' },
    { name: 'Priya V.', role: 'PM',      dur: '0:34', mins: '38m',  color: '#FF8C00' },
    { name: 'Daniel O.',role: 'Backend', dur: '2:04', mins: '1h',   color: '#FF006E' },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, padding: '64px 18px 22px', color: 'var(--fg)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#3A86FF', letterSpacing: '.14em', textTransform: 'uppercase' }}># standup · today</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, marginTop: 2 }}>4 of 6 in</div>
        </div>
        <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'rgba(58,134,255,0.15)', display: 'grid', placeItems: 'center', color: '#3A86FF', fontSize: 14 }}>+</div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 18 }}>
        {notes.map((n, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '10px 12px',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 12,
            background: i === 0 ? 'rgba(58,134,255,0.08)' : 'rgba(255,255,255,0.02)',
          }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', background: n.color, color: '#0A0A0C', display: 'grid', placeItems: 'center', fontWeight: 600, fontSize: 12 }}>
              {n.name[0]}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 500 }}>{n.name}</div>
              <div style={{ fontSize: 10, color: 'var(--fg-3)' }}>{n.role}</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              {/* mini waveform */}
              <svg width="36" height="16" viewBox="0 0 36 16">
                {[3,7,5,11,8,13,6,9,4,10,7,5].map((h,j) => (
                  <rect key={j} x={j*3} y={(16-h)/2} width="2" height={h} fill={i === 0 ? '#3A86FF' : 'rgba(255,255,255,0.4)'} rx="1" />
                ))}
              </svg>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)' }}>{n.dur}</span>
            </div>
          </div>
        ))}
      </div>

      <div style={{ position: 'absolute', bottom: 22, left: 18, right: 18 }}>
        <div style={{
          height: 56, borderRadius: 18,
          background: '#3A86FF',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          color: '#fff', fontWeight: 600,
          boxShadow: '0 0 40px -8px #3A86FF',
        }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#fff' }} />
          Hold to record
        </div>
      </div>
    </div>
  );
}

function VerdantScreen() {
  // Garden — grid of beds with planted/empty cells
  const grid = Array.from({ length: 24 }, (_, i) => i);
  const planted = new Set([0,1,2,4,5,7,8,9,10,12,14,15,17,18,20,22,23]);
  return (
    <div style={{ position: 'absolute', inset: 0, padding: '64px 22px 22px', color: 'var(--fg)' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#A7F432', letterSpacing: '.14em', textTransform: 'uppercase' }}>Bed · East</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, marginTop: 2, letterSpacing: '-0.02em' }}>Spring layout</div>

      <div style={{
        marginTop: 16,
        padding: 12,
        borderRadius: 16,
        border: '1px solid rgba(255,255,255,0.08)',
        background: 'linear-gradient(180deg, rgba(167,244,50,0.06), transparent)',
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 5 }}>
          {grid.map(i => (
            <div key={i} style={{
              aspectRatio: '1/1',
              borderRadius: 6,
              background: planted.has(i) ? 'rgba(167,244,50,0.85)' : 'rgba(255,255,255,0.04)',
              border: planted.has(i) ? 'none' : '1px dashed rgba(255,255,255,0.12)',
              position: 'relative',
            }}>
              {planted.has(i) && i % 5 === 0 && (
                <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: '#0A0A0C', fontSize: 8, fontWeight: 700 }}>★</div>
              )}
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '.1em', textTransform: 'uppercase' }}>Next 7 days</div>
        {[
          { d: 'Wed', a: 'Water tomatoes', c: '#A7F432' },
          { d: 'Fri', a: 'Thin radishes',  c: '#FF8C00' },
          { d: 'Sat', a: 'Harvest basil',  c: '#F2A900' },
        ].map((r, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 10px', borderRadius: 10, border: '1px solid rgba(255,255,255,0.06)' }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: r.c }} />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)', width: 28 }}>{r.d}</span>
            <span style={{ fontSize: 12, flex: 1 }}>{r.a}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function MeridianScreen() {
  // Focus timer — radial timer
  return (
    <div style={{ position: 'absolute', inset: 0, padding: '64px 22px 22px', color: 'var(--fg)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#FF8C00', letterSpacing: '.14em', textTransform: 'uppercase' }}>Session 03 · Deep</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, marginTop: 2 }}>Writing sprint</div>

      <div style={{ flex: 1, display: 'grid', placeItems: 'center' }}>
        <svg viewBox="0 0 200 200" width="100%" style={{ maxWidth: 240 }}>
          <circle cx="100" cy="100" r="86" fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="2" />
          <circle cx="100" cy="100" r="86" fill="none" stroke="#FF8C00" strokeWidth="3" strokeDasharray="540" strokeDashoffset="200" strokeLinecap="round" transform="rotate(-90 100 100)" />
          <circle cx="100" cy="100" r="72" fill="none" stroke="rgba(255,140,0,0.18)" strokeWidth="1" strokeDasharray="2 4" />
          <text x="100" y="96" textAnchor="middle" fill="#F5F4EE" fontFamily="Space Grotesk" fontSize="46" fontWeight="700" letterSpacing="-2">17:24</text>
          <text x="100" y="118" textAnchor="middle" fill="rgba(245,244,238,0.55)" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="2">REMAINING</text>
        </svg>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
        {[
          { l: 'Rain',   on: true  },
          { l: 'Forest', on: false },
          { l: 'Cafe',   on: false },
        ].map((b, i) => (
          <div key={i} style={{
            padding: '10px 8px', borderRadius: 12,
            border: '1px solid rgba(255,255,255,0.08)',
            background: b.on ? 'rgba(255,140,0,0.12)' : 'rgba(255,255,255,0.02)',
            color: b.on ? '#FF8C00' : 'var(--fg-2)',
            fontSize: 11, textAlign: 'center', fontWeight: 500,
          }}>{b.l}</div>
        ))}
      </div>

      <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button style={{ background: 'transparent', border: 'none', color: 'var(--fg-3)', fontSize: 18, cursor: 'pointer' }}>⏮</button>
        <button style={{ background: '#FF8C00', border: 'none', borderRadius: '50%', width: 56, height: 56, color: '#0A0A0C', fontSize: 18, cursor: 'pointer', boxShadow: '0 0 32px -4px #FF8C00' }}>▌▌</button>
        <button style={{ background: 'transparent', border: 'none', color: 'var(--fg-3)', fontSize: 18, cursor: 'pointer' }}>⏭</button>
      </div>
    </div>
  );
}

function FluxScreen() {
  // Personal finance — envelope budgeting
  const env = [
    { name: 'Groceries', spent: 240, max: 400, color: '#FF006E' },
    { name: 'Transport', spent: 88,  max: 120, color: '#3A86FF' },
    { name: 'Dining',    spent: 165, max: 180, color: '#F2A900' },
    { name: 'Savings',   spent: 600, max: 600, color: '#A7F432' },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, padding: '64px 22px 22px', color: 'var(--fg)' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#FF006E', letterSpacing: '.14em', textTransform: 'uppercase' }}>April · day 30</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, marginTop: 2 }}>Envelopes</div>

      <div style={{ marginTop: 12, padding: '14px 16px', borderRadius: 14, background: 'linear-gradient(135deg, rgba(255,0,110,0.12), rgba(255,0,110,0.02))', border: '1px solid rgba(255,0,110,0.2)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--fg-3)', letterSpacing: '.12em', textTransform: 'uppercase' }}>Left to spend</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 700, marginTop: 2, letterSpacing: '-0.02em' }}>
          $1,247<span style={{ fontSize: 18, color: 'var(--fg-3)' }}>.50</span>
        </div>
      </div>

      <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {env.map((e, i) => {
          const pct = Math.min(100, (e.spent / e.max) * 100);
          return (
            <div key={i}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 4 }}>
                <span style={{ color: 'var(--fg)', fontWeight: 500 }}>{e.name}</span>
                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--fg-3)' }}>${e.spent} / ${e.max}</span>
              </div>
              <div style={{ height: 6, borderRadius: 999, background: 'rgba(255,255,255,0.06)', overflow: 'hidden' }}>
                <div style={{ width: `${pct}%`, height: '100%', background: e.color, borderRadius: 999 }} />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

const APP_VIDEOS = {
  '1glance':  '/assets/movies/1Glance.mp4',
  'abhcare':  '/assets/movies/ABH.mp4',
  'countrpt': '/assets/movies/CountrPT.mp4',
};

function VideoScreen({ src }) {
  return (
    <video
      src={src}
      autoPlay
      loop
      muted
      playsInline
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
    />
  );
}

function AppVideo({ id, accent, tilt = 0, float = 1, floatDelay = 0, style }) {
  const src = APP_VIDEOS[id];
  if (!src) return null;

  const floatAmt = 8 * float;
  const tiltSign = tilt >= 0 ? 'p' : 'n';
  const animName = float > 0 ? `bz-vfloat-${Math.round(float * 10)}-${tiltSign}${Math.round(Math.abs(tilt) * 10)}` : 'none';

  React.useEffect(() => {
    if (float <= 0) return;
    const elId = `kf-${animName}`;
    if (document.getElementById(elId)) return;
    const s = document.createElement('style');
    s.id = elId;
    s.textContent = `@keyframes ${animName} {
      0%,100% { transform: rotate(${tilt}deg) translateY(0); }
      50%     { transform: rotate(${tilt}deg) translateY(-${floatAmt}px); }
    }`;
    document.head.appendChild(s);
  }, [animName, float, tilt, floatAmt]);

  return (
    <video
      className="bz-app-video"
      src={src}
      autoPlay
      loop
      muted
      playsInline
      style={{
        width: '100%',
        maxWidth: 340,
        borderRadius: 32,
        boxShadow: 'none',
        display: 'block',
        transform: `rotate(${tilt}deg)`,
        animation: float > 0 ? `${animName} ${5 + floatDelay * 0.7}s ease-in-out ${floatDelay * 0.4}s infinite` : 'none',
        ...style,
      }}
    />
  );
}

function AppScreen({ id }) {
  const videoSrc = APP_VIDEOS[id];
  if (videoSrc) return <VideoScreen src={videoSrc} />;
  const fallbacks = { pulse: PulseScreen, relay: RelayScreen, verdant: VerdantScreen, meridian: MeridianScreen, flux: FluxScreen };
  const Comp = fallbacks[id] || PulseScreen;
  return <Comp />;
}

// App icon — circular orbit-system tile, color per app
function AppIcon({ app, size = 64, rounded = 'circle' }) {
  const accent = app.accent;
  const cx = 50, cy = 50;
  return (
    <div style={{
      width: size, height: size,
      borderRadius: rounded === 'circle' ? '50%' : size * 0.22,
      background: `radial-gradient(circle at 30% 30%, #1B1B20 0%, #0A0A0C 75%)`,
      display: 'grid', placeItems: 'center',
      boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 24px -8px ${accent}66`,
      position: 'relative',
      overflow: 'hidden',
    }}>
      <svg viewBox="0 0 100 100" width="100%" height="100%">
        <circle cx={cx} cy={cy} r="32" fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1" strokeDasharray="2 3" />
        {[0,1,2].map(i => {
          const t = (i/3) * Math.PI * 2 - Math.PI / 2;
          const x = cx + Math.cos(t) * 32;
          const y = cy + Math.sin(t) * 32;
          const isActive = i === 0;
          return (
            <g key={i}>
              {isActive && <circle cx={x} cy={y} r="9" fill={accent} opacity="0.35" />}
              <circle cx={x} cy={y} r={isActive ? 5 : 3.2} fill={isActive ? accent : '#fff'} opacity={isActive ? 1 : 0.5} />
            </g>
          );
        })}
      </svg>
    </div>
  );
}

Object.assign(window, { PhoneFrame, AppScreen, AppVideo, AppIcon, APP_VIDEOS });