// Events page — properties hub + RedFest archive

const { useState: useStateE } = React;

function EventsPage({ t, go }) {
  const [active, setActive] = useStateE(PROPERTIES[0].id);
  const prop = PROPERTIES.find(p => p.id === active);

  return (
    <div className="page-enter">
      <section className="section" style={{background:'var(--noir)', paddingTop:'clamp(96px, 10vw, 140px)', paddingBottom: 56}}>
        <div className="container">
          <div className="eyebrow mono muted" style={{marginBottom:14}}><span className="bar" /> {t.sections.events}</div>
          <h1 className="display" style={{fontSize:'clamp(56px, 9vw, 140px)', color:'#fff', margin:0}}>
            What's<br/><span style={{color:'var(--brand)'}}>on.</span>
          </h1>
          <p style={{maxWidth:560, marginTop:24, fontSize:18, lineHeight:1.5, color:'var(--muted-inv)'}}>
            Our home-grown live-entertainment properties. Upcoming dates and lineups are published only after client confirmation.
          </p>
        </div>
      </section>

      {/* Property selector tabs */}
      <section style={{background:'var(--noir)', borderTop:'1px solid rgba(255,255,255,0.08)', borderBottom:'1px solid rgba(255,255,255,0.08)', overflow:'auto'}}>
        <div style={{display:'flex', minWidth:'max-content', padding:'0 var(--pad-x)'}}>
          {PROPERTIES.map(p => (
            <button key={p.id} onClick={()=>setActive(p.id)}
              style={{
                padding:'24px 24px', background:'transparent', border:0, color: active===p.id ? '#fff' : 'var(--muted-inv)',
                fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase',
                borderBottom: active===p.id ? '2px solid var(--brand)' : '2px solid transparent',
                cursor:'default', whiteSpace:'nowrap',
              }}>{p.name}</button>
          ))}
        </div>
      </section>

      {/* Hero for active property */}
      <section style={{position:'relative', minHeight:'70vh', display:'flex', alignItems:'flex-end', overflow:'hidden', background:'var(--ink)'}}>
        <div style={{position:'absolute', inset:0}}>
          <img src={prop.image} className="cover ken" alt="" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}} />
          <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(11,11,13,0.4) 0%, rgba(11,11,13,0.96) 100%)'}} />
          {prop.isStock && <StockFlag />}
        </div>
        <div className="container" style={{position:'relative', zIndex:1, paddingTop: 80, paddingBottom: 56, width:'100%'}}>
          <div className="mono" style={{color:'var(--brand)', marginBottom:14}}>{prop.tag} · {prop.venue}</div>
          <h2 className="display" style={{fontSize:'clamp(56px, 9vw, 160px)', color:'#fff', margin:0, lineHeight:0.9}}>{prop.name}</h2>
          <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:48, marginTop:32, alignItems:'end'}}>
            <p style={{fontSize:'clamp(15px, 1.4vw, 18px)', lineHeight:1.55, color:'var(--text-inv)', maxWidth:560, margin:0}}>
              {prop.blurb}
            </p>
            <div style={{display:'flex', gap:12, flexWrap:'wrap', justifyContent:'flex-end'}}>
              <button className="btn btn-primary btn-arrow">{t.cta.tickets} <span className="arr">→</span></button>
              <button className="btn btn-ghost">Past editions</button>
            </div>
          </div>
        </div>
      </section>

      {/* Property meta */}
      <section style={{background:'var(--noir)', padding:'48px var(--pad-x)', borderBottom:'1px solid rgba(255,255,255,0.08)'}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24}}>
          {[['Status', 'Dates TBA · awaiting confirmation'], [t.misc.venue, prop.venue], [t.misc.since, prop.since], [t.misc.cadence, prop.cadence]].map(([k,v])=>(
            <div key={k}>
              <div className="mono" style={{color:'var(--muted-inv)', marginBottom:8}}>{k}</div>
              <div style={{fontSize:15, color:'#fff'}}>{v}</div>
            </div>
          ))}
        </div>
        {prop.note && (
          <div style={{marginTop:24, padding:'12px 16px', borderInlineStart:'2px solid var(--brand)', color:'var(--muted-inv)', fontSize:13, lineHeight:1.5}}>
            <span className="mono" style={{color:'var(--brand)', marginInlineEnd:8}}>Note</span> {prop.note}
          </div>
        )}
      </section>

      {/* Archive — only meaningful for RedFest + DXBLaughs */}
      {prop.id === 'redfestdxb' && (
        <section className="section section-light">
          <div className="container">
            <div style={{display:'grid', gridTemplateColumns:'1fr 1.6fr', gap:64, alignItems:'flex-start'}}>
              <div>
                <div className="mono" style={{color:'var(--muted)', marginBottom:14}}>Past editions · 2014–2019</div>
                <h3 className="display" style={{fontSize:'clamp(36px, 5vw, 72px)', color:'var(--ink)', margin:0}}>
                  Six years.<br/>Forty-plus headliners.
                </h3>
                <p style={{marginTop:24, fontSize:15, color:'var(--muted)', lineHeight:1.55}}>
                  A factual archive of headliners verified through public sources. Post-2019 editions are not listed pending client confirmation.
                </p>
              </div>
              <div>
                {REDFEST_ARCHIVE.map(y => (
                  <div key={y.year} style={{display:'grid', gridTemplateColumns:'80px 1fr', gap:24, padding:'24px 0', borderTop:'1px solid var(--line)'}}>
                    <div className="display" style={{fontSize:32, color:'var(--brand)'}}>{y.year}</div>
                    <div>
                      <div style={{display:'flex', flexWrap:'wrap', gap:'6px 12px'}}>
                        {y.headliners.map(h => (
                          <span key={h} style={{fontSize:15, color:'var(--ink)'}}>{h}<span style={{color:'var(--muted)', marginInlineStart:6}}>·</span></span>
                        ))}
                      </div>
                      {y.note && <div className="mono" style={{color:'var(--muted)', marginTop:8}}>{y.note}</div>}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      )}

      {prop.id === 'dxblaughs' && (
        <section className="section section-light">
          <div className="container">
            <div className="mono" style={{color:'var(--muted)', marginBottom:14}}>Past performers · archive</div>
            <h3 className="display" style={{fontSize:'clamp(36px, 5vw, 72px)', color:'var(--ink)', margin:'0 0 36px'}}>
              The names that brought<br/>the house down.
            </h3>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:1, background:'var(--line)'}}>
              {DXBLAUGHS_ARCHIVE.map(n => (
                <div key={n} style={{background:'var(--paper)', padding:'40px 24px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:14}}>
                  <span style={{fontFamily:'var(--display)', fontSize:32, color:'var(--ink)', letterSpacing:'0.02em'}}>{n}</span>
                  <span className="mono" style={{color:'var(--muted)'}}>Archive</span>
                </div>
              ))}
            </div>
            <div style={{marginTop:32, padding:16, background:'var(--smoke)', display:'flex', gap:12, fontSize:13, color:'var(--muted)', lineHeight:1.55}}>
              <span style={{color:'var(--brand)'}}>★</span>
              <span>Listed factually as historical archive. No endorsement implied. Artist names cleared for archival listing.</span>
            </div>
          </div>
        </section>
      )}

      {prop.id !== 'redfestdxb' && prop.id !== 'dxblaughs' && (
        <section className="section section-light">
          <div className="container" style={{textAlign:'center', maxWidth:680, margin:'0 auto'}}>
            <div className="mono" style={{color:'var(--muted)', marginBottom:14}}>Lineup & dates</div>
            <h3 className="display" style={{fontSize:'clamp(32px, 4vw, 56px)', color:'var(--ink)', margin:0}}>
              {prop.name} dates and lineup will be published once confirmed by the client.
            </h3>
            <p style={{marginTop:20, fontSize:14, color:'var(--muted)'}}>
              Join the newsletter to be first to know.
            </p>
          </div>
        </section>
      )}

      {/* All properties grid */}
      <section className="section" style={{background:'var(--ink)'}}>
        <div className="container">
          <div className="mono" style={{color:'var(--muted-inv)', marginBottom:14}}>All properties</div>
          <h3 className="display" style={{fontSize:'clamp(36px, 5vw, 72px)', color:'#fff', margin:'0 0 48px'}}>The full slate.</h3>
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:24}}>
            {PROPERTIES.map(p => (
              <button key={p.id} onClick={()=>{ setActive(p.id); window.scrollTo({top:0, behavior:'smooth'}); }}
                className="card-hover"
                style={{background:'transparent', border:0, padding:0, textAlign:'left', color:'inherit', cursor:'default'}}>
                <div className="img-wrap" style={{position:'relative', aspectRatio:'4/3', overflow:'hidden'}}>
                  <img src={p.image} className="cover" alt="" />
                  {p.isStock && <StockFlag />}
                  <div style={{position:'absolute', inset:0, background:'linear-gradient(transparent, rgba(11,11,13,0.9))'}} />
                  <div style={{position:'absolute', bottom:18, left:18, right:18}}>
                    <div className="mono" style={{color:'var(--brand)', marginBottom:6}}>{p.tag}</div>
                    <div className="display" style={{fontSize:24, color:'#fff'}}>{p.name}</div>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { EventsPage });