/* global React, Icons, Badge, Btn, Pill, Meter, Score, Stat, Eyebrow, PhoneFrame, PlugBot */
const { useState } = React;

/* =========================================================================
   MOBILE COMPANION VIEWS — what each page looks like on a phone.
   Lightweight, hand-tuned per page. Surfaced in side-by-side mode.
   ========================================================================= */

const MobileTopbar = ({ title }) => (
  <div className="row between" style={{
    padding: '8px 16px 12px',
    borderBottom: '1px solid var(--line)',
    background: 'var(--bg-0)',
  }}>
    <PlugBot size={20} />
    <span style={{ fontSize: 13, fontWeight: 500 }}>{title}</span>
    <button style={{ color: 'var(--fg-2)' }}><Icons.menu size={16} /></button>
  </div>
);

const MobileHome = ({ onNav }) => (
  <div>
    <MobileTopbar title="livestreamers" />
    <div style={{ padding: '24px 18px' }}>
      <div className="eyebrow"><span className="dot" />2026 EDITION</div>
      <h2 style={{ fontSize: 28, marginTop: 10, letterSpacing: '-0.025em', lineHeight: 1.05 }}>
        Streaming,<br /><span style={{ color: 'var(--accent)' }}>tested</span> in the real world.
      </h2>
      <p className="text-fg2 fs-13 mt-3">Home studios, backpack rigs, bonded uplinks, platform strategy — for streamers everywhere.</p>
      <Btn kind="primary" size="sm" onClick={() => onNav?.('build')} iconRight={<Icons.arrow size={12} />}>Configure my build</Btn>

      <div className="mt-5" style={{
        padding: 14, background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 6,
      }}>
        <div className="row between mb-3">
          <div className="eyebrow"><span className="dot" />LIVE · BP-04</div>
          <span className="mono fs-12 text-accent">12.8 ↑</span>
        </div>
        {[['VZW', 92, ''], ['T-MO', 78, ''], ['ATT', 55, 'warn'], ['VZW-B', 28, 'bad']].map(([n, v, t], i) => (
          <div key={i} className="row gap-2 mt-2" style={{ fontFamily: 'var(--font-mono)', fontSize: 10 }}>
            <span style={{ width: 38, color: 'var(--fg-3)' }}>{n}</span>
            <div style={{ flex: 1 }}><Meter value={v} tone={t} /></div>
            <span style={{ width: 24, textAlign: 'right' }}>{v}%</span>
          </div>
        ))}
      </div>
    </div>

    {/* Category list */}
    <div style={{ padding: '4px 18px 24px' }}>
      <div className="eyebrow mb-3"><span className="dot" />FIELD GUIDES</div>
      <div className="col gap-2">
        {[
          { i: Icons.backpack, t: 'Builds',         s: '6 build tiers',                   nav: 'build' },
          { i: Icons.camera,   t: 'Gear Lab',       s: '184 reviewed',                    nav: 'gear' },
          { i: Icons.wifi,     t: 'Data plans',     s: '34 carriers · 78 plans',          nav: 'data' },
          { i: Icons.router,   t: 'Cell Bonding',   s: 'LiveU · Peplink · BELABOX',       nav: 'bonding' },
          { i: Icons.play,     t: 'Platforms',      s: 'Twitch · YT · TT · Kick',         nav: 'platforms' },
          { i: Icons.shield,   t: 'Safety & Legal', s: 'Independent · monthly',           nav: 'safety' },
          { i: Icons.tool,     t: 'Toolkit',        s: 'Calculators · checklists',        nav: 'toolkit' },
          { i: Icons.tag,      t: 'Deals',          s: 'Weekly verified',                 nav: 'deals' },
        ].map((c, i) => (
          <button key={i} onClick={() => onNav?.(c.nav)} className="row between" style={{
            padding: '12px 14px', background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 6,
            width: '100%', textAlign: 'left', cursor: 'pointer', color: 'inherit',
          }}>
            <div className="row gap-3">
              <div style={{
                width: 32, height: 32, borderRadius: 4,
                background: 'var(--bg-3)', display: 'grid', placeItems: 'center',
                color: i === 0 ? 'var(--accent)' : 'var(--fg-2)',
              }}><c.i size={14} /></div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{c.t}</div>
                <div className="text-fg3" style={{ fontSize: 11 }}>{c.s}</div>
              </div>
            </div>
            <Icons.arrow size={13} style={{ color: 'var(--fg-3)' }} />
          </button>
        ))}
      </div>
    </div>
  </div>
);

const MobileBuild = () => {
  const [sl, setSl] = useState(50);
  return (
    <div>
      <MobileTopbar title="Build Configurator" />
      <div style={{ padding: '20px 18px' }}>
        <div className="eyebrow"><span className="dot" />CONFIGURATOR</div>
        <h2 style={{ fontSize: 24, marginTop: 8, letterSpacing: '-0.025em' }}>Pro Backpack</h2>
        <div className="text-fg3 fs-13 mt-1">For Pro · Backpack</div>

        {/* live spec */}
        <div className="card mt-4" style={{ overflow: 'hidden' }}>
          <div style={{ padding: '14px 14px', background: 'var(--bg-2)', borderBottom: '1px solid var(--line)' }}>
            <div className="row between">
              <span className="mono fs-12 text-accent">SPEC · LIVE</span>
              <span style={{ width: 6, height: 6, background: 'var(--accent)', borderRadius: '50%' }} />
            </div>
            <div className="mono mt-2" style={{ fontSize: 32, color: 'var(--accent)', letterSpacing: '-0.02em', fontWeight: 500 }}>$4,395</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
            {[['Runtime', '5.8h'], ['Weight', '3.74 kg'], ['Avg score', '9.1'], ['Setup', '12 min']].map(([l, v], i) => (
              <div key={i} style={{ padding: 12, borderTop: '1px solid var(--line)', borderRight: i % 2 === 0 ? '1px solid var(--line)' : 'none' }}>
                <div className="stat-label" style={{ fontSize: 9 }}>{l}</div>
                <div className="mono mt-1" style={{ fontSize: 15 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* slots */}
        <div className="eyebrow mt-5"><span className="dot" />BOM · 5 PARTS</div>
        <div className="col gap-2 mt-2">
          {[
            ['CAM', 'Osmo Pocket 3', 519],
            ['MIC', 'Rode Wireless GO 3', 349],
            ['RTR', 'Peplink BR1 5G', 1499],
            ['PWR', 'Omnicharge 20+', 199],
            ['BAG', 'Gunrun Mark V', 749],
          ].map(([k, n, p], i) => (
            <div key={i} className="row between" style={{
              padding: '10px 12px', background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 6,
            }}>
              <div>
                <span className="mono fs-12 text-fg4">{k}</span>
                <div style={{ fontSize: 13, marginTop: 2 }}>{n}</div>
              </div>
              <span className="mono fs-13">${p}</span>
            </div>
          ))}
        </div>

        <Btn kind="primary" size="sm" iconRight={<Icons.arrow size={12} />}>Add to cart · 5 items</Btn>
      </div>
    </div>
  );
};

const MobileGearLab = () => {
  const [cat, setCat] = useState('All');
  return (
  <div>
    <MobileTopbar title="Gear Lab" />
    <div style={{ padding: '20px 18px' }}>
      <h2 style={{ fontSize: 24, letterSpacing: '-0.025em' }}>The Gear Lab.</h2>
      <p className="text-fg3 fs-13 mt-2">184 items, six axes, all lab-tested.</p>
      <div className="row gap-2 mt-4 wrap">
        {['All', 'Camera', 'Audio', 'Router'].map(c => (
          <Pill key={c} on={cat === c} onClick={() => setCat(c)}>{c}</Pill>
        ))}
      </div>
      <div className="col gap-2 mt-4">
        {[
          ['Osmo Pocket 3', 'Camera · Pro', 519, 9.1],
          ['Peplink BR1 5G', 'Router · Pro', 1499, 9.4],
          ['Rode Wireless GO 3', 'Audio · Pro', 349, 9.0],
          ['Anker 737 PowerCore', 'Power · Mid', 149, 9.1],
        ].map(([n, c, p, s], i) => (
          <div key={i} style={{
            padding: 12, background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 6,
          }}>
            <div className="row between">
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{n}</div>
                <div className="text-fg3" style={{ fontSize: 11 }}>{c}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <span className="mono fs-13">${p}</span>
                <div className="mt-1"><Score value={s} /></div>
              </div>
            </div>
            <div className="mt-2"><Meter value={s * 10} /></div>
          </div>
        ))}
      </div>
    </div>
  </div>
  );
};

const MobileData = () => {
  const [usage, setUsage] = useState(120);
  const [budget, setBudget] = useState(200);
  return (
  <div>
    <MobileTopbar title="Data plans" />
    <div style={{ padding: '20px 18px' }}>
      <h2 style={{ fontSize: 24, letterSpacing: '-0.025em' }}>Plan finder.</h2>
      <div className="card card-pad mt-4">
        <div className="row between mb-2">
          <span className="mono fs-12 text-fg3">USAGE</span>
          <span className="mono fs-12 text-accent">{usage} GB</span>
        </div>
        <input type="range" className="slider" value={usage} onChange={e => setUsage(parseInt(e.target.value, 10))} min="20" max="500" />
        <div className="row between mb-2 mt-4">
          <span className="mono fs-12 text-fg3">BUDGET</span>
          <span className="mono fs-12 text-accent">${budget}</span>
        </div>
        <input type="range" className="slider" value={budget} onChange={e => setBudget(parseInt(e.target.value, 10))} min="20" max="400" />
      </div>
      <div className="col gap-2 mt-4">
        {[
          { n: 'T-Mobile · 5G Adv', p: 70, s: 9.2, top: true },
          { n: 'Verizon · 5G Plus', p: 70, s: 9.0 },
          { n: 'US Mobile · Premium', p: 50, s: 8.4 },
        ].map((r, i) => (
          <div key={i} style={{
            padding: 12, background: r.top ? 'var(--bg-2)' : 'var(--bg-1)',
            border: '1px solid ' + (r.top ? 'var(--accent)' : 'var(--line)'),
            borderRadius: 6,
          }}>
            <div className="row between">
              <div>
                {r.top && <Badge kind="tested" dot>Top pick</Badge>}
                <div style={{ fontSize: 13, fontWeight: 500, marginTop: r.top ? 6 : 0 }}>{r.n}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <span className="mono fs-13">${r.p}/mo</span>
                <div><Score value={r.s} /></div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
  );
};

const MobileBonding = () => (
  <div>
    <MobileTopbar title="Cell Bonding" />
    <div style={{ padding: '20px 18px' }}>
      <h2 style={{ fontSize: 22, letterSpacing: '-0.025em' }}>LiveU · Peplink · BELABOX · Speedify.</h2>
      <div className="col gap-3 mt-4">
        {[
          { n: 'Peplink BR1', t: 'Hardware', up: 1499, mo: 25, s: 9.4, pick: true },
          { n: 'LiveU Solo Pro', t: 'Hardware', up: 1499, mo: 79, s: 9.2 },
          { n: 'BELABOX BEE', t: 'DIY', up: 580, mo: 10, s: 8.9 },
          { n: 'Speedify VPN', t: 'Software', up: 0, mo: 15, s: 7.8 },
        ].map((b, i) => (
          <div key={i} style={{
            padding: 14, background: 'var(--bg-1)',
            border: '1px solid ' + (b.pick ? 'var(--accent)' : 'var(--line)'),
            borderRadius: 6,
          }}>
            <div className="row between">
              <div>
                <Badge kind={b.t === 'Hardware' ? 'pro' : 'beginner'}>{b.t}</Badge>
                <div style={{ fontSize: 15, fontWeight: 500, marginTop: 6 }}>{b.n}</div>
              </div>
              <Score value={b.s} />
            </div>
            <div className="row gap-4 mt-3 mono fs-12 text-fg3">
              <span>UP <span style={{ color: 'var(--fg)' }}>${b.up}</span></span>
              <span>MO <span style={{ color: 'var(--fg)' }}>${b.mo}</span></span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const MobilePlatforms = () => (
  <div>
    <MobileTopbar title="Platforms" />
    <div style={{ padding: '20px 18px' }}>
      <h2 style={{ fontSize: 22, letterSpacing: '-0.025em' }}>Q1 ’26 momentum.<br/><span className="text-fg4 fs-13">Streams Charts QoQ</span></h2>
      <div className="mt-4 col gap-2">
        {[
          ['Twitch', '+4.46%', 'good'],
          ['Kick', '+9.10%', 'good'],
          ['YouTube Live', '+1.20%', 'good'],
          ['TikTok Live', '−11.92%', 'warn'],
        ].map(([n, d, t], i) => (
          <div key={i} className="row between" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, padding: '6px 10px', background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 4 }}>
            <span className="text-fg2">{n}</span>
            <span className={t === 'good' ? 'text-accent' : 'text-warn'}>{d}</span>
          </div>
        ))}
      </div>
      <div className="col gap-2 mt-4">
        {[
          { n: 'Twitch', c: '#9146FF', i: Icons.twitch, s: 9.4 },
          { n: 'YouTube Live', c: '#FF0033', i: Icons.youtube, s: 8.6 },
          { n: 'TikTok Live', c: '#FF2D6F', i: Icons.tiktok, s: 7.6 },
          { n: 'Kick', c: '#53FC18', i: Icons.kick, s: 8.2 },
        ].map((p, i) => (
          <div key={i} style={{
            padding: 12, background: 'var(--bg-1)',
            border: '1px solid var(--line)', borderRadius: 6,
            position: 'relative', overflow: 'hidden',
          }}>
            <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: p.c }} />
            <div className="row between" style={{ paddingLeft: 8 }}>
              <div className="row gap-3">
                <span style={{ color: p.c }}><p.i size={14} /></span>
                <span style={{ fontSize: 13, fontWeight: 500 }}>{p.n}</span>
              </div>
              <Score value={p.s} />
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const MobileStreamer = () => (
  <div>
    <MobileTopbar title="StreamerHouse" />
    <div style={{ padding: '20px 18px' }}>
      <div className="eyebrow"><span className="dot" />PROFILE · #14</div>
      <h2 style={{ fontSize: 24, letterSpacing: '-0.025em', marginTop: 6 }}>StreamerHouse <span className="text-fg4">/ LA</span></h2>
      <div className="row gap-2 mt-3"><Badge kind="tested" dot>Active</Badge><Badge kind="pro">Pro</Badge></div>

      <div className="card mt-4" style={{ padding: 16, background: 'linear-gradient(180deg, var(--accent-faint), transparent), var(--bg-1)' }}>
        <div className="eyebrow"><span className="dot" />STEAL THIS SETUP</div>
        <div className="mono mt-2" style={{ fontSize: 28, color: 'var(--accent)', fontWeight: 500 }}>$8,420</div>
        <Btn kind="primary" size="sm" iconRight={<Icons.arrow size={12} />}>Add to my builds</Btn>
      </div>

      <div className="eyebrow mt-5"><span className="dot" />PLATFORM MIX</div>
      <div className="col gap-2 mt-3">
        {[['Twitch', 68, '#9146FF'], ['YouTube', 18, '#FF0033'], ['TikTok', 10, '#FF2D6F'], ['Kick', 4, '#53FC18']].map(([n, v, c], i) => (
          <div key={i}>
            <div className="row between mb-1"><span className="fs-13">{n}</span><span className="mono fs-12 text-fg3">{v}%</span></div>
            <div style={{ height: 4, background: 'var(--bg-3)', borderRadius: 2 }}>
              <div style={{ width: `${v}%`, height: '100%', background: c }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const MobileDeals = () => (
  <div>
    <MobileTopbar title="Deals" />
    <div style={{ padding: '20px 18px' }}>
      <h2 style={{ fontSize: 24, letterSpacing: '-0.025em' }}>Deals of the week.</h2>
      <div className="text-fg3 fs-13 mt-2">6 active · refresh in 4d 12h</div>
      <div className="col gap-3 mt-4">
        {[
          { n: 'DJI Osmo Pocket 3', c: 'Camera', was: 519, now: 469, off: 10 },
          { n: 'Anker 737', c: 'Power', was: 149, now: 119, off: 20 },
          { n: 'Rode WGo 3', c: 'Audio', was: 349, now: 299, off: 14 },
        ].map((d, i) => (
          <div key={i} className="card" style={{ padding: 14 }}>
            <div className="row gap-2"><Badge kind="deal" dot>-{d.off}%</Badge></div>
            <div style={{ fontSize: 14, fontWeight: 500, marginTop: 6 }}>{d.n}</div>
            <div className="text-fg3 fs-12">{d.c}</div>
            <div className="row between mt-3">
              <div>
                <span className="mono fs-12 text-fg4" style={{ textDecoration: 'line-through' }}>${d.was}</span>
                <div className="mono" style={{ fontSize: 18, color: 'var(--accent)' }}>${d.now}</div>
              </div>
              <Btn kind="primary" size="sm">Get it<Icons.external size={12} /></Btn>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

/* =========================================================================
   Mobile views for the new pages
   ========================================================================= */

const MobileSafety = () => (
  <div>
    <MobileTopbar title="Safety & Legal" />
    <div style={{ padding: '20px 18px' }}>
      <div className="eyebrow"><span className="dot" />INDEPENDENT · MONTHLY</div>
      <h2 style={{ fontSize: 22, letterSpacing: '-0.025em', marginTop: 8 }}>IRL safety<br/>& legal.</h2>
      <p className="text-fg3 fs-13 mt-2">Filming rights, harassment, theft, travel, insurance. The beat no vendor blog will run.</p>
      <div className="row gap-2 mt-3"><Badge kind="independent">Non-affiliated</Badge></div>

      <div className="col gap-2 mt-4">
        {[
          { i: Icons.mic,      t: 'Filming & audio consent',   sev: 'High' },
          { i: Icons.shield,   t: 'Permits & venue rules',     sev: 'Mid' },
          { i: Icons.user,     t: 'Bystander privacy & GDPR',  sev: 'High' },
          { i: Icons.zap,      t: 'Doxxing, sniping, swatting',sev: 'High' },
          { i: Icons.backpack, t: 'Theft & personal safety',   sev: 'Mid' },
          { i: Icons.globe,    t: 'International travel',      sev: 'Mid' },
          { i: Icons.book,     t: 'Platform policy diff',      sev: 'High' },
        ].map((g, i) => (
          <div key={i} className="row between" style={{
            padding: '12px 14px', background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 6,
          }}>
            <div className="row gap-3">
              <div style={{
                width: 30, height: 30, borderRadius: 4,
                background: 'var(--bg-3)', display: 'grid', placeItems: 'center',
                color: g.sev === 'High' ? 'var(--bad)' : 'var(--warn)',
              }}><g.i size={13} /></div>
              <span style={{ fontSize: 13 }}>{g.t}</span>
            </div>
            <Badge kind={g.sev === 'High' ? 'deal' : 'pro'}>{g.sev}</Badge>
          </div>
        ))}
      </div>

      <div className="mt-5" style={{
        padding: 12, background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 6,
        fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--fg-3)', letterSpacing: '0.1em',
      }}>
        <Icons.shield size={12} style={{ display: 'inline', marginRight: 4, verticalAlign: -2, color: 'var(--warn)' }} />
        NOT LEGAL ADVICE — INFORMATIONAL ONLY
      </div>
    </div>
  </div>
);

const MobileToolkit = () => {
  const [hours, setHours] = useState(3);
  const perStream = (5.5 * 0.45 * hours);
  const perMonth = perStream * 20;
  return (
    <div>
      <MobileTopbar title="Toolkit" />
      <div style={{ padding: '20px 18px' }}>
        <div className="eyebrow"><span className="dot" />9 TOOLS · LIVE</div>
        <h2 style={{ fontSize: 22, letterSpacing: '-0.025em', marginTop: 8 }}>The Toolkit.</h2>
        <p className="text-fg3 fs-13 mt-2">Calculators and checklists for every decision that should be math.</p>

        <div className="card mt-4" style={{ padding: 16 }}>
          <Eyebrow>Data calculator · 1080p</Eyebrow>
          <div className="mt-3">
            <div className="row between mb-2">
              <span className="mono fs-12 text-fg3">HRS / STREAM</span>
              <span className="mono fs-12 text-accent">{hours}h</span>
            </div>
            <input type="range" className="slider" min={1} max={12} step={0.5} value={hours} onChange={e => setHours(parseFloat(e.target.value))} />
          </div>
          <div className="row between mt-3" style={{ paddingTop: 12, borderTop: '1px solid var(--line)' }}>
            <div>
              <div className="stat-label" style={{ fontSize: 9 }}>PER MONTH (20×)</div>
              <div className="mono mt-1" style={{ fontSize: 22, color: 'var(--accent)' }}>{perMonth.toFixed(0)} GB</div>
            </div>
            <Btn kind="primary" size="sm" iconRight={<Icons.arrow size={12} />}>Match a plan</Btn>
          </div>
        </div>

        <div className="col gap-2 mt-5">
          {[
            { i: Icons.battery, t: 'Battery runtime'   },
            { i: Icons.zap,     t: 'Bitrate calc'      },
            { i: Icons.check,   t: 'Eligibility tracker' },
            { i: Icons.tool,    t: 'Stream checklist'  },
            { i: Icons.book,    t: 'AI prompt packs'   },
          ].map((g, i) => (
            <div key={i} className="row between" style={{
              padding: '12px 14px', background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 6,
            }}>
              <div className="row gap-3">
                <div style={{ width: 30, height: 30, borderRadius: 4, background: 'var(--bg-3)', display: 'grid', placeItems: 'center', color: 'var(--fg-2)' }}><g.i size={13} /></div>
                <span style={{ fontSize: 13 }}>{g.t}</span>
              </div>
              <Icons.arrow size={13} style={{ color: 'var(--fg-3)' }} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const MOBILE_VIEWS = {
  home: MobileHome,
  build: MobileBuild,
  gear: MobileGearLab,
  data: MobileData,
  bonding: MobileBonding,
  platforms: MobilePlatforms,
  safety: MobileSafety,
  streamer: MobileStreamer,
  toolkit: MobileToolkit,
  deals: MobileDeals,
};

window.MOBILE_VIEWS = MOBILE_VIEWS;