import { createFileRoute } from "@tanstack/react-router";
import { motion } from "framer-motion";
import { useState } from "react";
import { Mail, Phone, MapPin, Clock, Send, CheckCircle2 } from "lucide-react";
import { FadeIn } from "@/components/motion/FadeIn";
import { Reveal } from "@/components/motion/Reveal";
import { StaggerContainer } from "@/components/motion/StaggerContainer";
import { StaggerItem } from "@/components/motion/StaggerItem";
import { SITE_URL } from "@/lib/site";

export const Route = createFileRoute("/_site/contact")({
  head: () => ({
    meta: [
      { title: "Contact Komal Star — Get Wholesale Electrical Quotes in Rajasthan" },
      {
        name: "description",
        content:
          "Contact Komal Star Electricals for wholesale enquiries, dealer partnerships and bulk quotes on PVC pipes, junction boxes and MCB distribution boxes.",
      },
      { property: "og:title", content: "Contact Komal Star Electricals" },
      { property: "og:description", content: "Talk to our wholesale team — same day quotes across Rajasthan." },
      { property: "og:type", content: "website" },
      { property: "og:url", content: `${SITE_URL}/contact` },
    ],
    links: [{ rel: "canonical", href: `${SITE_URL}/contact` }],
  }),
  component: ContactPage,
});

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

  const contactCards = [
    { icon: Phone, title: "Call Us", value: "+91 77339 99890", desc: "Mon–Sat, 10am – 7pm" },
    { icon: Mail, title: "Email", value: "contact@komalstar.com", desc: "Response within 24h" },
    { icon: MapPin, title: "Visit", value: "Jaipur, Rajasthan", desc: "Sitapura Industrial Area" },
    { icon: Clock, title: "Hours", value: "10:00 – 19:00 IST", desc: "Sunday closed" },
  ];

  return (
    <div>
      <section className="relative overflow-hidden bg-mesh pt-20 pb-12 md:pt-28 md:pb-16">
        <div className="mx-auto max-w-5xl px-6 text-center">
          <FadeIn>
            <span className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
              Contact
            </span>
          </FadeIn>
          <FadeIn delay={0.1}>
            <h1 className="mt-4 font-display text-5xl font-bold leading-tight md:text-7xl">
              Let's <span className="text-gradient-sky">connect</span> and build together.
            </h1>
          </FadeIn>
          <FadeIn delay={0.2}>
            <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
              Wholesale, retail partnerships, custom bulk orders — our team responds
              on the same day.
            </p>
          </FadeIn>
        </div>
      </section>

      {/* CONTACT CARDS */}
      <section className="mx-auto max-w-7xl px-6 py-16">
        <StaggerContainer className="grid gap-6 md:grid-cols-2 lg:grid-cols-4" stagger={0.1}>
          {contactCards.map((c) => (
            <StaggerItem key={c.title}>
              <motion.div whileHover={{ y: -6 }} className="glass-card h-full rounded-3xl p-6">
                <div className="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-sky-deep text-primary-foreground">
                  <c.icon className="h-5 w-5" />
                </div>
                <div className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
                  {c.title}
                </div>
                <div className="mt-1 font-display text-lg font-semibold">{c.value}</div>
                <div className="mt-1 text-xs text-muted-foreground">{c.desc}</div>
              </motion.div>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </section>

      {/* FORM */}
      <section className="mx-auto max-w-6xl px-6 py-16">
        <div className="grid gap-10 lg:grid-cols-5">
          <Reveal direction="right" className="lg:col-span-2">
            <div className="sticky top-32">
              <span className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
                Enquiry Form
              </span>
              <h2 className="mt-3 font-display text-4xl font-bold">
                Tell us about your project.
              </h2>
              <p className="mt-4 text-muted-foreground">
                Share your requirements and our wholesale team will get back with
                pricing, availability and delivery timelines.
              </p>
            </div>
          </Reveal>

          <Reveal direction="left" className="lg:col-span-3">
            <div className="glass-card rounded-3xl p-8">
              {sent ? (
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  className="flex flex-col items-center py-12 text-center"
                >
                  <CheckCircle2 className="h-16 w-16 text-primary" />
                  <h3 className="mt-4 font-display text-2xl font-bold">Message sent!</h3>
                  <p className="mt-2 text-muted-foreground">
                    We'll respond within 24 hours.
                  </p>
                </motion.div>
              ) : (
                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    setSent(true);
                  }}
                  className="space-y-5"
                >
                  <div className="grid gap-5 md:grid-cols-2">
                    <Field label="Full name" name="name" placeholder="Rajesh Kumar" />
                    <Field label="Phone" name="phone" type="tel" placeholder="+91 77339 99890" />
                  </div>
                  <Field label="Email" name="email" type="email" placeholder="rajesh@example.com" />
                  <Field label="Company / Shop" name="company" placeholder="Kumar Electricals" />
                  <div>
                    <label className="mb-2 block text-sm font-medium text-foreground">Message</label>
                    <textarea
                      required
                      rows={5}
                      placeholder="I need bulk pricing for PVC conduit pipes..."
                      className="w-full rounded-2xl border border-border bg-white/70 px-4 py-3 text-sm outline-none transition-all focus:border-primary focus:ring-4 focus:ring-primary/10"
                    />
                  </div>
                  <motion.button
                    whileTap={{ scale: 0.97 }}
                    className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-primary px-6 py-3.5 text-sm font-semibold text-primary-foreground shadow-xl shadow-primary/25 transition-transform hover:scale-[1.02]"
                  >
                    Send message <Send className="h-4 w-4" />
                  </motion.button>
                </form>
              )}
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function Field({
  label,
  name,
  type = "text",
  placeholder,
}: {
  label: string;
  name: string;
  type?: string;
  placeholder?: string;
}) {
  return (
    <div>
      <label htmlFor={name} className="mb-2 block text-sm font-medium text-foreground">
        {label}
      </label>
      <input
        id={name}
        name={name}
        type={type}
        required
        placeholder={placeholder}
        className="w-full rounded-2xl border border-border bg-white/70 px-4 py-3 text-sm outline-none transition-all focus:border-primary focus:ring-4 focus:ring-primary/10"
      />
    </div>
  );
}