"use client";

import { Mail, Phone, MapPin } from "lucide-react";
import { Navbar } from "@/components/layout/Navbar";
import { Footer } from "@/components/layout/Footer";
import { useSiteSettings } from "@/contexts/SiteSettingsContext";
import { appName } from "@/lib/siteConfig";

export default function ContactPage() {
  const { settings, loading } = useSiteSettings();
  const orgName = settings.org_name || appName;
  const email = settings.org_email || "";
  const phone = settings.org_phone || "";
  const address = settings.org_address || "";
  const hasAny = !!(email || phone || address);

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-1 py-12 px-4 max-w-3xl mx-auto w-full">
        <div className="text-center mb-10">
          <h1 className="text-3xl font-bold text-gray-900">Contact {orgName}</h1>
          <p className="text-gray-600 mt-2">We&apos;d love to hear from you — reach out any of the ways below.</p>
        </div>

        {!loading && !hasAny && (
          <p className="text-center text-sm text-gray-400">Contact details haven&apos;t been set up yet.</p>
        )}

        <div className="grid gap-4 sm:grid-cols-3">
          {email && (
            <a
              href={`mailto:${email}`}
              className="flex flex-col items-center text-center gap-3 rounded-xl border border-gray-200 bg-white p-6 shadow-sm hover:border-brand-200 hover:shadow transition-shadow"
            >
              <div className="w-12 h-12 rounded-full bg-brand-50 flex items-center justify-center">
                <Mail className="w-6 h-6 text-brand-600" />
              </div>
              <div>
                <div className="text-sm font-semibold text-gray-900">Email</div>
                <div className="text-sm text-gray-600 break-all">{email}</div>
              </div>
            </a>
          )}
          {phone && (
            <a
              href={`tel:${phone}`}
              className="flex flex-col items-center text-center gap-3 rounded-xl border border-gray-200 bg-white p-6 shadow-sm hover:border-brand-200 hover:shadow transition-shadow"
            >
              <div className="w-12 h-12 rounded-full bg-brand-50 flex items-center justify-center">
                <Phone className="w-6 h-6 text-brand-600" />
              </div>
              <div>
                <div className="text-sm font-semibold text-gray-900">Phone</div>
                <div className="text-sm text-gray-600">{phone}</div>
              </div>
            </a>
          )}
          {address && (
            <div className="flex flex-col items-center text-center gap-3 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
              <div className="w-12 h-12 rounded-full bg-brand-50 flex items-center justify-center">
                <MapPin className="w-6 h-6 text-brand-600" />
              </div>
              <div>
                <div className="text-sm font-semibold text-gray-900">Address</div>
                <div className="text-sm text-gray-600">{address}</div>
              </div>
            </div>
          )}
        </div>
      </main>
      <Footer />
    </div>
  );
}