// About page

function AboutPage({ t, go }) {
  const milestones = [
    ['2005', 'Done Events established in Dubai as part of Arab Media Group.'],
    ['2014', 'RedFestDXB launched at Dubai Media City Amphitheatre. Lumineers, Jessie J.'],
    ['2016', 'Festival slate expands. Steve Aoki, Rita Ora, Fifth Harmony at RedFestDXB.'],
    ['2018', 'The Chainsmokers, Marshmello, Bebe Rexha headline.'],
    ['2019', 'Emirates Airline Dubai Jazz Festival acquired and operated by Done Events.'],
    ['—',    'AMG / Dubai Holding structure restructured. Current ownership wording pending client confirmation.'],
  ];

  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.nav.about}</div>
          <h1 className="display" style={{fontSize:'clamp(56px, 9vw, 140px)', color:'#fff', margin:0, maxWidth: '14ch'}}>
            Twenty years <span style={{color:'var(--brand)'}}>of show days.</span>
          </h1>
        </div>
      </section>

      <section style={{background:'var(--noir)'}}>
        <div className="container" style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:64, paddingBottom: 'clamp(80px, 9vw, 120px)'}}>
          <div>
            <div className="mono" style={{color:'var(--brand)', marginBottom:14}}>The story</div>
            <p style={{fontSize:18, lineHeight:1.6, color:'var(--text-inv)', margin:0}}>
              Done Events was founded in 2005 in Dubai as a strategic subsidiary of Arab Media Group. From a small in-house team producing government functions, the company grew into a multi-faceted, award-winning live-entertainment and events operator — home of RedFestDXB, the Emirates Airline Dubai Jazz Festival and the region's largest comedy series, DXBLaughs.
            </p>
            <p style={{marginTop:20, fontSize:15, color:'var(--muted-inv)', lineHeight:1.6}}>
              Today, we move between marquee government productions, corporate brand activations, and 35,000-capacity music festivals — all from one team, in one city, on one timeline.
            </p>
            <div style={{marginTop:32, display:'flex', gap:12, flexWrap:'wrap'}}>
              <span className="pill">Est. 2005</span>
              <span className="pill">Dubai Media City</span>
              <span className="pill">Part of AMG · confirm</span>
            </div>
          </div>
          <div>
            <div className="mono" style={{color:'var(--brand)', marginBottom:14}}>Milestones</div>
            <div>
              {milestones.map(([y, body])=>(
                <div key={y+body} style={{display:'grid', gridTemplateColumns:'120px 1fr', gap:24, padding:'20px 0', borderBottom:'1px solid rgba(255,255,255,0.08)'}}>
                  <div className="display" style={{fontSize:28, color: y === '—' ? 'var(--muted-inv)' : 'var(--brand)'}}>{y}</div>
                  <div style={{fontSize:15, color:'var(--text-inv)', lineHeight:1.55}}>{body}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section section-light">
        <div className="container">
          <div className="mono" style={{color:'var(--muted)', marginBottom:14}}>Leadership</div>
          <h2 className="display" style={{fontSize:'clamp(36px, 5vw, 64px)', color:'var(--ink)', margin:'0 0 12px'}}>The current team.</h2>
          <p style={{fontSize:14, color:'var(--muted)', maxWidth: 640, marginTop: 8}}>
            <b style={{color:'var(--ink)'}}>Pending client confirmation.</b> Done Events' current organisational chart and consented portraits will be published here after the client supplies them. Historical reference to former Managing Director Girish Bhat has been omitted (reportedly moved to Eventify Entertainment).
          </p>
          <div style={{marginTop: 40, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
            {['CEO', 'Managing Director', 'Head of Live', 'Head of Corporate'].map((role, i) => (
              <div key={role} style={{aspectRatio:'4/5', background:'var(--smoke-2)', position:'relative', display:'flex', alignItems:'flex-end', padding:18}}>
                <div style={{position:'absolute', inset:0, background:`repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.04) 12px 13px)`}} />
                <div style={{position:'relative'}}>
                  <div className="mono" style={{color:'var(--muted)', marginBottom:6}}>0{i+1} · Portrait pending</div>
                  <div style={{fontFamily:'var(--display)', fontSize:22, color:'var(--ink)', letterSpacing:'0.02em'}}>{role}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{background:'var(--ink)'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', minHeight:'60vh'}}>
          <div style={{padding:'clamp(48px, 6vw, 96px) var(--pad-x)', display:'flex', flexDirection:'column', justifyContent:'center', gap:20}}>
            <div className="mono" style={{color:'var(--brand)'}}>Affiliation</div>
            <h3 className="display" style={{fontSize:'clamp(36px, 4.5vw, 60px)', color:'#fff', margin:0, lineHeight:0.95}}>
              Part of Arab Media Group.
            </h3>
            <p style={{fontSize:15, lineHeight:1.6, color:'var(--muted-inv)', margin:0, maxWidth: 480}}>
              Done Events sits within Arab Media Group, alongside sister brands including Global Village and the Arabian Radio Network — a vertical of Dubai Holding.
            </p>
            <p style={{fontSize:12, color:'var(--muted-inv)', fontFamily:'var(--mono)', letterSpacing:'0.1em', textTransform:'uppercase', margin:0}}>
              Current ownership wording pending confirmation.
            </p>
          </div>
          <div style={{position:'relative', overflow:'hidden'}}>
            <img src={M.real.govForum} alt="" className="cover" />
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage });