// ── Contact Page ──────────────────────────────────────────────────────────────

const FORMSPREE_ENDPOINT = 'https://formspree.io/f/xykokazz';

const ContactPage = () => {
  const [form, setForm] = React.useState({ name: '', company: '', email: '', type: 'essentials', message: '' });
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');

  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError('');
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({ ...form, _subject: `[Smartek X] Inquiry dari ${form.name} — ${form.type}` }),
      });
      if (res.ok) {
        setSent(true);
      } else {
        setError('Gagal mengirim. Silakan coba WhatsApp langsung.');
      }
    } catch {
      setError('Tidak ada koneksi. Silakan coba WhatsApp langsung.');
    } finally {
      setSubmitting(false);
    }
  };

  const inputStyle = {
    width: '100%', boxSizing: 'border-box',
    fontFamily: 'Inter, sans-serif', fontSize: '0.95rem',
    color: '#0D1117', background: '#fff',
    border: '1.5px solid #E2E8F0', borderRadius: 12,
    padding: '13px 16px', outline: 'none',
    transition: 'border-color 0.2s, box-shadow 0.2s',
  };

  const labelStyle = {
    display: 'block', fontFamily: 'Inter, sans-serif',
    fontSize: '0.82rem', fontWeight: 600, color: '#374151',
    marginBottom: '0.5rem', letterSpacing: '0.01em',
  };

  return (
    <div style={{ background: '#F5F7FA', minHeight: '100vh', paddingTop: 80 }}>
      <section style={{ padding: 'clamp(4rem,8vh,7rem) clamp(1.5rem,8vw,8rem)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.1fr) minmax(0,1fr)', gap: 'clamp(3rem,6vw,6rem)', alignItems: 'start' }} className="contact-grid">

          {/* Left: Info */}
          <div>
            <Reveal>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.8rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#2D8CFF', marginBottom: '1.25rem' }}>Kontak</p>
            </Reveal>
            <Reveal delay={80}>
              <h1 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: 'clamp(2.2rem,5vw,4rem)', fontWeight: 800, color: '#0D1117', letterSpacing: '-0.03em', lineHeight: 1.1, marginBottom: '1.5rem' }}>
                Mari mulai<br />percakapan.
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '1.05rem', color: '#475569', lineHeight: 1.75, marginBottom: '3rem' }}>
                Tidak perlu pitch deck atau proposal panjang. Ceritakan masalah bisnis Anda, dan kami akan berikan perspektif jujur — gratis.
              </p>
            </Reveal>

            {/* Contact details */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
              {[
                { icon: '📍', label: 'Lokasi', value: 'Bandung Innovation & Technology Center (BITC), Cimahi, Jawa Barat' },
                { icon: '📧', label: 'Email', value: 'hello@smarteksistem.com' },
                { icon: '💬', label: 'WhatsApp', value: '+62 812-1100-8850 — respons dalam 1 jam kerja' },
              ].map((c, i) => (
                <Reveal key={c.label} delay={240 + i * 70}>
                  <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
                    <div style={{ width: 44, height: 44, flexShrink: 0, borderRadius: 12, background: 'rgba(45,140,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.1rem' }}>{c.icon}</div>
                    <div>
                      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.75rem', fontWeight: 700, color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '0.2rem' }}>{c.label}</p>
                      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.92rem', color: '#374151', lineHeight: 1.5 }}>{c.value}</p>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>

            {/* What to expect */}
            <Reveal delay={500}>
              <div style={{ marginTop: '3rem', padding: '1.75rem', background: '#EBF4FF', borderRadius: 20, border: '1px solid rgba(45,140,255,0.12)' }}>
                <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.8rem', fontWeight: 700, color: '#2D8CFF', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '1rem' }}>Yang akan terjadi selanjutnya</p>
                {[
                  'Kami membaca pesan Anda dalam 1 hari kerja',
                  'Jika cocok, kami jadwalkan 30 menit discovery call',
                  'Kami deliver AI Audit dalam 1–2 hari',
                  'Anda mendapat laporan konkret — tanpa komitmen apapun',
                ].map((s, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginBottom: i < 3 ? '0.75rem' : 0 }}>
                    <div style={{ width: 20, height: 20, borderRadius: '50%', background: '#2D8CFF', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                      <span style={{ color: '#fff', fontSize: '0.6rem', fontWeight: 800 }}>{i + 1}</span>
                    </div>
                    <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.88rem', color: '#374151', lineHeight: 1.6 }}>{s}</p>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>

          {/* Right: Form */}
          <Reveal delay={200} direction="right">
            <div style={{ background: '#fff', borderRadius: 24, padding: 'clamp(2rem,4vw,3rem)', border: '1px solid #F1F5F9', boxShadow: '0 8px 48px rgba(0,0,0,0.06)', position: 'sticky', top: 100 }}>
              {sent ? (
                <div style={{ textAlign: 'center', padding: '3rem 1rem' }}>
                  <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'linear-gradient(135deg, #2D8CFF, #1460C8)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 1.5rem', fontSize: '1.8rem' }}>✓</div>
                  <h3 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: '1.5rem', fontWeight: 800, color: '#0D1117', marginBottom: '0.75rem' }}>Pesan terkirim!</h3>
                  <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.95rem', color: '#64748B', lineHeight: 1.7 }}>
                    Kami akan menghubungi Anda dalam 1 hari kerja. Untuk respons cepat, hubungi via WhatsApp.
                  </p>
                  <a href="https://wa.me/6281211008850?text=Halo%20Smartek%20X%2C%20saya%20sudah%20mengisi%20form%20kontak%20dan%20ingin%20follow%20up." target="_blank" rel="noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: '1.75rem', background: '#25D366', color: '#fff', borderRadius: 12, padding: '12px 24px', fontSize: '0.95rem', fontWeight: 600, fontFamily: 'Inter, sans-serif', textDecoration: 'none' }}>
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="#fff"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.118.549 4.107 1.51 5.831L0 24l6.335-1.487A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.8 9.8 0 01-5.03-1.385l-.36-.214-3.762.883.932-3.654-.235-.376A9.79 9.79 0 012.182 12C2.182 6.57 6.57 2.182 12 2.182S21.818 6.57 21.818 12 17.43 21.818 12 21.818z"/></svg>
                    Lanjut via WhatsApp
                  </a>
                </div>
              ) : (
                <form onSubmit={handleSubmit}>
                  <h2 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: '1.4rem', fontWeight: 800, color: '#0D1117', marginBottom: '0.5rem', letterSpacing: '-0.02em' }}>Minta AI Audit Gratis</h2>
                  <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.88rem', color: '#94A3B8', marginBottom: '2rem' }}>Isi form di bawah — kami akan follow up dalam 1 hari kerja.</p>

                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginBottom: '1rem' }}>
                    <div>
                      <label style={labelStyle}>Nama</label>
                      <input value={form.name} onChange={set('name')} required placeholder="Nama Anda" style={inputStyle}
                      onFocus={e => { e.target.style.borderColor = '#2D8CFF'; e.target.style.boxShadow = '0 0 0 3px rgba(45,140,255,0.12)'; }}
                      onBlur={e => { e.target.style.borderColor = '#E2E8F0'; e.target.style.boxShadow = 'none'; }} />
                    </div>
                    <div>
                      <label style={labelStyle}>Perusahaan</label>
                      <input value={form.company} onChange={set('company')} placeholder="Nama perusahaan" style={inputStyle}
                      onFocus={e => { e.target.style.borderColor = '#2D8CFF'; e.target.style.boxShadow = '0 0 0 3px rgba(45,140,255,0.12)'; }}
                      onBlur={e => { e.target.style.borderColor = '#E2E8F0'; e.target.style.boxShadow = 'none'; }} />
                    </div>
                  </div>

                  <div style={{ marginBottom: '1rem' }}>
                    <label style={labelStyle}>Email</label>
                    <input value={form.email} onChange={set('email')} required type="email" placeholder="email@perusahaan.com" style={inputStyle}
                    onFocus={e => { e.target.style.borderColor = '#2D8CFF'; e.target.style.boxShadow = '0 0 0 3px rgba(45,140,255,0.12)'; }}
                    onBlur={e => { e.target.style.borderColor = '#E2E8F0'; e.target.style.boxShadow = 'none'; }} />
                  </div>

                  <div style={{ marginBottom: '1rem' }}>
                    <label style={labelStyle}>Saya tertarik dengan</label>
                    <select value={form.type} onChange={set('type')} style={{ ...inputStyle, cursor: 'pointer' }}
                    onFocus={e => { e.target.style.borderColor = '#2D8CFF'; e.target.style.boxShadow = '0 0 0 3px rgba(45,140,255,0.12)'; }}
                    onBlur={e => { e.target.style.borderColor = '#E2E8F0'; e.target.style.boxShadow = 'none'; }}>
                      <option value="audit">AI Audit Gratis (mulai dari sini)</option>
                      <option value="essentials">Smartek X Essentials (UMKM)</option>
                      <option value="enterprise">Smartek X Enterprise</option>
                      <option value="other">Lainnya / Diskusi umum</option>
                    </select>
                  </div>

                  <div style={{ marginBottom: '1.75rem' }}>
                    <label style={labelStyle}>Ceritakan masalah bisnis Anda</label>
                    <textarea value={form.message} onChange={set('message')} rows={4} placeholder="Proses apa yang paling menyita waktu? Apa yang ingin Anda otomasi atau tingkatkan?" style={{ ...inputStyle, resize: 'vertical', minHeight: 100 }}
                    onFocus={e => { e.target.style.borderColor = '#2D8CFF'; e.target.style.boxShadow = '0 0 0 3px rgba(45,140,255,0.12)'; }}
                    onBlur={e => { e.target.style.borderColor = '#E2E8F0'; e.target.style.boxShadow = 'none'; }} />
                  </div>

                  {error && (
                    <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.85rem', color: '#DC2626', marginBottom: '1rem', textAlign: 'center' }}>{error}</p>
                  )}
                  <button type="submit" disabled={submitting} style={{
                    width: '100%', background: submitting ? '#C8DC20' : '#E8FF47', color: '#0D1117', border: 'none', borderRadius: 14,
                    padding: '15px', fontSize: '1rem', fontWeight: 700,
                    cursor: submitting ? 'not-allowed' : 'pointer', fontFamily: 'Inter, sans-serif',
                    boxShadow: '0 4px 20px rgba(45,140,255,0.3)',
                    transition: 'transform 0.15s, box-shadow 0.15s',
                    letterSpacing: '-0.01em',
                  }}
                  onMouseEnter={e => { if (!submitting) { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 6px 28px rgba(45,140,255,0.4)'; } }}
                  onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 4px 20px rgba(45,140,255,0.3)'; }}
                  >
                    {submitting ? 'Mengirim...' : 'Kirim & Minta AI Audit'}
                  </button>
                  <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.78rem', color: '#94A3B8', textAlign: 'center', marginTop: '0.75rem' }}>
                    Gratis. Tanpa komitmen. Respons dalam 1 hari kerja.
                  </p>
                </form>
              )}
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { ContactPage });