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

/* =========================================================================
   DEALS & BUYER GUIDES — affiliate-commerce
   ========================================================================= */

const GUIDES = [
  { id: 1, t: 'Best beginner streaming setup',     count: 7, low: 280,  high: 720,  badge: 'beginner' },
  { id: 2, t: 'Best IRL backpack setup',           count: 9, low: 1200, high: 3400, badge: 'pro' },
  { id: 3, t: 'Best camera for IRL streaming',     count: 6, low: 399,  high: 3899, badge: null },
  { id: 4, t: 'Best mic for noisy locations',      count: 5, low: 119,  high: 549,  badge: null },
  { id: 5, t: 'Best routers for streaming',        count: 8, low: 159,  high: 1499, badge: 'pro' },
  { id: 6, t: 'Best power banks for streamers',    count: 7, low: 89,   high: 999,  badge: null },
  { id: 7, t: 'Best data plans for streamers',     count: 12,low: 25,   high: 100,  badge: 'updated' },
  { id: 8, t: 'Best budget setup under $500',      count: 8, low: 280,  high: 480,  badge: 'beginner' },
  { id: 9, t: 'Best pro setup under $3,000',       count: 6, low: 2200, high: 3000, badge: 'pro' },
];

const DEALS = [
  { rank: 1, name: 'DJI Osmo Pocket 3', cat: 'Camera', was: 519, now: 469, off: 10, score: 9.1, badge: 'tested', icon: Icons.camera },
  { rank: 2, name: 'Anker 737 PowerCore', cat: 'Power', was: 149, now: 119, off: 20, score: 9.1, badge: null, icon: Icons.battery },
  { rank: 3, name: 'Rode Wireless GO 3', cat: 'Audio', was: 349, now: 299, off: 14, score: 9.0, badge: 'tested', icon: Icons.mic },
  { rank: 4, name: 'GL.iNet Brume 2', cat: 'Router', was: 159, now: 129, off: 19, score: 7.6, badge: 'deal', icon: Icons.router },
  { rank: 5, name: 'Peak Design 30L pack', cat: 'Pack', was: 299, now: 239, off: 20, score: 7.9, badge: null, icon: Icons.backpack },
  { rank: 6, name: 'DJI Mic 2', cat: 'Audio', was: 349, now: 319, off: 9, score: 8.7, badge: null, icon: Icons.mic },
];

const DealsPage = () => {
  const [filter, setFilter] = useState('All');
  const filtered = filter === 'All' ? DEALS : DEALS.filter(d => d.cat === filter);
  return (
    <div className="page-fade">
      {/* HEADER */}
      <section style={{ padding: '40px 0 24px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="row between">
            <div>
              <Eyebrow>Buyer guides · 32 guides · weekly deals</Eyebrow>
              <h1 className="mt-3" style={{ fontSize: 56 }}>Deals &amp; buyer guides.</h1>
              <p className="lede mt-3" style={{ maxWidth: '60ch' }}>
                Best-of buying guides organized by use case. No sponsored placement.
                Affiliate disclosed on every link. Updated weekly.
              </p>
            </div>
            <div className="card card-pad" style={{ minWidth: 260 }}>
              <Eyebrow>Disclosure</Eyebrow>
              <p className="text-fg3 fs-13 mt-2">
                Some links earn us a commission. Rankings are based on lab testing — never
                paid placement. <a className="text-accent" style={{ textDecoration: 'underline', cursor: 'pointer' }}
                                   href="mailto:hello@livestreamers.org?subject=Affiliate%20disclosure">Read the policy</a>.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* DEALS OF THE WEEK */}
      <section style={{ padding: '48px 0', background: 'var(--bg-1)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="row between mb-5">
            <div>
              <Eyebrow>This week · {filtered.length} active · refresh in 4d 12h</Eyebrow>
              <h2 className="mt-3" style={{ fontSize: 32 }}>Deals of the week.</h2>
            </div>
            <div className="row gap-2 wrap">
              {['All', 'Camera', 'Audio', 'Power', 'Router', 'Pack'].map(c => (
                <Pill key={c} on={filter === c} onClick={() => setFilter(c)}>{c}</Pill>
              ))}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {filtered.map(d => {
              const Ic = d.icon;
              // "Get this deal" — Phase 5 wires the affiliate registry; for now,
              // mailto for early-access. Review surface lands with MDX in Phase 4.
              const dealMail = `mailto:hello@livestreamers.org?subject=${encodeURIComponent('Deal: ' + d.name + ' (rank #' + d.rank + ')')}`;
              return (
                <div key={d.rank} className="card" style={{ overflow: 'hidden', position: 'relative' }}>
                  {/* product area */}
                  <div style={{
                    position: 'relative',
                    padding: 24,
                    background: 'linear-gradient(135deg, var(--bg-2), var(--bg-1))',
                    borderBottom: '1px solid var(--line)',
                    minHeight: 160,
                  }}>
                    <div className="row gap-2">
                      <span className="mono fs-12 text-fg4" style={{ letterSpacing: '0.12em' }}>#{d.rank.toString().padStart(2, '0')}</span>
                      <Badge kind="deal" dot>-{d.off}% OFF</Badge>
                      {d.badge && <Badge kind={d.badge}>{d.badge === 'tested' ? 'Lab pick' : d.badge}</Badge>}
                    </div>
                    <div style={{ position: 'absolute', right: 24, top: 24, opacity: 0.25, color: 'var(--accent)' }}>
                      <Ic size={56} sw={1.2} />
                    </div>
                    <h3 style={{ marginTop: 28, fontSize: 18 }}>{d.name}</h3>
                    <div className="text-fg3 fs-13 mt-1">{d.cat}</div>
                  </div>
                  {/* price row */}
                  <div className="row between" style={{ padding: '16px 24px', borderBottom: '1px solid var(--line)' }}>
                    <div>
                      <div className="mono fs-12 text-fg4" style={{ textDecoration: 'line-through' }}>${d.was}</div>
                      <div className="mono" style={{ fontSize: 24, color: 'var(--accent)', fontWeight: 500 }}>${d.now}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div className="stat-label">Score</div>
                      <div className="mt-1"><Score value={d.score} /></div>
                    </div>
                  </div>
                  {/* buttons */}
                  <div style={{ padding: 16 }}>
                    <Btn kind="primary" size="sm" href={dealMail} iconRight={<Icons.external size={12} />}>
                      Notify me when live
                    </Btn>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* GUIDE GRID */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <Eyebrow>Buyer guides · in production for Phase 4</Eyebrow>
              <h2 className="mt-3">Pick by use case.</h2>
            </div>
            {/* "Full guide index" lands when MDX guides ship in Phase 4. */}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {GUIDES.map(g => (
              <div key={g.id} className="card" style={{ display: 'block' }}>
                <div style={{
                  position: 'relative',
                  padding: '24px 24px',
                  borderBottom: '1px solid var(--line)',
                  background: 'var(--bg-1)',
                }}>
                  <div className="row gap-2 mb-4">
                    <span className="mono fs-12 text-fg4">GUIDE · #{g.id.toString().padStart(2, '0')}</span>
                    {g.badge && <Badge kind={g.badge}>{g.badge}</Badge>}
                  </div>
                  <h4 style={{ fontSize: 19, maxWidth: '22ch' }}>{g.t}</h4>
                </div>
                <div className="row between" style={{ padding: '14px 24px' }}>
                  <div>
                    <div className="stat-label">Price range</div>
                    <div className="mono mt-1">${g.low.toLocaleString()} – ${g.high.toLocaleString()}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div className="stat-label">Picks</div>
                    <div className="mono mt-1">{g.count}</div>
                  </div>
                  <span className="mono fs-12 text-fg4">SOON</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ / TRUST STRIP */}
      <section className="section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)' }}>
        <div className="container">
          <div className="row between mb-7">
            <div>
              <Eyebrow>Why trust these picks</Eyebrow>
              <h2 className="mt-3">Receipts, not vibes.</h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
                        border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden',
                        background: 'var(--bg-0)' }}>
            {[
              { icon: <Icons.tool size={20} />,  t: 'Bought, not gifted',     s: 'We buy our gear at retail. No vendor swag.' },
              { icon: <Icons.clock size={20} />, t: '14-day field test',     s: 'Minimum. No reviews after one stream.' },
              { icon: <Icons.shield size={20} />,t: 'Affiliate transparent', s: 'Every link disclosed. Picks never paid for.' },
              { icon: <Icons.zap size={20} />,   t: 'Updated weekly',         s: 'Prices and rankings revalidated every Friday.' },
            ].map((it, i) => (
              <div key={i} style={{ padding: '28px 26px', borderRight: i < 3 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ color: 'var(--accent)' }}>{it.icon}</div>
                <div style={{ fontWeight: 600, marginTop: 14, marginBottom: 6 }}>{it.t}</div>
                <div className="text-fg3 fs-13">{it.s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

window.DealsPage = DealsPage;