import type { Metadata } from "next";
import { Mail, MapPin, Phone } from "lucide-react";

import { ContactForm } from "@/components/contact-form";

export const metadata: Metadata = {
  title: "Contact",
  description: "Get in touch with Aryan Ajudiya about tools, products, and collaborations.",
};

const contactDetails = [
  { icon: MapPin, label: "Base", value: "Rajkot, Gujarat, India", href: "https://maps.google.com/?q=Rajkot,+Gujarat,+India" },
  { icon: Phone, label: "Mobile", value: "+91 990 998 1010", href: "tel:+919909981010" },
  { icon: Phone, label: "WhatsApp", value: "+91 9979 080 290", href: "tel:+919979080290" },
  { icon: Mail, label: "Email", value: "aryan@deviltools.in", href: "mailto:aryan@deviltools.in" },
];

export default function ContactPage() {
  return (
    <div className="page-enter space-y-8 pb-10">
      <section className="surface rounded-[2.5rem] px-6 py-10 sm:px-8 sm:py-14">
        <p className="text-sm font-medium uppercase tracking-[0.3em] text-[var(--muted)]">Contact</p>
        <h1 className="mt-4 max-w-4xl text-4xl font-semibold tracking-tight text-[var(--foreground)] sm:text-5xl">Start a conversation about products, tools, or the next idea worth building.</h1>
        <p className="mt-4 max-w-3xl text-sm leading-7 text-[var(--muted)]">Use the form for project inquiries, collaborations, or anything tied to the current work on the site.</p>
      </section>

      <section className="grid gap-6 lg:grid-cols-[0.8fr_1.2fr]">
        <div className="space-y-4">
          {contactDetails.map((item) => {
            const Icon = item.icon;
            return (
              <a key={item.label} href={item.href} className="surface flex items-start gap-4 rounded-[2rem] p-5 transition hover:-translate-y-1">
                <span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--background-soft)] text-[var(--accent)]">
                  <Icon className="h-5 w-5" />
                </span>
                <div>
                  <p className="text-xs font-semibold uppercase tracking-[0.24em] text-[var(--muted)]">{item.label}</p>
                  <p className="mt-2 text-lg font-semibold text-[var(--foreground)]">{item.value}</p>
                </div>
              </a>
            );
          })}
        </div>
        <ContactForm />
      </section>
    </div>
  );
}