import { createFileRoute } from "@tanstack/react-router";
import { PageHero, Section } from "@/components/page-shell";
import { useState } from "react";
import { ArrowUpRight } from "lucide-react";

export const Route = createFileRoute("/enquiry")({
  head: () => ({
    meta: [
      { title: "Enquiry — Request a Misting System Quote" },
      { name: "description", content: "Send a quick enquiry to Promist for a misting system quote or consultation." },
      { property: "og:title", content: "Enquiry" },
      { property: "og:description", content: "Request a Promist misting system quote." },
    ],
  }),
  component: Enquiry,
});

function Enquiry() {
  const [sent, setSent] = useState(false);
  return (
    <>
      <PageHero
        eyebrow="Enquiry"
        title="Tell us about your project."
        lede="A Promist engineer will get back to you with sizing, pricing and delivery details."
      />
      <Section>
        <div className="grid lg:grid-cols-5 gap-16">
          <form
            className="lg:col-span-3 space-y-6"
            onSubmit={(e) => { e.preventDefault(); setSent(true); }}
          >
            {[
              { l: "Full name", n: "name", t: "text" },
              { l: "Email address", n: "email", t: "email" },
              { l: "Phone", n: "phone", t: "tel" },
              { l: "Company (optional)", n: "company", t: "text" },
            ].map((f) => (
              <label key={f.n} className="block">
                <span className="text-xs uppercase tracking-widest text-muted-foreground">{f.l}</span>
                <input required={f.n !== "company"} type={f.t} name={f.n} className="mt-2 w-full border-b bg-transparent py-3 outline-none focus:border-brand-red" />
              </label>
            ))}
            <label className="block">
              <span className="text-xs uppercase tracking-widest text-muted-foreground">How can we help?</span>
              <textarea required name="message" rows={5} className="mt-2 w-full border-b bg-transparent py-3 outline-none focus:border-brand-red resize-none" />
            </label>
            <button type="submit" className="inline-flex items-center gap-2 bg-brand-red text-white px-6 py-3.5 rounded-md text-sm font-semibold hover:opacity-90">
              {sent ? "Thanks — we'll be in touch" : "Submit enquiry"} <ArrowUpRight className="h-4 w-4" />
            </button>
          </form>
          <aside className="lg:col-span-2 border-l pl-10 space-y-8">
            <div>
              <div className="text-xs uppercase tracking-widest text-brand-red font-semibold">Call</div>
              <p className="mt-2 font-display text-2xl font-bold">+971 4 251 5596</p>
              <p className="font-display text-2xl font-bold">+971 55 209 8628</p>
            </div>
            <div>
              <div className="text-xs uppercase tracking-widest text-brand-red font-semibold">Email</div>
              <p className="mt-2">info@promistcool.com</p>
            </div>
            <div>
              <div className="text-xs uppercase tracking-widest text-brand-red font-semibold">Location</div>
              <p className="mt-2">Dubai, United Arab Emirates</p>
            </div>
          </aside>
        </div>
      </Section>
    </>
  );
}