// CHUCO — page components. Reads shared via window.PRISM.

const { COLORS: C, FONT_DISPLAY: FD, FONT_BODY: FB, FONT_MONO: FM, GlsCard, GlsButton, GlsLogo, gradFrom, gradSoft, rgba } = window.PRISM;
const { PLANS: P_PLANS, CONNECTIONS: P_CONNS, FEATURES: P_FEATS, CATEGORIES: P_CATS, CHANNELS: P_CHANS, COUNTRIES: P_COUNTRIES, FAQ: P_FAQ } = window.IPTV_DATA;

const PAGE_PAD = '52px 56px';
const MAX = 1280;
const wrap = (style = {}) => ({ padding: PAGE_PAD, maxWidth: MAX, margin: '0 auto', ...style });

// Section header
function SectionHead({ eyebrow, title, sub }) {
  return (
    <div style={{ marginBottom: 28 }}>
      {eyebrow && <div style={{ color: C.fgGhost, fontSize: 12, letterSpacing: '0.18em', marginBottom: 8 }}>{eyebrow}</div>}
      <h2 style={{ fontFamily: FD, fontSize: 38, margin: 0, fontWeight: 500, letterSpacing: '-0.025em' }}>{title}</h2>
      {sub && <p style={{ color: C.fgDim, fontSize: 16, marginTop: 10, maxWidth: 640 }}>{sub}</p>}
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// HOME
// ───────────────────────────────────────────────────────────────────────────
function PrismHome({ ctx, setPage }) {
  return (
    <div style={wrap({ paddingTop: 64 })}>
      {/* HERO */}
      <div style={{ display: 'grid', gridTemplateColumns: ctx.showHeroPanel ? '1.2fr 1fr' : '1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px', borderRadius: 999, fontSize: 12,
            border: `1px solid ${C.border}`, background: C.panel,
            backdropFilter: 'blur(20px)',
            marginBottom: 22, color: C.fgDim,
          }}>
            <span style={{ width: 16, height: 16, borderRadius: '50%', background: ctx.gradient }} />
            <span>New · K-Drama vault + UFC PPV → live now</span>
          </div>
          <h1 style={{
            fontFamily: FD, fontWeight: 600, fontSize: 84, lineHeight: 1.0,
            margin: 0, letterSpacing: '-0.035em',
          }}>
            {(() => {
              const parts = (ctx.headlineText || 'Television, refracted').split(',');
              const before = parts[0];
              const after  = parts.slice(1).join(',').trim() || '';
              return <>
                {before}{after && ','}<br />
                {after && (
                  <span style={{
                    background: ctx.gradient, WebkitBackgroundClip: 'text',
                    WebkitTextFillColor: 'transparent', backgroundClip: 'text',
                  }}>{after}</span>
                )}
              </>;
            })()}
          </h1>
          <p style={{ color: C.fgDim, fontSize: 17, lineHeight: 1.55, maxWidth: 480, marginTop: 22 }}>
            Premium IPTV with 22,000+ live channels, 80,000+ on-demand titles, and a global
            anti-buffer CDN. Setup in 60 seconds — on any screen you own.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 30 }}>
            <GlsButton size="lg" gradient={ctx.gradient} onClick={() => setPage('plans')}>Pick your plan →</GlsButton>
            <GlsButton variant="ghost" size="lg" onClick={() => setPage('channels')}>Preview channels</GlsButton>
          </div>
          <div style={{ display: 'flex', gap: 38, marginTop: 44 }}>
            {[['22k+', 'live channels'], ['80k+', 'on demand'], ['99.93%', 'uptime'], ['<60s', 'setup']].map(([n, l]) => (
              <div key={l}>
                <div style={{ fontFamily: FD, fontWeight: 600, fontSize: 30, letterSpacing: '-0.02em' }}>{n}</div>
                <div style={{ color: C.fgDim, fontSize: 12, marginTop: 2 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        {ctx.showHeroPanel && <PrismHeroPanel ctx={ctx} />}
      </div>

      {/* TRUST STRIP — fake "as featured on" */}
      <div style={{
        marginTop: 80, padding: '18px 28px', display: 'flex', justifyContent: 'space-between',
        gap: 36, alignItems: 'center', borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}`,
        flexWrap: 'wrap',
      }}>
        <div style={{ color: C.fgGhost, fontSize: 11, letterSpacing: '0.2em' }}>TRUSTED BY 410,000+ STREAMERS</div>
        {['REDDIT r/IPTV', 'PADDLEBOARD.CO', 'STREAMDB ⌖', 'IPTV-FORUM', 'TG @SIGNALS', 'DISCORD #TV'].map(s => (
          <div key={s} style={{ fontFamily: FM, fontSize: 12, color: C.fgDim, letterSpacing: '0.1em' }}>{s}</div>
        ))}
      </div>

      {/* FEATURES */}
      <div style={{ marginTop: 90 }}>
        <SectionHead eyebrow="WHY CHUCO TV" title="Built for the picky viewer." sub="Specced for sports, tuned for binge-watchers, hardened for live PPV nights." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {P_FEATS.map((f, i) => (
            <GlsCard key={i} style={{ padding: 26, minHeight: 168 }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10,
                background: ctx.gradientSoft, color: '#0a0c18',
                display: 'grid', placeItems: 'center', fontSize: 20, fontWeight: 700,
              }}>{f.icon}</div>
              <div style={{ fontFamily: FD, fontWeight: 600, fontSize: 18, marginTop: 16 }}>{f.title}</div>
              <div style={{ color: C.fgDim, fontSize: 14, lineHeight: 1.55, marginTop: 6 }}>{f.body}</div>
            </GlsCard>
          ))}
        </div>
      </div>

      {/* HOW IT WORKS */}
      <div style={{ marginTop: 90 }}>
        <SectionHead eyebrow="HOW IT WORKS" title="Three steps. Sixty seconds." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            { n: '01', t: 'Pick a plan', b: 'From 1 month to 12. Cancel any time. 24-hour free trial — no card required.' },
            { n: '02', t: 'Pay your way', b: 'Card, PayPal, Apple Pay, or crypto (–10%). Activation is automatic, no humans involved.' },
            { n: '03', t: 'Watch on anything', b: 'Email arrives with your M3U URL, Xtream creds, and a one-tap setup wizard for 14 players.' },
          ].map(s => (
            <GlsCard key={s.n} style={{ padding: 26, position: 'relative', overflow: 'hidden' }}>
              <div style={{
                fontFamily: FD, fontWeight: 600, fontSize: 64, letterSpacing: '-0.04em',
                background: ctx.gradient, WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent', backgroundClip: 'text', opacity: 0.85,
              }}>{s.n}</div>
              <div style={{ fontFamily: FD, fontWeight: 600, fontSize: 22, marginTop: 4 }}>{s.t}</div>
              <div style={{ color: C.fgDim, fontSize: 14, marginTop: 8, lineHeight: 1.55 }}>{s.b}</div>
            </GlsCard>
          ))}
        </div>
      </div>

      {/* GLOBE COVERAGE */}
      <div style={{ marginTop: 90 }}>
        <SectionHead eyebrow="EVERYWHERE" title="54 countries. One playlist." />
        <GlsCard style={{ padding: 26 }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {P_COUNTRIES.map(c => (
              <div key={c} style={{
                padding: '8px 14px', borderRadius: 999, background: 'rgba(255,255,255,0.04)',
                fontSize: 13, color: C.fgDim, border: `1px solid ${C.border}`,
              }}>{c}</div>
            ))}
            <div style={{
              padding: '8px 14px', borderRadius: 999, background: ctx.gradientSoft,
              fontSize: 13, color: '#0a0c18', fontWeight: 600,
            }}>+ 38 more</div>
          </div>
        </GlsCard>
      </div>

      {/* TESTIMONIAL */}
      <div style={{ marginTop: 90 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr', gap: 16 }}>
          <GlsCard style={{ padding: 32, background: `linear-gradient(150deg, ${rgba(ctx.stops[0], 0.12)}, ${rgba(ctx.stops[1], 0.08)} 50%, ${rgba(ctx.stops[3], 0.1)})` }}>
            <div style={{ fontFamily: FD, fontSize: 28, fontWeight: 500, lineHeight: 1.3, letterSpacing: '-0.015em' }}>
              "Switched 6 months ago. Zero buffering on UFC PPV nights, and the K-drama
              library is wild. M3U works on my Firestick, iPad, and Samsung TV from one line."
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 22 }}>
              <div style={{ width: 38, height: 38, borderRadius: '50%', background: ctx.gradient }} />
              <div>
                <div style={{ fontWeight: 600 }}>Marcus J.</div>
                <div style={{ color: C.fgDim, fontSize: 13 }}>Toronto, CA · subscribed 14 months</div>
              </div>
            </div>
          </GlsCard>
          <GlsCard style={{ padding: 22 }}>
            <div style={{ fontFamily: FD, fontSize: 44, fontWeight: 600, letterSpacing: '-0.03em' }}>4.8</div>
            <div style={{ color: C.fgDim, fontSize: 13 }}>★★★★★ · 9,402 reviews</div>
            <div style={{ height: 1, background: C.border, margin: '14px 0' }} />
            <div style={{ color: C.fgDim, fontSize: 13, lineHeight: 1.55 }}>
              "Activation took 42 seconds. Setup wizard is genuinely good."
            </div>
            <div style={{ marginTop: 10, fontSize: 12, color: C.fgGhost }}>— Sofia R.</div>
          </GlsCard>
          <GlsCard style={{ padding: 22 }}>
            <div style={{ fontFamily: FD, fontSize: 44, fontWeight: 600, letterSpacing: '-0.03em' }}>99.93%</div>
            <div style={{ color: C.fgDim, fontSize: 13 }}>uptime · last 90 days</div>
            <div style={{ height: 1, background: C.border, margin: '14px 0' }} />
            <div style={{ display: 'flex', gap: 3, alignItems: 'end', height: 36 }}>
              {Array.from({ length: 30 }, (_, i) => {
                const h = 50 + (Math.sin(i * 1.3) + 1) * 22 + (i === 12 ? -20 : 0);
                return <div key={i} style={{ flex: 1, height: `${Math.min(100, h)}%`, background: ctx.gradient, borderRadius: 2, opacity: 0.85 }} />;
              })}
            </div>
            <div style={{ marginTop: 10, fontSize: 11, color: C.fgGhost, display: 'flex', justifyContent: 'space-between' }}>
              <span>30 days ago</span><span>today</span>
            </div>
          </GlsCard>
        </div>
      </div>

      {/* FAQ */}
      <div style={{ marginTop: 90 }}>
        <SectionHead eyebrow="FAQ" title="Answers, fast." />
        <PrismFAQ />
      </div>

      {/* CTA */}
      <div style={{ marginTop: 80, marginBottom: -40 }}>
        <GlsCard style={{
          padding: '44px 48px', textAlign: 'center', overflow: 'hidden', position: 'relative',
          background: `linear-gradient(150deg, ${rgba(ctx.stops[0], 0.18)}, ${rgba(ctx.stops[1], 0.12)} 50%, ${rgba(ctx.stops[3], 0.16)})`,
        }}>
          <h2 style={{ fontFamily: FD, fontSize: 42, fontWeight: 500, margin: 0, letterSpacing: '-0.025em' }}>
            Get a line. <span style={{ background: ctx.gradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Watch in 60 seconds.</span>
          </h2>
          <p style={{ color: C.fgDim, fontSize: 15, marginTop: 10 }}>
            No card needed for the 24-hour trial.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 22 }}>
            <GlsButton size="lg" gradient={ctx.gradient} onClick={() => setPage('plans')}>Start trial →</GlsButton>
            <GlsButton variant="ghost" size="lg" onClick={() => setPage('channels')}>See what's on</GlsButton>
          </div>
        </GlsCard>
      </div>
    </div>
  );
}

function PrismFAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <div>
      {P_FAQ.map((q, i) => (
        <GlsCard key={i} style={{ padding: '0', marginBottom: 10 }}>
          <button onClick={() => setOpen(open === i ? -1 : i)} style={{
            background: 'transparent', border: 'none', width: '100%', padding: '20px 26px',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer',
            color: C.fg, textAlign: 'left',
          }}>
            <span style={{ fontFamily: FD, fontSize: 17, fontWeight: 500 }}>{q.q}</span>
            <span style={{ fontSize: 22, color: C.fgDim, transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform .2s' }}>+</span>
          </button>
          {open === i && (
            <div style={{ padding: '0 26px 20px', color: C.fgDim, fontSize: 14, lineHeight: 1.6 }}>{q.b}</div>
          )}
        </GlsCard>
      ))}
    </div>
  );
}

function PrismHeroPanel({ ctx }) {
  const [tick, setTick] = React.useState(71);
  React.useEffect(() => {
    const t = setInterval(() => setTick(v => (v >= 90 ? 71 : v + 1)), 2200);
    return () => clearInterval(t);
  }, []);
  return (
    <GlsCard style={{ padding: 18, position: 'relative' }}>
      <div style={{
        height: 240, borderRadius: 14, overflow: 'hidden', position: 'relative',
        background: 'linear-gradient(135deg, #1a1530 0%, #0d2230 50%, #1f1535 100%)',
      }}>
        <div style={{
          position: 'absolute', inset: 0, background: ctx.gradient,
          opacity: 0.35, mixBlendMode: 'overlay',
        }} />
        {/* Soccer field */}
        <svg viewBox="0 0 400 240" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <defs>
            <linearGradient id="pitch2" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0" stopColor="#0a3818" />
              <stop offset="1" stopColor="#062510" />
            </linearGradient>
          </defs>
          <rect width="400" height="240" fill="url(#pitch2)" />
          <g stroke="rgba(255,255,255,0.42)" strokeWidth="1.5" fill="none">
            <line x1="200" y1="0" x2="200" y2="240" />
            <circle cx="200" cy="120" r="36" />
            <rect x="2" y="70" width="54" height="100" />
            <rect x="344" y="70" width="54" height="100" />
            <rect x="2" y="94" width="24" height="52" />
            <rect x="374" y="94" width="24" height="52" />
          </g>
          {/* Ball */}
          <circle cx={195 + Math.sin(tick * 0.4) * 10} cy={120 + Math.cos(tick * 0.3) * 6} r="3.5" fill="#fff" />
        </svg>
        <div style={{
          position: 'absolute', top: 12, left: 14, padding: '4px 10px', borderRadius: 999,
          background: '#ff3355', fontSize: 10, fontWeight: 700, letterSpacing: '0.12em',
        }}>● LIVE</div>
        <div style={{
          position: 'absolute', top: 12, right: 14, padding: '4px 10px', borderRadius: 6,
          background: 'rgba(0,0,0,0.55)', fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
        }}>4K · HDR</div>
        <div style={{ position: 'absolute', bottom: 14, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'end' }}>
          <div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>Premier League · Matchday 28</div>
            <div style={{ fontFamily: FD, fontWeight: 600, fontSize: 19 }}>
              Arsenal <span style={{ background: ctx.gradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>2</span>
              {' – '}
              <span style={{ background: ctx.gradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>1</span> Man City
            </div>
          </div>
          <div style={{ padding: '6px 10px', borderRadius: 8, background: 'rgba(0,0,0,0.55)', fontSize: 11, fontWeight: 600 }}>{tick}'</div>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
        {['Sport HD', 'NBA Pass', 'UFC PPV', 'Cinema 4K', 'K-Drama'].map((s, i) => (
          <div key={s} style={{
            flex: 1, padding: '10px 8px', borderRadius: 10,
            background: i === 0 ? ctx.gradientSoft : 'rgba(255,255,255,0.05)',
            border: `1px solid ${i === 0 ? 'rgba(255,255,255,0.3)' : C.border}`,
            color: i === 0 ? '#0a0c18' : C.fgDim, fontSize: 11, textAlign: 'center',
            fontWeight: i === 0 ? 600 : 400, cursor: 'pointer',
          }}>{s}</div>
        ))}
      </div>

      <div style={{
        marginTop: 14, padding: '12px 16px', borderRadius: 12,
        background: 'rgba(255,255,255,0.03)', border: `1px solid ${C.border}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div>
          <div style={{ fontSize: 11, color: C.fgGhost }}>NEXT UP · 22:00 BST</div>
          <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>UFC 312 · McGregor vs Chandler</div>
        </div>
        <GlsButton size="sm" gradient={ctx.gradient}>Remind me</GlsButton>
      </div>
    </GlsCard>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// PLANS
// ───────────────────────────────────────────────────────────────────────────
function PrismPlans({ ctx, cart, setCart, setPage }) {
  return (
    <div style={wrap({ paddingTop: 64 })}>
      <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto' }}>
        <div style={{ color: C.fgGhost, fontSize: 12, letterSpacing: '0.18em', marginBottom: 8 }}>PRICING</div>
        <h1 style={{ fontFamily: FD, fontWeight: 500, fontSize: 64, margin: 0, letterSpacing: '-0.03em' }}>
          One line. <span style={{ background: ctx.gradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Any screen.</span>
        </h1>
        <p style={{ color: C.fgDim, fontSize: 16, marginTop: 14 }}>
          Cancel any time. 24-hour free trial. <span style={{ color: '#a0ffd6' }}>10% off</span> when you pay with crypto.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginTop: 48 }}>
        {P_PLANS.map(p => {
          const sel = p.id === cart.planId;
          const hero = p.id === '6m';
          return (
            <div key={p.id} onClick={() => setCart({ ...cart, planId: p.id })} style={{
              padding: 26, borderRadius: 20, cursor: 'pointer', position: 'relative',
              background: hero ? `linear-gradient(150deg, ${rgba(ctx.stops[0], 0.18)}, ${rgba(ctx.stops[1], 0.12)} 50%, ${rgba(ctx.stops[3], 0.15)})` : C.panel,
              backdropFilter: 'blur(20px) saturate(140%)',
              border: `1px solid ${sel ? 'rgba(255,255,255,0.35)' : C.border}`,
              boxShadow: sel ? `0 24px 60px ${rgba(ctx.stops[1], 0.18)}` : 'none',
              transition: 'transform .15s, box-shadow .15s',
              transform: sel ? 'translateY(-4px)' : 'none',
            }}>
              {p.tag && (
                <div style={{
                  position: 'absolute', top: -10, left: 26, padding: '4px 12px', borderRadius: 999,
                  background: ctx.gradient, color: '#0a0c18', fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
                }}>{p.tag}</div>
              )}
              <div style={{ color: C.fgDim, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{p.label}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 8 }}>
                <span style={{ fontFamily: FD, fontSize: 46, fontWeight: 600, letterSpacing: '-0.03em' }}>${p.price}</span>
                <span style={{ color: C.fgDim, fontSize: 13 }}>· ${p.perMo.toFixed(2)}/mo</span>
              </div>
              <div style={{ marginTop: 20, paddingTop: 20, borderTop: `1px solid ${C.border}`, fontSize: 13, color: C.fgDim }}>
                {['Full live + VOD library', '4K · HDR · multi-bitrate', 'EPG + 7d catchup', 'Setup wizard', '24h free trial'].map(t => (
                  <div key={t} style={{ display: 'flex', gap: 8, padding: '4px 0' }}>
                    <span style={{
                      background: ctx.gradient, WebkitBackgroundClip: 'text',
                      WebkitTextFillColor: 'transparent', backgroundClip: 'text', fontWeight: 800,
                    }}>✓</span>
                    <span>{t}</span>
                  </div>
                ))}
              </div>
              <div style={{
                marginTop: 22, textAlign: 'center', padding: '11px 0', borderRadius: 999, fontSize: 13, fontWeight: 600,
                background: sel ? ctx.gradient : 'rgba(255,255,255,0.06)',
                color: sel ? '#0a0c18' : C.fg,
              }}>{sel ? 'Selected ✓' : 'Choose this'}</div>
            </div>
          );
        })}
      </div>

      <div style={{ marginTop: 60 }}>
        <h3 style={{ fontFamily: FD, fontWeight: 500, fontSize: 24, margin: 0, letterSpacing: '-0.015em' }}>How many screens?</h3>
        <p style={{ color: C.fgDim, fontSize: 14, marginTop: 6 }}>Add simultaneous streams if your household watches in parallel.</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginTop: 18 }}>
          {P_CONNS.map(c => {
            const sel = c.id === cart.connId;
            return (
              <div key={c.id} onClick={() => setCart({ ...cart, connId: c.id })} style={{
                padding: 18, borderRadius: 14, cursor: 'pointer',
                background: sel ? C.panelHi : C.panel, backdropFilter: 'blur(20px)',
                border: `1px solid ${sel ? 'rgba(255,255,255,0.3)' : C.border}`,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <div>
                  <div style={{ fontWeight: 600 }}>{c.label}</div>
                  <div style={{ color: C.fgDim, fontSize: 12, marginTop: 2 }}>
                    Stream {c.id === 1 ? 'on one screen' : `up to ${c.id} screens`}
                  </div>
                </div>
                <div style={{
                  fontWeight: 700, fontSize: 14,
                  background: sel ? ctx.gradient : 'transparent',
                  WebkitBackgroundClip: sel ? 'text' : 'unset',
                  WebkitTextFillColor: sel ? 'transparent' : C.fgDim,
                }}>{c.add === 0 ? 'Included' : `+$${c.add}`}</div>
              </div>
            );
          })}
        </div>
      </div>

      <GlsCard style={{
        marginTop: 48, padding: 28, display: 'flex', gap: 24, alignItems: 'center',
        background: `linear-gradient(110deg, ${rgba(ctx.stops[0], 0.12)}, ${rgba(ctx.stops[1], 0.08)} 50%, ${rgba(ctx.stops[3], 0.1)})`,
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ color: C.fgGhost, fontSize: 12, letterSpacing: '0.14em' }}>YOUR CART</div>
          <div style={{ marginTop: 4, fontSize: 18, fontFamily: FD }}>
            {P_PLANS.find(p => p.id === cart.planId).label}
            <span style={{ color: C.fgGhost }}> · </span>
            {P_CONNS.find(c => c.id === cart.connId).label}
          </div>
        </div>
        <div style={{ fontFamily: FD, fontSize: 40, fontWeight: 600, letterSpacing: '-0.02em' }}>
          ${(P_PLANS.find(p => p.id === cart.planId).price + P_CONNS.find(c => c.id === cart.connId).add).toFixed(2)}
        </div>
        <GlsButton size="lg" gradient={ctx.gradient} onClick={() => setPage('checkout')}>Continue →</GlsButton>
      </GlsCard>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// CHANNELS
// ───────────────────────────────────────────────────────────────────────────
function PrismChannels({ ctx }) {
  const [activeCat, setActiveCat] = React.useState('Sports');
  const [search, setSearch] = React.useState('');
  const filtered = P_CHANS.filter(ch => !search || ch.name.toLowerCase().includes(search.toLowerCase()));
  return (
    <div style={wrap({ paddingTop: 60 })}>
      <div style={{ display: 'flex', alignItems: 'end', gap: 24, marginBottom: 30 }}>
        <div style={{ flex: 1 }}>
          <div style={{ color: C.fgGhost, fontSize: 12, letterSpacing: '0.18em', marginBottom: 8 }}>CHANNEL BROWSER</div>
          <h1 style={{ fontFamily: FD, fontWeight: 500, fontSize: 56, margin: 0, letterSpacing: '-0.03em' }}>
            Find your <span style={{ background: ctx.gradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>signal</span>.
          </h1>
        </div>
        <GlsCard style={{ padding: '4px 6px 4px 18px', display: 'flex', alignItems: 'center', gap: 8, width: 340 }}>
          <span style={{ color: C.fgGhost, fontSize: 14 }}>🔎</span>
          <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search 31,740 channels…" style={{
            flex: 1, background: 'transparent', border: 'none', outline: 'none',
            color: C.fg, fontFamily: FB, fontSize: 13, padding: '10px 0',
          }} />
        </GlsCard>
      </div>

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 26 }}>
        {P_CATS.map(c => (
          <button key={c.name} onClick={() => setActiveCat(c.name)} style={{
            padding: '8px 16px', borderRadius: 999, cursor: 'pointer',
            background: activeCat === c.name ? ctx.gradientSoft : C.panel,
            backdropFilter: 'blur(20px)',
            color: activeCat === c.name ? '#0a0c18' : C.fgDim,
            border: `1px solid ${activeCat === c.name ? 'rgba(255,255,255,0.4)' : C.border}`,
            fontFamily: FB, fontSize: 13, fontWeight: activeCat === c.name ? 600 : 500,
          }}>{c.name} <span style={{ opacity: 0.6, marginLeft: 6 }}>{c.count.toLocaleString()}</span></button>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        {filtered.map((ch, i) => {
          const gradBg = `linear-gradient(135deg, ${['#311b56', '#1b3756', '#3a1b56', '#1b563a', '#56441b', '#561b3a', '#1b5656', '#3a561b'][i % 8]} 0%, #0d1020 100%)`;
          return (
            <GlsCard key={i} style={{ padding: 0, overflow: 'hidden', cursor: 'pointer', transition: 'transform .15s' }}>
              <div style={{ height: 116, position: 'relative', background: gradBg }}>
                <div style={{ position: 'absolute', inset: 0, background: ctx.gradient, opacity: 0.18, mixBlendMode: 'overlay' }} />
                <div style={{ position: 'absolute', top: 10, left: 10, padding: '3px 8px', borderRadius: 4, background: '#ff3355', fontSize: 9, fontWeight: 700, letterSpacing: '0.1em' }}>● LIVE</div>
                <div style={{ position: 'absolute', top: 10, right: 10, padding: '3px 8px', borderRadius: 4, background: 'rgba(0,0,0,0.5)', fontSize: 9, fontWeight: 600 }}>4K</div>
                <div style={{ position: 'absolute', bottom: 8, left: 12, fontFamily: FM, fontSize: 10, color: 'rgba(255,255,255,0.7)' }}>{ch.code}</div>
                <div style={{
                  position: 'absolute', bottom: 6, right: 12, fontFamily: FD, fontSize: 22, fontWeight: 700,
                  letterSpacing: '-0.02em', color: '#fff', opacity: 0.85,
                }}>{ch.cat.slice(0, 3).toUpperCase()}</div>
              </div>
              <div style={{ padding: 14 }}>
                <div style={{ fontFamily: FD, fontWeight: 600, fontSize: 15 }}>{ch.name}</div>
                <div style={{ color: C.fgDim, fontSize: 12, marginTop: 4, lineHeight: 1.4 }}>{ch.live}</div>
              </div>
            </GlsCard>
          );
        })}
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// DEVICES
// ───────────────────────────────────────────────────────────────────────────
function PrismDevices({ ctx, setPage }) {
  const devices = [
    { name: 'Amazon Firestick', sub: '4K / Lite / Stick',     mins: '45s', icon: '◰' },
    { name: 'Android TV / Box',  sub: 'NVIDIA Shield · MiBox',  mins: '60s', icon: '◱' },
    { name: 'Apple TV',          sub: 'tvOS · 4K HDR',          mins: '90s', icon: '◲' },
    { name: 'Samsung / LG TV',   sub: 'Tizen · webOS',          mins: '75s', icon: '◳' },
    { name: 'iPhone / iPad',     sub: 'iOS 14+',                mins: '40s', icon: '▢' },
    { name: 'Android phone',     sub: 'Android 8+',             mins: '40s', icon: '▣' },
    { name: 'MAG / Enigma2',     sub: 'Linux STB · Dreambox',   mins: '2min', icon: '▤' },
    { name: 'Browser / Laptop',  sub: 'Chrome · Safari · Edge', mins: '20s', icon: '▥' },
  ];
  return (
    <div style={wrap({ paddingTop: 64 })}>
      <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 40px' }}>
        <div style={{ color: C.fgGhost, fontSize: 12, letterSpacing: '0.18em', marginBottom: 8 }}>SUPPORTED DEVICES</div>
        <h1 style={{ fontFamily: FD, fontWeight: 500, fontSize: 60, margin: 0, letterSpacing: '-0.03em' }}>
          If it has a screen,<br /> <span style={{ background: ctx.gradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>it works.</span>
        </h1>
        <p style={{ color: C.fgDim, fontSize: 16, marginTop: 14 }}>
          One M3U URL, 14 supported players, one-tap setup wizard. Average install time: <b style={{ color: C.fg }}>under 90 seconds</b>.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        {devices.map(d => (
          <GlsCard key={d.name} style={{ padding: 22 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 10, background: ctx.gradientSoft,
              display: 'grid', placeItems: 'center', color: '#0a0c18', fontSize: 22, fontWeight: 800,
            }}>{d.icon}</div>
            <div style={{ fontFamily: FD, fontWeight: 600, fontSize: 17, marginTop: 14 }}>{d.name}</div>
            <div style={{ color: C.fgDim, fontSize: 12, marginTop: 2 }}>{d.sub}</div>
            <div style={{
              marginTop: 14, paddingTop: 14, borderTop: `1px solid ${C.border}`,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12,
            }}>
              <span style={{ color: C.fgGhost }}>Setup time</span>
              <span style={{
                background: ctx.gradient, WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent', backgroundClip: 'text', fontWeight: 700,
              }}>{d.mins}</span>
            </div>
          </GlsCard>
        ))}
      </div>

      <GlsCard style={{ marginTop: 32, padding: '28px 32px', display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
        <div style={{ flex: 1, minWidth: 280 }}>
          <div style={{ fontFamily: FD, fontSize: 22, fontWeight: 500 }}>Not seeing your device?</div>
          <div style={{ color: C.fgDim, fontSize: 14, marginTop: 4 }}>
            If it can run a player like IPTV Smarters, TiviMate, GSE, or Sparkle TV — it works with CHUCO TV.
          </div>
        </div>
        <GlsButton size="lg" gradient={ctx.gradient} onClick={() => setPage('plans')}>Start free trial</GlsButton>
      </GlsCard>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// CHECKOUT
// ───────────────────────────────────────────────────────────────────────────
function PrismCheckout({ ctx, plan, conn, total, setPage }) {
  const [email, setEmail] = React.useState('');
  const [pay, setPay] = React.useState('card');
  const cryptoDiscount = pay === 'crypto' ? total * 0.1 : 0;
  const final = total - cryptoDiscount;

  return (
    <div style={wrap({ paddingTop: 56, maxWidth: 1140 })}>
      <button onClick={() => setPage('plans')} style={{
        background: 'transparent', border: 'none', color: C.fgDim, fontSize: 13,
        cursor: 'pointer', padding: 0, marginBottom: 24, fontFamily: FB,
      }}>← Back to plans</button>
      <h1 style={{ fontFamily: FD, fontWeight: 500, fontSize: 48, margin: 0, letterSpacing: '-0.03em' }}>Almost there.</h1>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 26, marginTop: 32 }}>
        <GlsCard style={{ padding: 30 }}>
          <div style={{ fontFamily: FD, fontWeight: 500, fontSize: 19 }}>1. Where do we send your line?</div>
          <input value={email} onChange={e => setEmail(e.target.value)} placeholder="you@example.com" style={{
            width: '100%', marginTop: 14, padding: '14px 16px', borderRadius: 12,
            background: 'rgba(255,255,255,0.04)', border: `1px solid ${C.border}`,
            color: C.fg, fontFamily: FB, fontSize: 14, outline: 'none', boxSizing: 'border-box',
          }} />
          <div style={{ color: C.fgGhost, fontSize: 12, marginTop: 8 }}>
            We email your M3U URL, Xtream credentials, and setup wizard within 60 seconds.
          </div>

          <div style={{ fontFamily: FD, fontWeight: 500, fontSize: 19, marginTop: 32 }}>2. How are you paying?</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginTop: 14 }}>
            {[
              { id: 'card',   label: 'Card',    sub: 'Visa · MC · Amex' },
              { id: 'crypto', label: 'Crypto',  sub: 'BTC · ETH · USDT · –10%' },
              { id: 'pp',     label: 'PayPal',  sub: 'Instant clearing' },
            ].map(o => (
              <div key={o.id} onClick={() => setPay(o.id)} style={{
                padding: 16, borderRadius: 14, cursor: 'pointer',
                background: pay === o.id ? ctx.gradientSoft : 'rgba(255,255,255,0.04)',
                border: `1px solid ${pay === o.id ? 'rgba(255,255,255,0.4)' : C.border}`,
                color: pay === o.id ? '#0a0c18' : C.fg,
              }}>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{o.label}</div>
                <div style={{ fontSize: 11, opacity: 0.75, marginTop: 4 }}>{o.sub}</div>
              </div>
            ))}
          </div>

          {pay === 'card' && (
            <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: '1fr 130px 100px', gap: 10 }}>
              <input placeholder="Card number · 4242 4242 4242 4242" style={pInput} />
              <input placeholder="MM / YY" style={pInput} />
              <input placeholder="CVC" style={pInput} />
            </div>
          )}
          {pay === 'crypto' && (
            <div style={{ marginTop: 18, padding: 18, borderRadius: 14, background: 'rgba(160,255,214,0.08)', border: '1px solid rgba(160,255,214,0.3)' }}>
              <div style={{ fontWeight: 600, color: '#a0ffd6' }}>10% crypto discount applied</div>
              <div style={{ color: C.fgDim, fontSize: 13, marginTop: 4 }}>You'll see a QR code and address after you tap Pay.</div>
            </div>
          )}
        </GlsCard>

        <GlsCard style={{ padding: 26, alignSelf: 'start',
          background: `linear-gradient(150deg, ${rgba(ctx.stops[0], 0.14)}, ${rgba(ctx.stops[1], 0.10)} 50%, ${rgba(ctx.stops[3], 0.12)})`,
        }}>
          <div style={{ color: C.fgGhost, fontSize: 12, letterSpacing: '0.14em' }}>SUMMARY</div>
          <div style={{ marginTop: 12, fontSize: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0' }}>
              <span style={{ color: C.fgDim }}>Plan · {plan.label}</span>
              <span>${plan.price.toFixed(2)}</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0' }}>
              <span style={{ color: C.fgDim }}>{conn.label}</span>
              <span>{conn.add === 0 ? 'free' : `$${conn.add.toFixed(2)}`}</span>
            </div>
            {pay === 'crypto' && (
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', color: '#a0ffd6' }}>
                <span>Crypto discount</span>
                <span>-${cryptoDiscount.toFixed(2)}</span>
              </div>
            )}
          </div>
          <div style={{ marginTop: 16, paddingTop: 16, borderTop: `1px solid ${C.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontSize: 13, color: C.fgDim }}>Total</span>
            <span style={{ fontFamily: FD, fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em' }}>${final.toFixed(2)}</span>
          </div>
          <GlsButton size="lg" gradient={ctx.gradient} style={{ width: '100%', marginTop: 18 }} onClick={() => setPage('success')}>
            Pay ${final.toFixed(2)} →
          </GlsButton>
          <div style={{ marginTop: 12, fontSize: 11, color: C.fgGhost, textAlign: 'center', lineHeight: 1.5 }}>
            AES-256 · PCI-DSS · cancel any time<br/>
            No card needed for the 24h trial.
          </div>
        </GlsCard>
      </div>
    </div>
  );
}
const pInput = {
  padding: '12px 14px', borderRadius: 12, background: 'rgba(255,255,255,0.04)',
  border: `1px solid ${C.border}`, color: C.fg,
  fontFamily: FB, fontSize: 13, outline: 'none', boxSizing: 'border-box',
};

// ───────────────────────────────────────────────────────────────────────────
// SUCCESS
// ───────────────────────────────────────────────────────────────────────────
function PrismSuccess({ ctx, setPage }) {
  const [copied, setCopied] = React.useState(false);
  const m3uUrl = 'https://cdn.chuco.tv/4f7e91b3-line.m3u';
  const copy = () => {
    if (navigator.clipboard) navigator.clipboard.writeText(m3uUrl);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };
  return (
    <div style={wrap({ paddingTop: 80, paddingBottom: 60, maxWidth: 720 })}>
      <div style={{ textAlign: 'center' }}>
        <div style={{
          width: 92, height: 92, borderRadius: '50%', margin: '0 auto', background: ctx.gradient,
          display: 'grid', placeItems: 'center', boxShadow: `0 0 80px ${rgba(ctx.stops[1], 0.5)}`,
        }}>
          <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#0a0c18" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </div>
        <h1 style={{ fontFamily: FD, fontWeight: 500, fontSize: 48, margin: '24px 0 8px', letterSpacing: '-0.03em' }}>
          You're <span style={{ background: ctx.gradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>live</span>.
        </h1>
        <p style={{ color: C.fgDim, fontSize: 15, lineHeight: 1.6 }}>
          Your IPTV line is provisioned in zone <b style={{ color: C.fg }}>eu-west-3</b>.
          Setup wizard + credentials are on the way to your inbox.
        </p>
      </div>
      <GlsCard style={{ padding: 22, marginTop: 28, textAlign: 'left' }}>
        {[
          ['Status', <span style={{ color: '#a0ffd6' }}>● Active</span>],
          ['Plan',   '6 Months · 2 Devices'],
          ['Expires', 'May 17, 2027'],
          ['Zone',   'eu-west-3'],
        ].map(([k, v]) => (
          <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: 13, borderBottom: `1px solid ${C.border}` }}>
            <span style={{ color: C.fgDim }}>{k}</span>
            <span>{v}</span>
          </div>
        ))}
        <div style={{ marginTop: 10, padding: '12px 14px', borderRadius: 10, background: 'rgba(0,0,0,0.3)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
          <span style={{ fontFamily: FM, fontSize: 12, color: C.fg, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m3uUrl}</span>
          <button onClick={copy} style={{
            padding: '6px 12px', borderRadius: 999, fontSize: 12, fontWeight: 600, cursor: 'pointer',
            background: ctx.gradient, color: '#0a0c18', border: 'none', whiteSpace: 'nowrap',
          }}>{copied ? 'Copied ✓' : 'Copy URL'}</button>
        </div>
      </GlsCard>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 28 }}>
        <GlsButton size="lg" gradient={ctx.gradient} onClick={() => setPage('channels')}>Open channel browser</GlsButton>
        <GlsButton variant="ghost" size="lg" onClick={() => setPage('home')}>Back home</GlsButton>
      </div>
    </div>
  );
}

Object.assign(window, { PrismHome, PrismPlans, PrismChannels, PrismDevices, PrismCheckout, PrismSuccess });