import { createFileRoute } from "@tanstack/react-router";
import { Mail, Phone, MapPin, Clock } from "lucide-react";
import { toast } from "sonner";
import { PageHero } from "@/components/PageHero";
import { RegentButton } from "@/components/RegentButton";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact Classic Paints — Get in touch" },
      { name: "description", content: "Talk to the Classic Paints team. Sales, dealership, technical support and customer service for Bangladesh." },
      { property: "og:title", content: "Contact Classic Paints" },
      { property: "og:description", content: "Sales, dealership, technical support and customer service — we'd love to hear from you." },
    ],
  }),
  component: ContactPage,
});

const info = [
  { icon: MapPin, t: "Head Office", d: "Rupayan Golden Age, Gulshan Avenue, Dhaka-1212, Bangladesh" },
  { icon: Phone, t: "Phone", d: "+880 1700 000 000" },
  { icon: Mail, t: "Email", d: "hello@classicpaints.com.bd" },
  { icon: Clock, t: "Hours", d: "Sun – Thu · 9:00 AM – 6:00 PM" },
];

function ContactPage() {
  return (
    <>
      <PageHero
        eyebrow="Contact"
        title={<>Let's talk <span className="text-brand-red">color & coatings</span></>}
        description="Whether you're a homeowner, contractor, or business — we're here to help."
      />

      <section className="py-20 md:py-28 border-t border-border">
        <div className="container-regent grid lg:grid-cols-2 gap-px bg-border border border-border">
          <div className="bg-background p-8 md:p-12 space-y-px">
            <div className="grid sm:grid-cols-2 gap-px bg-border">
              {info.map((i) => (
                <div key={i.t} className="bg-background p-6 flex gap-4">
                  <div className="h-10 w-10 grid place-items-center border border-border text-brand-red shrink-0">
                    <i.icon className="h-4 w-4" />
                  </div>
                  <div>
                    <div className="text-[10px] uppercase tracking-wider-x text-muted-foreground">{i.t}</div>
                    <div className="mt-1 text-sm extralight">{i.d}</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-px h-64 border border-border relative overflow-hidden">
              <iframe
                title="Classic Paints location"
                src="https://www.openstreetmap.org/export/embed.html?bbox=90.4163%2C23.8108%2C90.4263%2C23.8208&layer=mapnik&marker=23.8158%2C90.4213"
                className="h-full w-full grayscale-[60%]"
                loading="lazy"
              />
            </div>
          </div>

          <form
            onSubmit={(e) => { e.preventDefault(); toast.success("Message sent! Our team will get back within 1 business day."); (e.currentTarget as HTMLFormElement).reset(); }}
            className="bg-background p-8 md:p-12"
          >
            <div className="flex items-center gap-3 mb-4">
              <span className="h-px w-10 bg-brand-red" />
              <span className="eyebrow">Inquiry</span>
            </div>
            <h2 className="display-lg">Send us a message</h2>
            <p className="mt-4 text-sm text-muted-foreground extralight">We typically reply within 24 hours.</p>

            <div className="mt-8 grid sm:grid-cols-2 gap-5">
              <div><Label htmlFor="cname" className="text-[10px] uppercase tracking-wider-x text-muted-foreground">Name</Label><Input id="cname" required className="mt-2" /></div>
              <div><Label htmlFor="cemail" className="text-[10px] uppercase tracking-wider-x text-muted-foreground">Email</Label><Input id="cemail" type="email" required className="mt-2" /></div>
              <div className="sm:col-span-2"><Label htmlFor="csubject" className="text-[10px] uppercase tracking-wider-x text-muted-foreground">Subject</Label><Input id="csubject" required className="mt-2" /></div>
              <div className="sm:col-span-2"><Label htmlFor="cmsg" className="text-[10px] uppercase tracking-wider-x text-muted-foreground">Message</Label><Textarea id="cmsg" rows={5} required className="mt-2" /></div>
            </div>
            <RegentButton type="submit" size="lg" className="mt-8 w-full">Send message</RegentButton>
          </form>
        </div>
      </section>
    </>
  );
}