// Services page

function ServicesPage({ t, go }) {
  return (
    <div className="page-enter">
      <section className="section" style={{background:'var(--noir)', paddingTop:'clamp(96px, 10vw, 140px)', paddingBottom:'clamp(40px, 5vw, 64px)'}}>
        <div className="container" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:64, alignItems:'flex-end'}}>
          <div>
            <div className="eyebrow mono muted" style={{marginBottom:14}}><span className="bar" /> {t.nav.services}</div>
            <h1 className="display" style={{fontSize:'clamp(56px, 9vw, 140px)', color:'#fff', margin:0}}>
              Five lines.<br/>
              <span style={{color:'var(--brand)'}}>One pipeline.</span>
            </h1>
          </div>
          <p style={{fontSize:18, lineHeight:1.55, color:'var(--muted-inv)', margin:0}}>
            From a 35,000-strong music festival to a closed-door government summit, Done Events runs creative, production, and operations under one roof.
          </p>
        </div>
      </section>

      <section style={{background:'var(--noir)'}}>
        {SERVICES.map((s, idx) => {
          const isRight = idx % 2 === 1;
          return (
            <div key={s.id} style={{
              display:'grid', gridTemplateColumns:'1fr 1fr', minHeight: '60vh',
              borderTop:'1px solid rgba(255,255,255,0.08)'
            }} className="svc-row">
              <div style={{
                gridColumn: isRight ? 2 : 1,
                gridRow: 1,
                padding:'clamp(48px, 6vw, 96px) var(--pad-x)',
                display:'flex', flexDirection:'column', justifyContent:'center', gap:20,
              }}>
                <div className="mono" style={{color:'var(--brand)'}}>{s.n} · Capability</div>
                <h2 className="display" style={{fontSize:'clamp(48px, 6vw, 88px)', color:'#fff', margin:0, lineHeight:0.95}}>{s.name}</h2>
                <p style={{fontSize:17, lineHeight:1.6, color:'var(--muted-inv)', maxWidth:520, margin:0}}>{s.body}</p>
                <div style={{display:'flex', gap:12, marginTop:12, flexWrap:'wrap'}}>
                  <button onClick={()=>go('contact')} className="btn btn-primary btn-arrow">{t.cta.brief} <span className="arr">→</span></button>
                  <button onClick={()=>go('work')} className="btn btn-ghost">See related work</button>
                </div>
              </div>
              <div style={{
                gridColumn: isRight ? 1 : 2,
                gridRow: 1,
                position:'relative', overflow:'hidden', minHeight: 320,
              }}>
                <img src={s.hero} alt="" className="cover" />
                <div style={{position:'absolute', inset:0, background:'linear-gradient(' + (isRight ? '90deg' : '270deg') + ', rgba(11,11,13,0.55), transparent 30%)'}} />
                {s.isStock && <StockFlag />}
              </div>
            </div>
          );
        })}
      </section>

      <section className="section section-light">
        <div className="container">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'flex-start'}}>
            <div>
              <div className="mono" style={{color:'var(--muted)', marginBottom:14}}>How we work</div>
              <h2 className="display" style={{fontSize:'clamp(40px, 5.5vw, 72px)', color:'var(--ink)', margin:0}}>
                One creative, production, and operations team — from the brief to the bump-out.
              </h2>
            </div>
            <div style={{display:'flex', flexDirection:'column'}}>
              {[
                ['01', 'Brief', 'Discovery, objectives, audience, scale, and budget framework.'],
                ['02', 'Concept', 'Creative direction, talent, content, and venue strategy.'],
                ['03', 'Production', 'Technical design, supplier coordination, rehearsal, run-of-show.'],
                ['04', 'Show day', 'Delivery, talent care, broadcast, security coordination.'],
                ['05', 'Wrap', 'Bump-out, reconciliation, and post-event reporting.'],
              ].map(([n, h, body])=>(
                <div key={n} style={{display:'grid', gridTemplateColumns:'48px 160px 1fr', gap:24, padding:'24px 0', borderTop:'1px solid var(--line)'}}>
                  <div className="mono" style={{color:'var(--brand)'}}>{n}</div>
                  <div style={{fontFamily:'var(--display)', fontSize:24, color:'var(--ink)', letterSpacing:'0.02em'}}>{h}</div>
                  <div style={{fontSize:14, color:'var(--muted)', lineHeight:1.55}}>{body}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 880px){
          .svc-row{ grid-template-columns: 1fr !important; }
          .svc-row > div:first-child{ grid-column: 1 !important; }
          .svc-row > div:last-child{ grid-column: 1 !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { ServicesPage });