import { createFileRoute } from "@tanstack/react-router";
import { PageHeader, SectionLabel } from "@/components/section-label";
import { Mail, Phone, Globe, Send } from "lucide-react";
import { useState } from "react";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact — AceHazmat | Request a Demo" },
      { name: "description", content: "Get in touch with AceHazmat to deploy electronic CBRNe simulation at your facility. Email, phone or send a message." },
      { property: "og:title", content: "Contact AceHazmat" },
      { property: "og:description", content: "Request a demo or talk to our CBRNe specialists." },
    ],
  }),
  component: ContactPage,
});

function ContactPage() {
  const [sent, setSent] = useState(false);

  return (
    <>
      <PageHeader
        eyebrow="SYS://CONTACT"
        title="Initiate contact. Schedule a demo."
        intro="Talk to former CBRNe trainers and engineers about deploying AceHazmat at your facility."
      />

      <section className="border-b border-border py-24">
        <div className="mx-auto grid max-w-7xl gap-12 px-6 lg:grid-cols-5">
          {/* CHANNELS */}
          <div className="lg:col-span-2">
            <SectionLabel code="01" label="Channels" />
            <div className="mt-8 space-y-4">
              <a
                href="mailto:info@trackerwave.com"
                className="tech-corners group block border border-border bg-card/40 p-6 transition-colors hover:border-primary"
              >
                <Mail className="h-5 w-5 text-primary" />
                <div className="mt-3 font-mono text-[10px] uppercase tracking-widest text-muted-foreground">Email</div>
                <div className="mt-1 text-lg font-semibold group-hover:text-primary">
                  info@trackerwave.com
                </div>
              </a>
              <a
                href="tel:+917010044935"
                className="tech-corners group block border border-border bg-card/40 p-6 transition-colors hover:border-primary"
              >
                <Phone className="h-5 w-5 text-primary" />
                <div className="mt-3 font-mono text-[10px] uppercase tracking-widest text-muted-foreground">Phone</div>
                <div className="mt-1 text-lg font-semibold group-hover:text-primary">
                  +91 70100 44935
                </div>
              </a>
              <a
                href="https://www.acehazmat.com"
                target="_blank"
                rel="noreferrer"
                className="tech-corners group block border border-border bg-card/40 p-6 transition-colors hover:border-primary"
              >
                <Globe className="h-5 w-5 text-primary" />
                <div className="mt-3 font-mono text-[10px] uppercase tracking-widest text-muted-foreground">Website</div>
                <div className="mt-1 text-lg font-semibold group-hover:text-primary">
                  www.acehazmat.com
                </div>
              </a>
            </div>
          </div>

          {/* FORM */}
          <div className="lg:col-span-3">
            <SectionLabel code="02" label="Secure Message" />
            <form
              onSubmit={(e) => {
                e.preventDefault();
                setSent(true);
              }}
              className="tech-corners mt-8 border border-border bg-card/40 p-8"
            >
              <div className="flex items-center justify-between font-mono text-[10px] uppercase tracking-widest text-muted-foreground">
                <span>// TRANSMISSION.FORM</span>
                <span className="flex items-center gap-1.5">
                  <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-primary" />
                  ENCRYPTED
                </span>
              </div>

              <div className="mt-6 grid gap-5 sm:grid-cols-2">
                <Field label="Full Name" name="name" required />
                <Field label="Organization" name="org" required />
                <Field label="Email" name="email" type="email" required />
                <Field label="Phone" name="phone" type="tel" />
              </div>
              <Field label="Subject" name="subject" required className="mt-5" />
              <div className="mt-5">
                <label className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground">
                  Message
                </label>
                <textarea
                  name="message"
                  rows={5}
                  required
                  className="mt-2 w-full border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-primary"
                />
              </div>

              <button
                type="submit"
                className="mt-8 inline-flex items-center gap-2 border border-primary bg-primary px-6 py-3 font-mono text-xs uppercase tracking-widest text-primary-foreground transition-all hover:shadow-[var(--shadow-glow)]"
              >
                {sent ? "Transmission Received" : "Send Transmission"}
                <Send className="h-4 w-4" />
              </button>
              {sent && (
                <p className="mt-4 font-mono text-xs text-primary">
                  // ACK · Our team will reach out shortly.
                </p>
              )}
            </form>
          </div>
        </div>
      </section>
    </>
  );
}

function Field({
  label,
  name,
  type = "text",
  required,
  className = "",
}: {
  label: string;
  name: string;
  type?: string;
  required?: boolean;
  className?: string;
}) {
  return (
    <div className={className}>
      <label className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground">
        {label}
      </label>
      <input
        name={name}
        type={type}
        required={required}
        className="mt-2 w-full border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-primary"
      />
    </div>
  );
}