// Mobile App — on-the-go BI: device mockups, features, adoption.
function Phone({ children, label }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
      <div style={{ width: 208, height: 424, borderRadius: 32, background: 'linear-gradient(160deg, oklch(0.28 0.02 260), oklch(0.18 0.02 260))', padding: 9, boxShadow: 'var(--shadow-lg)', position: 'relative', flexShrink: 0 }}>
        <div style={{ position: 'absolute', top: 16, left: '50%', transform: 'translateX(-50%)', width: 64, height: 15, background: 'oklch(0.14 0.02 260)', borderRadius: 10, zIndex: 3 }}/>
        <div style={{ background: 'var(--panel)', borderRadius: 25, height: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div style={{ height: 26, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '0 14px 3px', fontSize: 9, color: 'var(--ink-3)', fontWeight: 600 }}>
            <span className="mono">9:41</span>
            <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}><Icon name="wifi" size={10}/><Icon name="activity" size={10}/></span>
          </div>
          {children}
        </div>
      </div>
      <span style={{ fontSize: 11.5, color: 'var(--ink-3)', fontWeight: 500 }}>{label}</span>
    </div>
  );
}

function MobileScreen() {
  return (
    <div className="screen">
      <div className="screen-head">
        <div>
          <div className="screen-title">Mobile App</div>
          <div className="screen-sub">BI in your pocket · Android &amp; iOS · offline mode · push alerts · voice search in 12 Indian languages</div>
        </div>
        <div className="screen-actions">
          <button className="btn"><Icon name="external"/>App Store</button>
          <button className="btn"><Icon name="external"/>Play Store</button>
          <button className="btn primary"><Icon name="smartphone"/>Send test build</button>
        </div>
      </div>

      <div className="grid g-4" style={{ marginBottom: 16 }}>
        <div className="card kpi" style={{ padding: 13 }}><div className="label"><Icon name="download" size={12}/>Downloads</div><div className="value">84.2<span className="unit">K</span></div><div className="delta up"><Icon name="trending" size={12}/>+18% MoM</div></div>
        <div className="card kpi" style={{ padding: 13 }}><div className="label"><Icon name="users" size={12}/>Monthly active</div><div className="value">48.6<span className="unit">K</span></div><div className="delta up"><Icon name="trending" size={12}/>58% of users</div></div>
        <div className="card kpi" style={{ padding: 13 }}><div className="label"><Icon name="bell" size={12}/>Push open rate</div><div className="value">42.4<span className="unit">%</span></div><div className="delta up" style={{ color: 'var(--ink-3)' }}>industry avg 22%</div></div>
        <div className="card kpi" style={{ padding: 13 }}><div className="label"><Icon name="star" size={12}/>App rating</div><div className="value">4.6<span className="unit">/5</span></div><div className="delta up" style={{ color: 'var(--ink-3)' }}>12.4K reviews</div></div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1.9fr 1fr', marginBottom: 16 }}>
        {/* Device showcase */}
        <div className="card" style={{ overflow: 'hidden' }}>
          <div className="card-head"><div><h3>Live App Preview</h3><div className="sub">Same data, same semantic layer — optimized for touch</div></div><span className="tag ok"><span className="live-dot"/>v3.4</span></div>
          <div className="card-body" style={{ background: 'linear-gradient(135deg, var(--primary-tint), var(--accent-tint) 130%)', display: 'flex', justifyContent: 'center', gap: 18, padding: '26px 14px', flexWrap: 'wrap' }}>
            {/* Phone 1 — dashboard */}
            <Phone label="Executive · mobile">
              <div style={{ padding: '4px 12px', flex: 1, overflow: 'hidden' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
                  <div className="brand-mark" style={{ width: 22, height: 22 }}><svg viewBox="0 0 24 24" fill="none"><rect x="4" y="12" width="3" height="8" rx="1" fill="white"/><rect x="9" y="7" width="3" height="13" rx="1" fill="white" opacity=".85"/><rect x="14" y="4" width="3" height="16" rx="1" fill="#FFD79A"/></svg></div>
                  <span style={{ fontFamily: 'Noto Serif Devanagari, serif', fontWeight: 700, fontSize: 13 }}>व्यापार BI</span>
                  <span className="spacer"/><Icon name="bell" size={13} style={{ color: 'var(--ink-3)' }}/>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 8 }}>
                  <div style={{ padding: 8, borderRadius: 8, background: 'var(--panel-2)', border: '1px solid var(--border)' }}><div style={{ fontSize: 8, color: 'var(--ink-3)', fontWeight: 600 }}>GeM PROC.</div><div className="mono" style={{ fontSize: 15, fontWeight: 600 }}>₹1,842</div><div style={{ fontSize: 8, color: 'var(--ok)', fontWeight: 600 }}>+12.4%</div></div>
                  <div style={{ padding: 8, borderRadius: 8, background: 'var(--panel-2)', border: '1px solid var(--border)' }}><div style={{ fontSize: 8, color: 'var(--ink-3)', fontWeight: 600 }}>REVENUE</div><div className="mono" style={{ fontSize: 15, fontWeight: 600 }}>₹3,214</div><div style={{ fontSize: 8, color: 'var(--ok)', fontWeight: 600 }}>+8.2%</div></div>
                </div>
                <div style={{ padding: 8, borderRadius: 8, background: 'var(--panel-2)', border: '1px solid var(--border)', marginBottom: 8 }}>
                  <div style={{ fontSize: 8, color: 'var(--ink-3)', fontWeight: 600, marginBottom: 2 }}>REVENUE TREND</div>
                  <Sparkline data={[180,192,205,198,215,224,232,240,252,268]} w={160} h={40} stroke="var(--primary)" fill="var(--primary)" area/>
                </div>
                <div style={{ fontSize: 8.5, color: 'var(--ink-3)', fontWeight: 600, marginBottom: 4 }}>TOP STATES</div>
                {STATES.slice(0, 3).map((s, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, padding: '3px 0', borderBottom: '1px solid var(--border)' }}><span>{s.name}</span><span className="mono" style={{ fontWeight: 600 }}>₹{s.value.toFixed(0)}</span></div>
                ))}
              </div>
              <div style={{ height: 40, borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-around', color: 'var(--ink-3)' }}>
                <Icon name="dashboard" size={15} style={{ color: 'var(--primary)' }}/><Icon name="search" size={15}/><Icon name="sparkles" size={15}/><Icon name="bell" size={15}/>
              </div>
            </Phone>

            {/* Phone 2 — copilot voice */}
            <Phone label="Voice Copilot">
              <div style={{ padding: '4px 12px', flex: 1, display: 'flex', flexDirection: 'column' }}>
                <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 5 }}><Icon name="sparkles" size={12} style={{ color: 'var(--accent-2)' }}/>Ask VyaparBI</div>
                <div style={{ alignSelf: 'flex-end', background: 'var(--primary)', color: 'white', padding: '6px 9px', borderRadius: '10px 10px 3px 10px', fontSize: 9.5, marginBottom: 8, maxWidth: '85%' }}>राजस्व किस राज्य में सबसे ज़्यादा है?</div>
                <div style={{ background: 'var(--panel-2)', padding: '7px 9px', borderRadius: '10px 10px 10px 3px', fontSize: 9.5, marginBottom: 8, border: '1px solid var(--border)' }}>महाराष्ट्र सबसे आगे है — <b>₹342 Cr</b> (कुल का 13.3%).</div>
                <div style={{ background: 'var(--panel-2)', borderRadius: 8, border: '1px solid var(--border)', padding: 7, marginBottom: 8 }}>
                  <BarChart data={[342, 298, 264, 241]} labels={["MH", "UP", "KA", "TN"]} h={70} color="var(--primary)"/>
                </div>
                <div className="spacer"/>
                <div style={{ display: 'grid', placeItems: 'center', paddingBottom: 6 }}>
                  <div style={{ width: 48, height: 48, borderRadius: 50, background: 'linear-gradient(140deg, var(--primary), var(--accent))', display: 'grid', placeItems: 'center', boxShadow: '0 4px 14px oklch(0.4 0.12 258 / .4)' }}>
                    <Icon name="mic" size={20} style={{ color: 'white' }}/>
                  </div>
                </div>
              </div>
            </Phone>

            {/* Phone 3 — alerts (hidden on narrow) */}
            <div style={{ display: 'flex' }} className="phone-3">
              <Phone label="Push Alerts">
                <div style={{ padding: '4px 12px', flex: 1 }}>
                  <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 5 }}><Icon name="bell" size={12} style={{ color: 'var(--danger)' }}/>Alerts <span className="tag danger" style={{ fontSize: 8 }}>3 new</span></div>
                  {[
                    { s: "danger", t: "PM2.5 crossed 220 — Delhi CPB", a: "2m" },
                    { s: "warn", t: "Transformer T-118 oil temp rising", a: "6m" },
                    { s: "primary", t: "New tender ₹50 Cr — Railways", a: "18m" },
                    { s: "ok", t: "Daily digest delivered", a: "1h" },
                  ].map((a, i) => (
                    <div key={i} style={{ padding: 8, borderRadius: 8, background: 'var(--panel-2)', border: '1px solid var(--border)', marginBottom: 6, display: 'flex', gap: 7 }}>
                      <span className={`live-dot ${a.s === 'primary' ? '' : a.s === 'ok' ? '' : a.s}`} style={{ background: a.s === 'primary' ? 'var(--primary)' : a.s === 'ok' ? 'var(--ok)' : undefined, marginTop: 3, animation: 'none', flexShrink: 0 }}/>
                      <div><div style={{ fontSize: 9.5, lineHeight: 1.35 }}>{a.t}</div><div style={{ fontSize: 8, color: 'var(--ink-4)', marginTop: 2 }}>{a.a} ago</div></div>
                    </div>
                  ))}
                </div>
              </Phone>
            </div>
          </div>
        </div>

        {/* Features + availability */}
        <div className="vstack">
          <div className="card">
            <div className="card-head" style={{ padding: '10px 12px' }}><h3 style={{ fontSize: 12 }}>Capabilities</h3></div>
            <div className="card-body" style={{ padding: 0 }}>
              {[
                { icon: "wifi", t: "Offline mode", s: "Cached dashboards + last sync; auto-reconciles on reconnect." },
                { icon: "bell", t: "Smart push", s: "Threshold & anomaly alerts routed to the right owner." },
                { icon: "mic", t: "Voice search", s: "Ask in 12 Indian languages, hands-free field use." },
                { icon: "lock", t: "Biometric + MFA", s: "Face/fingerprint unlock, device attestation, MDM-ready." },
                { icon: "share", t: "Share & annotate", s: "Snapshot a chart, mark it up, send to Teams/WhatsApp." },
              ].map((f, i) => (
                <div key={i} style={{ padding: '10px 12px', borderTop: i ? '1px solid var(--border)' : 0, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <div style={{ width: 30, height: 30, borderRadius: 7, background: 'var(--primary-tint)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name={f.icon} size={14} style={{ color: 'var(--primary)' }}/></div>
                  <div><div style={{ fontSize: 12.5, fontWeight: 600 }}>{f.t}</div><div style={{ fontSize: 11, color: 'var(--ink-3)', lineHeight: 1.4 }}>{f.s}</div></div>
                </div>
              ))}
            </div>
          </div>
          <div className="card">
            <div className="card-body" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 78, height: 78, borderRadius: 10, background: 'var(--panel)', border: '1px solid var(--border-strong)', display: 'grid', placeItems: 'center', flexShrink: 0, padding: 8 }}>
                <svg viewBox="0 0 40 40" width="62" height="62">
                  {Array.from({ length: 64 }).map((_, i) => {
                    const r = Math.floor(i / 8), c = i % 8;
                    const on = (r * 7 + c * 3 + (r % 2) * 5) % 3 === 0 || r === 0 || c === 0 || r === 7 || c === 7;
                    return on ? <rect key={i} x={c * 5} y={r * 5} width="4.4" height="4.4" fill="var(--ink)"/> : null;
                  })}
                </svg>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>Scan to install</div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2, marginBottom: 8 }}>Android 9+ · iOS 15+ · 42 MB</div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <span className="tag"><Icon name="smartphone" size={10}/>Android</span>
                  <span className="tag"><Icon name="smartphone" size={10}/>iOS</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><div><h3>Adoption — Monthly Active Users</h3><div className="sub">Android + iOS · last 12 months</div></div><span className="tag ok"><Icon name="trending" size={10}/>+18% MoM</span></div>
        <div className="card-body">
          <LineChart series={[{ name: "Android", data: [8,11,14,18,22,26,30,34,38,42,46,49] }, { name: "iOS", data: [4,5,6,8,10,12,14,16,18,20,22,24] }]} labels={["Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr","May","Jun","Jul"]} h={200} colors={["var(--primary)", "var(--accent)"]} yFormat={v => v + 'K'}/>
        </div>
      </div>
    </div>
  );
}

window.MobileScreen = MobileScreen;