// Permaban hero — intentionally chaotic, but contained.
const { useEffect, useState, useRef } = React;

function PermabanHero({ chaos, heroAccent }) {
  return (
    <section className="perma-hero" id="permaban" data-heroaccent={heroAccent||'vt323'}>
      <div className="crt-bg"></div>
      <div className="scanlines" style={{opacity: 0.04 + chaos*0.14}}></div>
      <FloatingWindows chaos={chaos} />

      <div className="wrap" style={{position:'relative', zIndex:5, padding:'80px 28px 60px'}}>
        <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:22,flexWrap:'wrap'}}>
          <span className="pill"><span className="dot"></span> NEW GAME · COMING SOON</span>
          <span className="pill" style={{color:'var(--accent)',borderColor:'rgba(225,29,29,0.4)'}}>Wishlist now</span>
          <span className="pill">Inspired by Papers, Please</span>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1.1fr 0.9fr',gap:48,alignItems:'center'}} className="hero-grid">
          <div>
            <h1 style={{margin:'0 0 20px',fontSize:'clamp(48px, 6.8vw, 92px)', lineHeight:0.98, letterSpacing:'-0.035em', fontWeight:500}}>
              Enforce <br/>the rules. <br/>
              <span className="serif" style={{fontStyle:'italic', color:'var(--accent)'}}>Survive</span> <br/>the forum.
            </h1>
            <p style={{fontSize:18, color:'var(--fg-dim)', maxWidth:540, lineHeight:1.55, margin:'0 0 32px'}}>
              <b style={{color:'var(--fg)'}}>Permaban</b> is a Papers Please-style forum moderation sim set in the Wild West of 2007 internet. Ban trolls, cite rules, survive your desktop.
            </p>
            <div className="hero-ctas" style={{display:'flex',gap:12,flexWrap:'wrap'}}>
              <a href={PERMABAN.steam} target="_blank" className="btn primary lg">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/></svg>
                Wishlist on Steam
              </a>
              <a href={PERMABAN.itch} target="_blank" className="btn lg">
                Play in browser on itch.io ↗
              </a>
            </div>

            <div className="hero-specs" style={{marginTop:36,display:'flex',gap:24,flexWrap:'wrap',color:'var(--fg-mute)',fontFamily:'JetBrains Mono, monospace',fontSize:12}}>
              <div><span style={{color:'var(--fg-dim)'}}>genre</span> · casual · indie · sim</div>
              <div><span style={{color:'var(--fg-dim)'}}>setting</span> · 2007 internet</div>
              <div><span style={{color:'var(--fg-dim)'}}>platforms</span> · steam · itch (web)</div>
              <div><span style={{color:'var(--fg-dim)'}}>dev</span> · unrealbyte</div>
            </div>
          </div>

          <div style={{position:'relative'}}>
            <div style={{
              position:'relative',
              borderRadius:14,
              overflow:'hidden',
              border:'1px solid var(--line)',
              boxShadow:'0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(225,29,29,0.15)'
            }}>
              <img src="assets/permaban_capsule.png" alt="Permaban — Papers Please-style forum moderation sim, key art" width="640" height="360" loading="eager" fetchpriority="high" decoding="async" style={{width:'100%',height:'auto',display:'block'}} />
              <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,transparent 50%, rgba(11,11,13,0.5))'}}></div>
            </div>
          </div>
        </div>
      </div>

      {/* Feature strip instead of nonsense ticker */}
      <div className="ticker">
        <div className="ticker-track">
          <span><b>5</b> waves</span>
          <span><b>18</b> rules</span>
          <span><b>8</b> moderation tools</span>
          <span><b>530+</b> handwritten forum posts</span>
          <span><b>24</b> achievements</span>
          <span><b>4</b> forum skins · phpBB · vBulletin · InvisionFree · ProBoards</span>
          <span><b>110+</b> NSM messages across 18+ contacts</span>
          <span><b>1</b> burnout meter</span>
          <span><b>0</b> pay</span>
          <span><b>5</b> waves</span>
          <span><b>18</b> rules</span>
          <span><b>8</b> moderation tools</span>
          <span><b>530+</b> handwritten forum posts</span>
          <span><b>24</b> achievements</span>
          <span><b>1</b> burnout meter</span>
          <span><b>0</b> pay</span>
        </div>
      </div>
    </section>
  );
}

function FloatingWindows({ chaos }) {
  if (chaos <= 0.05) return null;
  const windows = [
    { x:'4%',  y:'8%',  rot:-4,  w:230, title:'probation.exe', body:(
      <>
        <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:6}}>
          <div style={{width:24,height:24,background:'#ffec00',border:'1px solid #000',display:'grid',placeItems:'center',fontWeight:700}}>!</div>
          <div>You cited the wrong rule.<br/>2 strikes remaining.</div>
        </div>
        <div style={{textAlign:'right'}}><span style={{display:'inline-block',padding:'2px 10px',background:'#c7c7c7',border:'1px solid #000',borderRight:'2px solid #000',borderBottom:'2px solid #000'}}>OK</span></div>
      </>
    )},
    { x:'78%', y:'62%', rot: 3,  w:220, title:'NSM Messenger', body:(
      <>
        <b>admin:</b> why did you ban<br/>
        forumDonor_92?<br/>
        <div style={{marginTop:6,height:8,background:'#fff',border:'1px solid #000'}}>
          <div style={{width:'84%',height:'100%',background:'#000080'}}></div>
        </div>
      </>
    )},
    { x:'66%', y:'10%', rot:-2, w:200, title:'🔥 THREAD MELTDOWN', body:(
      <div style={{fontFamily:'JetBrains Mono, monospace',fontSize:10,color:'#1a1a1a'}}>
        /offtopic is on fire<br/>
        42 flame replies &amp; rising<br/>
        intervene NOW
      </div>
    )},
  ];
  return (
    <>
      {windows.map((w,i)=>(
        <div key={i} className="win chaos-only" style={{left:w.x,top:w.y,width:w.w,transform:`rotate(${w.rot*chaos}deg)`,opacity:chaos}}>
          <div className="win-bar"><span>{w.title}</span><span className="win-x">×</span></div>
          <div className="win-body">{w.body}</div>
        </div>
      ))}
    </>
  );
}

Object.assign(window, { PermabanHero });