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 { siteConfig } from "@/lib/site-config";

export const metadata: Metadata = {
  title: "İletişim",
  description:
    "Projeniz hakkında konuşmak için bize ulaşın. İzmit Sanayi Sitesi, Kocaeli.",
};

export default function ContactPage() {
  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={siteConfig.contact.address}
          />
          <InfoCard
            icon={<Phone className="size-5" />}
            title="Telefon"
            content={
              <a
                href={`tel:${siteConfig.contact.phoneRaw}`}
                className="hover:text-[var(--navy)]"
              >
                {siteConfig.contact.phone}
              </a>
            }
          />
          <InfoCard
            icon={<Mail className="size-5" />}
            title="E-posta"
            content={
              <a
                href={`mailto:${siteConfig.contact.email}`}
                className="hover:text-[var(--navy)]"
              >
                {siteConfig.contact.email}
              </a>
            }
          />
          <InfoCard
            icon={<Clock className="size-5" />}
            title="Çalışma Saatleri"
            content={
              <>
                Hafta içi 09:00 — 18:00
                <br />
                Cumartesi 10:00 — 14:00
              </>
            }
          />
        </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>
  );
}