import type { Metadata } from "next";
import { siteConfig } from "@/lib/config";

export const metadata: Metadata = {
  title: "Contact",
  description: `Get in touch with ${siteConfig.name}.`,
};

export default function ContactPage() {
  const cards = [
    {
      icon: "📞",
      title: "Call us",
      value: siteConfig.phone,
      href: `tel:${siteConfig.phone}`,
    },
    {
      icon: "💬",
      title: "WhatsApp",
      value: "Chat with us",
      href: `https://wa.me/${siteConfig.whatsapp}`,
    },
    {
      icon: "✉️",
      title: "Email",
      value: siteConfig.email,
      href: `mailto:${siteConfig.email}`,
    },
  ];

  return (
    <div className="mx-auto max-w-3xl px-4 py-10">
      <h1 className="text-3xl font-bold text-slate-900">Contact us</h1>
      <p className="mt-2 text-slate-600">
        Reach out with any questions about buying or selling — we usually reply
        within a few hours during business hours.
      </p>

      <div className="mt-8 grid gap-4 sm:grid-cols-3">
        {cards.map((c) => (
          <a
            key={c.title}
            href={c.href}
            target={c.href.startsWith("http") ? "_blank" : undefined}
            rel="noopener noreferrer"
            className="rounded-xl border border-slate-200 bg-white p-5 text-center transition hover:border-brand-300 hover:shadow-sm"
          >
            <div className="text-3xl">{c.icon}</div>
            <p className="mt-2 font-semibold text-slate-800">{c.title}</p>
            <p className="text-sm text-brand-600">{c.value}</p>
          </a>
        ))}
      </div>

      <div className="mt-8 rounded-xl border border-slate-200 bg-white p-6">
        <h2 className="font-bold text-slate-900">Visit our shop</h2>
        <p className="mt-2 text-slate-600">📍 {siteConfig.address}</p>
        <p className="mt-1 text-slate-600">🕒 {siteConfig.hours}</p>
      </div>
    </div>
  );
}