import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Mail, MessageSquare } from "lucide-react";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact — Toolkit" },
      { name: "description", content: "Get in touch with the Toolkit team. Suggest a tool, report a bug, or send feedback." },
      { property: "og:title", content: "Contact Toolkit" },
      { property: "og:description", content: "Reach out with questions, feedback or tool suggestions." },
    ],
  }),
  component: Contact,
});

function Contact() {
  const [sent, setSent] = useState(false);
  return (
    <div className="flex min-h-screen flex-col bg-background">
      <SiteHeader />
      <main className="mx-auto w-full max-w-3xl flex-1 px-6 py-16">
        <h1 className="text-4xl font-semibold tracking-tight">Contact us</h1>
        <p className="mt-3 max-w-2xl text-muted-foreground">Have a tool suggestion, bug report, or partnership inquiry? We'd love to hear from you.</p>

        <div className="mt-10 grid gap-8 md:grid-cols-[1fr_280px]">
          <form
            className="space-y-4"
            onSubmit={(e) => {
              e.preventDefault();
              const data = new FormData(e.currentTarget);
              const subject = encodeURIComponent(`Toolkit: ${data.get("subject") ?? ""}`);
              const body = encodeURIComponent(`From: ${data.get("name")} <${data.get("email")}>\n\n${data.get("message")}`);
              window.location.href = `mailto:hello@toolkit.app?subject=${subject}&body=${body}`;
              setSent(true);
            }}
          >
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-2"><Label htmlFor="name">Name</Label><Input id="name" name="name" required /></div>
              <div className="space-y-2"><Label htmlFor="email">Email</Label><Input id="email" name="email" type="email" required /></div>
            </div>
            <div className="space-y-2"><Label htmlFor="subject">Subject</Label><Input id="subject" name="subject" required /></div>
            <div className="space-y-2"><Label htmlFor="message">Message</Label><Textarea id="message" name="message" required className="min-h-[160px]" /></div>
            <Button type="submit">Send message</Button>
            {sent && <p className="text-sm text-muted-foreground">Opening your email client…</p>}
          </form>

          <aside className="space-y-4 rounded-xl border border-border/80 bg-card p-5 text-sm">
            <div className="flex items-start gap-3">
              <Mail className="mt-0.5 h-4 w-4 text-primary" />
              <div>
                <p className="font-medium text-foreground">Email</p>
                <p className="text-muted-foreground">hello@toolkit.app</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <MessageSquare className="mt-0.5 h-4 w-4 text-primary" />
              <div>
                <p className="font-medium text-foreground">Response time</p>
                <p className="text-muted-foreground">Usually within 2 business days.</p>
              </div>
            </div>
          </aside>
        </div>
      </main>
      <SiteFooter />
    </div>
  );
}