// Contact page

const { useState: cUseState } = React;

function ContactPage({ setRoute }) {
  const [form, setForm] = cUseState({
    name: "",
    petName: "",
    email: "",
    phone: "",
    service: "Pet Photography",
    date: "",
    message: "",
  });
  const [submitted, setSubmitted] = cUseState(false);

  const update = (k, v) => setForm({ ...form, [k]: v });

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  const labelCls = "block text-[11px] tracking-[0.24em] uppercase text-charcoal/70 mb-2 font-medium";
  const inputCls =
    "w-full bg-white border border-bark-beige-60 px-4 py-3 text-charcoal placeholder:text-charcoal/35 focus:outline-none focus:border-steel-blue transition font-serif text-[15px]";

  return (
    <main data-screen-label="05 Contact">
      {/* Header */}
      <section className="relative bg-wafer-20 overflow-hidden">
        <div className="absolute inset-0 paw-pattern opacity-50" />
        <div className="relative max-w-[1280px] mx-auto px-6 py-20 md:py-24 text-center">
          <window.Eyebrow className="justify-center">Get in touch</window.Eyebrow>
          <h1 className="mt-6 font-display text-6xl md:text-8xl text-steel-blue leading-[0.9]">
            Let's plan a{" "}
            <window.ScriptAccent angle={-4} color="#779A93" className="text-7xl md:text-9xl">
              session.
            </window.ScriptAccent>
          </h1>
          <p className="mt-5 font-serif text-xl text-charcoal/75 max-w-2xl mx-auto leading-relaxed">
            Studio or on-location — every detail tuned to your pet's personality.
          </p>
        </div>
      </section>

      <section className="bg-white">
        <div className="max-w-[1280px] mx-auto px-6 py-20 grid lg:grid-cols-12 gap-12">
          {/* Form */}
          <div className="lg:col-span-7">
            <div className="bg-wafer-20 p-8 md:p-10 frame-border">
              {submitted ? (
                <div className="text-center py-10">
                  <div className="w-16 h-16 mx-auto rounded-full bg-juniper text-white grid place-items-center">
                    <window.Icon.Check className="w-8 h-8" />
                  </div>
                  <h3 className="mt-6 font-display text-3xl text-steel-blue">
                    Thank you, {form.name || "friend"}.
                  </h3>
                  <p className="mt-3 font-serif text-charcoal/75 max-w-md mx-auto">
                    Kari will reply within one business day. In the meantime, give {form.petName || "your pet"} a scratch behind the ears.
                  </p>
                  <button
                    onClick={() => {
                      setSubmitted(false);
                      setForm({ name: "", petName: "", email: "", phone: "", service: "Pet Photography", date: "", message: "" });
                    }}
                    className="mt-7 text-juniper hover:text-steel-blue text-sm uppercase tracking-wider"
                  >
                    Send another message
                  </button>
                </div>
              ) : (
                <form onSubmit={submit} className="space-y-5">
                  <div className="grid sm:grid-cols-2 gap-5">
                    <div>
                      <label className={labelCls}>Your name</label>
                      <input className={inputCls} value={form.name} onChange={(e) => update("name", e.target.value)} placeholder="Jane Smith" required />
                    </div>
                    <div>
                      <label className={labelCls}>Pet's name</label>
                      <input className={inputCls} value={form.petName} onChange={(e) => update("petName", e.target.value)} placeholder="Biscuit" />
                    </div>
                  </div>
                  <div className="grid sm:grid-cols-2 gap-5">
                    <div>
                      <label className={labelCls}>Email</label>
                      <input type="email" className={inputCls} value={form.email} onChange={(e) => update("email", e.target.value)} placeholder="jane@example.com" required />
                    </div>
                    <div>
                      <label className={labelCls}>Phone</label>
                      <input className={inputCls} value={form.phone} onChange={(e) => update("phone", e.target.value)} placeholder="(817) 000-0000" />
                    </div>
                  </div>
                  <div className="grid sm:grid-cols-2 gap-5">
                    <div>
                      <label className={labelCls}>Service</label>
                      <select className={inputCls} value={form.service} onChange={(e) => update("service", e.target.value)}>
                        <option>Pet Photography</option>
                        <option>Pet Portrait Painting</option>
                        <option>Greeting Card Collaboration</option>
                        <option>Special Project</option>
                        <option>Other</option>
                      </select>
                    </div>
                    <div>
                      <label className={labelCls}>Preferred date</label>
                      <input type="date" className={inputCls} value={form.date} onChange={(e) => update("date", e.target.value)} />
                    </div>
                  </div>
                  <div>
                    <label className={labelCls}>Tell us about your pet</label>
                    <textarea
                      className={`${inputCls} min-h-[140px] resize-y`}
                      value={form.message}
                      onChange={(e) => update("message", e.target.value)}
                      placeholder="Personality, favorite tricks, where you'd love to shoot…"
                    />
                  </div>
                  <div className="pt-2 flex flex-wrap items-center justify-between gap-4">
                    <div className="text-xs text-charcoal/55 font-serif italic">Response within 1 business day.</div>
                    <window.Button as="button" type="submit" size="lg">
                      Send inquiry <window.Icon.ArrowRight className="w-3.5 h-3.5" />
                    </window.Button>
                  </div>
                </form>
              )}
            </div>
          </div>

          {/* Right column */}
          <div className="lg:col-span-5 space-y-6">
            <div className="bg-steel-blue text-white p-8 frame-border-dark relative overflow-hidden">
              <div className="absolute inset-0 paw-pattern-light" />
              <div className="relative">
                <window.Eyebrow color="rgba(255,255,255,0.7)">Call directly</window.Eyebrow>
                <a href={window.PHONE_PRIMARY_TEL} className="block mt-3 font-display text-4xl md:text-5xl tracking-tight hover:text-wafer transition">
                  {window.PHONE_PRIMARY}
                </a>
                <div className="mt-4 text-sm text-white/75 font-serif">Pet Portraits · Studio line</div>
                <div className="mt-6 pt-6 border-t border-white/15">
                  <div className="eyebrow text-wafer/80">Marty &amp; Pat's framing</div>
                  <a href={window.PHONE_MARTY_TEL} className="block mt-2 font-display text-2xl hover:text-wafer transition">
                    {window.PHONE_MARTY}
                  </a>
                </div>
              </div>
            </div>

            <div className="bg-bark-beige-20 p-7 frame-border">
              <div className="eyebrow text-steel-blue">Find us online</div>
              <div className="mt-4 flex flex-col gap-3 font-serif">
                <a href={window.FB_URL} className="inline-flex items-center gap-3 text-charcoal hover:text-steel-blue">
                  <window.Icon.Facebook className="w-5 h-5 text-juniper" /> @karibreeninc on Facebook
                </a>
                <a href={window.IG_URL} className="inline-flex items-center gap-3 text-charcoal hover:text-steel-blue">
                  <window.Icon.Instagram className="w-5 h-5 text-juniper" /> @karibreeninc on Instagram
                </a>
                <a href={window.GOOGLE_REVIEW_LINK} className="inline-flex items-center gap-3 text-charcoal hover:text-steel-blue">
                  <window.Icon.Star className="w-5 h-5 text-juniper" /> Leave a Google review
                </a>
              </div>
            </div>

            <div className="bg-juniper text-white p-7 frame-border-dark relative overflow-hidden">
              <div className="absolute inset-0 paw-pattern-light" />
              <div className="relative">
                <div className="eyebrow text-wafer/90">Where we shoot</div>
                <div className="mt-3 font-display text-2xl leading-tight">Fort Worth + DFW metroplex</div>
                <div className="mt-3 text-sm font-serif text-white/85 leading-relaxed">
                  Studio sessions in Fort Worth. On-location sessions throughout the metroplex (and beyond — just ask).
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Map placeholder strip */}
      <section className="bg-wafer-20 border-t border-bark-beige-40">
        <div className="max-w-[1280px] mx-auto px-6 py-16">
          <div className="aspect-[21/8] bg-bark-beige-40 frame-border relative overflow-hidden">
            {/* Stylised map */}
            <svg viewBox="0 0 800 240" className="w-full h-full block" preserveAspectRatio="xMidYMid slice">
              <rect width="800" height="240" fill="#DDD1C7" />
              <g stroke="#C8B6A8" strokeWidth="1.4" fill="none">
                <path d="M0 80 L800 80" />
                <path d="M0 140 L800 140" />
                <path d="M0 200 L800 200" />
                <path d="M150 0 L150 240" />
                <path d="M320 0 L320 240" />
                <path d="M520 0 L520 240" />
                <path d="M680 0 L680 240" />
                <path d="M0 50 Q200 30 400 60 T800 110" strokeWidth="2" stroke="#97A1AA" />
              </g>
              <g fill="#779A93" opacity="0.5">
                <circle cx="200" cy="160" r="35" />
                <circle cx="450" cy="100" r="50" />
                <circle cx="640" cy="170" r="28" />
              </g>
              <g fill="#4C6883">
                <circle cx="395" cy="120" r="9" />
                <circle cx="395" cy="120" r="18" fill="none" stroke="#4C6883" strokeWidth="2" opacity="0.4" />
              </g>
              <text x="412" y="116" fontFamily="Inter, sans-serif" fontSize="13" fill="#4C6883" fontWeight="600">
                Fort Worth Studio
              </text>
              <text x="412" y="132" fontFamily="Inter, sans-serif" fontSize="10" fill="#4C6883" opacity="0.7" letterSpacing="2">
                BY APPOINTMENT
              </text>
            </svg>
          </div>
        </div>
      </section>
    </main>
  );
}

window.ContactPage = ContactPage;