/* @jsx React.createElement */

const Hero = ({ lang, onEnter }) => (
  <section style={{
    display:'grid', gridTemplateColumns:'1fr 1fr', minHeight:'78vh',
    borderBottom:'1px solid #111', background:'#F5F4F0',
  }}>
    <div style={{
      padding:'96px 48px 64px 48px', display:'flex', flexDirection:'column',
      justifyContent:'space-between',
    }}>
      <div>
        <div style={{fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase', color:'#808080', fontWeight:500}}>
          Est. 2019 — Çorlu / Tekirdağ
        </div>
        <h1 style={{
          fontWeight:700, fontSize:'clamp(56px, 7vw, 112px)',
          letterSpacing:'-0.025em', lineHeight:0.95, marginTop:32,
          textTransform:'uppercase',
        }}>
          {lang === 'tr'
            ? <>Çizgi.<br/>Hacim.<br/>Sükût.</>
            : <>Line.<br/>Volume.<br/>Silence.</>}
        </h1>
        <div style={{marginTop:20, maxWidth:440, fontWeight:300, fontSize:15, lineHeight:1.55, color:'#111'}}>
          {lang === 'tr'
            ? 'Caglar Celik Architects; Trakya\'nın açık arazilerinde, Bauhaus öğretisinin sadeliğiyle kurulan tek katlı konutlar ve küçük ölçekli kamusal yapılar üzerine çalışır.'
            : 'Caglar Celik Architects works on single-storey residences and small public structures in the open landscapes of Thrace, grounded in Bauhaus clarity.'}
        </div>
      </div>
      <button onClick={onEnter} style={{
        alignSelf:'flex-start', background:'#111', color:'#FFF',
        border:'1px solid #111', padding:'14px 24px', fontFamily:'inherit',
        fontWeight:500, fontSize:11, letterSpacing:'0.2em',
        textTransform:'uppercase', cursor:'pointer', marginTop:48,
      }}>
        {lang === 'tr' ? 'Projeleri Gör →' : 'View Projects →'}
      </button>
    </div>

    <div style={{
      borderLeft:'1px solid #111', display:'flex', flexDirection:'column',
      justifyContent:'center', alignItems:'center', padding:48, position:'relative',
    }}>
      <img src="assets/motif-elevation.svg" style={{width:'100%', maxWidth:480}}/>
      <div style={{
        position:'absolute', bottom:16, right:24,
        fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', color:'#808080',
      }}>
        {lang === 'tr' ? 'GÖRÜNÜŞ · 023' : 'ELEVATION · 023'}
      </div>
      <div style={{position:'absolute', top:16, left:24, display:'flex', gap:8, alignItems:'center'}}>
        <div style={{width:8, height:8, background:'#C8102E'}}/>
        <div style={{fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', fontWeight:700, color:'#C8102E'}}>A—A</div>
      </div>
    </div>
  </section>
);

window.Hero = Hero;