// Profile Select — "Who's Watching?" — chunky cartoon cards that bounce on hover.

function ProfileSelect({ onPick, replayIntro, cardStyle = "chunky", promptCopy = "watching" }) {
  const sections = window.SECTIONS;
  const [hovered, setHovered] = React.useState(null);
  const [mem, setMem] = React.useState(() => window.bnsLoadMemory());
  const visited = mem.visited || {};
  const lastId = mem.last;

  const handlePick = (id, e) => {
    // confetti at click location (theme-aware)
    const r = e?.currentTarget?.getBoundingClientRect();
    const isManga = document.body.classList.contains('theme-manga');
    const palette = isManga ? ['#0a0908', '#0a0908', '#2a2724', '#3a3631', '#0a0908'] : undefined;
    if (r) window.confettiBurst(r.left + r.width/2, r.top + r.height/2, palette);
    setMem(window.bnsMarkVisited(id));
    onPick(id);
  };

  return (
    <div className="ps-stage stage fade-enter">
      {/* top bar */}
      <header className="ps-top">
        <div className="ps-brand">
          <Wordmark size={56} color="var(--c-about)" />
          <div className="ps-brand-meta">
            <div className="ps-brand-title">Batsal Nath Shrestha</div>
            <div className="ps-brand-sub">Originals · 2026 · Performance × Design</div>
          </div>
        </div>
        <nav className="ps-nav">
          <ThemeToggle inline />
        </nav>
      </header>

      {/* center: prompt + grid */}
      <div className="ps-center">
        <div className="ps-eyebrow">CHOOSE YOUR ADVENTURE</div>
        <h1 className="ps-prompt">
          Who's <span className="ps-prompt-accent">{promptCopy}</span><span className="ps-prompt-q">?</span>
        </h1>
        <p className="ps-sub">Pick a profile to dive into. Each one is a different show about my career — same protagonist, different genre.</p>

        <div className={`ps-grid ps-grid--${cardStyle}`}>
          {sections.map((s, i) => (
            <ProfileCard
              key={s.id}
              section={s}
              index={i}
              hovered={hovered === s.id}
              progress={visited[s.id]?.progress || 0}
              onHover={(h) => setHovered(h ? s.id : null)}
              onPick={(e) => handlePick(s.id, e)}
              style={cardStyle}
            />
          ))}
        </div>

        {lastId && (
          <div className="ps-continue">
            <span className="ps-continue-eyebrow"><IconReplay size={12}/> Continue Watching</span>
            <button className="ps-continue-btn" onClick={(e) => handlePick(lastId, e)}>
              <IconPlay size={11}/>
              <span className="ps-continue-name">{sections.find(s => s.id === lastId)?.name}</span>
              <span className="ps-continue-tag">Resume EP {String(sections.find(s => s.id === lastId)?.episodeNum || 1).padStart(2,'0')}</span>
            </button>
          </div>
        )}
      </div>

      {/* bottom: status + branding */}
      <footer className="ps-bottom">
        <div className="ps-foot-now">
          <span className="ps-foot-dot"/> Available May 2026
        </div>
        <div className="ps-foot-mid">© BNS · 2026 Originals</div>
        <div className="ps-foot-hint">
          <span>Press</span>
          <kbd className="ps-foot-kbd">⌘K</kbd>
          <span>to search</span>
        </div>
      </footer>

      <style>{`
        .ps-stage{
          display:flex; flex-direction:column; padding:28px 36px;
          background:
            radial-gradient(800px 500px at 50% 80%, rgba(34,211,238,.08), transparent 70%),
            radial-gradient(700px 400px at 20% 20%, rgba(255,77,141,.07), transparent 70%),
            #04061a;
          min-height:100vh;
          min-height:100dvh;
          overflow-y:auto;
          overflow-x:hidden;
          -webkit-overflow-scrolling:touch;
          overscroll-behavior-y:contain;
        }
        .ps-top{
          display:flex; justify-content:space-between; align-items:center;
        }
        .ps-brand{ display:flex; align-items:center; gap:16px; }
        .ps-brand-meta{ line-height:1.2; }
        .ps-brand-title{ font:700 14px/1.2 var(--body); letter-spacing:-.01em; }
        .ps-brand-sub{ font:500 11px/1 var(--mono); letter-spacing:.12em; color:var(--paper-faint); margin-top:4px; text-transform:uppercase; white-space:nowrap; }

        .ps-nav{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
        .ps-replay{
          display:flex; align-items:center; gap:6px; white-space:nowrap;
          font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
          color:var(--paper-dim); padding:8px 14px; border:1px solid var(--line);
          border-radius:99px;
        }
        .ps-replay:hover{ color:var(--paper); border-color:var(--paper-dim); }

        .ps-search{
          display:flex; align-items:center; gap:8px;
          padding: 8px 8px 8px 14px; border-radius: 99px;
          border:1px solid var(--line); background: rgba(244,241,232,.04);
          transition: all .2s ease;
        }
        .ps-search:hover{ border-color: var(--c-about); background: rgba(79,142,255,.08); }
        .ps-search > svg{ color: var(--c-about); }
        .ps-search-text{ font:600 12px/1 var(--body); color: var(--paper-dim); }
        .ps-search-kbd{
          font:700 10px/1 var(--mono); padding:4px 7px; border-radius:5px;
          background: rgba(244,241,232,.08); color: var(--paper);
          border:1px solid var(--line);
        }

        .ps-center{
          flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
          text-align:center; padding: 0 16px;
        }
        .ps-eyebrow{
          font:600 11px/1 var(--mono); letter-spacing:.4em; color:var(--c-skills); margin-bottom:18px;
          animation: fade .5s ease both;
        }
        .ps-prompt{
          font:400 clamp(64px, 9vw, 132px)/0.95 var(--display); margin:0; letter-spacing:-.01em;
          animation: dropIn .7s cubic-bezier(.3,1.4,.3,1) .1s both;
          text-shadow: 4px 5px 0 #000;
        }
        .ps-prompt-accent{ color:var(--c-about); }
        .ps-prompt-q{ color:var(--c-skills); display:inline-block; transform: rotate(8deg) translateY(-.08em); }
        @keyframes dropIn { from { opacity:0; transform: translateY(-30px) scale(.95); } to { opacity:1; transform: none; } }

        .ps-sub{
          max-width:560px; font:500 15px/1.5 var(--body); color:var(--paper-dim); margin:18px 0 44px;
          animation: fade .6s ease .35s both;
        }

        .ps-grid{
          display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap:24px;
          width:100%; max-width:1280px;
        }
        @media (max-width: 1180px){ .ps-grid{ grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 540px){ .ps-grid{ grid-template-columns: repeat(2, 1fr); } }

        .ps-bottom{
          display:flex; align-items:center; justify-content:space-between;
          padding-top:32px;
        }
        .ps-foot-btn{
          display:flex; align-items:center; gap:10px;
          font:600 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
          color:var(--paper-dim); padding:10px 18px; border:1px solid var(--line); border-radius:99px;
          transition: all .2s ease;
        }
        .ps-foot-btn:hover{ color:var(--paper); border-color:var(--c-about); }
        .ps-foot-mid{ font:500 11px/1 var(--mono); color:var(--paper-faint); letter-spacing:.12em; text-transform:uppercase; }
        .ps-foot-hint{
          display:flex; align-items:center; gap:7px;
          font:500 11px/1 var(--mono); color:var(--paper-faint); letter-spacing:.06em;
        }
        .ps-foot-kbd{
          display:inline-flex; align-items:center; justify-content:center;
          padding:4px 7px; border-radius:5px;
          background: rgba(244,241,232,.08); color: var(--paper-dim);
          border:1px solid var(--line);
          font:700 10px/1 var(--mono); letter-spacing:.04em;
        }
        .ps-foot-now{
          font:600 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
          color:var(--paper-dim); display:flex; align-items:center; gap:8px;
        }
        .ps-foot-dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 10px #22c55e; animation: pulse 1.6s ease-in-out infinite; }

        @keyframes fade { from { opacity:0; } to { opacity:1; } }

        /* Continue watching */
        .ps-continue{
          margin-top: 40px;
          display:inline-flex; align-items:center; gap:14px;
          padding: 12px 14px 12px 18px; border-radius: 99px;
          border: 1px solid var(--line); background: rgba(244,241,232,.04);
          backdrop-filter: blur(4px);
          animation: fade .5s ease .8s both;
        }
        .ps-continue-eyebrow{
          display:inline-flex; align-items:center; gap:6px;
          font: 600 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
          color: var(--paper-dim);
        }
        .ps-continue-btn{
          display:inline-flex; align-items:center; gap:10px;
          padding: 8px 14px; border-radius: 99px;
          background: var(--paper); color: #04061a;
          font: 600 12px/1 var(--body); letter-spacing:.02em;
          box-shadow: 3px 3px 0 var(--c-about);
          transition: transform .15s ease;
        }
        .ps-continue-btn:hover{ transform: translate(-1px,-1px); }
        .ps-continue-name{ font-weight: 700; }
        .ps-continue-tag{
          font: 600 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
          padding: 4px 8px; border-radius: 99px; background:#04061a; color:#fff;
        }

        @media (max-width: 720px){
          .ps-stage{ padding:18px 16px calc(104px + env(safe-area-inset-bottom)); }
          .ps-top{ align-items:flex-start; gap:12px; }
          .ps-brand{ gap:10px; min-width:0; }
          .ps-brand .bns-mark{ font-size:44px; text-shadow:3px 3px 0 #000; }
          .ps-brand-meta{ min-width:0; padding-top:4px; }
          .ps-brand-title{
            font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
            max-width:calc(100vw - 148px);
          }
          .ps-brand-sub{ display:none; }
          .ps-nav{ gap:8px; }
          .ps-center{ padding:24px 0 0; justify-content:flex-start; }
          .ps-eyebrow{ font-size:10px; letter-spacing:.24em; margin-bottom:12px; }
          .ps-prompt{
            font-size:clamp(50px, 15vw, 64px);
            line-height:.92;
            max-width:100%;
          }
          .ps-sub{ margin:12px 0 28px; font-size:13px; max-width:320px; }
          .ps-grid{ gap:22px 18px; }
          .ps-continue{
            width:100%;
            margin-top:32px;
            flex-direction:column;
            align-items:stretch;
            border-radius:18px;
            padding:14px;
          }
          .ps-continue-btn{ justify-content:center; min-height:44px; }
          .ps-bottom{ display:none; }
        }
        @media (max-width: 380px){
          .ps-stage{ padding-left:12px; padding-right:12px; }
          .ps-grid{ gap:20px 14px; }
        }
      `}</style>
    </div>
  );
}

function ProfileCard({ section, index, hovered, onHover, onPick, style, progress = 0 }) {
  const delay = 0.4 + index * 0.07;
  const cardRef = React.useRef(null);
  const [hoverFor, setHoverFor] = React.useState(0);
  const trailerTimerRef = React.useRef(null);
  const [showTrailer, setShowTrailer] = React.useState(false);

  // 3D tilt
  const onMove = (e) => {
    const el = cardRef.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width;   // 0..1
    const y = (e.clientY - r.top) / r.height;
    const rx = (0.5 - y) * 14;   // tilt up when cursor at top
    const ry = (x - 0.5) * 14;
    el.style.setProperty('--rx', `${rx}deg`);
    el.style.setProperty('--ry', `${ry}deg`);
    el.style.setProperty('--shine-x', `${x * 100}%`);
    el.style.setProperty('--shine-y', `${y * 100}%`);
  };
  const onLeave = () => {
    const el = cardRef.current; if (el) {
      el.style.setProperty('--rx', `0deg`);
      el.style.setProperty('--ry', `0deg`);
    }
    onHover(false);
    if (trailerTimerRef.current) { clearTimeout(trailerTimerRef.current); trailerTimerRef.current = null; }
    setShowTrailer(false);
  };
  const onEnter = () => {
    onHover(true);
    // schedule trailer reveal after 1.1s of sustained hover
    trailerTimerRef.current = setTimeout(() => setShowTrailer(true), 1100);
  };

  return (
    <button
      className={`pc pc--${style} ${hovered ? "is-hover" : ""} ${showTrailer ? "is-trailer" : ""}`}
      style={{ ['--c']: section.colorHex, animationDelay: `${delay}s` }}
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
      onMouseMove={onMove}
      onClick={(e) => onPick(e)}
      aria-label={`Open ${section.name}`}
    >
      <div className="pc-card" ref={cardRef}>
        <Avatar seed={section.avatarSeed} color={section.colorHex} size={220} interactive defaultExpression={section.defaultExpression} />
        {/* glossy shine that follows cursor */}
        <div className="pc-shine"/>
        {/* hover halo */}
        <div className="pc-halo"/>
        {/* corner play marker */}
        <div className="pc-play">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="#04061a"><path d="M8 5v14l11-7z"/></svg>
        </div>
        {/* episode pip on left, status on right */}
        <div className="pc-ep">EP {String(section.episodeNum || index+1).padStart(2,'0')}</div>
        <div className="pc-chapter">第{String(section.episodeNum || index+1).padStart(2,'0')}話</div>
        <div className={`pc-status ${progress >= 100 ? 'is-watched' : progress > 0 ? 'is-progress' : 'is-new'}`}>
          <span className="pc-status-jp" aria-hidden="true">{progress >= 100 ? '視聴済' : progress > 0 ? '視聴中' : '新着'}</span>
          <span className="pc-status-en">{progress >= 100 ? '✓ Watched' : progress > 0 ? 'In Progress' : 'New'}</span>
        </div>
        {/* trailer overlay */}
        {section.trailer && (
          <div className="pc-trailer">
            <div className="pc-trailer-bg"/>
            <div className="pc-trailer-inner">
              <div className="pc-trailer-cap">▶ PREVIEW</div>
              <ul className="pc-trailer-list">
                {section.trailer.map((t,i) => <li key={i} style={{animationDelay:`${0.1 + i*0.12}s`}}>{t}</li>)}
              </ul>
              <div className="pc-trailer-cta">Press to play →</div>
            </div>
          </div>
        )}
        {/* tag */}
        <div className="pc-tag">{section.role}</div>
      </div>
      <div className={`pc-progress ${progress > 0 && progress < 100 ? 'is-visible' : ''}`} aria-hidden="true">
        <div style={{ width: `${progress}%` }}/>
      </div>
      <div className="pc-meta">
        <div className="pc-name">{section.name}</div>
        <div className="pc-tagline">{section.tagline}</div>
      </div>

      <style>{`
        .pc{
          display:flex; flex-direction:column; align-items:center; gap:14px;
          opacity:0; transform: translateY(20px) scale(.96);
          animation: pcIn .5s cubic-bezier(.3,1.2,.3,1) both;
          transition: transform .25s cubic-bezier(.3,1.4,.3,1);
          perspective: 800px;
        }
        @keyframes pcIn { to { opacity:1; transform: none; } }

        .pc-card{
          position:relative; width:100%; aspect-ratio: 1/1; border-radius: 28px;
          transition: transform .3s cubic-bezier(.3,1.4,.3,1), filter .25s ease;
          transform-style: preserve-3d;
          transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
        }
        .pc-card > svg{ width:100% !important; height:100% !important; border-radius:28px; display:block;
          box-shadow: 0 8px 0 rgba(0,0,0,.35), 0 14px 30px rgba(0,0,0,.4); }

        .pc:hover .pc-card,
        .pc:focus-visible .pc-card{
          filter: brightness(1.08);
        }
        .pc:hover{ z-index:5; }
        .pc:focus-visible{ outline: none; }

        .pc-shine{
          position:absolute; inset:0; border-radius:28px; pointer-events:none; overflow:hidden;
          opacity:0; transition: opacity .2s ease;
          background: radial-gradient(circle 180px at var(--shine-x,50%) var(--shine-y,50%),
            rgba(255,255,255,.25), transparent 60%);
          mix-blend-mode: overlay;
        }
        .pc:hover .pc-shine{ opacity:1; }

        .pc-halo{
          position:absolute; inset:-14px; border-radius:34px;
          border: 4px solid var(--c); opacity:0;
          transition: opacity .2s ease, inset .25s cubic-bezier(.3,1.4,.3,1);
          pointer-events:none;
        }
        .pc:hover .pc-halo{ opacity:1; inset:-10px; }

        .pc-play{
          position:absolute; top:14px; left:14px; width:34px; height:34px; border-radius:50%;
          background:#fff; display:flex; align-items:center; justify-content:center;
          box-shadow: 3px 3px 0 #04061a;
          opacity:0; transform: scale(.6); transition: all .25s cubic-bezier(.3,1.4,.3,1);
        }
        .pc:hover .pc-play{ opacity:1; transform: scale(1) rotate(-8deg); }

        .pc-tag{
          position:absolute; bottom:-8px; left:50%; transform: translateX(-50%) rotate(-2deg);
          font:600 9px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
          padding:6px 10px; border-radius:6px; background:#04061a; color:var(--c);
          border:1px solid var(--c);
          white-space:nowrap;
          opacity:0; transition: all .25s cubic-bezier(.3,1.4,.3,1);
        }
        .pc:hover .pc-tag{ opacity:1; transform: translateX(-50%) translateY(8px) rotate(-2deg); }

        .pc-status{
          position:absolute; top:14px; right:14px; max-width:calc(100% - 64px);
          white-space:nowrap; overflow:hidden; text-overflow:clip;
          font: 700 9px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
          padding: 5px 7px; border-radius: 6px;
          background: rgba(4,6,26,.55); color: var(--paper);
          backdrop-filter: blur(4px);
          border: 1px solid var(--line);
          opacity: 0;
          transition: opacity .2s ease;
        }
        .pc:hover .pc-status,
        .pc-status.is-watched,
        .pc-status.is-progress{ opacity: 1; }
        .pc-status.is-watched{
          background: #04061a; color: var(--c); border-color: var(--c);
        }
        .pc-status.is-progress{
          background: var(--c); color: #04061a; border-color: var(--c);
        }
        .pc-status.is-new{
          background: rgba(4,6,26,.55); color: var(--c); border-color: var(--c);
        }
        /* Cinema shows the English label only; Japanese is a Manga-mode treatment */
        .pc-status-jp{ display:none; }
        .pc-ep{
          position:absolute; top:14px; left:14px; white-space:nowrap;
          font: 700 9px/1 var(--mono); letter-spacing:.12em;
          padding: 5px 7px; border-radius: 6px;
          background: rgba(4,6,26,.55); color: #fff;
          backdrop-filter: blur(4px);
          opacity:.85;
        }
        .pc-progress{
          width: 100%;
          height: 3px; background: rgba(244,241,232,.14); border-radius:99px; overflow:hidden;
          margin-top: 6px;
          opacity: 0;
        }
        .pc-progress.is-visible{ opacity: 1; }
        .pc-progress > div{
          height:100%; background: var(--c); border-radius:99px;
          transition: width .5s ease;
        }

        /* Trailer overlay — appears after 1.1s of hover */
        .pc-trailer{
          position:absolute; inset:0; border-radius:28px; pointer-events:none;
          opacity:0; transition: opacity .3s ease;
          overflow:hidden;
        }
        .pc.is-trailer .pc-trailer{ opacity:1; }
        .pc-trailer-bg{
          position:absolute; inset:0;
          background: linear-gradient(180deg, rgba(4,6,26,.1) 30%, rgba(4,6,26,.92) 100%);
        }
        .pc-trailer-inner{
          position:absolute; left:14px; right:14px; bottom:14px;
          display:flex; flex-direction:column; gap:6px;
        }
        .pc-trailer-cap{
          font: 700 9px/1 var(--mono); letter-spacing:.24em;
          color: var(--c); margin-bottom: 2px;
          animation: trailerIn .4s ease both;
        }
        .pc-trailer-list{
          list-style:none; padding:0; margin:0;
          display:flex; flex-direction:column; gap:3px;
        }
        .pc-trailer-list li{
          font: 600 11px/1.25 var(--body); color: #fff;
          opacity:0; transform: translateX(-10px);
          animation: trailerIn .35s cubic-bezier(.2,.9,.3,1) both;
          text-shadow: 0 1px 2px rgba(0,0,0,.6);
        }
        .pc-trailer-cta{
          font: 700 9px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
          color: var(--c); margin-top: 4px;
          animation: trailerIn .35s ease .5s both;
        }
        @keyframes trailerIn { from{ opacity:0; transform: translateX(-10px); } to{ opacity:1; transform: none; } }

        .pc-meta{ text-align:center; width:100%; align-self:stretch; box-sizing:border-box; }
        .pc-name{
          font:600 22px/1 var(--body); letter-spacing:-.01em; color:var(--paper);
          transition: color .2s ease;
        }
        .pc:hover .pc-name{ color: var(--c); }
        .pc-tagline{
          font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
          color:var(--paper-faint); margin-top:6px;
        }

        /* ─── Style: flat ─── */
        .pc--flat .pc-card > svg{ box-shadow: 0 8px 20px rgba(0,0,0,.4); }
        .pc--flat .pc-card{ border-radius: 16px; }

        /* ─── Style: poster (portrait, more cinematic) ─── */
        .pc--poster .pc-card{ aspect-ratio: 3/4; border-radius:14px; }
        .pc--poster .pc-card > svg{ border-radius:14px; }

        @media (max-width: 720px){
          .pc{ gap:10px; }
          .pc-card{ border-radius:22px; }
          .pc-card > svg{ border-radius:22px; box-shadow:0 6px 0 rgba(0,0,0,.35), 0 10px 20px rgba(0,0,0,.34); }
          .pc-ep,
          .pc-status{
            top:10px;
            font-size:8px;
            letter-spacing:.12em;
            padding:5px 7px;
          }
          .pc-ep{ left:10px; }
          .pc-status{ right:10px; }
          .pc-name{ font-size:clamp(18px, 5.4vw, 22px); line-height:1.05; }
          .pc-tagline{ font-size:9px; line-height:1.25; letter-spacing:.14em; }
        }

        @media (hover: none), (pointer: coarse){
          .pc-play,
          .pc-tag,
          .pc-shine,
          .pc-trailer{ display:none; }
          .pc-status.is-new{ opacity:1; }
          .pc-card{ transform:none !important; }
        }
      `}</style>
    </button>
  );
}

window.ProfileSelect = ProfileSelect;