/* @jsx React.createElement */

const Nav = ({ page, setPage, lang, setLang }) => {
  const items = [
    { id: 'home', tr: 'Ana Sayfa', en: 'Home' },
    { id: 'projects', tr: 'Projeler', en: 'Projects' },
    { id: 'studio', tr: 'Stüdyo', en: 'Studio' },
    { id: 'contact', tr: 'İletişim', en: 'Contact' },
  ];
  return (
    <nav style={{
      display:'flex', alignItems:'center', gap:32, padding:'24px 48px',
      borderBottom:'1px solid #111', background:'#F5F4F0',
      position:'sticky', top:0, zIndex:10,
    }}>
      <div onClick={() => setPage('home')} style={{display:'flex', alignItems:'center', gap:12, cursor:'pointer'}}>
        <img src="assets/logo-monogram.svg" width={28} height={28}/>
        <div style={{fontWeight:700, fontSize:14, letterSpacing:'0.14em'}}>CCA</div>
      </div>
      <div style={{flex:1}}/>
      <div style={{display:'flex', gap:36}}>
        {items.filter(i => i.id !== 'home').map(item => {
          const active = page === item.id;
          return (
            <a key={item.id}
               onClick={() => setPage(item.id)}
               style={{
                 cursor:'pointer', fontWeight:500, fontSize:11,
                 letterSpacing:'0.2em', textTransform:'uppercase',
                 color: active ? '#111' : '#808080',
                 borderBottom: active ? '1px solid #111' : '1px solid transparent',
                 paddingBottom:4, transition:'color 120ms',
               }}>
              {lang === 'tr' ? item.tr : item.en}
            </a>
          );
        })}
      </div>
      <div style={{display:'flex', gap:6, fontSize:10, letterSpacing:'0.2em'}}>
        <span onClick={() => setLang('tr')} style={{cursor:'pointer', fontWeight: lang==='tr' ? 700:300, color: lang==='tr' ? '#111':'#808080'}}>TR</span>
        <span style={{color:'#808080'}}>/</span>
        <span onClick={() => setLang('en')} style={{cursor:'pointer', fontWeight: lang==='en' ? 700:300, color: lang==='en' ? '#111':'#808080'}}>EN</span>
      </div>
    </nav>
  );
};

const Footer = ({ page, total, lang }) => {
  const idx = String(page).padStart(2,'0');
  const tot = String(total).padStart(2,'0');
  return (
    <footer style={{
      display:'flex', justifyContent:'space-between', alignItems:'baseline',
      padding:'32px 48px', borderTop:'1px solid #111', background:'#F5F4F0',
      fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', color:'#808080',
    }}>
      <div style={{fontWeight:500, color:'#111'}}>CCA — Çorlu / Tekirdağ — Türkiye</div>
      <div>© 2019–2026 · {lang==='tr' ? 'TÜM HAKLARI SAKLIDIR' : 'ALL RIGHTS RESERVED'}</div>
      <div style={{fontVariantNumeric:'tabular-nums', fontWeight:500, color:'#111'}}>{idx} / {tot}</div>
    </footer>
  );
};

window.Nav = Nav;
window.Footer = Footer;