// Home page

const { useState: useStateH, useEffect: useEffectH } = React;

function HeroHome({ t, go, featured }) {
  const prop = PROPERTIES.find(p => p.id === featured) || PROPERTIES[0];

  return (
    <section style={{position:'relative', minHeight:'90vh', display:'flex', alignItems:'flex-end', overflow:'hidden'}}>
      {/* full-bleed image */}
      <div style={{position:'absolute', inset:0, zIndex:0}}>
        <img src={M.stock.crowdSilhouette} alt="" className="cover ken" 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.25) 0%, rgba(11,11,13,0.55) 55%, rgba(11,11,13,0.96) 100%)'}} />
        <div style={{position:'absolute',inset:0, background:'radial-gradient(120% 80% at 50% 40%, transparent 30%, rgba(229,17,75,0.18) 100%)', mixBlendMode:'screen', opacity:0.7}} />
        <StockFlag />
      </div>

      <div className="container" style={{position:'relative', zIndex:1, paddingTop: 80, paddingBottom: 64, width:'100%'}}>
        <div style={{display:'flex', alignItems:'center', gap:14, marginBottom: 28}}>
          <span className="pill"><span className="dot pulse" /> {t.hero.eyebrow}</span>
          <span className="mono" style={{color:'var(--muted-inv)'}}>Part of Arab Media Group · confirm</span>
        </div>

        <h1 className="display" style={{
          fontSize:'clamp(64px, 12vw, 200px)',
          margin:0, color:'#fff',
        }}>
          {t.hero.title1}<br/>
          <span style={{color:'var(--brand)'}}>{t.hero.title2}</span>
        </h1>

        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:48, marginTop: 48, alignItems:'end'}}>
          <p style={{fontSize:'clamp(16px, 1.6vw, 21px)', lineHeight:1.5, maxWidth:560, color:'var(--text-inv)', margin:0}}>
            {t.hero.sub}
          </p>
          <div style={{display:'flex', gap:12, flexWrap:'wrap', justifyContent:'flex-end'}}>
            <button className="btn btn-primary btn-arrow" onClick={()=>go('contact')}>
              {t.cta.plan} <span className="arr">→</span>
            </button>
            <button className="btn btn-ghost btn-arrow" onClick={()=>go('events')}>
              {t.cta.whatson} <span className="arr">→</span>
            </button>
          </div>
        </div>
      </div>

      {/* Featured property pill — top-right, under nav */}
      <div style={{position:'absolute', top: 28, right:'var(--pad-x)', zIndex:2, maxWidth: 320, display:'flex', alignItems:'center', gap:14, background:'rgba(22,22,26,0.65)', backdropFilter:'blur(10px)', padding:'10px 14px', border:'1px solid rgba(255,255,255,0.12)'}}>
        <div style={{width:44, height:44, overflow:'hidden', flexShrink:0}}>
          <img src={prop.image} alt="" className="cover" />
        </div>
        <div style={{flex:1, minWidth:0}}>
          <div className="mono" style={{color:'var(--muted-inv)', marginBottom:2}}>Featured property</div>
          <div style={{fontFamily:'var(--display)', fontSize:15, letterSpacing:'0.04em', color:'#fff', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{prop.name}</div>
        </div>
      </div>
    </section>
  );
}

function CredibilityStrip({ t }) {
  const items = [
    ['20+', 'Years producing live events'],
    ['5', 'Home-grown live properties'],
    ['—', 'Part of AMG / Dubai Holding *'],
    ['EN/AR', 'Bilingual delivery'],
  ];
  return (
    <section className="section section-light" style={{paddingTop:'clamp(48px, 6vw, 80px)', paddingBottom:'clamp(48px, 6vw, 80px)'}}>
      <div className="container" style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24, alignItems:'start'}}>
        {items.map(([big, label], i)=>(
          <div key={i} style={{paddingTop:24, borderTop:'1px solid var(--line)'}}>
            <div className="display" style={{fontSize:'clamp(48px, 6vw, 88px)', color:'var(--ink)', lineHeight:0.9}}>{big}</div>
            <div style={{marginTop:10, fontSize:13, color:'var(--muted)', maxWidth:200, lineHeight:1.45}}>{label}</div>
          </div>
        ))}
      </div>
      <div className="container" style={{marginTop:32, fontSize:11, color:'var(--muted)', fontFamily:'var(--mono)', letterSpacing:'0.12em', textTransform:'uppercase'}}>
        * Ownership wording pending client confirmation
      </div>
    </section>
  );
}

function PropertiesStrip({ t, featured, setFeatured, go }) {
  return (
    <section className="section" style={{background:'var(--noir)', paddingTop:'clamp(80px, 9vw, 120px)'}}>
      <div className="container">
        <div className="eyebrow mono muted" style={{marginBottom: 20}}><span className="bar" /> {t.sections.properties}</div>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:40, alignItems:'flex-end', marginBottom:48}}>
          <h2 className="display" style={{fontSize:'clamp(40px, 6vw, 84px)', color:'#fff', margin:0}}>
            Home of the region's<br/>
            <span style={{color:'var(--brand)'}}>biggest stages</span>
          </h2>
          <p style={{fontSize:15, lineHeight:1.55, color:'var(--muted-inv)', margin:0, maxWidth:420}}>
            Five home-grown live-entertainment properties — from flagship music festivals to the region's largest comedy series.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:8}}>
          {PROPERTIES.map((p, i) => {
            const active = featured === p.id;
            return (
              <button key={p.id}
                onMouseEnter={()=>setFeatured(p.id)}
                onClick={()=>go('events')}
                style={{
                  position:'relative', aspectRatio:'3/4', overflow:'hidden',
                  border:0, padding:0, background:'transparent',
                  cursor:'default',
                  outline: active ? '1px solid var(--brand)' : '1px solid rgba(255,255,255,0.08)',
                  outlineOffset: active ? '0' : '0',
                  transition:'outline-color .2s ease',
                }}>
                <img src={p.image} alt={p.name} className="cover" style={{filter: active ? 'none' : 'grayscale(.4) brightness(.7)', transition:'filter .35s ease'}} />
                <div style={{position:'absolute',inset:0, background:'linear-gradient(180deg, transparent 40%, rgba(11,11,13,0.95) 100%)'}} />
                {p.isStock && <StockFlag />}
                <div style={{position:'absolute', bottom:14, left:14, right:14}}>
                  <div className="mono" style={{color:'var(--brand)', marginBottom:6}}>0{i+1} · {p.tag}</div>
                  <div className="display" style={{fontSize:'clamp(18px, 1.6vw, 26px)', color:'#fff', lineHeight:1}}>
                    {p.name}
                  </div>
                  <div style={{marginTop:8, fontSize:12, color:'var(--muted-inv)', opacity: active ? 1 : 0, maxHeight: active ? 100 : 0, overflow:'hidden', transition:'opacity .25s ease, max-height .25s ease'}}>
                    {p.cadence}
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ServicesTeaser({ t, go }) {
  return (
    <section className="section section-light">
      <div className="container">
        <div className="eyebrow mono muted" style={{marginBottom:20, color:'var(--muted)'}}><span className="bar" /> {t.sections.services}</div>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:40, alignItems:'flex-end', marginBottom:48}}>
          <h2 className="display" style={{fontSize:'clamp(40px, 6vw, 84px)', color:'var(--ink)', margin:0}}>
            Concerts. Conferences.<br/>
            <span style={{color:'var(--brand)'}}>Heads of State.</span>
          </h2>
          <button onClick={()=>go('services')} className="btn btn-dark btn-arrow" style={{justifySelf:'end'}}>
            All capabilities <span className="arr">→</span>
          </button>
        </div>

        <div style={{borderTop:'1px solid var(--line)'}}>
          {SERVICES.map(s => (
            <button key={s.id} onClick={()=>go('services')}
              style={{
                width:'100%', display:'grid', gridTemplateColumns:'80px 1.4fr 2fr auto', gap:32, alignItems:'center',
                padding:'28px 0', borderBottom:'1px solid var(--line)', background:'transparent', border:0,
                cursor:'default', textAlign:'left', color:'var(--ink)', fontFamily:'inherit',
              }}>
              <span className="mono" style={{color:'var(--muted)'}}>{s.n}</span>
              <span className="display" style={{fontSize:'clamp(22px, 2.6vw, 40px)', color:'var(--ink)'}}>{s.name}</span>
              <span style={{fontSize:15, color:'var(--muted)', lineHeight:1.5}}>{s.short}</span>
              <span style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--brand)'}}>Explore →</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturedWork({ t, go }) {
  const picks = WORK.slice(0, 4);
  return (
    <section className="section" style={{background:'var(--ink)'}}>
      <div className="container">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:48, gap:24, flexWrap:'wrap'}}>
          <div>
            <div className="eyebrow mono muted" style={{marginBottom:14}}><span className="bar" /> {t.sections.work}</div>
            <h2 className="display" style={{fontSize:'clamp(40px, 6vw, 84px)', color:'#fff', margin:0}}>
              Selected work
            </h2>
          </div>
          <button onClick={()=>go('work')} className="btn btn-ghost btn-arrow">All projects <span className="arr">→</span></button>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(12, 1fr)', gap:24}}>
          {picks.map((w, i) => {
            // 0 = wide hero (full width). 1,2,3 = three equal cards.
            const span = i === 0 ? 12 : 4;
            const ratio = i === 0 ? '21/9' : '4/5';
            const maxH = i === 0 ? 520 : 440;
            return (
              <button key={w.id} onClick={()=>go('work')}
                className="card-hover"
                style={{gridColumn:`span ${span}`, background:'transparent', border:0, padding:0, color:'inherit', textAlign:'left', cursor:'default'}}>
                <div className="img-wrap" style={{position:'relative', aspectRatio: ratio, maxHeight: maxH, overflow:'hidden'}}>
                  <img src={w.image} alt={w.title} className="cover" />
                  {w.isStock && <StockFlag />}
                  <div style={{position:'absolute', bottom:0, left:0, right:0, padding:24, background:'linear-gradient(transparent, rgba(11,11,13,0.92))'}}>
                    <div className="mono" style={{color:'var(--brand)', marginBottom:10}}>{w.category}</div>
                    <div className="display" style={{fontSize: i===0 ? 'clamp(22px, 2.4vw, 36px)' : 'clamp(18px, 1.5vw, 24px)', color:'#fff', lineHeight:1}}>{w.title}</div>
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function NewsletterBand({ t }) {
  const [email, setEmail] = useStateH('');
  const [sent, setSent] = useStateH(false);
  return (
    <section style={{background:'var(--brand)', color:'#fff', padding:'clamp(56px, 7vw, 96px) var(--pad-x)'}}>
      <div style={{maxWidth: 1200, margin:'0 auto', display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:48, alignItems:'center'}}>
        <h3 className="display" style={{fontSize:'clamp(40px, 5.5vw, 72px)', margin:0, color:'#fff'}}>
          Be first to know<br/>about the next show.
        </h3>
        <form onSubmit={(e)=>{e.preventDefault(); setSent(true);}} style={{display:'flex', flexDirection:'column', gap:14}}>
          <div style={{display:'flex', gap:0, borderBottom:'1px solid rgba(255,255,255,0.4)'}}>
            <input type="email" required value={email} onChange={e=>setEmail(e.target.value)}
              placeholder="your@email.com"
              style={{flex:1, background:'transparent', border:0, color:'#fff', padding:'16px 0', fontSize:18, fontFamily:'inherit', outline:'none'}} />
            <button type="submit" className="btn btn-light" style={{padding:'12px 18px'}}>
              {sent ? '✓ Subscribed' : t.cta.subscribe}
            </button>
          </div>
          <p style={{fontSize:12, color:'rgba(255,255,255,0.8)', margin:0}}>
            Lineup announcements, festival dates, and behind-the-scenes. No spam. Unsubscribe anytime.
          </p>
        </form>
      </div>
    </section>
  );
}

function PressStrip() {
  const press = ['Arabian Business', 'Entrepreneur Middle East', 'TheTicketingBusiness', 'Decypha', 'apnagulf'];
  return (
    <section style={{padding:'48px var(--pad-x)', background:'var(--smoke)', color:'var(--ink)'}}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:24}}>
        <div className="mono" style={{color:'var(--muted)'}}>As featured in</div>
        <div style={{display:'flex', gap:36, flexWrap:'wrap', alignItems:'center', fontFamily:'var(--display)', fontSize:22, letterSpacing:'0.05em', color:'var(--ink)', opacity:.75}}>
          {press.map(p => <span key={p}>{p}</span>)}
        </div>
      </div>
    </section>
  );
}

function HomePage(props){
  return (
    <div className="page-enter">
      <HeroHome {...props} />
      <TickerBar lang={props.lang} />
      <PropertiesStrip {...props} />
      <ServicesTeaser {...props} />
      <FeaturedWork {...props} />
      <PressStrip />
      <CredibilityStrip {...props} />
      <NewsletterBand {...props} />
    </div>
  );
}

Object.assign(window, { HomePage });