// Mobile Home — single-screen, scannable, action-first
const MobileHome = () => {
  const [period, setPeriod] = React.useState('Month');

  return (
    <div style={{ width: '100%', height: '100%', background: '#FAFAF7', color: '#0F0E0C', fontFamily: "'Inter Tight',sans-serif", overflow: 'hidden auto', paddingBottom: 88 }}>
      <style>{`
        *{box-sizing:border-box;margin:0;padding:0}
        .num{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-weight:400;letter-spacing:-0.025em}
        .mono{font-family:'JetBrains Mono',monospace;letter-spacing:0.08em;text-transform:uppercase}
        .mod-card:active{transform:scale(0.97)}
        .pill:active{filter:brightness(0.95)}
        ::-webkit-scrollbar{display:none}
      `}</style>

      {/* HERO — dark, focused. Greeting + the only number that matters */}
      <div style={{ padding: '14px 16px 22px', background: '#0F0E0C', color: '#FFF8EE', position: 'relative', overflow: 'hidden', borderBottomLeftRadius: 22, borderBottomRightRadius: 22 }}>
        <div style={{ position: 'absolute', top: 0, right: -40, width: 220, height: 220, background: 'radial-gradient(circle, rgba(255,87,34,0.22), transparent 60%)' }} />

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative' }}>
          <div className="mono" style={{ fontSize: 9.5, color: '#8a8478', fontWeight: 600 }}>● GOOD MORNING · TEAM</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <button style={{ width: 32, height: 32, borderRadius: 9, border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.04)', color: '#FFF8EE', fontSize: 14, cursor: 'pointer' }}>🔔</button>
            <span style={{ width: 32, height: 32, borderRadius: '50%', background: 'linear-gradient(135deg,#7C3AED,#1F5FAE)', color: '#fff', fontSize: 12, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>RT</span>
          </div>
        </div>

        <div style={{ marginTop: 14, position: 'relative' }}>
          <div style={{ fontSize: 13, color: '#B5AFA0', fontWeight: 500 }}>Your Plant</div>
          <div className="num" style={{ fontSize: 30, lineHeight: 1.05, color: '#FFF8EE', marginTop: 6 }}>
            <em style={{ fontStyle: 'italic', color: '#FF8A4F', fontWeight: 300 }}>3 high-sev</em> defects need triage
          </div>
        </div>

        {/* Period pills */}
        <div style={{ display: 'flex', gap: 4, padding: 3, background: 'rgba(255,255,255,0.06)', borderRadius: 9, marginTop: 16, position: 'relative' }}>
          {['Week', 'Month', 'Quarter', 'YTD'].map(p => (
            <button key={p} className="pill" onClick={() => setPeriod(p)} style={{ flex: 1, padding: '7px 0', borderRadius: 7, border: 'none', background: period === p ? '#FF5722' : 'transparent', color: period === p ? '#fff' : '#B5AFA0', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>{p}</button>
          ))}
        </div>
      </div>

      {/* ACTION BAR — what matters now */}
      <div style={{ margin: '14px 16px 0', padding: '13px 14px', borderRadius: 14, background: '#fff', border: '1px solid #FFCEBE', display: 'flex', alignItems: 'center', gap: 12, boxShadow: '0 2px 8px -4px rgba(255,87,34,0.18)' }}>
        <div style={{ width: 38, height: 38, borderRadius: 10, background: 'linear-gradient(135deg,#FF5722,#FF8A4F)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, flexShrink: 0 }}>⚠</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600, color: '#0F0E0C' }}>3 high-severity to triage</div>
          <div style={{ fontSize: 11.5, color: '#75706A', marginTop: 1 }}>Plan or close before next audit</div>
        </div>
        <button style={{ padding: '7px 12px', borderRadius: 8, border: 'none', background: '#0F0E0C', color: '#fff', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' }}>Triage →</button>
      </div>

      {/* PULSE — horizontal scroll, key metrics */}
      <div style={{ marginTop: 22, padding: '0 16px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
          <span className="mono" style={{ fontSize: 9.5, color: '#75706A', fontWeight: 600 }}>PULSE · {period.toUpperCase()}</span>
          <span style={{ fontSize: 11, color: '#FF5722', fontWeight: 600 }}>See all →</span>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 10, padding: '0 16px 4px', overflowX: 'auto', scrollSnapType: 'x mandatory' }}>
        {[
          { label: '5S Audit', main: '3.9', unit: '/5', sub: '4 zones', accent: '#FF5722', bars: [0, 0, 1.4, 1.6, 0.4, 0.2, 0], delta: '— vs prior' },
          { label: 'Defects', main: '33', unit: '', sub: '3 high-sev', accent: '#C8501C', bars: [0.4, 1.6, 1.2, 0.4, 0.2, 0, 0], delta: 'Live' },
          { label: 'Improve', main: '17', unit: '', sub: '$24.6k saving', accent: '#2D8B6B', bars: [0.4, 0.6, 0.9, 1.1, 1.4, 1.6, 1.8], delta: '+5 this wk' },
          { label: 'Solve', main: '4', unit: '', sub: '1 closing', accent: '#7C3AED', bars: [0, 0.4, 0.4, 0.6, 0.4, 0.6, 0.4], delta: '2 active' },
        ].map(p => (
          <div key={p.label} style={{ flex: '0 0 150px', scrollSnapAlign: 'start', background: '#fff', borderRadius: 14, border: '1px solid #EDE8DA', padding: '12px 14px 14px', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: p.accent }} />
            <div className="mono" style={{ fontSize: 9, color: '#75706A', fontWeight: 600, marginBottom: 8 }}>{p.label.toUpperCase()}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 3 }}>
              <span className="num" style={{ fontSize: 28, fontWeight: 500, color: '#0F0E0C', lineHeight: 1 }}>{p.main}</span>
              <span style={{ fontSize: 12, color: '#75706A', fontWeight: 500 }}>{p.unit}</span>
            </div>
            <div style={{ fontSize: 10.5, color: '#75706A', marginTop: 3 }}>{p.sub}</div>
            {/* Bar mini-chart */}
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 18, marginTop: 10 }}>
              {p.bars.map((v, i) => (
                <div key={i} style={{ flex: 1, height: `${Math.max(v * 10, 2)}px`, background: v > 0 ? p.accent : '#F4F1E8', borderRadius: 1.5, opacity: v > 0 ? 0.85 : 1 }} />
              ))}
            </div>
            <div className="mono" style={{ fontSize: 8.5, color: '#75706A', marginTop: 6, fontWeight: 600 }}>{p.delta.toUpperCase()}</div>
          </div>
        ))}
      </div>

      {/* TODAY — what to act on */}
      <div style={{ margin: '24px 16px 0' }}>
        <div className="mono" style={{ fontSize: 9.5, color: '#75706A', fontWeight: 600, marginBottom: 10 }}>TODAY · 3 ITEMS</div>
        <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #EDE8DA', overflow: 'hidden' }}>
          {[
            { icon: '⚠', iconBg: '#FFE0DC', iconColor: '#C8242F', title: 'Walk Assembly B', sub: 'Overdue · 6 days', cta: 'Walk' },
            { icon: '✦', iconBg: '#F1F8F4', iconColor: '#2D8B6B', title: 'Verify "Conductivity probe" kaizen', sub: 'Live · saving $14.2k', cta: 'Verify' },
            { icon: '◔', iconBg: '#EEF4FC', iconColor: '#1F5FAE', title: 'Continue A3-024', sub: 'Step 2 · Diagnose', cta: 'Open' },
          ].map((t, i, arr) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '12px 14px', borderBottom: i < arr.length - 1 ? '1px solid #F4F1E8' : 'none' }}>
              <div style={{ width: 32, height: 32, borderRadius: 9, background: t.iconBg, color: t.iconColor, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, flexShrink: 0 }}>{t.icon}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: '#0F0E0C' }}>{t.title}</div>
                <div style={{ fontSize: 11, color: '#75706A', marginTop: 1 }}>{t.sub}</div>
              </div>
              <button style={{ padding: '5px 11px', borderRadius: 7, border: '1px solid #E4DCC8', background: '#FAFAF7', color: '#0F0E0C', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>{t.cta}</button>
            </div>
          ))}
        </div>
      </div>

      {/* MODULES — 4×2 grid, denser, calmer */}
      <div style={{ margin: '24px 16px 0' }}>
        <div className="mono" style={{ fontSize: 9.5, color: '#75706A', fontWeight: 600, marginBottom: 10 }}>MODULES</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            { i: '◉', label: '5S Audit', sub: 'Walk a zone', color: '#FF5722', bg: '#FFEDE5' },
            { i: '◆', label: 'Defects', sub: '33 open', badge: 33, color: '#C8501C', bg: '#FFE5DA' },
            { i: '✦', label: 'Improve', sub: '$24.6k saving', color: '#2D8B6B', bg: '#E8F4ED' },
            { i: '◯', label: 'Solve', sub: '4 cases open', color: '#0F0E0C', bg: '#F4F1E8' },
            { i: '✺', label: 'Feed', sub: 'Wins as they ship', color: '#7C3AED', bg: '#F0E8FF' },
            { i: '✧', label: 'Coach', sub: 'AI guidance', color: '#1F5FAE', bg: '#E5EEF8' },
            { i: '♛', label: 'Leaderboard', sub: 'Top performers', color: '#E8A02B', bg: '#FBF3E0' },
            { i: '≡', label: 'Activity', sub: 'Audit trail', color: '#75706A', bg: '#F4F1E8' },
          ].map(m => (
            <div key={m.label} className="mod-card" style={{ background: '#fff', borderRadius: 13, border: '1px solid #EDE8DA', padding: '13px 13px 12px', cursor: 'pointer', position: 'relative', transition: 'transform .12s ease' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ width: 34, height: 34, borderRadius: 9, background: m.bg, color: m.color, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700 }}>{m.i}</div>
                {m.badge && <span className="mono" style={{ fontSize: 9.5, padding: '2px 7px', borderRadius: 5, background: '#FF5722', color: '#fff', fontWeight: 700 }}>{m.badge}</span>}
              </div>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#0F0E0C', marginTop: 10 }}>{m.label}</div>
              <div style={{ fontSize: 10.5, color: '#75706A', marginTop: 2 }}>{m.sub}</div>
            </div>
          ))}
        </div>
      </div>

      {/* FOOTER nudge */}
      <div style={{ margin: '24px 16px 0', padding: '13px 14px', borderRadius: 12, background: 'linear-gradient(135deg,#FFF8EE,#F4F1E8)', border: '1px solid #EDE8DA', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ fontSize: 18 }}>🔥</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12.5, fontWeight: 600, color: '#0F0E0C' }}>5-day streak — keep it going</div>
          <div style={{ fontSize: 10.5, color: '#75706A', marginTop: 1 }}>Walk one zone today to extend</div>
        </div>
      </div>

      {/* BOTTOM TAB BAR */}
      <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, background: '#fff', borderTop: '1px solid #EDE8DA', padding: '8px 6px 10px', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0 }}>
        {[
          { i: '⌂', l: 'Home', a: true },
          { i: '☑', l: 'Tasks', b: 3 },
          { i: '◉', l: 'Audit' },
          { i: '◆', l: 'Defects', b: 33 },
          { i: '✺', l: 'Feed' },
          { i: '⚙', l: 'Settings' },
        ].map(t => (
          <button key={t.l} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, padding: '4px 0', border: 'none', background: 'transparent', cursor: 'pointer', position: 'relative' }}>
            <span style={{ fontSize: 18, color: t.a ? '#FF5722' : '#75706A', fontWeight: 600 }}>{t.i}</span>
            <span style={{ fontSize: 9.5, color: t.a ? '#FF5722' : '#75706A', fontWeight: t.a ? 700 : 500, fontFamily: 'inherit' }}>{t.l}</span>
            {t.b && <span style={{ position: 'absolute', top: 1, right: '50%', marginRight: -22, fontSize: 8.5, padding: '1px 5px', borderRadius: 6, background: '#FF5722', color: '#fff', fontWeight: 700, fontFamily: "'JetBrains Mono',monospace" }}>{t.b}</span>}
          </button>
        ))}
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <AndroidDevice><MobileHome /></AndroidDevice>
);