// screens-sponsor.jsx — Sponsor takeover chapter.
// A full-bleed brand moment that turns the app's home/feature surface into
// a co-branded sponsor experience: "Brought to you by [Sponsor]".
// Inspired by Sinclair / brand-skin partnerships — the sponsor's color comes
// THROUGH the tenant skin without breaking it.

function ScreenSponsor({ onBack, onContinue }) {
  // Per-tenant sponsor (each university has different deals; we hand-curate)
  const sponsors = {
    wvu:  {
      name: 'Mylan Pharmaceuticals',
      shortName: 'Mylan',
      tagline: 'Hometown company, hometown team',
      color: '#0F4C81',
      colorAccent: '#FFC72C',
      ctaTitle: 'Mylan x Mountaineer Saturdays',
      ctaSub: 'Free upper-bowl ticket with any prescription transfer',
      offer: '50% OFF MERCH',
      offerSub: 'On Game Day · Mylan members',
      videoTitle: 'Country Roads · presented by Mylan',
    },
    utah: {
      name: 'Larry H. Miller',
      shortName: 'LHM',
      tagline: 'Driving Utah forward',
      color: '#001E62',
      colorAccent: '#E8202A',
      ctaTitle: 'LHM x Utah Football',
      ctaSub: 'Test drive a Toyota, get sideline access',
      offer: '$50 GAS CARD',
      offerSub: 'On any home win · LHM Premier members',
      videoTitle: 'Inside the Block · presented by LHM',
    },
    osu:  {
      name: 'Huntington Bank',
      shortName: 'Huntington',
      tagline: 'Welcome to the neighborhood',
      color: '#005A41',
      colorAccent: '#FBB040',
      ctaTitle: 'Huntington x The Shoe',
      ctaSub: 'Open a Buckeye Checking, get $200 + 4 tickets',
      offer: 'DOUBLE POINTS',
      offerSub: 'Buckeye Rewards · all of November',
      videoTitle: 'Script Ohio · presented by Huntington',
    },
  };
  const s = sponsors[WVU.id] || sponsors.wvu;

  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'auto',
      background: '#0a0805', color: WVU.cream,
      paddingTop: 0, paddingBottom: 120,
    }} className="mtn-scrollbar">

      {/* ─── HERO ──────────────────────────────────────── */}
      <div style={{
        position: 'relative', height: 480, overflow: 'hidden',
        background: `
          radial-gradient(ellipse 80% 60% at 70% 20%, ${hexA(s.color, 0.55)}, transparent 65%),
          radial-gradient(ellipse 70% 50% at 20% 100%, ${hexA(WVU.gold, 0.30)}, transparent 60%),
          radial-gradient(ellipse 100% 60% at 50% 100%, ${hexA(s.colorAccent, 0.18)}, transparent 70%),
          linear-gradient(180deg, #0a0805, #1c180f 55%, #0a0805)
        `,
      }}>
        {/* film grain pattern */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `repeating-linear-gradient(-22deg, rgba(245,236,217,0.012) 0 1px, transparent 1px 9px)`,
        }} />

        {/* Status bar / back chrome */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0,
          paddingTop: 54, paddingLeft: 14, paddingRight: 14,
          paddingBottom: 8, zIndex: 10,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          background: 'linear-gradient(180deg, rgba(0,0,0,0.5), transparent)',
        }}>
          <button onClick={onBack} style={{
            width: 34, height: 34, borderRadius: 17,
            background: 'rgba(255,255,255,0.10)',
            border: '0.5px solid rgba(255,255,255,0.18)',
            backdropFilter: 'blur(10px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', color: '#fff', padding: 0,
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M9 2L4 7l5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <div style={{
            fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: 'rgba(255,255,255,0.85)', letterSpacing: '0.12em', textTransform: 'uppercase',
            padding: '4px 8px', borderRadius: 4,
            background: 'rgba(0,0,0,0.35)', backdropFilter: 'blur(8px)',
          }}>SPONSORED</div>
          <div style={{ width: 34 }} />
        </div>

        {/* Brought-to-you-by mark */}
        <div style={{
          position: 'absolute', top: 110, left: 0, right: 0,
          textAlign: 'center', zIndex: 5,
        }}>
          <div style={{
            fontFamily: DS.mono, fontSize: 10, color: 'rgba(255,255,255,0.55)',
            letterSpacing: '0.30em', textTransform: 'uppercase', marginBottom: 14,
          }}>Brought to you by</div>

          {/* The sponsor wordmark — fake, tasteful */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            padding: '12px 26px', borderRadius: 14,
            background: `linear-gradient(135deg, ${s.color}, ${hexA(s.color, 0.7)})`,
            border: `0.5px solid ${hexA(s.colorAccent, 0.4)}`,
            boxShadow: `0 12px 38px ${hexA(s.color, 0.45)}, 0 0 0 1px rgba(255,255,255,0.05)`,
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 7,
              background: s.colorAccent,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: DS.display, fontSize: 18, fontWeight: 900,
              color: s.color, letterSpacing: '-0.02em',
            }}>{s.shortName[0]}</div>
            <div style={{
              fontFamily: DS.display, fontSize: 22, fontWeight: 800,
              color: '#fff', letterSpacing: '-0.02em',
            }}>{s.name}</div>
          </div>
        </div>

        {/* ─── CTA OVERLAY (bottom of hero) ──────── */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0,
          padding: '50px 22px 22px',
          background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.65))',
        }}>
          <div style={{
            fontFamily: DS.display, fontSize: 30, fontWeight: 900,
            color: WVU.cream, letterSpacing: '-0.035em', lineHeight: 1.0,
            marginBottom: 8, textShadow: '0 2px 12px rgba(0,0,0,0.5)',
          }}>{s.ctaTitle}</div>
          <div style={{
            fontFamily: DS.sans, fontSize: 14, color: 'rgba(245,236,217,0.85)',
            lineHeight: 1.45, letterSpacing: '-0.005em', maxWidth: 320,
          }}>{s.ctaSub}</div>
        </div>
      </div>

      {/* ─── OFFER CARD ────────────────────────────── */}
      <div style={{ padding: '20px 16px 8px' }}>
        <div style={{
          padding: 18, borderRadius: DS.r.lg,
          background: `linear-gradient(135deg, ${hexA(s.color, 0.18)}, ${hexA(s.colorAccent, 0.08)})`,
          border: `0.5px solid ${hexA(s.colorAccent, 0.32)}`,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -20, right: -20, width: 120, height: 120,
            background: `radial-gradient(circle, ${hexA(s.colorAccent, 0.20)}, transparent 70%)`,
            pointerEvents: 'none',
          }} />
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{
              width: 60, height: 60, borderRadius: 14,
              background: `linear-gradient(135deg, ${s.colorAccent}, ${hexA(s.colorAccent, 0.7)})`,
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
              boxShadow: `0 6px 18px ${hexA(s.colorAccent, 0.4)}`,
            }}>
              <div style={{
                fontFamily: DS.display, fontSize: 22, fontWeight: 900,
                color: s.color, letterSpacing: '-0.03em', lineHeight: 1,
              }}>50%</div>
              <div style={{
                fontFamily: DS.mono, fontSize: 7, fontWeight: 700,
                color: s.color, letterSpacing: '0.12em', marginTop: 1,
              }}>OFF</div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: s.colorAccent, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 4,
              }}>Member Offer · 7 days left</div>
              <div style={{
                fontFamily: DS.sans, fontSize: 14, fontWeight: 700,
                color: WVU.cream, letterSpacing: '-0.01em', lineHeight: 1.2,
              }}>{s.offer}</div>
              <div style={{
                fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 3,
              }}>{s.offerSub}</div>
            </div>
          </div>
        </div>
      </div>

      {/* ─── PRESENTING SPONSOR · CHANNEL ───────────── */}
      <MtnSection title={s.videoTitle} kicker="Sponsor channel">
        <div style={{ padding: '0 16px' }}>
          <div style={{
            position: 'relative', borderRadius: DS.r.md, overflow: 'hidden',
            border: `0.5px solid ${WVU.line}`, cursor: 'pointer',
            aspectRatio: '16/9',
          }}>
            <WarmHero h={170} variant="dusk" />
            {/* Sponsor badge */}
            <div style={{
              position: 'absolute', top: 12, left: 12,
              display: 'flex', alignItems: 'center', gap: 6,
              padding: '4px 10px', borderRadius: DS.r.pill,
              background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)',
              border: `0.5px solid ${hexA(s.colorAccent, 0.32)}`,
              fontFamily: DS.mono, fontSize: 8.5, color: s.colorAccent,
              letterSpacing: '0.12em', textTransform: 'uppercase',
            }}>
              <div style={{ width: 5, height: 5, borderRadius: '50%', background: s.colorAccent }} />
              Presented by {s.shortName}
            </div>
            {/* Play overlay */}
            <div style={{
              position: 'absolute', inset: 0, display: 'flex',
              alignItems: 'center', justifyContent: 'center',
            }}>
              <div style={{
                width: 56, height: 56, borderRadius: 28,
                background: 'rgba(255,255,255,0.18)', backdropFilter: 'blur(10px)',
                border: '0.5px solid rgba(255,255,255,0.3)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="22" height="22" viewBox="0 0 22 22">
                  <path d="M6 4l13 7-13 7z" fill="#fff"/>
                </svg>
              </div>
            </div>
            <div style={{
              position: 'absolute', left: 12, right: 12, bottom: 12,
              display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
            }}>
              <div style={{
                fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream,
                letterSpacing: '-0.005em', textShadow: '0 1px 4px rgba(0,0,0,0.6)',
              }}>Episode 4 · 22 min</div>
              <div style={{
                padding: '3px 8px', borderRadius: 4,
                fontFamily: DS.mono, fontSize: 9, color: WVU.cream,
                background: 'rgba(0,0,0,0.55)', letterSpacing: '0.08em',
              }}>NEW</div>
            </div>
          </div>
        </div>
      </MtnSection>

      {/* ─── BRAND TIE-INS ROW ─────────────────────── */}
      <MtnSection title="Use anywhere in the app" kicker={`${s.shortName} unlocks`}>
        <div style={{
          padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 1,
        }}>
          <SpRow icon="🎟" title="Free upgrade · Mountaineer Club" sub="Saturday vs Cincinnati" tag="REDEEM" tagColor={s.colorAccent} first />
          <SpRow icon="⛽" title={`$50 ${s.shortName} gas credit`} sub="Auto-applied · ends Nov 30" tag="CLAIMED" tagColor={WVU.creamDim} />
          <SpRow icon="🛍" title={`Mylan-aisle merch credit · $25`} sub="Heritage line · in-stock items" tag="ACTIVE" tagColor={WVU.gold} />
          <SpRow icon="★"  title="Double points · all of Saturday" sub={`${s.name} members only`} tag="LIVE" tagColor="#7FE09A" last />
        </div>
      </MtnSection>

      {/* ─── DISCLAIMER ─────────────────────────────── */}
      <div style={{
        margin: '20px 16px 0', padding: 12,
        background: 'rgba(245,236,217,0.025)',
        border: `0.5px solid ${WVU.line}`,
        borderRadius: DS.r.md,
        fontFamily: DS.sans, fontSize: 10, color: WVU.creamDim,
        lineHeight: 1.5, letterSpacing: 0,
      }}>
        <div style={{
          fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.creamDim, letterSpacing: '0.12em', marginBottom: 5, textTransform: 'uppercase',
        }}>Sponsorship disclosure</div>
        Mountaineer 360° earns revenue from sponsor placements. Offers are
        co-curated with athletics; tickets and credits are real and tracked
        through the same Spine that powers your account. We will never sell
        your data.
      </div>

      {/* ─── CONTINUE BUTTON ────────────────────────── */}
      <div style={{ padding: '20px 16px 0' }}>
        <MtnButton variant="primary" full size="lg" onClick={onContinue}>
          Continue to your fan home →
        </MtnButton>
      </div>
    </div>
  );
}

function SpRow({ icon, title, sub, tag, tagColor, first, last }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '13px 14px',
      background: WVU.ink2,
      border: `0.5px solid ${WVU.line}`,
      borderTopLeftRadius: first ? DS.r.lg : 0,
      borderTopRightRadius: first ? DS.r.lg : 0,
      borderBottomLeftRadius: last ? DS.r.lg : 0,
      borderBottomRightRadius: last ? DS.r.lg : 0,
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: DS.r.sm,
        background: 'rgba(245,236,217,0.06)',
        border: `0.5px solid ${WVU.line}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 14, flexShrink: 0,
      }}>{icon}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: DS.sans, fontSize: 12, fontWeight: 700, color: WVU.cream,
          letterSpacing: '-0.005em', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>{title}</div>
        <div style={{ fontFamily: DS.sans, fontSize: 10, color: WVU.creamDim, marginTop: 2 }}>
          {sub}
        </div>
      </div>
      <div style={{
        fontFamily: DS.mono, fontSize: 8.5, color: tagColor,
        letterSpacing: '0.1em', padding: '3px 7px', borderRadius: 3,
        background: hexA(tagColor, 0.10),
        border: `0.5px solid ${hexA(tagColor, 0.32)}`,
        whiteSpace: 'nowrap',
      }}>{tag}</div>
    </div>
  );
}

Object.assign(window, { ScreenSponsor });