// Page: Contact
const { useState: useStateContact } = React;

function ContactPage({ pushToast, hours }) {
  const hoursList = Array.isArray(hours) && hours.length ? hours : DEFAULT_HOURS;
  const [form, setForm] = useStateContact({ name: "", email: "", subject: "", message: "" });
  const [errors, setErrors] = useStateContact({});
  const [sending, setSending] = useStateContact(false);
  function update(k, v) { setForm((f) => ({ ...f, [k]: v })); }

  async function submit(ev) {
    ev.preventDefault();
    const e = {};
    if (!form.name.trim()) e.name = "Please tell us your name.";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Enter a valid email.";
    if (!form.subject.trim()) e.subject = "Please add a subject.";
    if (!form.message.trim()) e.message = "Please add a message.";
    setErrors(e);
    if (Object.keys(e).length) return;

    setSending(true);
    try {
      const res = await fetch("/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error("send failed");
      pushToast && pushToast("Message sent — thank you!");
      setForm({ name: "", email: "", subject: "", message: "" });
    } catch (err) {
      console.error("[contact form]", err);
      pushToast && pushToast("Sorry — something went wrong. Please try again.");
    } finally {
      setSending(false);
    }
  }

  return (
    <main id="main">
      <PageHeader
        eyebrow="Get in touch"
        title="Drop in, ring, or write."
        sub="The studio is on the High Street in Kirkcaldy. Walk in for a chat, or send a message and we'll get back within a working day or two."
      />

      <section className="section" style={{ paddingTop: 32 }}>
        <div className="container">
          <div className="two-col" style={{ alignItems: "start" }}>
            <div>
              <h2 style={{ marginBottom: 16 }}>Holibags Studio</h2>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 14 }}>
                <li style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ color: "var(--accent)" }}><Icon.Pin /></span>
                  <span>305a High Street<br />Kirkcaldy<br />KY1 1JL</span>
                </li>
                <li style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ color: "var(--accent)" }}><Icon.Phone /></span>
                  <a href={`tel:${BUSINESS.phone.replace(/\s/g, '')}`}>{BUSINESS.phone}</a>
                </li>
                <li style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ color: "var(--accent)" }}><Icon.Mail /></span>
                  <a href={`mailto:${BUSINESS.email}`}>{BUSINESS.email}</a>
                </li>
                <li style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ color: "var(--accent)", paddingTop: 2 }}><Icon.Clock /></span>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                    {hoursList.map((h) => (
                      <li key={h.day} style={{ display: "flex", justifyContent: "space-between", maxWidth: 220, fontSize: ".95rem" }}>
                        <span style={{ color: "var(--muted)" }}>{h.day}</span>
                        <span>{h.hours}</span>
                      </li>
                    ))}
                  </ul>
                </li>
              </ul>

              <hr className="stitch-divider" />

              <div style={{ borderRadius: "var(--radius)", overflow: "hidden", border: "1px solid var(--line)" }}>
                <iframe
                  title="Holibags on the map"
                  src="https://www.google.com/maps?q=305a%20High%20Street%2C%20Kirkcaldy%2C%20KY1%201JL&output=embed"
                  width="100%"
                  height="280"
                  style={{ border: 0, display: "block" }}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                />
              </div>
            </div>

            <aside style={{ background: "var(--surface)", padding: 28, borderRadius: "var(--radius)", border: "1px solid var(--line)" }}>
              <h3 style={{ fontFamily: "var(--font-serif)", marginBottom: 4 }}>Send a message</h3>
              <p style={{ color: "var(--ink-2)", marginBottom: 18, fontSize: ".95rem" }}>
                For alterations, just describe the garment and what you need.
              </p>
              <form onSubmit={submit} noValidate style={{ display: "grid", gap: 12 }}>
                <div className="field">
                  <label htmlFor="c-name">Name *</label>
                  <input id="c-name" className="input" value={form.name} onChange={(e) => update("name", e.target.value)} />
                  {errors.name && <span className="error-text">{errors.name}</span>}
                </div>
                <div className="field">
                  <label htmlFor="c-email">Email *</label>
                  <input id="c-email" className="input" type="email" value={form.email} onChange={(e) => update("email", e.target.value)} />
                  {errors.email && <span className="error-text">{errors.email}</span>}
                </div>
                <div className="field">
                  <label htmlFor="c-subject">Subject *</label>
                  <input id="c-subject" className="input" value={form.subject} onChange={(e) => update("subject", e.target.value)} />
                  {errors.subject && <span className="error-text">{errors.subject}</span>}
                </div>
                <div className="field">
                  <label htmlFor="c-msg">Message *</label>
                  <textarea id="c-msg" className="textarea" value={form.message}
                            onChange={(e) => update("message", e.target.value)} />
                  {errors.message && <span className="error-text">{errors.message}</span>}
                </div>
                <button className="btn btn-primary" type="submit" disabled={sending}
                        style={{ justifySelf: "start", opacity: sending ? 0.6 : 1 }}>
                  {sending ? "Sending…" : <React.Fragment>Send message <Icon.Arrow /></React.Fragment>}
                </button>
              </form>
            </aside>
          </div>

          <hr className="stitch-divider" />

          <div className="two-col" style={{ alignItems: "center" }}>
            <div>
              <h2>Mailing list</h2>
              <p style={{ color: "var(--ink-2)" }}>Workshop dates, new arrivals, and the occasional sewing tip.</p>
            </div>
            <MailingList />
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ContactPage });