// Contact page for G Communities
const { useState: useStateContact } = React;

function ContactHero() {
  return (
    <section
      style={{
        paddingTop: 180,
        paddingBottom: 60,
        borderBottom: "1px solid var(--line)",
      }}
    >
      <div
        style={{
          maxWidth: 900,
          margin: "0 auto",
          padding: "0 32px",
          textAlign: "center",
        }}
      >
        <Reveal>
          <p className="eyebrow" style={{ marginBottom: 24 }}>
            Get in touch
          </p>
        </Reveal>
        <ClipLines
          tag="h1"
          className="display"
          lines={[
            <>
              We&rsquo;d love <span className="serif">to hear</span> from you.
            </>,
          ]}
        />
        <style>{`
          .contact-page h1.display { font-size: clamp(40px, 6vw, 88px); line-height: 1.05; }
        `}</style>
        <Reveal delay={250}>
          <p
            className="body-lg"
            style={{
              marginTop: 32,
              maxWidth: 620,
              marginLeft: "auto",
              marginRight: "auto",
            }}
          >
            Whether you&rsquo;re a current resident, considering one of our
            communities, or exploring partnership — fill in the form and a real
            person will reply within one business day.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function ContactForm() {
  const [sent, setSent] = useStateContact(false);
  const [form, setForm] = useStateContact({
    inquiry: "",
    name: "",
    email: "",
    dial: "+20",
    phone: "",
    community: "",
    message: "",
  });
  const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const inquiries = [
    { v: "residency", l: "Residency / Tenancy" },
    { v: "sales", l: "Sales inquiry" },
    { v: "support", l: "Resident support" },
    { v: "partnership", l: "Partnership / Vendor" },
    { v: "careers", l: "Careers" },
    { v: "other", l: "Something else" },
  ];
  const communities = [
    ...projects.map((p) => p.name),
    "Other / not sure",
  ];
  const dials = ["+20", "+1", "+44", "+971", "+966", "+49", "+33"];

  const onSubmit = (e) => {
    e.preventDefault();
    emailjs.send("service_iiwufhl", "template_gdlxvxx", {
      inquiry: inquiries.find((i) => i.v === form.inquiry)?.l || form.inquiry,
      name: form.name,
      email: form.email,
      dial: form.dial,
      phone: form.phone || "—",
      community: form.community || "Not specified",
      message: form.message,
    }).then(() => {
      setSent(true);
      setTimeout(() => {
        setSent(false);
        setForm({ inquiry: "", name: "", email: "", dial: "+20", phone: "", community: "", message: "" });
      }, 4500);
    }).catch(() => {
      alert("Something went wrong. Please try again or call us directly.");
    });
  };

  return (
    <section
      className="invert-section"
      style={{ paddingTop: 60, paddingBottom: 60 }}
    >
      <div
        style={{
          maxWidth: 1400,
          margin: "0 auto",
          padding: "0 32px",
          display: "grid",
          gridTemplateColumns: "1fr 1.6fr",
          gap: 80,
        }}
      >
        <Reveal>
          <p className="eyebrow">— Send a message</p>
          <h3
            className="serif"
            style={{
              fontSize: "clamp(28px, 3vw, 44px)",
              fontStyle: "italic",
              marginTop: 24,
              lineHeight: 1.2,
            }}
          >
            We read every message. We reply to all of them.
          </h3>
          <div
            style={{
              marginTop: 40,
              display: "flex",
              flexDirection: "column",
              gap: 20,
            }}
          >
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <p className="eyebrow" style={{ margin: 0 }}>
                Call center
              </p>
              <a
                href="tel:0238277933"
                className="under-link"
                style={{ fontSize: 16 }}
              >
                0238277933
              </a>
            </div>
          </div>
        </Reveal>

        <Reveal delay={200}>
          {sent ? (
            <div
              style={{
                padding: 48,
                border: "1px solid rgba(0,0,0,0.1)",
                textAlign: "center",
              }}
            >
              <p
                className="serif"
                style={{ fontSize: 32, fontStyle: "italic" }}
              >
                Thank you.
              </p>
              <p className="body" style={{ marginTop: 16 }}>
                Your message is on its way. We&rsquo;ll be in touch within one
                business day.
              </p>
            </div>
          ) : (
            <form
              onSubmit={onSubmit}
              style={{ display: "flex", flexDirection: "column", gap: 0 }}
            >
              <select
                className="form-field"
                required
                value={form.inquiry}
                onChange={(e) => update("inquiry", e.target.value)}
              >
                <option value="" disabled>
                  What&rsquo;s your inquiry about?
                </option>
                {inquiries.map((i) => (
                  <option key={i.v} value={i.v}>
                    {i.l}
                  </option>
                ))}
              </select>
              <div
                style={{
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr",
                  gap: 24,
                }}
                className="cf-grid"
              >
                <input
                  className="form-field"
                  type="text"
                  placeholder="Full name"
                  required
                  value={form.name}
                  onChange={(e) => update("name", e.target.value)}
                />
                <input
                  className="form-field"
                  type="email"
                  placeholder="Email address"
                  required
                  value={form.email}
                  onChange={(e) => update("email", e.target.value)}
                />
              </div>
              <div
                style={{
                  display: "grid",
                  gridTemplateColumns: "60px 1fr",
                  gap: 24,
                }}
              >
                <select
                  className="form-field"
                  value={form.dial}
                  onChange={(e) => update("dial", e.target.value)}
                >
                  {dials.map((d) => (
                    <option key={d} value={d}>
                      {d}
                    </option>
                  ))}
                </select>
                <input
                  className="form-field"
                  type="tel"
                  placeholder="Phone number"
                  value={form.phone}
                  onChange={(e) => update("phone", e.target.value)}
                />
              </div>
              <select
                className="form-field"
                value={form.community}
                onChange={(e) => update("community", e.target.value)}
              >
                <option value="">Community of interest (optional)</option>
                {communities.map((c) => (
                  <option key={c} value={c}>
                    {c}
                  </option>
                ))}
              </select>
              <textarea
                className="form-field"
                placeholder="Tell us a little about what you&rsquo;re looking for…"
                required
                value={form.message}
                onChange={(e) => update("message", e.target.value)}
              />
              <button
                type="submit"
                className="btn btn-primary"
                style={{ alignSelf: "flex-end", marginTop: 32 }}
              >
                Send message <Arrow />
              </button>
            </form>
          )}
        </Reveal>
      </div>
    </section>
  );
}

function OfficesSection() {
  const offices = [
    {
      type: "City View",
      name: "City View Office",
      addr: "Km 19, Cairo-Alex Desert Road / City View — Gate 5 — Building V14",
      map: "https://maps.app.goo.gl/3dDUWXG5yKUdrhKo8",
      label: "cityview office",
    },
  ];
  return (
    <section
      className="invert-section"
      style={{ padding: "60px 0", borderTop: "1px solid rgba(0,0,0,0.1)" }}
    >
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 32px" }}>
        <div style={{ marginBottom: 64 }}>
          <Reveal>
            <p className="eyebrow">— Come visit us</p>
          </Reveal>
          <ClipLines
            tag="h2"
            className="display"
            lines={[
              <>
                Our <span className="serif">Offices.</span>
              </>,
            ]}
          />
          <style>{`
            .contact-page h2.display { font-size: clamp(32px, 4.5vw, 64px); line-height: 1.05; }
          `}</style>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 24,
          }}
          className="off-grid"
        >
          {offices.map((o, i) => (
            <Reveal key={i} delay={i * 80}>
              <a
                href={o.map}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: "block",
                  textDecoration: "none",
                  color: "inherit",
                }}
              >
                <div className="peek" style={{ aspectRatio: "4/3" }}>
                  <img
                    src={`/uploads/office1.jpg`}
                    alt={o.name}
                    style={{
                      width: "100%",
                      height: "100%",
                      objectFit: "cover",
                      borderRadius: 6,
                    }}
                  />
                </div>
                <div style={{ marginTop: 24 }}>
                  <span
                    style={{
                      fontSize: 11,
                      letterSpacing: "0.18em",
                      textTransform: "uppercase",
                      color: "#6a6a6a",
                    }}
                  >
                    {o.type}
                  </span>
                  <h3
                    style={{
                      fontSize: 22,
                      fontWeight: 300,
                      marginTop: 12,
                      color: "#0a0a0a",
                    }}
                  >
                    {o.name}
                  </h3>
                  <p className="body" style={{ marginTop: 12 }}>
                    {o.addr}
                  </p>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
        <style>{`
          @media (max-width: 900px) { .off-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 560px) { .off-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

function ContactPage() {
  return (
    <div className="contact-page">
      <Header active="contact" />
      <main>
        <ContactHero />
        <ContactForm />
        <OfficesSection />
      </main>
      <Footer />
    </div>
  );
}

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