const fieldStyle = {
  width: "100%",
  background: "var(--color-canvas)",
  border: "1px solid var(--color-hairline-translucent)",
  borderRadius: "var(--radius-md)",
  padding: "12px 20px",
  fontFamily: "var(--font-text)",
  fontSize: "17px",
  letterSpacing: "-0.374px",
  color: "var(--color-ink)",
  outline: "none",
};

/* Contact form — posts to /api/contact, which emails info@tamarackclinic.ca. */
function ContactForm() {
  const TM = window.TamarackMedicalDesignSystem_c56b47;
  const { TMIcons } = window;
  const initial = { name: "", email: "", phone: "", reason: "General inquiry", message: "", website: "" };
  const [values, setValues] = React.useState(initial);
  const [status, setStatus] = React.useState("idle"); // idle | sending | success | error
  const [error, setError] = React.useState("");

  const set = (key) => (e) => setValues((v) => ({ ...v, [key]: e.target.value }));

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!values.name.trim() || !values.message.trim()) {
      setStatus("error");
      setError("Please fill in your name and a message.");
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
      setStatus("error");
      setError("Please enter a valid email address.");
      return;
    }
    setStatus("sending");
    setError("");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(values),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data.error || "Something went wrong. Please try again.");
      setStatus("success");
      setValues(initial);
    } catch (err) {
      setStatus("error");
      setError(err.message || "We couldn't send your message. Please call the clinic instead.");
    }
  };

  if (status === "success") {
    return (
      <div style={{ textAlign: "center", padding: "var(--space-lg) 0" }}>
        <span style={{ display: "inline-flex", width: 60, height: 60, borderRadius: "50%", background: "var(--color-canvas-parchment)", color: "var(--color-green)", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
          <TMIcons.check size={28} />
        </span>
        <h3 style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, letterSpacing: "-0.374px", margin: "0 0 8px", color: "var(--color-navy)" }}>Message sent</h3>
        <p style={{ fontFamily: "var(--font-text)", fontSize: 16, lineHeight: 1.6, color: "var(--color-ink-muted-80)", margin: "0 0 20px" }}>
          Thanks for reaching out — we'll get back to you within one business day.
        </p>
        <TM.Button variant="secondary" onClick={() => setStatus("idle")}>Send another message</TM.Button>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 14, width: "100%" }} noValidate>
      {/* Honeypot — hidden from real visitors, bots tend to fill every field. */}
      <input
        type="text" name="website" value={values.website} onChange={set("website")}
        autoComplete="off" tabIndex={-1} aria-hidden="true"
        style={{ position: "absolute", left: -9999, width: 1, height: 1, opacity: 0 }}
      />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <input style={fieldStyle} type="text" placeholder="Full name" value={values.name} onChange={set("name")} aria-label="Full name" required />
        <input style={fieldStyle} type="email" placeholder="Email address" value={values.email} onChange={set("email")} aria-label="Email address" required />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <input style={fieldStyle} type="tel" placeholder="Phone (optional)" value={values.phone} onChange={set("phone")} aria-label="Phone number" />
        <select style={{ ...fieldStyle, cursor: "pointer" }} value={values.reason} onChange={set("reason")} aria-label="Reason for contacting us">
          <option>General inquiry</option>
          <option>Book an appointment</option>
          <option>Prescription refill</option>
          <option>Billing question</option>
          <option>Other</option>
        </select>
      </div>
      <textarea
        style={{ ...fieldStyle, resize: "vertical", lineHeight: 1.5 }}
        placeholder="How can we help?" rows={5} value={values.message} onChange={set("message")}
        aria-label="Your message" required
      />
      {status === "error" && (
        <p role="alert" style={{ fontFamily: "var(--font-text)", fontSize: 14, color: "#b3261e", margin: 0 }}>{error}</p>
      )}
      <TM.Button type="submit" variant="primary" disabled={status === "sending"} style={{ alignSelf: "flex-start" }}>
        {status === "sending" ? "Sending…" : "Send message"}
      </TM.Button>
    </form>
  );
}

/* Contact — the real Tamarack contact page: location, call, website cards,
   a map, a contact form, and hours. */
function Contact({ onNav, onBook }) {
  const TM = window.TamarackMedicalDesignSystem_c56b47;
  const { TMIcons, HoursOfOperation } = window;

  const CLINIC_EMAIL = "info@tamarackclinic.ca";

  const cards = [
    { Icon: TMIcons.pin, h: "Our location", lines: ["2373 Maple Rd NW", "Edmonton, AB T6T 0Y3"] },
    { Icon: TMIcons.phone, h: "Call us", lines: ["Phone: (780) 244-2873", "Fax: (780) 249-2873"] },
    { Icon: TMIcons.globe, h: "Online", lines: ["tamarackclinic.ca", CLINIC_EMAIL] },
  ];

  return (
    <div>
      {/* Hero — parchment */}
      <TM.Tile
        variant="parchment"
        eyebrow="Contact us"
        headline="We're here to help."
        tagline="Give us a call, send us an email, or book a visit — we'll get back to you as soon as possible."
        align="left"
        actions={<TM.Button variant="primary" onClick={onBook}>Book a visit</TM.Button>}
      />

      {/* Contact cards — white */}
      <section style={{ background: "var(--color-canvas)", padding: "var(--space-section) var(--space-lg) var(--space-xl)" }}>
        <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--gutter-grid)" }}>
          {cards.map(({ Icon, h, lines }) => (
            <div key={h} style={{ textAlign: "center", padding: "var(--space-xl)", border: "1px solid var(--color-hairline)", borderRadius: "var(--radius-lg)" }}>
              <span style={{ display: "inline-flex", width: 60, height: 60, borderRadius: "50%", background: "var(--color-canvas-parchment)", color: "var(--color-green)", alignItems: "center", justifyContent: "center", marginBottom: 16 }}><Icon size={28} /></span>
              <h3 style={{ fontFamily: "var(--font-text)", fontSize: 19, fontWeight: 600, letterSpacing: "-0.374px", margin: "0 0 8px", color: "var(--color-navy)" }}>{h}</h3>
              {lines.map((l) => (
                <div key={l} style={{ fontFamily: "var(--font-text)", fontSize: 16, lineHeight: 1.5, letterSpacing: "-0.3px", color: "var(--color-ink-muted-80)" }}>{l}</div>
              ))}
            </div>
          ))}
        </div>
      </section>

      {/* Map — full bleed-ish */}
      <section style={{ background: "var(--color-canvas)", padding: "0 var(--space-lg) var(--space-section)" }}>
        <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto" }}>
          <iframe
            title="Map to Tamarack Medical Clinic, 2373 Maple Rd NW, Edmonton"
            src="https://www.google.com/maps?q=Tamarack+Medical+Clinic,+2373+Maple+Rd+NW,+Edmonton,+AB+T6T+0Y3&output=embed"
            width="100%"
            height="360"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            allowFullScreen
            style={{ border: 0, display: "block", width: "100%", borderRadius: "var(--radius-lg)" }}
          />
        </div>
      </section>

      {/* Contact form — parchment */}
      <section style={{ background: "var(--color-canvas-parchment)", padding: "var(--space-section) var(--space-lg)" }}>
        <div style={{ maxWidth: 980, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: "var(--gutter-grid)", alignItems: "stretch" }}>

            {/* Left panel — navy */}
            <div style={{ background: "var(--color-navy)", borderRadius: "var(--radius-lg)", padding: "var(--space-xl)", color: "#fff", display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, letterSpacing: "-0.3px", margin: "0 0 16px", color: "#fff" }}>Professional care</h3>
              <p style={{ fontFamily: "var(--font-text)", fontSize: 16, lineHeight: 1.6, letterSpacing: "-0.3px", color: "rgba(255,255,255,0.86)", margin: 0 }}>
                Have a question or concern? Send us a message and we'll get back to you as soon as possible.
              </p>
              <p style={{ fontFamily: "var(--font-text)", fontSize: 16, lineHeight: 1.6, letterSpacing: "-0.3px", color: "rgba(255,255,255,0.86)", margin: "16px 0 0" }}>
                Prefer to talk? Call us at <strong style={{ color: "#fff" }}>(780) 244-2873</strong> during clinic hours.
              </p>
              <a href={`mailto:${CLINIC_EMAIL}`} style={{ color: "var(--color-green)", fontWeight: 600, marginTop: 16, display: "inline-block" }}>
                Or email {CLINIC_EMAIL} directly →
              </a>
            </div>

            {/* Right panel — white, real form */}
            <div style={{ background: "var(--color-canvas)", borderRadius: "var(--radius-lg)", border: "1px solid var(--color-hairline)", padding: "var(--space-xl)" }}>
              <ContactForm />
            </div>

          </div>
        </div>
      </section>

      {/* Hours — white */}
      <HoursOfOperation variant="white" />
    </div>
  );
}

Object.assign(window, { Contact });