/* @jsx React.createElement */

const ContactPage = ({ lang }) => {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({name:'', email:'', msg:''});
  const L = (tr,en) => lang==='tr'?tr:en;

  return (
    <section style={{background:'#F5F4F0', padding:'64px 48px', minHeight:'70vh'}}>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64}}>
        <div>
          <div style={{fontSize:11, letterSpacing:'0.24em', textTransform:'uppercase', color:'#808080', fontWeight:500}}>
            İLETİŞİM / CONTACT
          </div>
          <h2 style={{fontWeight:700, fontSize:56, letterSpacing:'-0.02em', lineHeight:1.0, marginTop:16, textTransform:'uppercase'}}>
            {L(<>Stüdyoya<br/>Yazın.</>, <>Write to<br/>the Studio.</>)}
          </h2>
          <hr style={{border:0, borderTop:'1px solid #111', margin:'32px 0', maxWidth:280}}/>
          <div style={{display:'grid', gap:20, fontSize:13}}>
            <div>
              <div style={{fontSize:10, letterSpacing:'0.24em', textTransform:'uppercase', color:'#808080'}}>E-POSTA / EMAIL</div>
              <div style={{fontWeight:500, marginTop:4}}>studio@caglarcelik.works</div>
            </div>
            <div>
              <div style={{fontSize:10, letterSpacing:'0.24em', textTransform:'uppercase', color:'#808080'}}>ADRES / ADDRESS</div>
              <div style={{fontWeight:500, marginTop:4, lineHeight:1.5}}>Çorlu, Tekirdağ<br/>Türkiye</div>
            </div>
            <div>
              <div style={{fontSize:10, letterSpacing:'0.24em', textTransform:'uppercase', color:'#808080'}}>INSTAGRAM</div>
              <div style={{fontWeight:500, marginTop:4}}>@caglarcelikarchitects</div>
            </div>
          </div>
        </div>

        <div>
          {sent ? (
            <div style={{border:'1px solid #111', padding:'48px 32px', textAlign:'center'}}>
              <div style={{width:8, height:8, background:'#C8102E', margin:'0 auto 16px'}}/>
              <div style={{fontWeight:700, fontSize:18, letterSpacing:'0.08em', textTransform:'uppercase'}}>
                {L('Mesajınız Alındı', 'Message Received')}
              </div>
              <div style={{fontWeight:300, fontSize:12, fontStyle:'italic', color:'#808080', marginTop:6}}>
                {L('Message received', 'Mesajınız alındı')}
              </div>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{display:'grid', gap:24}}>
              {[
                {k:'name', label:L('İsim / Name','Name / İsim')},
                {k:'email', label:L('E-posta / Email','Email / E-posta')},
              ].map(f => (
                <label key={f.k} style={{display:'block'}}>
                  <div style={{fontSize:10, letterSpacing:'0.24em', textTransform:'uppercase', color:'#808080', fontWeight:500, marginBottom:8}}>{f.label}</div>
                  <input value={form[f.k]} onChange={e => setForm({...form,[f.k]:e.target.value})}
                         style={{width:'100%', padding:'10px 0', border:0, borderBottom:'1px solid #111',
                                 background:'transparent', fontFamily:'inherit', fontWeight:300, fontSize:15, outline:'none'}}/>
                </label>
              ))}
              <label style={{display:'block'}}>
                <div style={{fontSize:10, letterSpacing:'0.24em', textTransform:'uppercase', color:'#808080', fontWeight:500, marginBottom:8}}>
                  {L('Mesaj / Message','Message / Mesaj')}
                </div>
                <textarea value={form.msg} onChange={e => setForm({...form, msg:e.target.value})}
                          rows={5}
                          style={{width:'100%', padding:12, border:'1px solid #111',
                                  background:'#FFF', fontFamily:'inherit', fontWeight:300, fontSize:14, outline:'none', resize:'vertical'}}/>
              </label>
              <button type="submit" style={{
                alignSelf:'flex-start', background:'#111', color:'#FFF', border:'1px solid #111',
                padding:'14px 28px', fontFamily:'inherit', fontWeight:500, fontSize:11,
                letterSpacing:'0.2em', textTransform:'uppercase', cursor:'pointer',
              }}>
                {L('Gönder →','Send →')}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

window.ContactPage = ContactPage;