// screens-home.jsx — Personalized Home (Derek-first, cross-sport)
// The Digital Spine made visible *through behavior* — every block keys off
// Derek's history, seats, athletes followed, last merch, etc.

function ScreenHome({ onOpenGame, onOpenSport, onOpenCommerce, onOpenNIL, onOpenTickets, onOpenMerch, onOpenMe }) {
  const nil = NIL_ATHLETES[0];
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'auto',
      background: WVU.ink, color: WVU.cream,
      paddingBottom: 120,
    }} className="mtn-scrollbar">
      {/* ─── GREETING HERO ─────────────────────────── */}
      <div style={{
        position: 'relative',
        background: `
          radial-gradient(ellipse 90% 60% at 80% 0%, ${WVU.gold}22, transparent 60%),
          radial-gradient(ellipse 70% 50% at 10% 40%, ${WVU.blueDim}bb, transparent 70%),
          linear-gradient(180deg, #1c180f 0%, ${WVU.ink} 100%)
        `,
        padding: '112px 20px 22px',
      }}>
        <div style={{
          fontFamily: DS.sans, fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: WVU.gold, textTransform: 'uppercase', marginBottom: 8,
        }}>Saturday Morning · Morgantown 52°</div>
        <div style={{
          fontFamily: DS.display, fontSize: 30, fontWeight: 800,
          letterSpacing: '-0.03em', lineHeight: 1.02, color: WVU.cream,
        }}>
          Good morning,<br/>
          <span style={{ color: WVU.gold }}>{DEREK.firstName}.</span>
        </div>
        <div style={{
          fontFamily: DS.sans, fontSize: 13, color: WVU.creamDim,
          marginTop: 10, letterSpacing: '-0.005em',
        }}>
          You're {NEXT_MOMENT.daysOut} days from kickoff. Six other Mountaineer teams are in action this week.
        </div>
      </div>

      {/* ─── YOUR NEXT MOMENT ─ big hero card ───────── */}
      <div style={{ padding: '4px 16px 0' }}>
        <div onClick={onOpenTickets} style={{
          position: 'relative', borderRadius: DS.r.xl, overflow: 'hidden',
          border: `0.5px solid ${WVU.lineWarm}`,
          cursor: 'pointer',
          boxShadow: WVU.sh2,
        }}>
          <WarmHero
            h={250}
            variant="dusk"
            photo={
              WVU.id === 'osu'  ? 'mountaineer/assets/home-osu-psu.png' :
              WVU.id === 'utah' ? 'mountaineer/assets/home-utah-next.png' :
              WVU.id === 'wvu'  ? 'mountaineer/assets/home-wvu-next.png' :
              undefined
            }
          />
          {/* kicker */}
          <div style={{
            position: 'absolute', top: 16, left: 16, right: 16,
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
          }}>
            <div style={{
              fontFamily: DS.mono, fontSize: 9, letterSpacing: '0.14em',
              color: WVU.gold, textTransform: 'uppercase',
              padding: '4px 9px', borderRadius: 4,
              background: 'rgba(0,0,0,0.38)', backdropFilter: 'blur(10px)',
            }}>
              ★ YOUR NEXT MOMENT
            </div>
            <div style={{
              fontFamily: DS.sans, fontSize: 11, color: WVU.cream, fontWeight: 600,
              padding: '4px 9px', borderRadius: 4,
              background: 'rgba(0,0,0,0.38)', backdropFilter: 'blur(10px)',
            }}>
              {NEXT_MOMENT.weather.temp}° · {NEXT_MOMENT.weather.cond}
            </div>
          </div>
          {/* content */}
          <div style={{
            position: 'absolute', left: 0, right: 0, bottom: 0,
            padding: '24px 20px 20px',
          }}>
            <div style={{
              fontFamily: DS.display, fontSize: 26, fontWeight: 800,
              letterSpacing: '-0.025em', lineHeight: 1.05, color: WVU.cream,
              marginBottom: 6,
            }}>
              {NEXT_MOMENT.matchup}
            </div>
            <div style={{
              fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim,
              letterSpacing: '0', marginBottom: 14, lineHeight: 1.4,
            }}>
              {NEXT_MOMENT.date} · {NEXT_MOMENT.kickoff}<br/>{NEXT_MOMENT.venue}
            </div>

            {/* Seat + parking quick row */}
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <div style={{
                padding: '6px 10px', borderRadius: DS.r.sm,
                background: 'rgba(234,170,0,0.14)', border: `0.5px solid ${WVU.gold}50`,
                fontFamily: DS.sans, fontSize: 11, fontWeight: 700, color: WVU.gold,
              }}>SEC {NEXT_MOMENT.tix.section} · ROW {NEXT_MOMENT.tix.row}</div>
              <div style={{
                padding: '6px 10px', borderRadius: DS.r.sm,
                background: 'rgba(245,236,217,0.07)', border: `0.5px solid ${WVU.lineBold}`,
                fontFamily: DS.sans, fontSize: 11, fontWeight: 600, color: WVU.cream,
              }}>{NEXT_MOMENT.parking.lot}</div>
              <div style={{
                padding: '6px 10px', borderRadius: DS.r.sm,
                background: 'rgba(245,236,217,0.07)', border: `0.5px solid ${WVU.lineBold}`,
                fontFamily: DS.sans, fontSize: 11, fontWeight: 600, color: WVU.cream,
              }}>TAILGATE · RSVP {NEXT_MOMENT.tailgate.rsvp}</div>
            </div>
          </div>
        </div>
      </div>

      {/* ─── LIVE NOW (this week: a game is live) ───── */}
      <div style={{ padding: '16px 16px 0' }}>
        <div onClick={onOpenGame} style={{
          display: 'flex', alignItems: 'center', gap: 14,
          padding: 14,
          background: 'linear-gradient(90deg, rgba(234,170,0,0.08), rgba(20,17,12,0.8) 70%)',
          border: `0.5px solid ${WVU.gold}44`,
          borderRadius: DS.r.lg,
          cursor: 'pointer',
        }}>
          <div style={{
            width: 108, height: 60, borderRadius: DS.r.md,
            background: '#0e0c06',
            position: 'relative', flexShrink: 0, overflow: 'hidden',
          }}>
            <img
              src="mountaineer/assets/matchup-ksu.png"
              alt="WVU vs Kansas State"
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover', objectPosition: 'center',
              }}
            />
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.55) 100%)',
            }} />
            <div style={{
              position: 'absolute', top: 6, left: 6,
              fontFamily: DS.sans, fontSize: 8, fontWeight: 700,
              color: WVU.cream, letterSpacing: '0.12em',
              padding: '2px 5px', borderRadius: 3, background: 'rgba(0,0,0,0.6)',
            }}>● LIVE</div>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: DS.sans, fontSize: 13, fontWeight: 700,
              color: WVU.cream, marginBottom: 2,
            }}>
              WVU vs Kansas State
            </div>
            <div style={{
              fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim,
            }}>
              {LIVE_GAME.clock} · WVU {LIVE_GAME.score.us}–{LIVE_GAME.score.them}
            </div>
            <div style={{ marginTop: 5 }}>
              <Whisper>Because you were at the last one</Whisper>
            </div>
          </div>
          <svg width="10" height="16" viewBox="0 0 8 14" style={{ flexShrink: 0, marginRight: 4 }}>
            <path d="M1 1l6 6-6 6" stroke={WVU.creamDim} strokeWidth="1.8" fill="none" strokeLinecap="round"/>
          </svg>
        </div>
      </div>

      {/* ─── YOUR ATHLETE (NIL focus) ───────────────── */}
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{
          fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', textTransform: 'uppercase', marginBottom: 8, paddingLeft: 2,
        }}>Your Athlete · Gold Tier Supporter</div>

        <div onClick={onOpenNIL} style={{
          display: 'flex', gap: 12,
          background: WVU.ink2, borderRadius: DS.r.lg,
          border: `0.5px solid ${WVU.line}`, padding: 12,
          cursor: 'pointer',
        }}>
          <div style={{
            width: 76, height: 92, borderRadius: DS.r.md, overflow: 'hidden', flexShrink: 0,
            position: 'relative', background: '#0e0c06',
          }}>
            <img
              src="mountaineer/assets/briscoe.png"
              alt={nil.name}
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover', objectPosition: '30% 25%',
              }}
            />
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, rgba(0,0,0,0.0) 45%, rgba(0,0,0,0.65) 100%)',
            }} />
            <div style={{
              position: 'absolute', bottom: 6, left: 6, right: 6,
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
            }}>
              <div style={{
                fontFamily: DS.display, fontSize: 22, fontWeight: 900,
                color: WVU.cream, lineHeight: 1, textShadow: '0 2px 6px rgba(0,0,0,0.7)',
              }}>#{nil.num}</div>
              <div style={{
                fontFamily: DS.mono, fontSize: 8, color: WVU.cream,
                letterSpacing: '0.1em', opacity: 0.9,
                textShadow: '0 1px 3px rgba(0,0,0,0.7)',
              }}>{nil.pos}</div>
            </div>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: DS.sans, fontSize: 14, fontWeight: 700,
              color: WVU.cream, letterSpacing: '-0.01em',
            }}>{nil.name}</div>
            <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 2 }}>
              {nil.tagline}
            </div>

            <div style={{ display: 'flex', gap: 14, marginTop: 10 }}>
              <Stat n={nil.season.yds.toLocaleString()} l="SEASON YDS" />
              <Stat n={nil.season.td} l="TD" />
              <Stat n={nil.season.rtg} l="RTG" />
            </div>

            <div style={{ marginTop: 12, display: 'flex', gap: 6 }}>
              <MtnButton size="sm" variant="primary" style={{ flex: 1 }} onClick={(e) => { e.stopPropagation(); onOpenNIL(); }}>
                Tip
              </MtnButton>
              <MtnButton size="sm" variant="ghost" style={{ flex: 1 }} onClick={(e) => { e.stopPropagation(); onOpenNIL(); }}>
                Shop #7
              </MtnButton>
            </div>
          </div>
        </div>
      </div>

      {/* ─── CONTINUE WATCHING ──────────────────────── */}
      <div style={{ marginTop: 22 }}>
        <MtnSection title="Where you left off" kicker="Continue watching">
          <div style={{
            display: 'flex', gap: 10, overflowX: 'auto', padding: '0 16px 4px',
          }} className="mtn-scrollbar">
            {CONTINUE.map(item => (
              <ContinueCard key={item.id} item={item} />
            ))}
          </div>
        </MtnSection>
      </div>

      {/* ─── FOR YOU (cross-sport, behavior-driven) ─── */}
      <MtnSection title="Made for you" kicker="Because of what you watch, attend, and follow" more>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto', padding: '0 16px 4px' }} className="mtn-scrollbar">
          {FOR_YOU.map(item => (
            <ForYouCard key={item.id} item={item} />
          ))}
        </div>
      </MtnSection>

      {/* ─── REWARDS POINT BAR ───────────────────── */}
      <div style={{ padding: '0 16px', marginBottom: 20 }}>
        <div style={{
          background: 'linear-gradient(90deg, rgba(234,170,0,0.14), rgba(0,40,85,0.2))',
          border: `0.5px solid ${WVU.gold}44`,
          borderRadius: DS.r.lg, padding: 14,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
            <div>
              <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', textTransform: 'uppercase' }}>
                GOLD MEMBER · {DEREK.points.toLocaleString()} PTS
              </div>
              <div style={{ fontFamily: DS.sans, fontSize: 12, color: WVU.cream, marginTop: 3 }}>
                {DEREK.pointsToNext.toLocaleString()} to Platinum
              </div>
            </div>
            <MtnButton size="sm" variant="ghost" onClick={onOpenMe}>
              Rewards →
            </MtnButton>
          </div>
          <div style={{ height: 4, background: 'rgba(245,236,217,0.1)', borderRadius: 2, overflow: 'hidden' }}>
            <div style={{
              width: `${(DEREK.points / 20000) * 100}%`, height: '100%',
              background: `linear-gradient(90deg, ${WVU.goldDim}, ${WVU.gold})`,
            }} />
          </div>
        </div>
      </div>

      {/* ─── THIS WEEK IN GOLD (cross-sport) ────────── */}
      <MtnSection title="This week in Gold & Blue" kicker="Your favorites, everywhere" more>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 1, padding: '0 16px' }}>
          {SPORTS.filter(s => DEREK.favoriteSports.includes(s.id)).slice(0, 4).map((s, i) => (
            <SportRow key={s.id} sport={s} onClick={() => onOpenSport(s.id)} first={i === 0} last={i === 3} />
          ))}
        </div>
      </MtnSection>

      {/* ─── COMMERCE TEASER ────────────────────────── */}
      <div style={{ padding: '0 16px', marginBottom: 20 }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
        }}>
          <div onClick={onOpenMerch} style={{
            background: `linear-gradient(145deg, ${WVU.ink2}, ${WVU.ink3})`,
            border: `0.5px solid ${WVU.line}`, borderRadius: DS.r.lg,
            padding: 14, cursor: 'pointer', position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: 0, right: 0, width: 80, height: 80,
              background: `radial-gradient(circle, ${WVU.gold}33, transparent 70%)`,
              pointerEvents: 'none',
            }} />
            <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase' }}>SAT DROP</div>
            <div style={{ fontFamily: DS.sans, fontSize: 14, fontWeight: 700, color: WVU.cream, marginTop: 6, lineHeight: 1.2 }}>
              Cinci Game Day Tee
            </div>
            <div style={{ fontFamily: DS.sans, fontSize: 10, color: WVU.creamDim, marginTop: 3 }}>
              Your size · $38
            </div>
          </div>
          <div onClick={onOpenTickets} style={{
            background: `linear-gradient(145deg, ${WVU.blue}55, ${WVU.ink3})`,
            border: `0.5px solid ${WVU.blueLite}44`, borderRadius: DS.r.lg,
            padding: 14, cursor: 'pointer', position: 'relative',
          }}>
            <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.goldLite, letterSpacing: '0.12em', textTransform: 'uppercase' }}>YOUR SEATS</div>
            <div style={{ fontFamily: DS.sans, fontSize: 14, fontWeight: 700, color: WVU.cream, marginTop: 6, lineHeight: 1.2 }}>
              Club upgrade · $65
            </div>
            <div style={{ fontFamily: DS.sans, fontSize: 10, color: WVU.creamDim, marginTop: 3 }}>
              One-game try, Saturday
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div style={{
        fontFamily: DS.sans, fontSize: 14, fontWeight: 800,
        letterSpacing: '-0.02em', color: WVU.cream,
        fontVariantNumeric: 'tabular-nums',
      }}>{n}</div>
      <div style={{
        fontFamily: DS.mono, fontSize: 8, color: WVU.creamDim,
        letterSpacing: '0.1em', marginTop: 1,
      }}>{l}</div>
    </div>
  );
}

function ContinueCard({ item }) {
  return (
    <div style={{
      width: 240, flexShrink: 0, scrollSnapAlign: 'start',
      borderRadius: DS.r.md, overflow: 'hidden', border: `0.5px solid ${WVU.line}`,
      cursor: 'pointer',
    }}>
      <div style={{ position: 'relative' }}>
        <WarmHero h={130} variant={item.variant} caption={item.k.toUpperCase()} />
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, height: 3,
          background: 'rgba(245,236,217,0.18)',
        }}>
          <div style={{ width: `${item.progress * 100}%`, height: '100%', background: WVU.gold }}/>
        </div>
        <div style={{
          position: 'absolute', top: 10, right: 10,
          padding: '3px 7px', borderRadius: 3,
          background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)',
          fontFamily: DS.mono, fontSize: 9, color: WVU.cream, letterSpacing: '0.08em',
        }}>{Math.round(item.progress * 100)}%</div>
      </div>
      <div style={{ padding: 10, background: WVU.ink2 }}>
        <div style={{
          fontFamily: DS.sans, fontSize: 12, fontWeight: 700, color: WVU.cream,
          letterSpacing: '-0.01em', lineHeight: 1.25,
          overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
        }}>{item.head}</div>
        <div style={{ fontFamily: DS.mono, fontSize: 9, color: WVU.creamDim, letterSpacing: '0.08em', marginTop: 4 }}>
          {item.ep && `${item.ep} · `}{item.dur} left
        </div>
      </div>
    </div>
  );
}

function ForYouCard({ item }) {
  return (
    <div style={{
      width: 200, flexShrink: 0, scrollSnapAlign: 'start', cursor: 'pointer',
    }}>
      <div style={{ position: 'relative', borderRadius: DS.r.md, overflow: 'hidden', border: `0.5px solid ${WVU.line}` }}>
        <WarmHero h={260} variant={item.variant} caption={item.k.toUpperCase()} />
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0,
          padding: '12px 12px 12px',
          background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.8))',
        }}>
          <div style={{
            fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream,
            letterSpacing: '-0.01em', lineHeight: 1.2,
            overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
          }}>{item.head}</div>
        </div>
      </div>
      <div style={{ marginTop: 6, paddingLeft: 2 }}>
        <Whisper>{item.sub}</Whisper>
      </div>
    </div>
  );
}

function SportRow({ sport, onClick, first, last }) {
  return (
    <div onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '14px 14px', cursor: 'pointer',
      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,
      borderTop: first ? `0.5px solid ${WVU.line}` : 'none',
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: DS.r.sm,
        background: sport.status === 'IN_SEASON' ? `linear-gradient(135deg, ${WVU.goldDim}, ${WVU.gold})` : WVU.ink3,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: DS.sans, fontWeight: 800, fontSize: 13,
        color: sport.status === 'IN_SEASON' ? WVU.blueDim : WVU.creamDim,
        flexShrink: 0, letterSpacing: '0.02em',
      }}>{sport.short}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
          <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream, letterSpacing: '-0.01em' }}>
            {sport.name}
          </div>
          {sport.rank && (
            <div style={{
              fontFamily: DS.mono, fontSize: 9, fontWeight: 700, color: WVU.gold,
              letterSpacing: '0.08em',
            }}>{sport.rank}</div>
          )}
          {sport.record !== '—' && (
            <div style={{
              fontFamily: DS.mono, fontSize: 9, color: WVU.creamDim, letterSpacing: '0.08em',
            }}>{sport.record}</div>
          )}
        </div>
        <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 2 }}>
          {sport.next}
        </div>
      </div>
      <svg width="8" height="14" viewBox="0 0 8 14" style={{ flexShrink: 0, opacity: 0.5 }}>
        <path d="M1 1l6 6-6 6" stroke={WVU.cream} strokeWidth="1.6" fill="none" strokeLinecap="round"/>
      </svg>
    </div>
  );
}

Object.assign(window, { ScreenHome });