/* @jsx React.createElement */

const Placeholder = ({ aspect='4/3', label='IMAGE' }) => (
  <div style={{
    position:'relative', width:'100%', aspectRatio: aspect,
    background:'#E6E5E1', border:'1px solid #111',
    display:'flex', alignItems:'center', justifyContent:'center',
  }}>
    <div style={{fontSize:10, letterSpacing:'0.24em', color:'#808080'}}>{label}</div>
    {/* crop marks */}
    {['tl','tr','bl','br'].map(c => {
      const s = { position:'absolute', width:10, height:10 };
      if (c==='tl') Object.assign(s,{top:6,left:6,borderTop:'1px solid #808080',borderLeft:'1px solid #808080'});
      if (c==='tr') Object.assign(s,{top:6,right:6,borderTop:'1px solid #808080',borderRight:'1px solid #808080'});
      if (c==='bl') Object.assign(s,{bottom:6,left:6,borderBottom:'1px solid #808080',borderLeft:'1px solid #808080'});
      if (c==='br') Object.assign(s,{bottom:6,right:6,borderBottom:'1px solid #808080',borderRight:'1px solid #808080'});
      return <div key={c} style={s}/>;
    })}
  </div>
);

const ProjectDetail = ({ project, lang, onBack }) => (
  <section style={{background:'#F5F4F0', padding:'0 0 64px 0'}}>
    <div style={{padding:'24px 48px', borderBottom:'1px solid #111', display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
      <a onClick={onBack} style={{cursor:'pointer', fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase', fontWeight:500}}>
        ← {lang==='tr' ? 'Projelere Dön' : 'Back to Projects'}
      </a>
      <div style={{fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase', color:'#808080', fontVariantNumeric:'tabular-nums'}}>
        PROJE {project.id} · {project.year}
      </div>
    </div>

    {/* Cover */}
    <div style={{padding:'48px', borderBottom:'1px solid #111'}}>
      <Placeholder aspect="16/9" label={lang==='tr'?'PROJE GÖRSELİ':'PROJECT IMAGE'}/>
    </div>

    {/* Titleblock + body */}
    <div style={{display:'grid', gridTemplateColumns:'320px 1fr', borderBottom:'1px solid #111'}}>
      <div style={{borderRight:'1px solid #111', padding:'32px 24px'}}>
        <div style={{fontSize:10, letterSpacing:'0.24em', textTransform:'uppercase', color:'#808080', fontWeight:500}}>
          {lang==='tr'?'BAŞLIK BLOKU':'TITLEBLOCK'}
        </div>
        <hr style={{border:0, borderTop:'1px solid #111', margin:'12px 0'}}/>
        <div style={{display:'grid', gap:16}}>
          {[
            ['PROJE / PROJECT', project.id],
            ['KONUM / LOCATION', project.loc.toUpperCase()],
            ['YIL / YEAR', project.year],
            ['TİP / TYPE', project.type],
            ['ALAN / AREA', '240 m²'],
            ['DURUM / STATUS', lang==='tr'?'TAMAMLANDI':'COMPLETED'],
          ].map(([l,v]) => (
            <div key={l}>
              <div style={{fontSize:9, letterSpacing:'0.24em', textTransform:'uppercase', color:'#808080'}}>{l}</div>
              <div style={{fontWeight:700, fontSize:14, letterSpacing:'0.08em', marginTop:2}}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{padding:'48px 48px 48px 64px'}}>
        <h1 style={{fontWeight:700, fontSize:56, letterSpacing:'-0.02em', lineHeight:1.0, textTransform:'uppercase'}}>
          {lang==='tr' ? project.tr : project.en}
        </h1>
        <div style={{fontWeight:300, fontSize:16, fontStyle:'italic', color:'#808080', marginTop:8}}>
          {lang==='tr' ? project.en : project.tr}
        </div>
        <hr style={{border:0, borderTop:'1px solid #111', margin:'32px 0'}}/>
        <div style={{maxWidth:560, fontWeight:300, fontSize:15, lineHeight:1.65, color:'#111'}}>
          {lang==='tr' ? (
            <>
              <p>Arazinin batı cephesine yerleşen uzun, düşük bir hacim. Ufka paralel, beton ve cam.</p>
              <p style={{marginTop:16}}>Yapı, Trakya düzlüğünün rüzgârına göre yönlendirilmiştir. Tek bir saçak, yılın dört mevsiminde güneş kontrolünü sağlar.</p>
              <p style={{marginTop:16}}>İç mekân, dört kapalı ve üç yarı-açık hacimden oluşur. Servis eksenleri arka duvara, yaşam eksenleri güney cepheye toplanmıştır.</p>
            </>
          ) : (
            <>
              <p>A long, low volume settled against the western edge of the site. Parallel to the horizon, concrete and glass.</p>
              <p style={{marginTop:16}}>The building is oriented against the prevailing winds of the Thracian plain. A single eave handles solar control through all four seasons.</p>
              <p style={{marginTop:16}}>The interior is composed of four enclosed and three semi-open volumes. Service axes gather along the rear wall, living axes face the southern façade.</p>
            </>
          )}
        </div>
      </div>
    </div>

    {/* Drawing block */}
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', borderBottom:'1px solid #111'}}>
      <div style={{padding:48, borderRight:'1px solid #111'}}>
        <div style={{fontSize:10, letterSpacing:'0.24em', textTransform:'uppercase', color:'#808080', fontWeight:500, marginBottom:16}}>
          {lang==='tr'?'PLAN · 1:100':'PLAN · 1:100'}
        </div>
        <img src="assets/motif-plan.svg" style={{width:'100%'}}/>
      </div>
      <div style={{padding:48}}>
        <div style={{fontSize:10, letterSpacing:'0.24em', textTransform:'uppercase', color:'#808080', fontWeight:500, marginBottom:16}}>
          {lang==='tr'?'KESİT A-A · 1:100':'SECTION A-A · 1:100'}
        </div>
        <img src="assets/motif-section.svg" style={{width:'100%'}}/>
      </div>
    </div>
  </section>
);

window.ProjectDetail = ProjectDetail;
window.Placeholder = Placeholder;