import { useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { Mail, MapPin, Phone } from "lucide-react";
import { toast } from "sonner";
import { SiteHeader } from "@/components/site-header";
import { SiteFooter } from "@/components/site-footer";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent } from "@/components/ui/card";
import { COMPANY } from "@/lib/company";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact Support | Phoenix Content Engine" },
      {
        name: "description",
        content:
          "Contact Phoenix Clarity LLC support for billing, account or product questions about Phoenix Content Engine. Replies within one business day.",
      },
      { property: "og:title", content: "Contact Support | Phoenix Content Engine" },
      {
        property: "og:description",
        content: "Reach the Phoenix Clarity LLC support team by form, email or phone.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Contact,
});

function Contact() {
  const [sending, setSending] = useState(false);

  return (
    <div className="min-h-screen bg-background">
      <SiteHeader />
      <main className="mx-auto w-full max-w-5xl px-5 py-16">
        <p className="text-xs font-medium uppercase tracking-[0.2em] text-primary">Support</p>
        <h1 className="mt-3 text-4xl font-bold">Contact us</h1>
        <p className="mt-4 max-w-xl text-muted-foreground">
          Questions about billing, cancellations or the product? Send us a message and the{" "}
          {COMPANY.legalName} team will reply within one business day.
        </p>

        <div className="mt-10 grid gap-8 md:grid-cols-[1.4fr_1fr]">
          <Card className="surface-panel">
            <CardContent className="pt-6">
              <form
                className="space-y-5"
                onSubmit={(e) => {
                  e.preventDefault();
                  setSending(true);
                  const form = e.currentTarget;
                  setTimeout(() => {
                    setSending(false);
                    form.reset();
                    toast.success("Message sent", {
                      description: `We'll reply to you from ${COMPANY.email} shortly.`,
                    });
                  }, 700);
                }}
              >
                <div className="grid gap-5 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="name">Name</Label>
                    <Input id="name" name="name" required placeholder="Jane Doe" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input
                      id="email"
                      name="email"
                      type="email"
                      required
                      placeholder="jane@company.com"
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="subject">Subject</Label>
                  <Input id="subject" name="subject" required placeholder="Billing question" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="message">Message</Label>
                  <Textarea
                    id="message"
                    name="message"
                    required
                    rows={7}
                    placeholder="How can we help?"
                  />
                </div>
                <Button type="submit" variant="hero" size="lg" disabled={sending}>
                  {sending ? "Sending…" : "Send message"}
                </Button>
              </form>
            </CardContent>
          </Card>

          <Card className="surface-panel h-fit">
            <CardContent className="space-y-5 pt-6 text-sm">
              <h2 className="text-base font-semibold">{COMPANY.legalName}</h2>
              <div className="flex gap-3 text-muted-foreground">
                <MapPin className="mt-0.5 size-4 shrink-0 text-primary" />
                <address className="not-italic">{COMPANY.addressLine}</address>
              </div>
              <div className="flex gap-3 text-muted-foreground">
                <Phone className="mt-0.5 size-4 shrink-0 text-primary" />
                <a href={`tel:${COMPANY.phone.replace(/[^+\d]/g, "")}`} className="hover:text-foreground">
                  {COMPANY.phone}
                </a>
              </div>
              <div className="flex gap-3 text-muted-foreground">
                <Mail className="mt-0.5 size-4 shrink-0 text-primary" />
                <a href={`mailto:${COMPANY.email}`} className="hover:text-foreground">
                  {COMPANY.email}
                </a>
              </div>
              <p className="border-t border-border pt-4 text-xs text-muted-foreground">
                Support hours: Monday–Friday, 9am–6pm ET. Charges appear on your statement as{" "}
                {COMPANY.statementDescriptor}.
              </p>
            </CardContent>
          </Card>
        </div>
      </main>
      <SiteFooter />
    </div>
  );
}