import { createFileRoute } from "@tanstack/react-router";
import { SubPageLayout } from "@/components/sub-page-layout";
import { ArrowUpRight } from "lucide-react";
import { useRef, useState } from "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 formRef = useRef<HTMLFormElement>(null);
  const [sent, setSent] = useState(false);
  const [captcha, setCaptcha] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (captcha !== "2") {
      alert("Please answer the captcha correctly: 1 + 1 = ?");
      return;
    }
    const fd = new FormData(e.currentTarget as HTMLFormElement);
    const name = fd.get("name") as string;
    const email = fd.get("email") as string;
    const phone = fd.get("phone") as string;
    const message = fd.get("message") as string;
    const subject = encodeURIComponent("Enquiry from promistcool.com");
    const body = encodeURIComponent(
      `Name: ${name}\nEmail: ${email}\nPhone: ${phone}\n\nMessage:\n${message}`
    );
    window.location.href = `mailto:info@promistcool.com?subject=${subject}&body=${body}`;
    setSent(true);
  };

  return (
    <SubPageLayout
      eyebrow="Enquiry"
      title="Tell us about your project."
      lede="A Promist engineer will get back to you with sizing, pricing and delivery details."
    >
      <div className="max-w-2xl">
        <form ref={formRef} className="space-y-6" onSubmit={handleSubmit}>
          {[
            { l: "Full Name", n: "name", t: "text" },
            { l: "Phone Number", n: "phone", t: "tel" },
            { l: "Email", n: "email", t: "email" },
          ].map((f) => (
            <label key={f.n} className="block">
              <span className="text-xs uppercase tracking-widest text-muted-foreground">{f.l}</span>
              <input required 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">Message</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>
          <div className="flex items-center gap-3">
            <span className="text-sm font-medium">1 + 1 =</span>
            <input
              type="text"
              value={captcha}
              onChange={(e) => setCaptcha(e.target.value)}
              className="w-20 border-b bg-transparent py-2 outline-none focus:border-brand-red text-center"
              required
            />
          </div>
          <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" : "Send Message"} <ArrowUpRight className="h-4 w-4" />
          </button>
        </form>
      </div>
    </SubPageLayout>
  );
}
