// ─────────────────────────────────────────────────────────────
// Android phone shell to match the user's screenshots.
// 390 × 760 device frame · Samsung-style status bar (03:03, wifi,
// signal, 100% battery) and bottom nav (recent, home, back).
// Body is full-bleed Midnight (deep canopy).
// ─────────────────────────────────────────────────────────────

function AndroidPhone({ children }) {
  return (
    <div style={{
      width: 390, height: 760, background: '#07100A',
      borderRadius: 38, overflow: 'hidden',
      boxShadow: '0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px #2D3A22',
      display: 'flex', flexDirection: 'column', position: 'relative',
      flexShrink: 0,
    }}>
      <AndroidStatusBar/>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
                    minHeight: 0, position: 'relative', background: '#07100A' }}>
        {children}
      </div>
      <AndroidNavBar/>
    </div>
  );
}

function AndroidStatusBar() {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '12px 22px 6px',
      flexShrink: 0, color: '#F2EDE4',
    }}>
      <span style={{ font: '600 14.5px var(--font-sans)', letterSpacing: 0,
                     display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        03:03
        <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
          <path d="M2 5h10M2 5v6M2 11h10M14 2v12" stroke="#F2EDE4" strokeWidth="1.2"
                strokeLinecap="round"/>
        </svg>
      </span>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        {/* mute / vibrate */}
        <svg width="14" height="11" viewBox="0 0 14 11" fill="none">
          <path d="M1 4h2l3-3v9L3 7H1z" stroke="#F2EDE4" strokeWidth="1.1" fill="none"/>
          <path d="M9 2l4 7M13 2l-4 7" stroke="#F2EDE4" strokeWidth="1.1" strokeLinecap="round"/>
        </svg>
        {/* wifi */}
        <svg width="14" height="11" viewBox="0 0 14 11" fill="none">
          <path d="M1 4c1.5-1.4 3.7-2.2 6-2.2s4.5.8 6 2.2" stroke="#F2EDE4" strokeWidth="1.2" strokeLinecap="round"/>
          <path d="M3 6.5c1-1 2.4-1.5 4-1.5s3 .5 4 1.5" stroke="#F2EDE4" strokeWidth="1.2" strokeLinecap="round"/>
          <circle cx="7" cy="9" r="1" fill="#F2EDE4"/>
          <text x="13" y="5" textAnchor="end" style={{ font: '500 5.5px var(--font-sans)',
            fill: '#F2EDE4' }}>5</text>
        </svg>
        {/* signal bars */}
        <svg width="14" height="11" viewBox="0 0 14 11" fill="none">
          <rect x="0"  y="8" width="2" height="3" rx="0.3" fill="#F2EDE4"/>
          <rect x="3"  y="6" width="2" height="5" rx="0.3" fill="#F2EDE4"/>
          <rect x="6"  y="3" width="2" height="8" rx="0.3" fill="#F2EDE4"/>
          <rect x="9"  y="0" width="2" height="11" rx="0.3" fill="#F2EDE4"/>
        </svg>
        {/* battery pill */}
        <span style={{
          font: '600 10px var(--font-sans)', color: '#F2EDE4',
          padding: '1.5px 6px', border: '1px solid #F2EDE4', borderRadius: 999,
          display: 'inline-block',
        }}>100</span>
      </span>
    </div>
  );
}

function AndroidNavBar() {
  return (
    <div style={{
      background: '#0B1306', borderTop: '0.5px solid #1F2B16',
      display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      padding: '14px 24px 16px', flexShrink: 0,
    }}>
      {/* Recents */}
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <rect x="3" y="3" width="14" height="2" rx="0.5" fill="#586552"/>
        <rect x="3" y="9" width="14" height="2" rx="0.5" fill="#586552"/>
        <rect x="3" y="15" width="14" height="2" rx="0.5" fill="#586552"/>
      </svg>
      {/* Home */}
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <circle cx="10" cy="10" r="8" stroke="#586552" strokeWidth="1.5"/>
      </svg>
      {/* Back */}
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <path d="m12 5-5 5 5 5" stroke="#586552" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

window.AndroidPhone = AndroidPhone;