import { useTranslations } from "next-intl";
import { getTranslations } from "next-intl/server";
import { Mail, Phone, MapPin } from "lucide-react";

export async function generateMetadata({
  params: { locale },
}: {
  params: { locale: string };
}) {
  const t = await getTranslations({ locale, namespace: "contact" });
  return {
    title: t("title"),
    description: t("description"),
  };
}

export default function ContactPage({
  params: { locale },
}: {
  params: { locale: string };
}) {
  const t = useTranslations("contact");

  return (
    <div className="py-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">{t("title")}</h1>
          <p className="text-brand-grey text-lg max-w-2xl mx-auto">
            {t("description")}
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          <div className="bg-brand-grey-soft rounded-2xl p-8">
            <h2 className="text-2xl font-bold mb-6">
              {locale === "de" ? "Kontaktdaten" : "Contact Details"}
            </h2>
            <div className="space-y-6">
              <div className="flex items-start gap-4">
                <Mail className="w-6 h-6 text-brand-green mt-1" />
                <div>
                  <p className="font-semibold">{t("email")}</p>
                  <a href="mailto:info@bb-apartment.de" className="text-brand-grey">
                    info@bb-apartment.de
                  </a>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <Phone className="w-6 h-6 text-brand-green mt-1" />
                <div>
                  <p className="font-semibold">{t("phone")}</p>
                  <p className="text-brand-grey">+49 (0) 7031 7631132</p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <MapPin className="w-6 h-6 text-brand-green mt-1" />
                <div>
                  <p className="font-semibold">{locale === "de" ? "Adresse" : "Address"}</p>
                  <p className="text-brand-grey">
                    BB-Apartment<br />
                    Böblingen<br />
                    Deutschland
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-2xl p-8 border border-brand-grey-soft shadow-sm">
            <h2 className="text-2xl font-bold mb-6">
              {locale === "de" ? "Nachricht senden" : "Send a message"}
            </h2>
            <form className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-brand-grey-dark mb-1">
                  {t("name")}
                </label>
                <input
                  type="text"
                  className="w-full px-4 py-3 rounded-xl border border-brand-grey-soft focus:border-brand-green focus:ring-1 focus:ring-brand-green outline-none"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-brand-grey-dark mb-1">
                  {t("email")}
                </label>
                <input
                  type="email"
                  className="w-full px-4 py-3 rounded-xl border border-brand-grey-soft focus:border-brand-green focus:ring-1 focus:ring-brand-green outline-none"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-brand-grey-dark mb-1">
                  {t("message")}
                </label>
                <textarea
                  rows={5}
                  className="w-full px-4 py-3 rounded-xl border border-brand-grey-soft focus:border-brand-green focus:ring-1 focus:ring-brand-green outline-none"
                />
              </div>
              <button
                type="submit"
                className="w-full bg-brand-green text-white font-semibold px-8 py-4 rounded-full hover:bg-brand-green-dark transition-colors"
              >
                {t("send")}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}