// Contact page with working form + validation

const ContactPage = ({ showToast }) => {
  useLucide();
  const [form, setForm] = React.useState({
    name: '',
    email: '',
    phone: '',
    intent: 'buying',
    message: '',
    contactBy: 'email',
  });
  const [err, setErr] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = 'Please tell me your name';
    if (!form.email.includes('@') || form.email.length < 5) next.email = 'A real email please';
    if (!form.message.trim() || form.message.length < 10) next.message = 'A bit more context helps — even one line';
    setErr(next);
    if (Object.keys(next).length !== 0) return;

    setSending(true);
    const ok = await window.sendLead({
      subject: `New contact enquiry (${form.intent}) — ${form.name}`,
      replyTo: form.email,
      fields: {
        Name: form.name,
        Email: form.email,
        Phone: form.phone || '—',
        Interested_in: form.intent,
        Preferred_contact: form.contactBy,
        Message: form.message,
      },
    });
    setSending(false);

    if (ok) {
      setSent(true);
      showToast("Sent — I'll reply within 24 hours. Thank you.");
      setForm({ name: '', email: '', phone: '', intent: 'buying', message: '', contactBy: 'email' });
      setTimeout(() => setSent(false), 6000);
    } else {
      showToast(`Couldn't send just now — please email me at ${SITE_DATA.agent.email} or call ${SITE_DATA.agent.phone}.`);
    }
  };

  return (
    <div className="page">
      <div className="page-head container">
        <span className="eyebrow">Contact</span>
        <h1 style={{ marginTop: 14 }}>Let's start a conversation.</h1>
        <p className="lead">The form goes straight to my inbox. For anything urgent, the phone is faster — I usually answer between 8am and 8pm.</p>
      </div>

      <section className="section container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'clamp(40px, 6vw, 100px)' }} className="contact-grid">
          {/* Form */}
          <div>
            {sent ? (
              <div className="card" style={{ padding: 48, textAlign: 'center' }}>
                <div style={{ width: 64, height: 64, borderRadius: 999, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
                  <Icon name="check" size={28} />
                </div>
                <h3 className="serif" style={{ fontSize: 28 }}>Message sent.</h3>
                <p style={{ marginTop: 12, color: 'var(--ink-2)' }}>I'll get back to you within 24 hours.</p>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div>
                    <label className="field-label">Your name *</label>
                    <input className="input" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Full name" />
                    {err.name && <div className="field-error">{err.name}</div>}
                  </div>
                  <div>
                    <label className="field-label">Phone</label>
                    <input className="input" type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="(604) 000-0000" />
                  </div>
                </div>

                <div>
                  <label className="field-label">Email *</label>
                  <input className="input" type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="you@example.com" />
                  {err.email && <div className="field-error">{err.email}</div>}
                </div>

                <div>
                  <label className="field-label">What can I help with?</label>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {[
                      { id: 'buying', label: 'Buying' },
                      { id: 'selling', label: 'Selling' },
                      { id: 'investing', label: 'Investing' },
                      { id: 'rental', label: 'Renting / managing' },
                      { id: 'valuation', label: 'Home valuation' },
                      { id: 'other', label: 'Just curious' },
                    ].map(o => (
                      <button
                        key={o.id}
                        type="button"
                        className={`filter-chip ${form.intent === o.id ? 'active' : ''}`}
                        onClick={() => setForm({ ...form, intent: o.id })}
                      >
                        {o.label}
                      </button>
                    ))}
                  </div>
                </div>

                <div>
                  <label className="field-label">Tell me more *</label>
                  <textarea
                    className="textarea"
                    value={form.message}
                    onChange={(e) => setForm({ ...form, message: e.target.value })}
                    placeholder="Neighborhood, budget, timeline, what you've tried so far — whatever feels relevant."
                  />
                  {err.message && <div className="field-error">{err.message}</div>}
                </div>

                <div>
                  <label className="field-label">Best way to reach you</label>
                  <div style={{ display: 'flex', gap: 8 }}>
                    {[
                      { id: 'email', label: 'Email', icon: 'mail' },
                      { id: 'phone', label: 'Phone call', icon: 'phone' },
                      { id: 'text', label: 'Text', icon: 'message-square' },
                    ].map(o => (
                      <button
                        key={o.id}
                        type="button"
                        className={`filter-chip ${form.contactBy === o.id ? 'active' : ''}`}
                        onClick={() => setForm({ ...form, contactBy: o.id })}
                        style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}
                      >
                        <Icon name={o.icon} size={14} /> {o.label}
                      </button>
                    ))}
                  </div>
                </div>

                <button type="submit" className="btn btn-primary" disabled={sending} style={{ alignSelf: 'flex-start', marginTop: 8, padding: '16px 32px', opacity: sending ? 0.7 : 1 }}>
                  {sending ? 'Sending…' : <>Send message <Icon name="arrow-right" size={16} /></>}
                </button>

                <p style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>
                  By submitting, you agree I can contact you about your request. No marketing list, no follow-up spam.
                </p>
              </form>
            )}
          </div>

          {/* Sidebar */}
          <aside style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div className="card" style={{ padding: 32 }}>
              <span className="eyebrow">Direct lines</span>
              <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
                <a href={`tel:${SITE_DATA.agent.phone}`} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 16 }}>
                  <Icon name="phone" size={18} />
                  <span>{SITE_DATA.agent.phone}</span>
                </a>
                <a href={`mailto:${SITE_DATA.agent.email}`} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 16 }}>
                  <Icon name="mail" size={18} />
                  <span>{SITE_DATA.agent.email}</span>
                </a>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 16, color: 'var(--ink-2)' }}>
                  <Icon name="map-pin" size={18} />
                  <span>Vancouver, BC</span>
                </div>
              </div>
            </div>

            <div className="card" style={{ padding: 32 }}>
              <span className="eyebrow">Office hours</span>
              <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14, color: 'var(--ink-2)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Monday – Friday</span><span>8am – 8pm</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Saturday</span><span>9am – 6pm</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Sunday</span><span>By appointment</span></div>
              </div>
              <p style={{ marginTop: 16, fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.6 }}>
                Showings typically run evenings and weekends. Email or text is the fastest way to reach me outside business hours.
              </p>
            </div>

            <div className="card" style={{ padding: 32, background: 'var(--bg-deep)', color: '#fff', borderColor: 'transparent' }}>
              <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.65)' }}>Follow along</span>
              <p style={{ marginTop: 14, color: 'rgba(255,255,255,0.8)', fontSize: 14, lineHeight: 1.6 }}>
                New listings, sold properties, and neighbourhood tours go up here first.
              </p>
              <div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
                <a href={SITE_DATA.agent.instagram} target="_blank" rel="noopener noreferrer" className="btn btn-ghost-on-dark" style={{ padding: '10px 16px' }}>
                  <Icon name="instagram" size={16} /> Instagram
                </a>
                <a href={SITE_DATA.agent.youtube} target="_blank" rel="noopener noreferrer" className="btn btn-ghost-on-dark" style={{ padding: '10px 16px' }}>
                  <Icon name="youtube" size={16} /> YouTube
                </a>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
};
window.ContactPage = ContactPage;