// MiniPhone — compact iPhone mock used on the landing page.
// Scaled 0.6x by default. Renders status bar, dynamic island, screen content,
// optional frosted mini-player dock, and home indicator. Supports dark/light.

function MiniPhone({ children, theme = 'light', scale = 1, miniPlayer = null, tint = null, style = {} }) {
  const isDark = theme === 'dark';
  const W = 320, H = 680;
  const bg = tint || (isDark ? '#0C0B0E' : '#FBF7F1');
  return (
    <div style={{
      width: W * scale, height: H * scale,
      position: 'relative',
      ...style,
    }}>
      <div style={{
        width: W, height: H,
        transform: `scale(${scale})`, transformOrigin: 'top left',
        borderRadius: 46, position: 'relative', overflow: 'hidden',
        background: bg,
        color: isDark ? '#EDEEF0' : '#14171B',
        boxShadow: isDark
          ? '0 0 0 8px #0f1013, 0 0 0 9px #2a2b2f, 0 60px 140px -30px rgba(0,0,0,0.75), 0 20px 60px rgba(0,0,0,0.45)'
          : '0 0 0 8px #1d1d1f, 0 0 0 9px #3a3a3d, 0 60px 140px -30px rgba(20,23,27,0.35), 0 20px 60px rgba(20,23,27,0.15)',
      }}>
        {/* Dynamic island */}
        <div style={{
          position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
          width: 100, height: 28, borderRadius: 18, background: '#000', zIndex: 80,
        }} />
        {/* Status bar */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, zIndex: 70,
          height: 48, padding: '16px 24px 0',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          color: isDark ? '#fff' : '#000',
          fontSize: 14, fontWeight: 600, letterSpacing: -0.3,
          pointerEvents: 'none',
        }}>
          <span>9:41</span>
          <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
            <svg width="15" height="10" viewBox="0 0 17 11"><g fill={isDark?'#fff':'#000'}><rect x="0" y="7" width="3" height="4" rx="0.5"/><rect x="4.5" y="4.8" width="3" height="6.2" rx="0.5"/><rect x="9" y="2.6" width="3" height="8.4" rx="0.5"/><rect x="13.5" y="0.4" width="3" height="10.6" rx="0.5"/></g></svg>
            <svg width="13" height="10" viewBox="0 0 15 11" fill="none"><path d="M7.5 2.5c2.1 0 4.1.8 5.5 2.1l1.1-1.1C12.3 1.7 10 .8 7.5.8S2.7 1.7.9 3.5l1.1 1.1C3.4 3.3 5.4 2.5 7.5 2.5z" fill={isDark?'#fff':'#000'}/><circle cx="7.5" cy="8.5" r="1.4" fill={isDark?'#fff':'#000'}/></svg>
            <svg width="22" height="11" viewBox="0 0 25 12">
              <rect x="0.5" y="0.5" width="21.5" height="11" rx="3" fill="none" stroke={isDark?'#fff':'#000'} strokeOpacity="0.5"/>
              <rect x="2" y="2" width="18.5" height="8" rx="1.8" fill={isDark?'#fff':'#000'}/>
              <rect x="23" y="4" width="1.5" height="4" rx="0.7" fill={isDark?'#fff':'#000'} fillOpacity="0.5"/>
            </svg>
          </div>
        </div>

        {/* Content */}
        <div style={{
          position: 'absolute', inset: 0,
          overflow: 'hidden', paddingTop: 48,
        }}>
          {children}
        </div>

        {/* Mini player dock */}
        {miniPlayer && (
          <div style={{
            position: 'absolute', left: 10, right: 10, bottom: 24,
            height: 58, borderRadius: 20,
            overflow: 'hidden',
            background: isDark ? 'rgba(22,24,28,0.7)' : 'rgba(255,255,255,0.7)',
            backdropFilter: 'blur(24px) saturate(180%)',
            WebkitBackdropFilter: 'blur(24px) saturate(180%)',
            boxShadow: isDark
              ? 'inset 0 0.5px 0 rgba(255,255,255,0.12), inset 0 0 0 0.5px rgba(255,255,255,0.06), 0 20px 40px rgba(0,0,0,0.45)'
              : 'inset 0 0.5px 0 rgba(255,255,255,0.9), inset 0 0 0 0.5px rgba(20,23,27,0.06), 0 10px 30px rgba(20,23,27,0.12)',
            zIndex: 60,
          }}>
            <div style={{
              height: '100%', display: 'flex', alignItems: 'center',
              padding: '0 12px 0 8px', gap: 10,
            }}>
              <MiniGradient seed={miniPlayer.seed} size={42} radius={9} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontSize: 13.5, fontWeight: 500, letterSpacing: -0.2,
                  color: isDark ? '#EDEEF0' : '#14171B',
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>{miniPlayer.title}</div>
                <div style={{
                  fontSize: 11.5, color: isDark ? 'rgba(235,236,240,0.58)' : 'rgba(20,23,27,0.6)',
                  marginTop: 1,
                }}>{miniPlayer.artist}</div>
              </div>
              <div style={{
                width: 32, height: 32, borderRadius: 16,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: isDark ? '#EDEEF0' : '#14171B',
              }}>
                <svg width="14" height="14" viewBox="0 0 18 18" fill="currentColor"><rect x="3" y="2" width="4" height="14" rx="1.2"/><rect x="11" y="2" width="4" height="14" rx="1.2"/></svg>
              </div>
              <MiniEq color="#D58E90" />
            </div>
          </div>
        )}

        {/* Home indicator */}
        <div style={{
          position: 'absolute', bottom: 6, left: '50%', transform: 'translateX(-50%)',
          width: 110, height: 4, borderRadius: 100,
          background: isDark ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.25)',
          zIndex: 90, pointerEvents: 'none',
        }} />
      </div>
    </div>
  );
}

// Deterministic soft gradient artwork — warm/rose-leaning palette for landing.
function MiniGradient({ seed = 0, size = 42, radius = 9 }) {
  const palettes = [
    ['#F6C75C','#D58E90','#C799B8'], // apricot-rose-mauve
    ['#F0B895','#D58E90','#95B4C7'], // peach-rose-sky
    ['#E9C46A','#F0B895','#D58E90'], // gold-peach-rose
    ['#A9B79B','#F0B895','#D58E90'], // sage-peach-rose
    ['#C799B8','#95B4C7','#A9B79B'], // mauve-sky-sage
    ['#F6C75C','#F0B895','#A9B79B'], // warm sun
    ['#D58E90','#C799B8','#F0B895'], // rose trio
    ['#95B4C7','#C799B8','#F6C75C'], // cool+warm
  ];
  const c = palettes[seed % palettes.length];
  return (
    <div style={{
      width: size, height: size, borderRadius: radius,
      position: 'relative', overflow: 'hidden', flexShrink: 0,
      background: `
        radial-gradient(circle at 20% 30%, ${c[0]} 0%, transparent 55%),
        radial-gradient(circle at 80% 40%, ${c[1]} 0%, transparent 60%),
        radial-gradient(circle at 50% 80%, ${c[2]} 0%, transparent 60%),
        linear-gradient(135deg, ${c[0]}40, ${c[2]}40)
      `,
      boxShadow: 'inset 0 0 0 0.5px rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.15)',
    }} />
  );
}

function MiniEq({ color = '#D58E90', active = true }) {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    if (!active) return;
    const i = setInterval(() => setT(v => v + 1), 160);
    return () => clearInterval(i);
  }, [active]);
  const heights = [[5,9,4,7],[8,4,9,5],[4,8,6,9],[7,5,8,4]][t % 4];
  return (
    <div style={{ display: 'flex', gap: 2, alignItems: 'flex-end', height: 10, width: 16 }}>
      {heights.map((h, i) => (
        <div key={i} style={{
          width: 2.5, height: h, background: color,
          borderRadius: 1, transition: 'height 160ms ease-out',
        }} />
      ))}
    </div>
  );
}

Object.assign(window, { MiniPhone, MiniGradient, MiniEq });