// The rest of the site: nav, about, assets (with lightbox), trailer, games, praise, contact, footer.

const { useState: _useState, useEffect: _useEffect, useRef: _useRef } = React;

function Nav(){
  return (
    <div className="nav">
      <div className="wrap nav-inner">
        <a href="#top" className="logo">
          <span className="logo-mark" style={{padding:0,overflow:'hidden'}}>
            <img src="assets/logo_mark.png" alt="Unreal Byte logo" width="30" height="30" decoding="async" style={{width:'100%',height:'100%',objectFit:'contain'}} />
          </span>
          <span>Unreal Byte</span>
          <span className="mono" style={{color:'var(--fg-mute)',fontSize:11,marginLeft:4}}>/ studio</span>
        </a>
        <div className="nav-links">
          <a href="#permaban">Permaban</a>
          <a href="#about">Studio</a>
          <a href="#assets">Unity tools</a>
          <a href="#games">Games</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="nav-cta">
          <a href={PERMABAN.steam} target="_blank" className="btn primary">Wishlist Permaban</a>
        </div>
      </div>
    </div>
  );
}

function About(){
  return (
    <section id="about" style={{padding:'120px 0 40px'}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">01 / the studio</div>
            <h2 style={{marginTop:10}}>A studio of one, <span className="serif" style={{fontStyle:'italic',color:'var(--fg-dim)'}}>shipping since 2017.</span></h2>
          </div>
          <div className="pill"><span className="dot"></span> accepting small Unity contracts</div>
        </div>

        <div className="about-grid" style={{display:'grid',gridTemplateColumns:'1.3fr 0.7fr',gap:56,alignItems:'start'}}>
          <div style={{fontSize:18,lineHeight:1.65,color:'var(--fg-dim)',maxWidth:680}}>
            {STUDIO.bio.map((p,i)=><p key={i} style={{margin:'0 0 18px'}}>{p}</p>)}

            <div style={{marginTop:28,padding:'16px 18px',border:'1px dashed var(--line)',borderRadius:10,fontFamily:'JetBrains Mono, monospace',fontSize:12,color:'var(--fg-mute)',lineHeight:1.7}}>
              <span style={{color:'var(--fg-dim)'}}>$ whoami</span><br/>
              &gt; solo dev · est. sept 2017<br/>
              <span style={{color:'var(--fg-dim)'}}>$ ls ./projects</span><br/>
              &gt; trello-for-unity/ &nbsp; easy-jira/ &nbsp; discordity/ &nbsp; battle-lands/ &nbsp; permaban/
            </div>
          </div>

          <div style={{display:'grid',gap:12,alignContent:'start'}}>
            <div className="card" style={{padding:'18px'}}>
              <div className="eyebrow" style={{marginBottom:12}}>timeline</div>
              <Timeline />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Timeline(){
  const items = [
    { y:'2017', t:'Unreal Byte founded, exploring web games with HTML and Phaser.' },
    { y:'2017', t:'Shift to Unity. Trello For Unity released on the Asset Store.' },
    { y:'2018', t:'Easy Jira and Discordity follow.' },
    { y:'2021', t:'Battle Lands ships on iOS and Android. First full game.' },
    { y:'now',  t:'Permaban, heading to Steam.', hi:true },
  ];
  return (
    <div style={{display:'flex',flexDirection:'column',gap:8}}>
      {items.map((it,i)=>(
        <div key={i} style={{display:'grid',gridTemplateColumns:'54px 1fr',alignItems:'baseline',gap:10,fontSize:13,padding:'4px 0',borderTop: i===0 ? 'none' : '1px dashed var(--line-soft)'}}>
          <span className="mono" style={{color: it.hi?'var(--accent)':'var(--fg-mute)'}}>{it.y}</span>
          <span style={{color: it.hi ? 'var(--fg)' : 'var(--fg-dim)'}}>{it.t}</span>
        </div>
      ))}
    </div>
  );
}

function Assets(){
  const [open, setOpen] = _useState(null); // index of asset whose modal is open
  return (
    <section id="assets" style={{padding:'100px 0 40px'}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">02 / unity tools &amp; plugins</div>
            <h2 style={{marginTop:10}}>Integrations I built <span className="serif" style={{fontStyle:'italic',color:'var(--fg-dim)'}}>so you wouldn’t have to.</span></h2>
          </div>
          <a href="https://assetstore.unity.com/publishers/29774" target="_blank" className="btn">View publisher profile ↗</a>
        </div>

        <div className="grid g-3">
          {ASSETS.map((a,i)=><AssetCard key={i} a={a} i={i} onOpen={()=>setOpen(i)} />)}
        </div>
      </div>

      {open !== null && <AssetModal a={ASSETS[open]} onClose={()=>setOpen(null)} />}
    </section>
  );
}

function AssetCard({ a, i, onOpen }){
  const [hover,setHover]=_useState(false);
  return (
    <div
      className="card"
      onClick={onOpen}
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{display:'flex',flexDirection:'column',gap:14,cursor:'pointer',padding:0,overflow:'hidden'}}
    >
      <div style={{position:'relative',aspectRatio:'16 / 11',overflow:'hidden',borderBottom:'1px solid var(--line-soft)'}}>
        <img src={a.cover} alt={`${a.name} — ${a.tag} for Unity`} loading="lazy" decoding="async" style={{width:'100%',height:'100%',objectFit:'cover',transform: hover?'scale(1.04)':'scale(1)',transition:'transform .4s'}} />
        <div style={{position:'absolute',inset:0,background:`linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55))`}}></div>
        <div style={{position:'absolute',left:14,top:14,display:'flex',gap:8}}>
          <span className="pill" style={{background:'rgba(0,0,0,0.55)',color:'#fff',borderColor:'rgba(255,255,255,0.1)'}}>{String(i+1).padStart(2,'0')} · {a.tag}</span>
        </div>
        <div style={{position:'absolute',right:14,bottom:12,display:'flex',gap:6}}>
          <span style={{width:10,height:10,borderRadius:'50%',background:a.accent,boxShadow:`0 0 12px ${a.accent}`}}></span>
        </div>
      </div>

      <div style={{padding:'0 20px 18px',display:'flex',flexDirection:'column',gap:12,flex:1}}>
        <div style={{fontSize:22,letterSpacing:'-0.02em',fontWeight:500}}>{a.name}</div>
        <p style={{margin:0,color:'var(--fg-dim)',fontSize:14,lineHeight:1.5,flex:1}}>{a.desc}</p>
        <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
          {a.stack.map((s,j)=>(<span key={j} className="mono" style={{fontSize:10,padding:'3px 7px',border:'1px solid var(--line-soft)',borderRadius:4,color:'var(--fg-mute)'}}>{s}</span>))}
        </div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',borderTop:'1px dashed var(--line-soft)',paddingTop:12,marginTop:4}}>
          <span className="mono" style={{fontSize:11,color:'var(--fg-dim)'}}>details ↗</span>
          <a href={a.url} target="_blank" onClick={e=>e.stopPropagation()} className="mono" style={{fontSize:11,color:'var(--accent)'}}>asset store ↗</a>
        </div>
      </div>
    </div>
  );
}

function AssetModal({ a, onClose }){
  _useEffect(()=>{
    const k = e => { if(e.key==='Escape') onClose(); };
    window.addEventListener('keydown',k);
    document.body.style.overflow='hidden';
    return ()=>{ window.removeEventListener('keydown',k); document.body.style.overflow=''; };
  },[]);

  return (
    <div onClick={onClose} style={{position:'fixed',inset:0,zIndex:200,background:'rgba(4,4,6,0.82)',backdropFilter:'blur(6px)',display:'grid',placeItems:'start center',overflow:'auto',padding:'60px 20px'}}>
      <div onClick={e=>e.stopPropagation()} style={{width:'min(920px, 100%)',background:'var(--bg-1)',border:'1px solid var(--line)',borderRadius:14,overflow:'hidden',boxShadow:'0 30px 100px rgba(0,0,0,0.6)'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'16px 20px',borderBottom:'1px solid var(--line-soft)'}}>
          <div style={{display:'flex',alignItems:'center',gap:10}}>
            <span style={{width:10,height:10,borderRadius:'50%',background:a.accent,boxShadow:`0 0 12px ${a.accent}`}}></span>
            <div className="mono" style={{fontSize:11,color:'var(--fg-mute)',textTransform:'uppercase',letterSpacing:'0.12em'}}>{a.tag}</div>
          </div>
          <button onClick={onClose} style={{background:'none',border:'1px solid var(--line)',color:'var(--fg-dim)',borderRadius:6,padding:'4px 10px',cursor:'pointer',fontSize:12}}>close</button>
        </div>

        <div style={{padding:'26px 28px 30px'}}>
          <h3 style={{margin:'0 0 10px',fontSize:36,letterSpacing:'-0.025em',fontWeight:500}}>{a.name}</h3>
          <p style={{margin:0,color:'var(--fg-dim)',fontSize:15,lineHeight:1.55,maxWidth:640}}>{a.desc}</p>

          <ul style={{margin:'22px 0 28px',padding:0,listStyle:'none',display:'grid',gap:8}}>
            {a.bullets.map((b,i)=>(
              <li key={i} style={{display:'grid',gridTemplateColumns:'20px 1fr',gap:8,alignItems:'baseline',fontSize:14,color:'var(--fg-dim)'}}>
                <span style={{color:a.accent,fontFamily:'JetBrains Mono, monospace'}}>→</span>
                <span>{b}</span>
              </li>
            ))}
          </ul>

          {a.video && (
            <div style={{position:'relative',aspectRatio:'16 / 9',marginBottom:16,borderRadius:10,overflow:'hidden',border:'1px solid var(--line)'}}>
              <iframe src={a.video} style={{position:'absolute',inset:0,width:'100%',height:'100%',border:0}} allow="autoplay; encrypted-media" allowFullScreen />
            </div>
          )}

          <div style={{display:'grid',gridTemplateColumns:`repeat(${a.shots.length}, 1fr)`,gap:10}}>
            {a.shots.map((s,i)=>(
              <img key={i} src={s} alt={`${a.name} screenshot ${i+1}`} loading="lazy" decoding="async" style={{width:'100%',borderRadius:8,border:'1px solid var(--line-soft)'}} />
            ))}
          </div>

          <div style={{marginTop:26,display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:12}}>
            <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
              {a.stack.map((s,j)=>(<span key={j} className="mono" style={{fontSize:11,padding:'4px 9px',border:'1px solid var(--line-soft)',borderRadius:4,color:'var(--fg-mute)'}}>{s}</span>))}
            </div>
            <a href={a.url} target="_blank" className="btn primary lg">
              Get it on the Asset Store ↗
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

function Trailer(){
  return (
    <section id="trailer" style={{padding:'120px 0 40px'}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">featured project</div>
            <h2 style={{marginTop:10}}>Inside the <span className="serif" style={{fontStyle:'italic',color:'var(--fg-dim)'}}>forum.</span></h2>
          </div>
          <div style={{display:'flex',gap:8}}>
            <a href={PERMABAN.steam} target="_blank" className="btn primary">Wishlist on Steam ↗</a>
            <a href={PERMABAN.itch} target="_blank" className="btn">Play on itch.io ↗</a>
          </div>
        </div>

        <p style={{maxWidth:720,color:'var(--fg-dim)',fontSize:17,lineHeight:1.6,margin:'0 0 28px'}}>
          {PERMABAN.long} Inspired by Papers, Please, Permaban turns internet forum moderation into a high-pressure bureaucratic puzzle.
        </p>

        <div id="permaban-details" style={{display:'grid',gridTemplateColumns:'repeat(4, 1fr)',gap:12,marginBottom:28}}>
          {[
            {k:'Status',v:PERMABAN.release},
            {k:'Genre',v:PERMABAN.genre},
            {k:'Platforms',v:PERMABAN.platforms.join(' · ')},
            {k:'Developer',v:'Unreal Byte (solo)'},
          ].map((x,i)=>(
            <div key={i} className="card" style={{padding:'14px 16px'}}>
              <div className="mono" style={{fontSize:10,color:'var(--fg-mute)',textTransform:'uppercase',letterSpacing:'0.14em'}}>{x.k}</div>
              <div style={{marginTop:6,fontSize:14}}>{x.v}</div>
            </div>
          ))}
        </div>

        <div style={{display:'grid',gridTemplateColumns:'repeat(3, 1fr)',gap:12}} className="perma-features">
          {PERMABAN.features.map((f,i)=>(
            <div key={i} className="card" style={{padding:'20px 20px 22px',display:'flex',flexDirection:'column',gap:10}}>
              <div style={{display:'flex',alignItems:'center',gap:10}}>
                <span style={{fontSize:22,lineHeight:1}}>{f.icon}</span>
                <div style={{fontSize:16,letterSpacing:'-0.01em',fontWeight:500}}>{f.title}</div>
              </div>
              <div style={{color:'var(--fg-dim)',fontSize:13,lineHeight:1.55}}>{f.desc}</div>
            </div>
          ))}
        </div>

        <div style={{marginTop:28,display:'grid',gridTemplateColumns:'1fr 1fr',gap:20,alignItems:'start'}} className="perma-content">
          <div className="card" style={{padding:'22px 22px 24px'}}>
            <div className="eyebrow" style={{marginBottom:14}}>content</div>
            <ul style={{margin:0,padding:0,listStyle:'none',display:'flex',flexDirection:'column',gap:8}}>
              {PERMABAN.content.map((c,i)=>(
                <li key={i} style={{display:'grid',gridTemplateColumns:'20px 1fr',gap:10,alignItems:'baseline',fontSize:14,color:'var(--fg-dim)',lineHeight:1.5,paddingBottom:8,borderBottom: i<PERMABAN.content.length-1 ? '1px dashed var(--line-soft)' : 'none'}}>
                  <span className="mono" style={{color:'var(--accent)',fontSize:11}}>{String(i+1).padStart(2,'0')}</span>
                  <span>{c}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="card" style={{padding:'26px 26px 26px',background:'#0f0f11',display:'flex',flexDirection:'column',justifyContent:'center',gap:18}}>
            <div style={{fontFamily:"'VT323','Courier New',monospace",fontSize:'clamp(24px, 6vw, 40px)',lineHeight:1.15,letterSpacing:0,color:'var(--fg)'}}>
              Enforce the rules.<br/>
              Cite the violation.<br/>
              <span style={{color:'var(--accent)'}}>Survive the forum.</span>
            </div>
            <div style={{fontSize:14,lineHeight:1.6,color:'var(--fg-dim)'}}>
              {PERMABAN.specs}
            </div>
            <div style={{display:'flex',gap:8,flexWrap:'wrap',marginTop:4}}>
              <a href={PERMABAN.steam} target="_blank" className="btn primary">Wishlist on Steam ↗</a>
              <a href={PERMABAN.itch} target="_blank" className="btn">Play on itch.io ↗</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Games(){
  return (
    <section id="games" style={{padding:'120px 0 40px'}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">03 / games</div>
            <h2 style={{marginTop:10}}>One shipped game, <span className="serif" style={{fontStyle:'italic',color:'var(--fg-dim)'}}>one more on the way.</span></h2>
          </div>
        </div>

        {/* Battle Lands featured card */}
        <div className="card bl-featured" style={{padding:0,overflow:'hidden',marginBottom:18}}>
          <div className="bl-featured" style={{display:'grid',gridTemplateColumns:'1.15fr 1fr',alignItems:'stretch'}}>
            <div style={{position:'relative',minHeight:340}}>
              <img src="assets/battlelands_1.png" alt="Battle Lands — low-poly mobile real-time strategy gameplay" loading="lazy" decoding="async" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}} />
              <div style={{position:'absolute',inset:0,background:'linear-gradient(90deg, transparent 55%, var(--bg-1) 100%)'}}></div>
              <div style={{position:'absolute',left:20,top:20,display:'flex',gap:8}}>
                <span className="pill" style={{background:'rgba(0,0,0,0.55)',color:'#fff',borderColor:'rgba(255,255,255,0.1)'}}>2021 · Android &amp; iOS</span>
                <span className="pill" style={{background:'rgba(0,0,0,0.55)',color:'#fff',borderColor:'rgba(255,255,255,0.1)'}}>portfolio</span>
              </div>
            </div>
            <div style={{padding:'32px 32px',display:'flex',flexDirection:'column',justifyContent:'center'}}>
              <div className="eyebrow">previous project</div>
              <h3 style={{margin:'8px 0 10px',fontSize:38,letterSpacing:'-0.025em',fontWeight:500}}>Battle Lands</h3>
              <p style={{color:'var(--fg-dim)',fontSize:15,lineHeight:1.5,margin:0,maxWidth:420}}>
                Real-time strategy for mobile. Low-poly medieval battles with campaign, survival and custom game modes. Released on Android and iOS in 2021. No longer maintained. Kept here as portfolio.
              </p>
              <div style={{display:'flex',gap:6,marginTop:16,flexWrap:'wrap'}}>
                {['Unity','Mobile','RTS','Low-poly'].map((s,j)=>(<span key={j} className="mono" style={{fontSize:11,padding:'4px 9px',border:'1px solid var(--line-soft)',borderRadius:4,color:'var(--fg-mute)'}}>{s}</span>))}
              </div>
            </div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(4, 1fr)',gap:2,borderTop:'1px solid var(--line-soft)',background:'var(--line-soft)'}}>
            {['assets/battlelands_2.png','assets/battlelands_3.png','assets/battlelands_4.png','assets/battlelands_5.png'].map((s,i)=>(
              <div key={i} style={{aspectRatio:'16/9',overflow:'hidden',background:'var(--bg-2)'}}>
                <img src={s} alt={`Battle Lands screenshot ${i+2}`} loading="lazy" decoding="async" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}} />
              </div>
            ))}
          </div>
        </div>

        {/* games list */}
        <div className="card" style={{padding:0,overflow:'hidden'}}>
          {GAMES.map((g,i)=>(
            <GameRow key={i} g={g} first={i===0} />
          ))}
        </div>
      </div>
    </section>
  );
}

function GameRow({ g, first }){
  const [hover,setHover]=_useState(false);
  const primary = g.links && g.links[0];
  return (
    <a
      href={primary?.href || '#'}
      target={primary ? '_blank' : undefined}
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      className="game-row"
      style={{
        display:'grid',
        gridTemplateColumns:'90px 1fr 200px 200px 60px',
        alignItems:'center',
        gap:20,
        padding:'22px 24px',
        borderTop: first ? 'none' : '1px solid var(--line-soft)',
        background: hover ? 'var(--bg-2)' : 'transparent',
        transition:'background .15s',
        textDecoration:'none',color:'inherit'
      }}
    >
      <div className="mono" style={{color:'var(--fg-mute)',fontSize:13}}>{g.year}</div>
      <div>
        <div style={{fontSize:22,letterSpacing:'-0.02em'}}>
          {g.title}
          {g.status==='upcoming' && (
            <span style={{marginLeft:10,fontSize:10,padding:'2px 7px',borderRadius:4,background:'var(--accent)',color:'#fff',fontFamily:'JetBrains Mono, monospace',letterSpacing:'0.08em',verticalAlign:'middle'}}>NEW</span>
          )}
        </div>
        <div style={{marginTop:2,color:'var(--fg-dim)',fontSize:13}}>{g.blurb}</div>
      </div>
      <div className="mono" style={{fontSize:12,color:'var(--fg-dim)'}}>{g.role}</div>
      <div className="mono" style={{fontSize:12,color: g.status==='upcoming' ? 'var(--accent)' : 'var(--fg-mute)',display:'flex',gap:10,flexWrap:'wrap'}}>
        {g.links && g.links.length ? g.links.map((l,j)=>(<span key={j}>{l.label}{j<g.links.length-1?' ·':''}</span>)) : 'released'}
      </div>
      <div style={{textAlign:'right',fontSize:18,color: hover ? 'var(--fg)' : 'var(--fg-mute)',transition:'all .15s',transform: hover ? 'translateX(4px)' : 'none'}}>↗</div>
    </a>
  );
}

function Praise(){
  return (
    <section style={{padding:'80px 0 40px'}}>
      <div className="wrap">
        <div className="grid g-3">
          {TESTIMONIALS.map((t,i)=>(
            <div key={i} className="card" style={{padding:'22px 22px 20px'}}>
              <div style={{fontFamily:'Instrument Serif, serif',fontSize:22,fontStyle:'italic',lineHeight:1.35,color:'var(--fg)'}}>
                “{t.q}”
              </div>
              <div style={{marginTop:14,fontFamily:'JetBrains Mono, monospace',fontSize:12,color:'var(--fg-mute)'}}>{t.by}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact(){
  return (
    <section id="contact" style={{padding:'120px 0 40px'}}>
      <div className="wrap">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:56}} className="contact-grid">
          <div>
            <div className="eyebrow">04 / get in touch</div>
            <h2 style={{marginTop:10,fontSize:56,letterSpacing:'-0.03em',fontWeight:500,lineHeight:1}}>
              Say hi, <br/>send bugs, <br/>
              <span className="serif" style={{fontStyle:'italic',color:'var(--accent)'}}>talk about Permaban.</span>
            </h2>
            <p style={{color:'var(--fg-dim)',maxWidth:440,marginTop:24,fontSize:16,lineHeight:1.5}}>
              The fastest way to reach me is email. I answer within a few days, unless a game is shipping, in which case it’s weeks, sorry.
            </p>
            <div style={{display:'flex',gap:10,marginTop:24,flexWrap:'wrap'}}>
              <a className="btn primary lg" href="mailto:info@unrealbyte.com">info@unrealbyte.com</a>
              <a className="btn lg" href={PERMABAN.steam} target="_blank">Wishlist Permaban ↗</a>
            </div>
          </div>

          <div>
            <div className="card" style={{padding:0,overflow:'hidden'}}>
              {SOCIALS.map((s,i)=>(
                <a key={i} href={s.href} target="_blank" style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'18px 22px',borderTop: i===0 ? 'none' : '1px solid var(--line-soft)',transition:'background .15s'}}
                  onMouseEnter={e=>e.currentTarget.style.background='var(--bg-2)'}
                  onMouseLeave={e=>e.currentTarget.style.background='transparent'}
                >
                  <div>
                    <div className="mono" style={{fontSize:11,color:'var(--fg-mute)',letterSpacing:'0.1em',textTransform:'uppercase'}}>{s.label}</div>
                    <div style={{fontSize:15,marginTop:2}}>{s.handle}</div>
                  </div>
                  <span style={{color:'var(--fg-mute)'}}>↗</span>
                </a>
              ))}
            </div>

            <div className="card" style={{marginTop:16,padding:20}}>
              <div className="eyebrow" style={{marginBottom:12}}>faq</div>
              {FAQ.map((f,i)=>(
                <FaqItem key={i} f={f} first={i===0} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FaqItem({ f, first }){
  const [open,setOpen] = _useState(false);
  return (
    <div style={{borderTop: first ? 'none' : '1px dashed var(--line-soft)',padding:'12px 0'}}>
      <button
        onClick={()=>setOpen(o=>!o)}
        style={{display:'flex',width:'100%',justifyContent:'space-between',alignItems:'center',background:'none',border:'none',color:'var(--fg)',padding:0,cursor:'pointer',textAlign:'left',fontSize:14}}
      >
        <span>{f.q}</span>
        <span style={{color:'var(--fg-mute)'}}>{open ? '−' : '+'}</span>
      </button>
      {open && <div style={{marginTop:8,color:'var(--fg-dim)',fontSize:13,lineHeight:1.5}}>{f.a}</div>}
    </div>
  );
}

function Footer(){
  return (
    <footer>
      <div className="wrap">
        <div className="foot">
          <div style={{display:'flex',alignItems:'center',gap:12}}>
            <span className="logo-mark" style={{padding:0,overflow:'hidden'}}>
              <img src="assets/logo_mark.png" alt="Unreal Byte logo" width="30" height="30" loading="lazy" decoding="async" style={{width:'100%',height:'100%',objectFit:'contain'}} />
            </span>
            <div>
              <div style={{color:'var(--fg)',fontWeight:500}}>Unreal Byte</div>
              <div className="mono" style={{fontSize:11,color:'var(--fg-mute)'}}>est. sept 2017</div>
            </div>
          </div>
          <div style={{display:'flex',gap:22,flexWrap:'wrap'}}>
            <a href="#permaban">Permaban</a>
            <a href="#assets">Unity tools</a>
            <a href="#games">Games</a>
            <a href="#contact">Contact</a>
            <a href="https://assetstore.unity.com/publishers/29774" target="_blank">Asset Store ↗</a>
          </div>
          <div className="mono" style={{fontSize:11,color:'var(--fg-mute)'}}>
            © {new Date().getFullYear()} Unreal Byte · all rights reserved
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, About, Assets, Trailer, Games, Praise, Contact, Footer });