function Contact() {
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', message: '' });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const update = (k) => (e) => {
    setForm({ ...form, [k]: e.target.value });
    if (errors[k]) setErrors({ ...errors, [k]: null });
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Please enter your name';
    if (!form.email.trim()) e.email = 'Please enter your email';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'That email does not look quite right';
    if (form.phone && !/^[0-9+\s()-]{6,}$/.test(form.phone)) e.phone = 'Please use digits only';
    if (!form.message.trim() || form.message.trim().length < 10) e.message = 'A few more details would be helpful';
    return e;
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const errs = validate();
    setErrors(errs);
    if (Object.keys(errs).length) return;
    setSubmitting(true);
    setTimeout(() => {
      console.log('[Contact submission]', form);
      setSubmitting(false);
      setSent(true);
    }, 700);
  };

  const reset = () => {
    setForm({ name: '', email: '', phone: '', message: '' });
    setErrors({});
    setSent(false);
  };

  return (
    <section id="contact" className="py-24 md:py-32 border-t border-[var(--line)]">
      <div className="max-w-[1240px] mx-auto px-6 md:px-10">
        <div className="grid md:grid-cols-12 gap-12 md:gap-16">
          <div className="md:col-span-5">
            <p className="text-[12px] tracking-[0.18em] uppercase text-[var(--accent)] mb-4 reveal">
              Contact · 05
            </p>
            <h2 className="font-display font-light text-[36px] sm:text-[44px] md:text-[58px] leading-[1.02] tracking-tight reveal reveal-delay-1">
              Start with a simple property conversation.
            </h2>
            <p className="mt-6 text-[16px] leading-[1.65] text-[var(--ink-2)] max-w-[420px] reveal reveal-delay-2">
              If you are thinking about selling, buying or just want a clearer read on the market, send Clair a note. For the live site, this form can connect to email, CRM or a booking calendar.
            </p>

            <div className="mt-10 space-y-5 reveal reveal-delay-3">
              <a
                href="tel:+61400000000"
                className="flex items-center gap-4 group"
              >
                <span
                  className="w-11 h-11 rounded-full grid place-items-center"
                  style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}
                >
                  <IconPhone />
                </span>
                <span>
                  <span className="block text-[10px] tracking-[0.18em] uppercase text-[var(--muted)]">Phone</span>
                  <span className="font-display text-[20px] link-underline">0400 000 000</span>
                </span>
              </a>

              <a
                href="mailto:hello@clairproperty.com.au"
                className="flex items-center gap-4 group"
              >
                <span
                  className="w-11 h-11 rounded-full grid place-items-center"
                  style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}
                >
                  <IconMail />
                </span>
                <span>
                  <span className="block text-[10px] tracking-[0.18em] uppercase text-[var(--muted)]">Email</span>
                  <span className="font-display text-[20px] link-underline">hello@clairproperty.com.au</span>
                </span>
              </a>

              <div className="flex items-center gap-4">
                <span
                  className="w-11 h-11 rounded-full grid place-items-center"
                  style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}
                >
                  <IconPin />
                </span>
                <span>
                  <span className="block text-[10px] tracking-[0.18em] uppercase text-[var(--muted)]">Area</span>
                  <span className="font-display text-[20px]">Bayside Melbourne</span>
                </span>
              </div>
            </div>

            <div className="hairline mt-12" />
            <div className="mt-6 text-[12px] tracking-[0.14em] uppercase text-[var(--muted)] reveal">
              Appointments by request · Monday to Saturday
            </div>
          </div>

          <div className="md:col-span-7 reveal reveal-delay-2">
            <div
              className="relative border border-[var(--line)] rounded-[28px] p-7 md:p-10 shadow-[0_30px_80px_-64px_rgba(33,27,23,.45)]"
              style={{ background: 'var(--bg-2)' }}
            >
              <div
                className={`absolute inset-0 grid place-items-center text-center px-6 transition-all duration-500 rounded-[28px] ${
                  sent ? 'opacity-100' : 'opacity-0 pointer-events-none'
                }`}
                style={{ background: 'var(--bg-2)' }}
              >
                <div>
                  <div
                    className="w-14 h-14 rounded-full grid place-items-center mx-auto"
                    style={{ background: 'var(--accent)', color: 'var(--accent-ink)' }}
                  >
                    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M5 12.5 L10 17 L19 7" />
                    </svg>
                  </div>
                  <h3 className="font-display text-[28px] md:text-[32px] mt-5 leading-tight">
                    Thanks {form.name.split(' ')[0] || 'there'}, message received.
                  </h3>
                  <p className="mt-3 text-[15px] text-[var(--ink-2)] max-w-[380px] mx-auto">
                    Clair will get back to you at <span className="text-[var(--ink)]">{form.email || 'your email'}</span> soon.
                  </p>
                  <button
                    onClick={reset}
                    className="btn-ghost mt-6 inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-[13px] font-medium"
                  >
                    Send another
                  </button>
                </div>
              </div>

              <form onSubmit={onSubmit} noValidate className={sent ? 'invisible' : ''}>
                <div className="grid sm:grid-cols-2 gap-5 md:gap-7">
                  <div className={`field ${errors.name ? 'error' : ''}`}>
                    <label htmlFor="c-name">Name</label>
                    <input id="c-name" type="text" value={form.name} onChange={update('name')} placeholder="Your name" />
                    {errors.name && <div className="field-error">{errors.name}</div>}
                  </div>
                  <div className={`field ${errors.email ? 'error' : ''}`}>
                    <label htmlFor="c-email">Email</label>
                    <input id="c-email" type="email" value={form.email} onChange={update('email')} placeholder="you@email.com" />
                    {errors.email && <div className="field-error">{errors.email}</div>}
                  </div>
                  <div className={`field ${errors.phone ? 'error' : ''}`}>
                    <label htmlFor="c-phone">Phone <span className="normal-case tracking-normal text-[var(--muted)]">(optional)</span></label>
                    <input id="c-phone" type="tel" value={form.phone} onChange={update('phone')} placeholder="0400 000 000" />
                    {errors.phone && <div className="field-error">{errors.phone}</div>}
                  </div>
                  <div className="field">
                    <label htmlFor="c-suburb">Suburb <span className="normal-case tracking-normal text-[var(--muted)]">(optional)</span></label>
                    <input id="c-suburb" type="text" placeholder="Brighton, Hampton, Sandringham" />
                  </div>
                </div>

                <div className={`field mt-6 md:mt-8 ${errors.message ? 'error' : ''}`}>
                  <label htmlFor="c-message">Message</label>
                  <textarea
                    id="c-message"
                    rows="4"
                    value={form.message}
                    onChange={update('message')}
                    placeholder="Tell Clair what you are thinking about, even if it is early."
                  />
                  {errors.message && <div className="field-error">{errors.message}</div>}
                </div>

                <div className="mt-8 flex items-center justify-between gap-4 flex-wrap">
                  <p className="text-[11px] tracking-[0.06em] text-[var(--muted)] max-w-[340px]">
                    Demo note: replace the phone, email and form destination with Clair's real details before launch.
                  </p>
                  <button
                    type="submit"
                    disabled={submitting}
                    className="btn-primary inline-flex items-center gap-2 px-5 py-3 rounded-full text-[14px] font-medium disabled:opacity-60"
                  >
                    {submitting ? 'Sending...' : 'Send enquiry'}
                    {!submitting && <IconArrowRight />}
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });