/* @jsx React.createElement */

const StudioPage = ({ lang }) => (
  <section style={{background:'#F5F4F0', padding:'64px 48px'}}>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64}}>
      <div>
        <div style={{fontSize:11, letterSpacing:'0.24em', textTransform:'uppercase', color:'#808080', fontWeight:500}}>
          STÜDYO / STUDIO
        </div>
        <h2 style={{fontWeight:700, fontSize:64, letterSpacing:'-0.02em', lineHeight:0.95, marginTop:16, textTransform:'uppercase'}}>
          {lang==='tr' ? <>Çağlar<br/>Çelik</> : <>Caglar<br/>Celik</>}
        </h2>
        <div style={{marginTop:16, fontSize:14, letterSpacing:'0.08em', color:'#808080'}}>
          MSc. {lang==='tr'?'Yüksek Mimar':'Architect'}
        </div>
        <hr style={{border:0, borderTop:'1px solid #111', margin:'32px 0', maxWidth:360}}/>
        <div style={{maxWidth:460, fontWeight:300, fontSize:15, lineHeight:1.65}}>
          {lang==='tr' ? (
            <>
              <p>Stüdyo, 2019'da Çorlu'da kuruldu. Trakya'nın açık ve yatay coğrafyasında, Bauhaus öğretisinin sadeliğiyle kurulan tek katlı yapılar üzerine çalışır.</p>
              <p style={{marginTop:16}}>Her proje; çizgi, hacim ve sükût üzerine yazılmış bir denemedir.</p>
            </>
          ) : (
            <>
              <p>The studio was founded in Çorlu in 2019. It works on single-storey structures grounded in Bauhaus clarity, situated in the open horizontal geography of Thrace.</p>
              <p style={{marginTop:16}}>Each project is an essay written on line, volume, and silence.</p>
            </>
          )}
        </div>
      </div>

      <div>
        <div style={{fontSize:11, letterSpacing:'0.24em', textTransform:'uppercase', color:'#808080', fontWeight:500, marginBottom:16}}>
          {lang==='tr'?'KAYIT / RECORD':'KAYIT / RECORD'}
        </div>
        <div style={{border:'1px solid #111'}}>
          {[
            ['2024','BIG SEE', lang==='tr'?'Anma Ödülü':'Mention'],
            ['2023', lang==='tr'?'Mimarlık Dergisi':'Mimarlık Magazine', lang==='tr'?'Yayın':'Feature'],
            ['2022','A+ Awards', lang==='tr'?'Final Aday':'Finalist'],
            ['2021','İstanbul Bienali', lang==='tr'?'Davetli Katılım':'Invited'],
            ['2019', lang==='tr'?'Stüdyo Kuruluşu':'Studio Founded', 'Çorlu'],
          ].map((r,i,a) => (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'60px 1fr 140px', gap:16,
              padding:'14px 16px', borderBottom: i===a.length-1 ? 'none' : '1px solid #E6E5E1',
              alignItems:'baseline',
            }}>
              <div style={{fontWeight:700, fontSize:13, fontVariantNumeric:'tabular-nums'}}>{r[0]}</div>
              <div style={{fontWeight:500, fontSize:13}}>{r[1]}</div>
              <div style={{fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', color:'#808080', textAlign:'right'}}>{r[2]}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

window.StudioPage = StudioPage;