/* global React, Icon */
const { useState } = React;

function ContactPage({ navigate }) {
  const [form, setForm] = useState({ name:'', email:'', subject:'', message:'' });
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const set = (k,v) => setForm(f => ({...f, [k]:v}));

  const handleSubmit = async () => {
    if (!form.name || !form.email || !form.message) return;
    setLoading(true);
    // Kirim ke WhatsApp untuk sekarang
    const msg = encodeURIComponent(
      `*Pesan dari INDIE Paper Website*\n\nNama: ${form.name}\nEmail: ${form.email}\nSubjek: ${form.subject}\n\n${form.message}`
    );
    window.open(`https://wa.me/6289982679999?text=${msg}`, '_blank');
    setSent(true);
    setLoading(false);
  };

  return (
    <main className="fade-in">
      <div className="shell" style={{paddingBlock:'clamp(48px,8vw,96px)', maxWidth:960}}>
        <nav className="crumb" style={{marginBottom:40}}>
          <a onClick={() => navigate('/gallery')}>Home</a>
          <span className="sep">/</span>
          <span className="here">Contact</span>
        </nav>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(32px,6vw,80px)', alignItems:'start'}}>
          {/* LEFT — info */}
          <div>
            <span className="eyebrow eyebrow-ink" style={{marginBottom:16, display:'block'}}>「 Get in touch 」</span>
            <h1 style={{fontSize:'clamp(32px,5vw,56px)', lineHeight:1.05, marginBottom:24}}>
              Ada pertanyaan?<br/><em>Kami siap membantu.</em>
            </h1>
            <p style={{color:'var(--ink-soft)', lineHeight:1.8, marginBottom:40}}>
              Untuk pertanyaan produk, custom order, atau kerjasama bisnis — tim INDIE Paper siap membantu kamu menemukan kertas yang tepat.
            </p>

            <div style={{display:'flex', flexDirection:'column', gap:24}}>
              <div>
                <div style={{fontSize:11, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.12em', color:'var(--ink-meta)', marginBottom:6}}>WhatsApp</div>
                <a href="https://wa.me/6289982679999" target="_blank" style={{fontSize:16, fontWeight:500, color:'var(--ink)', textDecoration:'none'}}>+62 899-8267-9999</a>
                <div style={{fontSize:12, color:'var(--ink-meta)', marginTop:4}}>Senin–Jumat · 09.00–17.00 WIB</div>
              </div>
              <div>
                <div style={{fontSize:11, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.12em', color:'var(--ink-meta)', marginBottom:6}}>Email</div>
                <a href="mailto:paper@indiegroup.id" style={{fontSize:16, fontWeight:500, color:'var(--ink)'}}>paper@indiegroup.id</a>
              </div>
              <div>
                <div style={{fontSize:11, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.12em', color:'var(--ink-meta)', marginBottom:6}}>Instagram</div>
                <a href="https://instagram.com/indiepaper.id" target="_blank" style={{fontSize:16, fontWeight:500, color:'var(--ink)', textDecoration:'none'}}>@indiepaper.id</a>
              </div>
              <div>
                <div style={{fontSize:11, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.12em', color:'var(--ink-meta)', marginBottom:6}}>Lokasi</div>
                <div style={{fontSize:14, color:'var(--ink-soft)', lineHeight:1.6}}>Jakarta, Indonesia<br/>Pengiriman ke seluruh Indonesia</div>
              </div>
            </div>
          </div>

          {/* RIGHT — form */}
          <div style={{background:'var(--paper-cream)', border:'1px solid var(--paper-card-edge)', padding:'clamp(24px,4vw,40px)'}}>
            {sent ? (
              <div style={{textAlign:'center', padding:'40px 0'}}>
                <div style={{fontSize:32, marginBottom:16}}>✓</div>
                <h3 style={{marginBottom:12}}>Pesan terkirim!</h3>
                <p style={{color:'var(--ink-meta)', fontSize:14}}>Tim kami akan menghubungi kamu segera via WhatsApp atau email.</p>
                <button className="btn btn-primary" style={{marginTop:24}} onClick={() => { setSent(false); setForm({name:'',email:'',subject:'',message:''}); }}>Kirim pesan lain</button>
              </div>
            ) : (
              <>
                <h3 style={{marginBottom:24}}>Kirim pesan</h3>
                {[
                  {k:'name', label:'Nama lengkap *', type:'text', placeholder:'Nama kamu'},
                  {k:'email', label:'Email *', type:'email', placeholder:'hello@studio.com'},
                  {k:'subject', label:'Subjek', type:'text', placeholder:'Pertanyaan produk / custom order / lainnya'},
                ].map(f => (
                  <div key={f.k} style={{marginBottom:16}}>
                    <label style={{display:'block',fontSize:11,fontWeight:600,textTransform:'uppercase',letterSpacing:'0.1em',color:'var(--ink-meta)',marginBottom:6}}>{f.label}</label>
                    <input type={f.type} value={form[f.k]} onChange={e => set(f.k, e.target.value)}
                      placeholder={f.placeholder}
                      style={{width:'100%',boxSizing:'border-box',padding:'10px 12px',border:'1px solid var(--paper-card-edge)',background:'var(--paper-card)',fontFamily:'var(--font-sans)',fontSize:14,color:'var(--ink)',outline:'none'}} />
                  </div>
                ))}
                <div style={{marginBottom:24}}>
                  <label style={{display:'block',fontSize:11,fontWeight:600,textTransform:'uppercase',letterSpacing:'0.1em',color:'var(--ink-meta)',marginBottom:6}}>Pesan *</label>
                  <textarea value={form.message} onChange={e => set('message', e.target.value)}
                    placeholder="Tulis pesanmu di sini…"
                    style={{width:'100%',boxSizing:'border-box',padding:'10px 12px',border:'1px solid var(--paper-card-edge)',background:'var(--paper-card)',fontFamily:'var(--font-sans)',fontSize:14,color:'var(--ink)',outline:'none',minHeight:120,resize:'vertical'}} />
                </div>
                <button className="btn btn-primary btn-lg btn-block" onClick={handleSubmit} disabled={loading || !form.name || !form.email || !form.message}>
                  {loading ? 'Mengirim...' : 'Kirim pesan →'}
                </button>
                <p style={{fontSize:11,color:'var(--ink-meta)',textAlign:'center',marginTop:12,lineHeight:1.5}}>
                  Pesan akan dikirim via WhatsApp ke tim kami.
                </p>
              </>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}

window.ContactPage = ContactPage;