/* Contact page (contact.html) */

const CONTACT_FIELDS = [
  { key: "name", label: "Your name", required: true, full: false },
  { key: "email", label: "Email", type: "email", required: true, full: false },
  { key: "phone", label: "Phone", type: "tel", required: false, full: false },
  { key: "topic", label: "What can we help with?", type: "select", required: true, full: false,
    placeholder: "Pick one",
    options: [
      "General question",
      "Booking help",
      "Existing customer support",
      "Business storage",
      "Vehicle storage",
      "Delivery & pickup",
      "Something else",
    ] },
  { key: "message", label: "Message", type: "textarea", required: true, full: true, placeholder: "Tell us what you need…" },
];

const ContactPage = () => (
  <Page>
    <PageHero
      eyebrow="Contact"
      title="Talk to us."
      lede="Real people, in Blairgowrie. We get back within one business day."
    />

    <section className="section section--mist" style={{ paddingTop: 40 }}>
      <div className="container">
        <div className="contact-grid">
          {/* Left — contact info */}
          <div className="contact-side">
            <h2>How to reach us</h2>

            <div className="contact-block">
              <div className="lbl">Phone</div>
              <div className="val"><a href="tel:0359880000">03 5988 0000</a></div>
              <div className="sub">Tap to call. Friday &amp; Saturday office hours below.</div>
            </div>

            <div className="contact-block">
              <div className="lbl">Email</div>
              <div className="val"><a href="mailto:hello@storagecartel.com.au">hello@storagecartel.com.au</a></div>
              <div className="sub">We answer within one business day.</div>
            </div>

            <div className="contact-block">
              <div className="lbl">Address</div>
              <div className="val">45 Hughes Road<br />Blairgowrie VIC 3942</div>
              <div className="sub">Off Point Nepean Road. Look for the navy fence and the sign.</div>
            </div>

            <div className="contact-block">
              <div className="lbl">Office hours</div>
              <div className="val" style={{ fontSize: 18, lineHeight: 1.5 }}>Friday · 9am – 4pm<br />Saturday · 9am – 2pm</div>
              <div className="sub">Outside these hours: email or use the form — we respond within one business day.</div>
            </div>

            <div className="contact-block" style={{ borderBottom: 0, paddingBottom: 0 }}>
              <div className="lbl">Existing customer?</div>
              <div className="val" style={{ fontSize: 16 }}>
                <a href="login.html" style={{ color: "var(--red)" }}>Sign in →</a>
              </div>
            </div>
          </div>

          {/* Right — form */}
          <div className="contact-form">
            <SectionHead eyebrow="Or send us a message" title="We'll come back to you." />
            <EnquiryForm
              fields={CONTACT_FIELDS}
              submitLabel="Send message"
              helperText="We respond within one business day. For urgent matters affecting an existing booking, please call."
            />
          </div>
        </div>
      </div>
    </section>

    {/* Map placeholder */}
    <section className="section section--steel" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="location-grid" style={{ borderTop: 0 }}>
          <div className="location-info">
            <h2 style={{ fontSize: "clamp(28px, 3vw, 38px)" }}>Find us in Blairgowrie</h2>
            <address>
              45 Hughes Road<br />
              Blairgowrie VIC 3942
            </address>
            <div className="location-meta">
              <div><b>From Melbourne</b> About 90 minutes from the CBD via the Mornington Peninsula Freeway.</div>
              <div><b>From Sorrento</b> 6 minutes — straight up Point Nepean Road.</div>
              <div><b>From Rosebud</b> 12 minutes via Boneo Road.</div>
            </div>
            <div className="serving">
              Serving Blairgowrie, Sorrento, Rye, Tootgarook, Rosebud, Dromana, McCrae, Safety Beach and the wider Mornington Peninsula.
            </div>
          </div>
          <div className="map-frame">
            <MapArt />
            <div className="map-pin">
              <div className="label">Storage Cartel · Blairgowrie</div>
              <div className="pin-dot" />
            </div>
          </div>
        </div>
      </div>
    </section>
  </Page>
);

ReactDOM.createRoot(document.getElementById("root")).render(<ContactPage />);