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

/* =========================================================================
   STREAMER PROFILE — StreamerHouse case study
   ========================================================================= */

const StreamerPage = ({ onNav }) => {
  return (
    <div className="page-fade">
      {/* HERO ================================================================ */}
      <section style={{ position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'linear-gradient(180deg, transparent 0%, var(--bg-0) 92%)',
          zIndex: 2, pointerEvents: 'none',
        }} />
        {/* "Photo" placeholder */}
        <div className="grid-bg" style={{
          position: 'absolute', inset: 0,
          background: `
            radial-gradient(600px 400px at 15% 30%, rgba(182,255,61,0.06), transparent 60%),
            radial-gradient(800px 500px at 80% 80%, rgba(94,200,255,0.04), transparent 60%),
            var(--bg-0)`,
        }} />
        <div className="container" style={{ position: 'relative', zIndex: 3, padding: '64px 0 56px' }}>
          <Eyebrow>Living lab · Profile #14 · StreamerHouse · LA</Eyebrow>
          <div className="row between mt-4" style={{ alignItems: 'flex-end' }}>
            <div style={{ maxWidth: '70%' }}>
              <h1 style={{ fontSize: 72 }}>
                StreamerHouse <span className="text-fg4">/ Echo Park</span>
              </h1>
              <p className="lede mt-4" style={{ maxWidth: '60ch' }}>
                The flagship living-lab. Six creators, one permanent rig, twelve months of
                test logs. Below: what they bought, what failed, and how they actually
                make their money.
              </p>
            </div>
            <div className="row gap-2">
              <Badge kind="tested" dot>Active</Badge>
              <Badge kind="updated">Updated weekly</Badge>
              <Badge kind="pro">Pro setup</Badge>
            </div>
          </div>

          <div className="row gap-3 mt-7" style={{ flexWrap: 'wrap' }}>
            <Stat label="Months operational" value="14" tone="accent" />
            <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--line)' }} />
            <Stat label="Combined avg viewers" value="4.2k" />
            <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--line)' }} />
            <Stat label="Total stream hours" value="2,890" unit="h" />
            <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--line)' }} />
            <Stat label="Gear rotations" value="38" />
            <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--line)' }} />
            <Stat label="Stream drops · YTD" value="3" tone="accent" />
          </div>
        </div>
      </section>

      {/* MAIN ============================================================== */}
      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40 }}>
            {/* LEFT — Story */}
            <div>
              <Eyebrow>Origin story</Eyebrow>
              <h2 className="mt-3 mb-5">Six streamers, one router, a year of receipts.</h2>
              <p className="text-fg2 mb-4">
                StreamerHouse started as a sublet experiment. Three IRL creators rented a
                house in Echo Park, pooled gear, and ran it as a permanent stream lab.
                Today it’s six people and a 14-month log of what actually breaks when you
                run a rig that can’t go down.
              </p>
              <p className="text-fg2 mb-6">
                We onboarded the house as livestreamers.org’s living test bed in Q3 ’25.
                Every gear rotation goes through this rig first. Below, their exact stack —
                no marketing-page nonsense.
              </p>

              {/* Gear Stack */}
              <div className="card" style={{ overflow: 'hidden' }}>
                <div className="row between" style={{ padding: '16px 20px', background: 'var(--bg-2)', borderBottom: '1px solid var(--line)' }}>
                  <Eyebrow>Gear stack · What’s plugged in right now</Eyebrow>
                  <span className="mono fs-12 text-fg4">$8,420 TOTAL</span>
                </div>
                {[
                  { c: 'Camera',     n: 'DJI Osmo Pocket 3 × 2', p: 1038, t: 'Lab pick' },
                  { c: 'Camera B',   n: 'Sony FX3 (anchor cam)', p: 3899, t: null },
                  { c: 'Audio',      n: 'Shure SM7B + RodeCaster Pro II',  p: 1099, t: null },
                  { c: 'Audio B',    n: 'Rode Wireless GO 3', p: 349, t: 'Lab pick' },
                  { c: 'Router',     n: 'Peplink MAX BR1 5G + Cradlepoint backup', p: 2298, t: 'Critical' },
                  { c: 'Power',      n: 'EcoFlow Delta 2 (always on)', p: 999, t: null },
                  { c: 'Lighting',   n: 'Aputure 60D × 3 + LED panel array', p: 1740, t: null },
                ].map((g, i) => (
                  <div key={i} className="row between" style={{ padding: '14px 20px', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                    <div className="row gap-3">
                      <div className="mono fs-12 text-fg4" style={{ width: 84, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{g.c}</div>
                      <div>
                        <div style={{ fontSize: 14 }}>{g.n}</div>
                        {g.t && <span className="badge mt-1" style={{ marginTop: 4 }}>{g.t}</span>}
                      </div>
                    </div>
                    <div className="mono fs-13 text-fg2">${g.p.toLocaleString()}</div>
                  </div>
                ))}
              </div>

              {/* Biggest technical problem */}
              <div className="mt-7">
                <Eyebrow>Biggest technical problem · solved</Eyebrow>
                <h3 className="mt-3 mb-3">Echo Park has terrible Verizon. We bonded around it.</h3>
                <p className="text-fg2 mb-4">
                  The house sits in a known Verizon dead zone. First three streams dropped
                  inside 90 minutes. We added a T-Mobile primary, Verizon backup, AT&T as
                  the failsafe, and a Starlink Mini on the patio for when all three sag.
                </p>
                <div className="card card-pad">
                  <Eyebrow>Result · last 90 days</Eyebrow>
                  <div className="row gap-7 mt-3">
                    <Stat label="Uptime" value="99.7%" tone="accent" />
                    <Stat label="Avg uplink" value="14.2" unit="Mbps" />
                    <Stat label="Failovers" value="11" />
                    <Stat label="User-facing drops" value="0" tone="accent" />
                  </div>
                </div>
              </div>

              {/* Lessons */}
              <div className="mt-7">
                <Eyebrow>Lessons learned · the year in retrospect</Eyebrow>
                <h3 className="mt-3 mb-5">Five things they’d do differently.</h3>
                <div className="col gap-3">
                  {[
                    'Buy the Peplink before any cameras. The cameras don’t matter if your stream drops.',
                    'Two power systems. Always. Single battery = single point of failure.',
                    'Pre-stream checklist on the wall, laminated. Drops dropped 80%.',
                    'Don’t cheap out on the mic. Audio loss kills retention faster than video.',
                    'Save 25% of every revenue dollar for gear refresh. The treadmill is real.',
                  ].map((l, i) => (
                    <div key={i} className="row gap-4" style={{ padding: '16px 18px', background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 6 }}>
                      <div className="mono" style={{ fontSize: 22, color: 'var(--accent)', minWidth: 24 }}>{(i + 1).toString().padStart(2, '0')}</div>
                      <span className="text-fg2 fs-14">{l}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* RIGHT — Cards */}
            <div>
              {/* Steal This Setup */}
              <div className="card" style={{ overflow: 'hidden', position: 'sticky', top: 80 }}>
                <div style={{
                  padding: 20,
                  background: 'linear-gradient(180deg, var(--accent-faint), transparent), var(--bg-1)',
                  borderBottom: '1px solid var(--line)',
                }}>
                  <Eyebrow>Steal this setup</Eyebrow>
                  <div className="mt-3" style={{
                    fontFamily: 'var(--font-mono)', fontSize: 36, fontWeight: 500,
                    color: 'var(--accent)', letterSpacing: '-0.02em',
                  }}>$8,420</div>
                  <div className="text-fg3 fs-13 mt-1">Full BOM with affiliate links</div>
                  <div className="row gap-2 mt-4">
                    {/* "Add to my builds" requires accounts (Phase 5). For now: jump to the configurator preset. */}
                    <Btn kind="primary" size="sm" onClick={() => onNav?.('build')}>
                      Open in configurator<Icons.arrow size={12} />
                    </Btn>
                    <Btn kind="line" size="sm" onClick={() => window.print()}><Icons.download size={12} />Print PDF</Btn>
                  </div>
                </div>

                <div style={{ padding: 20, borderBottom: '1px solid var(--line)' }}>
                  <Eyebrow>Platform mix</Eyebrow>
                  <div className="mt-4 col gap-3">
                    {[
                      ['Twitch',  68, '#9146FF'],
                      ['YouTube', 18, '#FF0033'],
                      ['TikTok',  10, '#FF2D6F'],
                      ['Kick',     4, '#53FC18'],
                    ].map(([n, v, c]) => (
                      <div key={n}>
                        <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, overflow: 'hidden' }}>
                          <div style={{ width: `${v}%`, height: '100%', background: c }} />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                <div style={{ padding: 20, borderBottom: '1px solid var(--line)' }}>
                  <Eyebrow>Revenue mix · last 90d</Eyebrow>
                  <div className="mt-4 col gap-3">
                    {[
                      ['Subscriptions',  42],
                      ['Bits / donations', 19],
                      ['Affiliate links', 16],
                      ['Sponsorships',   12],
                      ['YouTube ads',    11],
                    ].map(([n, v]) => (
                      <div key={n} className="row between fs-13">
                        <span className="text-fg2">{n}</span>
                        <div className="row gap-3">
                          <Meter value={v * 2.4} />
                          <span className="mono fs-12" style={{ width: 30, textAlign: 'right' }}>{v}%</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                <div style={{ padding: 20 }}>
                  <Eyebrow>Favorite tools</Eyebrow>
                  <div className="row gap-2 mt-3 wrap">
                    {['OBS 31','Twitch Studio','Restream','Streamlabs','Stream Deck XL','Davinci Resolve','Notion'].map(t => (
                      <span key={t} className="badge">{t}</span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* OTHER PROFILES */}
      <section className="section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)' }}>
        <div className="container">
          <div className="section-head">
            <div>
              <Eyebrow>22 profiles · 4 in the lab right now</Eyebrow>
              <h2 className="mt-3">More streamers, more receipts.</h2>
            </div>
            {/* "All profiles" lands when the streamer MDX collection ships in Phase 4. */}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {[
              { n: 'Roady', sub: 'Pro IRL · driving + walk', avg: '4.2k', plat: 'Twitch' },
              { n: 'NeonRunner', sub: 'Tokyo street IRL', avg: '2.1k', plat: 'YouTube' },
              { n: 'Desk Studio · ATX', sub: 'Home OBS · twin-PC', avg: '3.1k', plat: 'Twitch' },
              { n: 'Cold Brewer', sub: 'Sim-racing IRL hybrid', avg: '1.8k', plat: 'Kick' },
            ].map((p, i) => (
              <div key={i} className="card" style={{ display: 'block' }}>
                <div style={{
                  height: 140, background: `linear-gradient(135deg, ${['#1a1a22','#221a1a','#1a221a','#221a22'][i]}, var(--bg-2))`,
                  borderBottom: '1px solid var(--line)',
                  position: 'relative',
                }}>
                  <div className="row gap-2" style={{ position: 'absolute', top: 12, left: 12 }}>
                    <Badge kind="tested" dot>Tested</Badge>
                  </div>
                  <div style={{ position: 'absolute', bottom: 12, right: 12, color: 'var(--fg-4)' }}>
                    <Icons.user size={48} sw={1} />
                  </div>
                </div>
                <div style={{ padding: 16 }}>
                  <div className="row between mb-2">
                    <div style={{ fontSize: 16, fontWeight: 600 }}>{p.n}</div>
                    <span className="mono fs-12 text-fg4">{p.plat.toUpperCase()}</span>
                  </div>
                  <div className="text-fg3 fs-13">{p.sub}</div>
                  <div className="row between mt-3 mono fs-12">
                    <span className="text-fg4">AVG</span>
                    <span style={{ color: 'var(--accent)' }}>{p.avg}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

window.StreamerPage = StreamerPage;