/* global React */

function ContactPage({ onNavigate }) {
  const c = window.SITE_CONTACT;
  const initialForm = { enquiryType: "General stay enquiry", name: "", email: "", phone: "", message: "" };
  const [form, setForm] = React.useState(initialForm);
  const [status, setStatus] = React.useState({ state: "idle", message: "" });
  const setField = (field, value) => setForm((current) => ({ ...current, [field]: value }));
  const submit = async (event) => {
    event.preventDefault();
    setStatus({ state: "loading", message: "Sending message..." });
    const response = await fetch("/api/enquiries", {
      method: "POST",
      headers: { "content-type": "application/json" },
    body: JSON.stringify({ type: "contact", ...form }),
    });
    const result = await response.json();
    if (!response.ok || !result.ok) {
      setStatus({ state: "error", message: result.error || "Please check your details and try again." });
      return;
    }
    setStatus({ state: "sent", message: `Thanks, we'll be in touch shortly. Reference ${result.reference}.` });
    setForm(initialForm);
  };
  return (
    <div>
      <section className="ws-hero ws-hero--split ws-contact-hero">
        <div className="ws-hero__copy">
          <div className="ws-hero__eyebrow">Contact Us</div>
          <h1 className="ws-hero__title">We're here to help</h1>
          <p className="ws-hero__body ws-hero__body--one-line">Have a question about your stay or availability? Get in touch, we'd love to hear from you.</p>
          <div className="ws-hero__cta">
            <button className="ws-btn ws-btn--ghost" onClick={() => document.querySelector(".ws-textarea")?.scrollIntoView({ behavior: "smooth", block: "center" })}><Icon name="mail" size={14} /> Enquire Now</button>
          </div>
        </div>
        <div className="ws-hero__bg" style={{ backgroundImage: `url(${window.WS_PHOTO_SRC("exterior", 3)})` }} />
      </section>

      <section className="ws-section ws-on-cream" style={{ padding: "70px 0" }}>
        <div className="ws-container">
          <div className="ws-contact-grid">
            {/* GET IN TOUCH */}
            <div>
              <div className="ws-opener is-left" style={{ marginBottom: 28 }}>
                <div className="ws-opener__eyebrow">Get In Touch</div>
                <span className="ws-opener__rule"><span className="d" /></span>
              </div>
              <div style={{ display:"flex", flexDirection:"column", gap: 22 }}>
                {[
                  { icon:"phone", label:"Phone", val:<a className="ws-contact-link" href={c.phoneHref}>{c.phone}</a> },
                  { icon:"mail",  label:"Email", val:<a className="ws-contact-link" href={c.emailHref}>{c.email}</a> },
                  { icon:"map-pin", label:"Address", val:<span>{c.addressLines[0]},<br />{c.addressLines[1]}<br />{c.addressLines[2]}</span> },
                  { icon:"clock", label:"Response Time", val:"We aim to reply within a few hours." },
                  { icon:"instagram", label:"Instagram", val:<a className="ws-contact-link" href={c.instagramUrl} target="_blank" rel="noopener noreferrer">{c.instagram}</a> },
                  { icon:"external-link", label:"Airbnb", val:<a href={c.airbnbUrl} target="_blank" rel="noopener noreferrer">airbnb.ie/h/williamstreet59</a> },
                ].map((row, i) => (
                  <div key={i} style={{ display:"flex", alignItems:"flex-start", gap: 14 }}>
                    <span style={{ width:36, height:36, borderRadius:"50%", background:"var(--ws-navy)", color:"var(--ws-gold)", display:"inline-flex", alignItems:"center", justifyContent:"center", flex:"0 0 auto" }}>
                      <Icon name={row.icon} size={14} />
                    </span>
                    <div>
                      <div style={{ fontFamily:"var(--ws-sans)", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", color:"var(--ws-muted)", marginBottom: 3 }}>{row.label}</div>
                      <div style={{ fontFamily:"var(--ws-sans)", fontSize:14, color:"var(--ws-ink)", fontWeight:500 }}>{row.val}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* MAP */}
            <div>
              <div className="ws-opener is-left" style={{ marginBottom: 28 }}>
                <div className="ws-opener__eyebrow">Find Us</div>
                <span className="ws-opener__rule"><span className="d" /></span>
              </div>
              <div className="ws-map-embed" aria-label="Map and directions for 59 William Street Listowel">
                <iframe
                  src="https://storage.googleapis.com/maps-solutions-7bavfwdbt3/commutes/qhsn/commutes.html"
                  title="Directions to 59 William Street Listowel"
                  width="100%"
                  height="100%"
                  style={{ border: 0 }}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                />
              </div>
              <h3 style={{ marginTop: 22, marginBottom: 8 }}>In the heart of Listowel</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ws-ink-soft)" }}>We are located on William Street, right in the centre of Listowel. Everything you need is just a short walk away, including cafés, pubs, shops and local attractions.</p>
              <button className="ws-btn ws-btn--ghost" style={{ color:"var(--ws-gold-deep)", borderColor:"var(--ws-gold-deep)", marginTop: 8 }} onClick={() => window.open(c.mapsUrl, "_blank", "noopener,noreferrer")}>
                <Icon name="map-pin" size={14} /> View in Google Maps
              </button>
            </div>

            {/* FORM */}
            <div>
              <div className="ws-opener is-left" style={{ marginBottom: 28 }}>
                <div className="ws-opener__eyebrow">Send Us a Message</div>
                <span className="ws-opener__rule"><span className="d" /></span>
              </div>
              <form onSubmit={submit} style={{ display:"flex", flexDirection:"column", gap:14 }}>
                <select className="ws-input" value={form.enquiryType} onChange={(e) => setField("enquiryType", e.target.value)} aria-label="Enquiry type">
                  <option>General stay enquiry</option>
                  <option>Wedding accommodation enquiry</option>
                  <option>Photo shoot or filming enquiry</option>
                  <option>Photographer or production support</option>
                </select>
                <input className="ws-input" value={form.name} onChange={(e) => setField("name", e.target.value)} placeholder="Your Name" />
                <input className="ws-input" type="email" value={form.email} onChange={(e) => setField("email", e.target.value)} placeholder="Email Address" />
                <input className="ws-input" value={form.phone} onChange={(e) => setField("phone", e.target.value)} placeholder="Phone Number (optional)" />
                <textarea className="ws-textarea" value={form.message} onChange={(e) => setField("message", e.target.value)} placeholder="How can we help?" rows={5} />
                <button type="submit" className="ws-btn ws-btn--navy" style={{ width: "100%", marginTop: 6 }} disabled={status.state === "loading"}>
                  {status.state === "loading" ? "Sending..." : "Send Message"}
                </button>
                {status.message && <div style={{ color: status.state === "error" ? "#8B2E2E" : "var(--ws-gold-deep)", fontSize: 13, textAlign:"center" }}>{status.message}</div>}
                <div style={{ fontSize: 12, color: "var(--ws-muted)", marginTop: 4 }}>We respect your privacy. Your information will never be shared.</div>
              </form>
            </div>
          </div>
        </div>
      </section>

      <CTAStrip
        title="We look forward to welcoming you"
        body="Experience heritage charm, modern comfort and true Kerry hospitality at 59 William Street."
        onPrimary={() => onNavigate("book")}
      />
    </div>
  );
}

window.ContactPage = ContactPage;