function AppMockup() {
  return (
    <div className="phone-stage">
      <div className="phone-bg"></div>
      <div className="phone" data-screen-label="App Condominize">
        <div className="phone-screen">
          <div className="phone-notch"></div>
          <div className="phone-status">
            <span>9:41</span>
            <div className="right">
              <svg width="16" height="10" viewBox="0 0 16 10" fill="currentColor"><rect x="0" y="6" width="2" height="4" rx="0.5"/><rect x="4" y="4" width="2" height="6" rx="0.5"/><rect x="8" y="2" width="2" height="8" rx="0.5"/><rect x="12" y="0" width="2" height="10" rx="0.5"/></svg>
              <svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor"><path d="M7 2 C4 2 2 4 0 5.5 L2 7.5 C3.5 6 5 5 7 5 C9 5 10.5 6 12 7.5 L14 5.5 C12 4 10 2 7 2 Z"/></svg>
              <svg width="22" height="11" viewBox="0 0 22 11" fill="none" stroke="currentColor" strokeWidth="1"><rect x="0.5" y="0.5" width="18" height="10" rx="2"/><rect x="2" y="2" width="15" height="7" rx="1" fill="currentColor"/><rect x="20" y="3.5" width="1.5" height="4" rx="0.5" fill="currentColor"/></svg>
            </div>
          </div>

          <div className="app-header">
            <div className="who">
              <div className="avatar">RS</div>
              <div className="who-text">
                <small>Olá, síndico</small>
                <b>Roberto Silva</b>
              </div>
            </div>
            <div className="app-bell"><Icon name="bell" size={16} color="#fff"/></div>
          </div>

          <div className="app-body">
            <div className="app-section-title">Resumo do mês</div>
            <div className="app-stats">
              <div className="app-stat">
                <div className="lbl">Receitas</div>
                <div className="v">R$ 42.380</div>
              </div>
              <div className="app-stat">
                <div className="lbl">Inadimplência</div>
                <div className="v">2,1%</div>
              </div>
            </div>

            <div className="app-chart">
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline" }}>
                <div className="app-chart-ttl">Receitas vs. despesas</div>
                <small style={{ fontSize: 10, color: "var(--text-soft)" }}>últimos 6 meses</small>
              </div>
              <svg viewBox="0 0 240 80" style={{ width: "100%", height: 70, marginTop: 6 }}>
                <defs>
                  <linearGradient id="ag" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.4"/>
                    <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                <path d="M0 60 L40 50 L80 56 L120 32 L160 42 L200 22 L240 28 L240 80 L0 80 Z" fill="url(#ag)"/>
                <path d="M0 60 L40 50 L80 56 L120 32 L160 42 L200 22 L240 28" stroke="var(--accent-deep)" strokeWidth="2" fill="none" strokeLinecap="round"/>
                <path d="M0 68 L40 64 L80 62 L120 54 L160 58 L200 48 L240 52" stroke="var(--navy-700)" strokeWidth="1.5" fill="none" strokeDasharray="3 3" strokeLinecap="round"/>
                {[0,40,80,120,160,200,240].map((x,i) => (
                  <circle key={i} cx={x} cy={[60,50,56,32,42,22,28][i]} r="2.5" fill="var(--accent-deep)"/>
                ))}
              </svg>
              <div style={{ display:"flex", justifyContent: "space-between", fontSize: 9, color: "var(--text-soft)", marginTop: 4, paddingRight: 4 }}>
                <span>jan</span><span>fev</span><span>mar</span><span>abr</span><span>mai</span><span>jun</span>
              </div>
            </div>

            <div className="app-section-title">Acesso rápido</div>
            <div className="app-actions">
              <div className="app-act"><div className="ico"><Icon name="doc" size={14}/></div><div className="lbl">Boletos</div></div>
              <div className="app-act"><div className="ico"><Icon name="calendar" size={14}/></div><div className="lbl">Reservas</div></div>
              <div className="app-act"><div className="ico"><Icon name="users" size={14}/></div><div className="lbl">Assembleia</div></div>
              <div className="app-act"><div className="ico"><Icon name="chart" size={14}/></div><div className="lbl">Contas</div></div>
            </div>

            <div className="app-section-title">Próxima assembleia</div>
            <div style={{
              background: "var(--navy-900)", color: "#fff",
              borderRadius: 14, padding: "14px 16px",
              display: "flex", gap: 12, alignItems: "center",
              border: "1px solid rgba(212, 162, 76, 0.3)"
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10,
                background: "rgba(212, 162, 76, 0.18)",
                color: "var(--gold-500)",
                display: "flex", alignItems: "center", justifyContent: "center"
              }}>
                <Icon name="calendar" size={18} color="var(--gold-500)"/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, fontWeight: 700 }}>Assembleia ordinária</div>
                <div style={{ fontSize: 10, opacity: 0.7, marginTop: 2 }}>28 de maio · 19h00</div>
              </div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 9, fontWeight: 600,
                background: "var(--gold-500)", color: "var(--navy-1000)",
                padding: "5px 10px", borderRadius: 999
              }}>RSVP</div>
            </div>
          </div>

          <div className="app-tab">
            <div className="app-tab-item active"><Icon name="building" size={16}/><span className="label-tab">Início</span></div>
            <div className="app-tab-item"><Icon name="wallet" size={16}/><span className="label-tab">Finanças</span></div>
            <div className="app-tab-item center"><Icon name="bolt" size={18} color="var(--navy-1000)"/></div>
            <div className="app-tab-item"><Icon name="doc" size={16}/><span className="label-tab">Atas</span></div>
            <div className="app-tab-item"><Icon name="users" size={16}/><span className="label-tab">Mais</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.AppMockup = AppMockup;