import type { Metadata } from "next";
import { Mail, Phone, MapPin, MessageCircle, Clock, ChevronRight } from "lucide-react";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Contact Us | DriveHub",
  description:
    "Get in touch with the DriveHub team for support, advertising inquiries, or general questions about buying a car in India.",
};

const CONTACT_METHODS = [
  {
    icon: Mail,
    label: "Email Us",
    value: "support@drivehub.in",
    sub: "We reply within 24 hours",
    href: "mailto:support@drivehub.in",
    color: "bg-blue-50 text-blue-600",
  },
  {
    icon: Phone,
    label: "Call Us",
    value: "+91 98765 43210",
    sub: "Mon–Sat, 9 AM – 6 PM IST",
    href: "tel:+919876543210",
    color: "bg-green-50 text-green-600",
  },
  {
    icon: MapPin,
    label: "Visit Us",
    value: "Bengaluru, Karnataka",
    sub: "India – 560001",
    href: "https://maps.google.com/?q=Bengaluru,Karnataka,India",
    color: "bg-orange-50 text-orange-600",
  },
];

const FAQS = [
  {
    q: "How do I list my car on DriveHub?",
    a: "Currently DriveHub curates listings automatically from verified dealer networks. Contact us to partner as a dealer.",
  },
  {
    q: "How do I report incorrect car data?",
    a: "Use the 'Report Issue' button on any car page or email us at support@drivehub.in with the car ID.",
  },
  {
    q: "Can I advertise on DriveHub?",
    a: "Yes! We offer banner placements and sponsored listings. Email advertise@drivehub.in for our media kit.",
  },
  {
    q: "How does the AI assistant work?",
    a: "Our AI is powered by leading LLMs and trained on Indian car market data. It answers questions, compares cars, and recommends vehicles based on your needs.",
  },
];

export default function ContactPage() {
  return (
    <main className="min-h-screen bg-[#f6f8fc]">
      {/* Hero */}
      <section className="bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 text-white py-16 px-4">
        <div className="max-w-3xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-4 py-1.5 text-sm font-medium mb-6">
            <MessageCircle className="w-4 h-4" />
            We&rsquo;re here to help
          </div>
          <h1 className="text-3xl sm:text-4xl font-black mb-3">
            Contact DriveHub
          </h1>
          <p className="text-blue-100 text-base sm:text-lg max-w-xl mx-auto">
            Questions about a car, feedback on our platform, or partnership
            opportunities — we&apos;d love to hear from you.
          </p>
        </div>
      </section>

      <div className="max-w-5xl mx-auto px-4 py-12">
        {/* Contact cards */}
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-12">
          {CONTACT_METHODS.map(({ icon: Icon, label, value, sub, href, color }) => (
            <a
              key={label}
              href={href}
              target={href.startsWith("http") ? "_blank" : undefined}
              rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
              className="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm hover:shadow-md transition-shadow flex flex-col gap-3 group"
            >
              <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${color}`}>
                <Icon className="w-5 h-5" />
              </div>
              <div>
                <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-1">{label}</p>
                <p className="font-bold text-gray-900 group-hover:text-blue-600 transition-colors">{value}</p>
                <p className="text-xs text-gray-400 mt-0.5 flex items-center gap-1">
                  <Clock className="w-3 h-3" />{sub}
                </p>
              </div>
            </a>
          ))}
        </div>

        {/* FAQ */}
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-8 mb-10">
          <h2 className="text-xl font-black text-gray-900 mb-6">
            Frequently Asked Questions
          </h2>
          <div className="divide-y divide-gray-100">
            {FAQS.map(({ q, a }) => (
              <div key={q} className="py-4">
                <p className="font-semibold text-gray-800 mb-1">{q}</p>
                <p className="text-sm text-gray-500 leading-relaxed">{a}</p>
              </div>
            ))}
          </div>
        </div>

        {/* CTA row */}
        <div className="flex flex-wrap gap-3">
          <Link
            href="/cars"
            className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-5 py-3 rounded-xl transition-colors"
          >
            Browse Cars <ChevronRight className="w-4 h-4" />
          </Link>
          <Link
            href="/wizard"
            className="inline-flex items-center gap-2 border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 text-sm font-semibold px-5 py-3 rounded-xl transition-colors"
          >
            Find My Car <ChevronRight className="w-4 h-4" />
          </Link>
        </div>
      </div>
    </main>
  );
}