function PhoneMenu() {
  const items = [
    { i: <Icons.Chat     style={{width:18,height:18}}/>, label: "Fale com o Prefeito",        tone: "cyan"  },
    { i: <Icons.Bot      style={{width:18,height:18}}/>, label: "Pergunta Tudo",               tone: "cyan"  },
    { i: <Icons.Headset  style={{width:18,height:18}}/>, label: "Pergunta Cidade",             tone: "cyan"  },
    { i: <Icons.Bank     style={{width:18,height:18}}/>, label: "Secretarias",                 tone: "green" },
    { i: <Icons.Megaphone style={{width:18,height:18}}/>, label: "Notícias",                   tone: "green" },
    { i: <Icons.ThumbsUp style={{width:18,height:18}}/>, label: "Sugestões e Reclamações",     tone: "lime"  },
  ];
  return (
    <div className="phone-big">
      <div className="phone-big-frame">
        <div className="phone-big-screen">

          {/* status bar */}
          <div className="pm-status">
            <span>15:09</span>
            <span style={{display:'flex',gap:5,alignItems:'center'}}>
              <svg width="15" height="11" viewBox="0 0 15 11" fill="#fff">
                <rect x="0"  y="6"   width="2.5" height="5"    rx=".5"/>
                <rect x="4"  y="3.5" width="2.5" height="7.5"  rx=".5"/>
                <rect x="8"  y="1.5" width="2.5" height="9.5"  rx=".5"/>
                <rect x="12" y="0"   width="2.5" height="11"   rx=".5" opacity=".3"/>
              </svg>
              <svg width="13" height="10" viewBox="0 0 24 18" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round">
                <path d="M1 6a15 15 0 0 1 22 0"/>
                <path d="M5 10a9 9 0 0 1 14 0"/>
                <path d="M9 14a4.5 4.5 0 0 1 6 0"/>
                <circle cx="12" cy="17" r="1.5" fill="#fff" stroke="none"/>
              </svg>
              <span style={{display:'inline-flex',alignItems:'center',gap:2}}>
                <span style={{width:20,height:11,border:'1.5px solid #fff',borderRadius:2.5,position:'relative',display:'inline-block'}}>
                  <span style={{position:'absolute',inset:2,right:4,background:'#fff',borderRadius:1}}></span>
                </span>
                <span style={{width:2,height:5,background:'rgba(255,255,255,.5)',borderRadius:1}}></span>
              </span>
            </span>
          </div>

          {/* brand / logo */}
          <div className="pm-brand">
            <span className="pm-menu-icon"><span/><span/><span/></span>
            <img src="assets/Logo Cidade na Mão 1.svg" alt="Cidade na Mão" className="pm-brand-logo"/>
            <span style={{width:18}}/>
          </div>

          {/* menu items */}
          <div className="pm-list">
            {items.map((it, i) => (
              <div key={i} className={`pm-row pm-${it.tone}`}>
                <span className="pm-row-icon">{it.i}</span>
                <span className="pm-row-label">{it.label}</span>
              </div>
            ))}
          </div>

        </div>
      </div>
    </div>
  );
}
window.PhoneMenu = PhoneMenu;