import type { Metadata } from "next";
import { Mail, MapPin, Phone, Clock } from "lucide-react";
import { SectionTitle } from "@/components/section-title";
import { ContactForm } from "@/components/contact-form";
import { getSiteSettings } from "@/lib/data";
import { siteConfig } from "@/lib/site-config";
import { buildMetadata } from "@/lib/seo";

export async function generateMetadata(): Promise<Metadata> {
  return buildMetadata("/iletisim", {
    title: "İletişim",
    description:
      "Projeniz hakkında konuşmak için bize ulaşın. İzmit Sanayi Sitesi, Kocaeli.",
  });
}

export default async function ContactPage() {
  const s = await getSiteSettings();
  const address = s?.contact_address ?? siteConfig.contact.address;
  const phone = s?.contact_phone ?? siteConfig.contact.phone;
  const phoneRaw = s?.contact_phone_raw ?? siteConfig.contact.phoneRaw;
  const email = s?.contact_email ?? siteConfig.contact.email;
  const weekday = s?.contact_hours_weekday ?? "Hafta içi 09:00 — 18:00";
  const weekend = s?.contact_hours_weekend ?? "Cumartesi 10:00 — 14:00";

  return (
    <div className="mx-auto max-w-7xl px-6 py-20">
      <SectionTitle
        eyebrow="İletişim"
        title="Projenizi konuşalım"
        description="Formu doldurun, 24 saat içinde dönüş yapalım. Ya da doğrudan arayın."
      />

      <div className="mt-14 grid gap-12 lg:grid-cols-[1.2fr_1fr]">
        <div className="rounded-2xl border border-[var(--border)] bg-white p-6 sm:p-8">
          <ContactForm />
        </div>

        <div className="space-y-4">
          <InfoCard
            icon={<MapPin className="size-5" />}
            title="Adres"
            content={address}
          />
          <InfoCard
            icon={<Phone className="size-5" />}
            title="Telefon"
            content={
              <a
                href={`tel:${phoneRaw}`}
                className="hover:text-[var(--navy)]"
              >
                {phone}
              </a>
            }
          />
          <InfoCard
            icon={<Mail className="size-5" />}
            title="E-posta"
            content={
              <a
                href={`mailto:${email}`}
                className="hover:text-[var(--navy)]"
              >
                {email}
              </a>
            }
          />
          <InfoCard
            icon={<Clock className="size-5" />}
            title="Çalışma Saatleri"
            content={
              <>
                {weekday}
                <br />
                {weekend}
              </>
            }
          />
        </div>
      </div>
    </div>
  );
}

function InfoCard({
  icon,
  title,
  content,
}: {
  icon: React.ReactNode;
  title: string;
  content: React.ReactNode;
}) {
  return (
    <div className="flex gap-4 rounded-2xl border border-[var(--border)] bg-white p-5">
      <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--navy-50)] text-[var(--navy)]">
        {icon}
      </div>
      <div>
        <p className="text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
          {title}
        </p>
        <div className="mt-1 text-sm text-[var(--foreground)]">{content}</div>
      </div>
    </div>
  );
}