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

/* =========================================================================
   CELL BONDING — decision hub
   ========================================================================= */

// Four lanes in the bonding market. BELABOX BEE + SRTLA was a hobbyist
// project two years ago; in 2026 it sells out single-unit batches and is a
// legitimate prestige-alternative at a fraction of LiveU's TCO.
const BONDERS = [
  {
    id: 'peplink',
    name: 'Peplink MAX BR1 Pro 5G',
    type: 'Hardware',
    upfront: 1499,
    monthly: 25,
    sims: 2,
    latency: '0.2–0.8s',
    sla: 'Enterprise',
    pros: ['No mandatory monthly', 'SpeedFusion is rock-solid', 'Tons of community knowledge'],
    cons: ['SpeedFusion server self-hosted', 'Setup learning curve', 'Only 2 SIMs natively'],
    score: 9.4,
    fit: 'Pro IRL · self-hoster',
    badge: 'tested',
    lane: 'Enterprise hardware',
  },
  {
    id: 'liveu',
    name: 'LiveU Solo PRO',
    type: 'Hardware',
    upfront: 1499,
    monthly: 79,
    sims: 4,
    latency: '0.4–1.2s',
    sla: 'Carrier-grade',
    pros: ['Used by broadcast & sports', 'Field-tested 10+ years', 'Excellent failover'],
    cons: ['Subscription mandatory', 'Heavier rig', 'iOS-only companion'],
    score: 9.2,
    fit: 'Pro IRL · broadcast streamers',
    lane: 'Prestige hardware',
  },
  {
    id: 'belabox',
    name: 'BELABOX BEE + SRTLA',
    type: 'DIY',
    upfront: 580,
    monthly: 10,
    sims: 4,
    latency: '0.5–1.5s',
    sla: 'Self-hosted',
    pros: ['Open-source firmware', 'Modular — add/swap modems', '$10/mo VPS replaces $79 LiveU plan', 'Cheapest TCO at parity quality'],
    cons: ['Requires Linux comfort', 'BEE batches sell out in days', 'No iOS encoder yet (use Moblin)'],
    score: 8.9,
    fit: 'Sleeper · tinkerer with Pro output',
    badge: 'independent',
    lane: 'DIY / open-source',
  },
  {
    id: 'speedify',
    name: 'Speedify VPN',
    type: 'Software',
    upfront: 0,
    monthly: 15,
    sims: 'Any number',
    latency: '0.6–2.0s',
    sla: 'Best-effort',
    pros: ['Cheapest entry point', 'Mac / Win / iOS / Android', 'No hardware to carry'],
    cons: ['Latency varies', 'Server-side bottleneck', 'Not broadcast-grade'],
    score: 7.8,
    fit: 'Phone-vertical · beginner',
    lane: 'Software bonding',
  },
];

const BondingPage = () => {
  const [active, setActive] = useState('peplink');
  const a = BONDERS.find(b => b.id === active);

  return (
    <div className="page-fade">
      {/* HEADER */}
      <section style={{ padding: '40px 0 24px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="row between" style={{ alignItems: 'flex-end' }}>
            <div style={{ maxWidth: '70%' }}>
              <Eyebrow>Decision Hub · 9 systems · 2,100 test runs</Eyebrow>
              <h1 className="mt-3" style={{ fontSize: 56 }}>LiveU vs Peplink<br/>vs BELABOX vs Speedify.</h1>
              <p className="lede mt-3" style={{ maxWidth: '60ch' }}>
                The most expensive decision in your IRL stack — and the market has
                bifurcated, not consolidated. We mapped the lanes. Then we tested them 2,100 times.
              </p>
            </div>
            <div className="col gap-2" style={{ alignItems: 'flex-end' }}>
              <div className="row gap-2">
                <Badge kind="independent">Non-affiliated</Badge>
                <Badge kind="pro">Pro · high-stakes</Badge>
              </div>
              <LastVerified date="2026-05-12" />
            </div>
          </div>
        </div>
      </section>

      {/* DECISION TREE + COMPARISON */}
      <section className="section">
        <div className="container">
          {/* tree */}
          <div className="card card-pad-lg mb-7" style={{ overflow: 'hidden' }}>
            <Eyebrow>Beginner-safe · Decision tree</Eyebrow>
            <h3 className="mt-3 mb-5">Start here.</h3>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 16, position: 'relative' }}>
              <DTreeBox q="Streaming budget?" />
              <DTreeBox q="Carry weight matters?" />
              <DTreeBox q="Stream priority?" />
              <DTreeBox q="Recommended system" highlight />
            </div>

            <div className="mt-4" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 16 }}>
              <DTreeOption a="< $200/mo" />
              <DTreeOption a="Yes — phone only" />
              <DTreeOption a="Reliability OK" />
              <DTreeOption a="Speedify VPN" accent />
            </div>
            <div className="mt-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 16 }}>
              <DTreeOption a="$1.5k upfront OK" />
              <DTreeOption a="No — backpack rig" />
              <DTreeOption a="Reliability critical" />
              <DTreeOption a="Peplink BR1 5G" accent />
            </div>
            <div className="mt-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 16 }}>
              <DTreeOption a="$580 + $10/mo VPS" />
              <DTreeOption a="No — DIY tinkerer" />
              <DTreeOption a="Reliability + low TCO" />
              <DTreeOption a="BELABOX BEE + SRTLA" accent />
            </div>
            <div className="mt-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 16 }}>
              <DTreeOption a="$1.5k + $79/mo" />
              <DTreeOption a="No — pro rig" />
              <DTreeOption a="Broadcast-grade" />
              <DTreeOption a="LiveU Solo PRO" accent />
            </div>
          </div>

          {/* compare cards */}
          <div className="section-head">
            <div>
              <Eyebrow>Head-to-head</Eyebrow>
              <h2 className="mt-3">Four lanes, side by side.</h2>
            </div>
            <div className="row gap-2 wrap">
              {BONDERS.map(b => (
                <button key={b.id} onClick={() => setActive(b.id)}
                  className={`pill ${active === b.id ? 'is-on' : ''}`}>{b.name.split(' ')[0]}</button>
              ))}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            {BONDERS.map(b => (
              <div key={b.id} className="card"
                   style={{
                     padding: 24,
                     borderColor: b.id === active ? 'var(--accent)' : 'var(--line)',
                     background: b.id === active ? 'var(--bg-2)' : 'var(--bg-1)',
                   }}>
                <div className="row between mb-3">
                  <Badge kind={b.type === 'Hardware' ? 'pro' : b.type === 'DIY' ? 'independent' : 'beginner'}>{b.type}</Badge>
                  {b.badge === 'tested' && <Badge kind="tested" dot>Lab pick</Badge>}
                  {b.badge === 'independent' && <Badge kind="independent">Sleeper</Badge>}
                </div>
                <h3 style={{ fontSize: 22 }}>{b.name}</h3>
                <div className="text-fg3 fs-13 mt-1">For: {b.fit}</div>

                <div className="mt-5" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, paddingTop: 16, borderTop: '1px solid var(--line)' }}>
                  <div>
                    <div className="stat-label">Upfront</div>
                    <div className="mono mt-1" style={{ fontSize: 22 }}>${b.upfront.toLocaleString()}</div>
                  </div>
                  <div>
                    <div className="stat-label">Monthly</div>
                    <div className="mono mt-1" style={{ fontSize: 22 }}>${b.monthly}</div>
                  </div>
                  <div>
                    <div className="stat-label">SIMs</div>
                    <div className="mono mt-1" style={{ fontSize: 14 }}>{b.sims}</div>
                  </div>
                  <div>
                    <div className="stat-label">Latency</div>
                    <div className="mono mt-1" style={{ fontSize: 14 }}>{b.latency}</div>
                  </div>
                </div>

                <div className="mt-5">
                  <div className="stat-label mb-3">Pros</div>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                    {b.pros.map((p, i) => (
                      <li key={i} className="row gap-2 fs-13" style={{ marginBottom: 6 }}>
                        <Icons.check size={12} style={{ color: 'var(--accent)', marginTop: 4, flexShrink: 0 }} />
                        <span className="text-fg2">{p}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="mt-4">
                  <div className="stat-label mb-3">Cons</div>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                    {b.cons.map((p, i) => (
                      <li key={i} className="row gap-2 fs-13" style={{ marginBottom: 6 }}>
                        <Icons.x size={12} style={{ color: 'var(--bad)', marginTop: 4, flexShrink: 0 }} />
                        <span className="text-fg2">{p}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="row between mt-5" style={{ paddingTop: 16, borderTop: '1px solid var(--line)' }}>
                  <Score value={b.score} />
                  {/* Full review lands as MDX in Phase 4. For now: highlight this card by setting it active. */}
                  <Btn kind="line" size="sm" onClick={() => setActive(b.id)}>
                    {active === b.id ? 'Selected' : 'Compare'}<Icons.arrow size={12} />
                  </Btn>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* MONTHLY COST CALC */}
      <section className="section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)' }}>
        <div className="container">
          <div className="row between" style={{ alignItems: 'flex-start' }}>
            <div style={{ maxWidth: 480 }}>
              <Eyebrow>Total cost of ownership</Eyebrow>
              <h2 className="mt-3">5-year math, not marketing math.</h2>
              <p className="text-fg2 mt-4">
                Vendors quote upfront. We model the actual 5-year cost: hardware, recurring fees,
                cell plans (~$240/mo at 3 SIMs), and depreciation. Spoiler: Peplink wins on TCO,
                LiveU wins on reliability.
              </p>
            </div>
            <div className="card card-pad-lg" style={{ width: 540 }}>
              <div className="row between mb-4">
                <span className="stat-label">5-Year TCO · 3 carriers · 1 stream/day</span>
                <span className="mono fs-12 text-fg4">USD</span>
              </div>
              <div className="col gap-4">
                {[
                  { n: 'LiveU Solo PRO',         up: 1499, mo: 79 + 240, hl: false },
                  { n: 'Peplink BR1 5G',         up: 1499, mo: 25 + 240, hl: false },
                  { n: 'BELABOX BEE + SRTLA',    up: 580,  mo: 10 + 240, hl: true  },
                  { n: 'Speedify (phone)',       up: 0,    mo: 15 + 240, hl: false },
                ].map((r, i) => {
                  const total = r.up + r.mo * 60;
                  const max = 1499 + (79 + 240) * 60;
                  return (
                    <div key={i}>
                      <div className="row between mb-2">
                        <span className="fs-14">{r.n}</span>
                        <span className="mono" style={{ color: r.hl ? 'var(--accent)' : 'var(--fg)' }}>${total.toLocaleString()}</span>
                      </div>
                      <div style={{ height: 22, background: 'var(--bg-3)', borderRadius: 3, overflow: 'hidden', display: 'flex' }}>
                        <div style={{ width: `${(r.up / max) * 100}%`, background: 'var(--fg-3)', height: '100%' }} />
                        <div style={{ width: `${(r.mo * 60 / max) * 100}%`, background: r.hl ? 'var(--accent)' : 'var(--info)', height: '100%' }} />
                      </div>
                    </div>
                  );
                })}
              </div>
              <div className="row gap-4 mt-4 mono fs-12 text-fg4">
                <span><span style={{ display: 'inline-block', width: 10, height: 10, background: 'var(--fg-3)', marginRight: 6, verticalAlign: -1 }} />Upfront</span>
                <span><span style={{ display: 'inline-block', width: 10, height: 10, background: 'var(--accent)', marginRight: 6, verticalAlign: -1 }} />Recurring + data</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

const DTreeBox = ({ q, highlight }) => (
  <div style={{
    padding: '14px 16px',
    background: highlight ? 'var(--bg-3)' : 'var(--bg-2)',
    border: '1px solid ' + (highlight ? 'var(--accent)' : 'var(--line-2)'),
    borderRadius: 6,
  }}>
    <div className="mono fs-12 text-fg4" style={{ letterSpacing: '0.1em', textTransform: 'uppercase' }}>
      {highlight ? 'Output' : 'Decision'}
    </div>
    <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4, color: highlight ? 'var(--accent)' : 'var(--fg)' }}>{q}</div>
  </div>
);
const DTreeOption = ({ a, accent }) => (
  <div style={{
    padding: '10px 14px',
    background: 'var(--bg-1)',
    border: '1px dashed ' + (accent ? 'var(--accent)' : 'var(--line-2)'),
    borderRadius: 4,
    fontSize: 13,
    color: accent ? 'var(--accent)' : 'var(--fg-2)',
    fontFamily: accent ? 'var(--font-mono)' : 'inherit',
  }}>{accent ? '→ ' : '· '}{a}</div>
);

window.BondingPage = BondingPage;