/* @jsx React.createElement */

const PROJECTS = [
  { id: '023', tr: 'Tek Katlı Konut',   en: 'Single-storey Residence', loc: 'Çorlu',    year: 2024, type:'KONUT' },
  { id: '022', tr: 'Stüdyo Atölyesi',   en: 'Studio Workshop',         loc: 'Tekirdağ', year: 2024, type:'KAMUSAL' },
  { id: '021', tr: 'Bağ Evi',           en: 'Vineyard House',          loc: 'Şarköy',   year: 2023, type:'KONUT' },
  { id: '020', tr: 'Çiftlik Ambarı',    en: 'Farm Granary',            loc: 'Hayrabolu',year: 2023, type:'TARIMSAL' },
  { id: '019', tr: 'Sahil Pavyonu',     en: 'Coastal Pavilion',        loc: 'Kumbağ',   year: 2022, type:'KAMUSAL' },
  { id: '018', tr: 'İki Avlu Konutu',   en: 'Two-courtyard House',     loc: 'Çorlu',    year: 2022, type:'KONUT' },
  { id: '017', tr: 'Rüzgâr Kırıcı Duvar',en:'Windbreak Wall',          loc: 'Saray',    year: 2021, type:'PEYZAJ' },
];

const ProjectIndex = ({ lang, onOpen }) => (
  <section style={{padding:'64px 48px', background:'#F5F4F0'}}>
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:40}}>
      <h2 style={{fontWeight:700, fontSize:40, letterSpacing:'-0.02em', textTransform:'uppercase'}}>
        {lang==='tr' ? 'Projeler' : 'Projects'}
      </h2>
      <div style={{fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase', color:'#808080'}}>
        2019 — 2026 · {String(PROJECTS.length).padStart(2,'0')} {lang==='tr'?'KAYIT':'ENTRIES'}
      </div>
    </div>

    <div style={{borderTop:'1px solid #111'}}>
      {PROJECTS.map(p => (
        <div key={p.id}
             onClick={() => onOpen(p)}
             style={{
               display:'grid', gridTemplateColumns:'64px 1fr 160px 120px 80px',
               gap:24, padding:'22px 0', borderBottom:'1px solid #111',
               alignItems:'baseline', cursor:'pointer', transition:'background 120ms',
             }}
             onMouseEnter={e => e.currentTarget.style.background = '#FFFFFF'}
             onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
          <div style={{fontWeight:700, fontSize:14, letterSpacing:'0.1em', fontVariantNumeric:'tabular-nums'}}>
            {p.id}
          </div>
          <div>
            <div style={{fontWeight:700, fontSize:22, letterSpacing:'-0.01em'}}>
              {lang==='tr' ? p.tr : p.en}
            </div>
            <div style={{fontWeight:300, fontSize:12, fontStyle:'italic', color:'#808080', marginTop:2}}>
              {lang==='tr' ? p.en : p.tr}
            </div>
          </div>
          <div style={{fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'#808080'}}>{p.loc}</div>
          <div style={{fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'#808080'}}>{p.type}</div>
          <div style={{fontSize:13, fontWeight:500, textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{p.year}</div>
        </div>
      ))}
    </div>
  </section>
);

window.ProjectIndex = ProjectIndex;
window.PROJECTS = PROJECTS;