// site/contact.jsx — Contact page
const { useState: useStateCO } = React;
const RAI_EMAIL = "abhineetrai@raiwm.co.uk";

function ContactPage() {
  const [form, setForm] = useStateCO({ name: "", email: "", phone: "", message: "" });
  const [sent, setSent] = useStateCO(false);
  const gridRef = useReveal();
  const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;

    const subject = `New enquiry from ${form.name} — Rai Wealth Management`;
    const lines = [
      `Full name:    ${form.name}`,
      `Email:        ${form.email}`,
      `Phone number: ${form.phone || "(not provided)"}`,
      "",
      "Message:",
      form.message,
      "",
      "— Sent from the Rai Wealth Management website",
    ];
    const body = lines.join("\n");
    const href =
      `mailto:${RAI_EMAIL}` +
      `?subject=${encodeURIComponent(subject)}` +
      `&body=${encodeURIComponent(body)}`;

    window.location.href = href;

    setSent(true);
    setTimeout(() => {
      setSent(false);
      setForm({ name: "", email: "", phone: "", message: "" });
    }, 5000);
  };

  return (
    <div data-screen-label="07 Contact">
      <PageHeading
        eyebrow="Get in touch"
        title="Contacts"
        sub="A conversation today can shape the decades ahead."
      />

      <section className="section-navy" data-comment-anchor="contact-grid">
        <div className="container">
          <div ref={gridRef} className="contact-grid stagger-grid">
            {/* Left — info */}
            <div className="contact-info">
              <div className="ci-block">
                <div className="ci-label">Email</div>
                <div className="ci-value">
                  <a href={`mailto:${RAI_EMAIL}`}>{RAI_EMAIL}</a>
                </div>
              </div>
              <div className="ci-block">
                <div className="ci-label">Telephone</div>
                <div className="ci-value">
                  <a href="tel:+447456010413">+44 (0) 7456 010413</a>
                </div>
              </div>
              <div className="ci-block">
                <div className="ci-label">Address</div>
                <address>
                  6 Westholme Gardens,<br />
                  Ruislip, HA4 8QJ<br />
                  United Kingdom
                </address>
              </div>
              <div className="ci-block">
                <div className="ci-label">Scan to connect</div>
                <div className="qr-frame" role="img" aria-label="QR code linking to Rai Wealth Management">
                  <img src="./assets/contact/rai-qr.jpeg" alt="QR code — Rai Wealth Management" className="qr-image" />
                </div>
              </div>
            </div>

            {/* Right — form */}
            <form className="contact-form" onSubmit={submit} noValidate>
              {sent && (
                <div className="cf-success" role="status">
                  <span className="dot" aria-hidden="true"></span>
                  <span>
                    Thank you — your email client has been opened with your
                    message ready to send to {RAI_EMAIL}.
                  </span>
                </div>
              )}
              <div className="cf-row">
                <label htmlFor="cf-name">Full name <span className="req">*</span></label>
                <input
                  id="cf-name" type="text" required
                  value={form.name} onChange={update("name")}
                  placeholder="Your full name"
                />
              </div>
              <div className="cf-row">
                <label htmlFor="cf-email">Your email <span className="req">*</span></label>
                <input
                  id="cf-email" type="email" required
                  value={form.email} onChange={update("email")}
                  placeholder="you@example.com"
                />
              </div>
              <div className="cf-row">
                <label htmlFor="cf-phone">Phone number</label>
                <input
                  id="cf-phone" type="tel"
                  value={form.phone} onChange={update("phone")}
                  placeholder="+44 …"
                />
              </div>
              <div className="cf-row">
                <label htmlFor="cf-message">Message <span className="req">*</span></label>
                <textarea
                  id="cf-message" required
                  value={form.message} onChange={update("message")}
                  placeholder="Tell us a little about what you're looking for…"
                />
              </div>
              <button type="submit" className="btn-gold-solid cf-submit">Submit</button>
            </form>
          </div>
        </div>
      </section>
    </div>
  );
}

window.ContactPage = ContactPage;