import { useTranslations } from "next-intl";
import { getTranslations } from "next-intl/server";
import { houses } from "@/src/config/apartments";
import { Hero } from "@/components/ui/Hero";
import { HouseCard } from "@/components/ui/HouseCard";
import { BookingBanner } from "@/components/ui/BookingBanner";
import { Impressions } from "@/components/ui/Impressions";
import { ArrowRight, MapPin, Shield, Clock, Wind, Home, CreditCard } from "lucide-react";
import Link from "next/link";

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

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

  const features = [
    {
      icon: Clock,
      text: t("features.longStay"),
    },
    {
      icon: MapPin,
      text: t("features.location"),
    },
    {
      icon: Wind,
      text: t("features.airConditioning"),
    },
    {
      icon: Home,
      text: t("features.furnished"),
    },
    {
      icon: CreditCard,
      text: t("features.payment"),
    },
  ];

  return (
    <div>
      <Hero
        title={t("hero.title")}
        subtitle={t("hero.subtitle")}
        description={t("hero.description")}
        cta={t("hero.cta")}
        ctaHref={`/${locale}/houses`}
      />

      <BookingBanner locale={locale} />

      <section className="py-20 bg-brand-grey-soft/50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <p className="text-brand-green font-semibold mb-2 uppercase tracking-wider text-sm">{t("houses.subtitle")}</p>
            <h2 className="text-4xl font-bold mb-4 text-brand-grey-dark">{t("houses.title")}</h2>
            <div className="w-20 h-1 bg-brand-green mx-auto rounded-full" />
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
            {houses.map((house) => (
              <HouseCard key={house.id} house={house} locale={locale} />
            ))}
          </div>
        </div>
      </section>

      <Impressions
        title={t("impressions.title")}
        subtitle={t("impressions.subtitle")}
      />

      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <p className="text-brand-green font-semibold mb-2 uppercase tracking-wider text-sm">{t("features.title")}</p>
            <h2 className="text-4xl font-bold mb-4 text-brand-grey-dark">{t("features.title")}</h2>
            <div className="w-20 h-1 bg-brand-green mx-auto rounded-full" />
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
            {features.map((feature, index) => {
              const Icon = feature.icon;
              return (
                <div
                  key={index}
                  className="group p-6 md:p-8 bg-white rounded-2xl shadow-md border-2 border-brand-green/20 hover:bg-brand-green hover:border-brand-green hover:-translate-y-2 transition-all duration-300 flex flex-col items-center text-center"
                >
                  <div className="p-4 bg-brand-green/10 rounded-2xl mb-5 group-hover:bg-white/20 transition-colors">
                    <Icon className="w-8 h-8 text-brand-green group-hover:text-white transition-colors" />
                  </div>
                  <p className="text-brand-grey-dark font-bold text-lg leading-snug group-hover:text-white transition-colors">{feature.text}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="relative py-24 overflow-hidden">
        <div className="absolute inset-0 bg-brand-green" />
        <div className="absolute inset-0 bg-[url('/images/cta-bg.jpg')] opacity-10 bg-cover bg-center" />
        <div className="relative z-10 max-w-4xl mx-auto px-4 text-center">
          <Shield className="w-12 h-12 text-white/80 mx-auto mb-6" />
          <h2 className="text-4xl font-bold mb-6 text-white">
            {t("ctaSection.title")}
          </h2>
          <p className="text-xl mb-10 text-white/90 max-w-2xl mx-auto">
            {t("ctaSection.description")}
          </p>
          <Link
            href={`/${locale}/houses`}
            className="inline-flex items-center gap-2 bg-white text-brand-green-dark font-semibold px-8 py-4 rounded-2xl hover:bg-brand-grey-soft hover:shadow-lg hover:-translate-y-0.5 transition-all"
          >
            {t("ctaSection.cta")}
            <ArrowRight className="w-5 h-5" />
          </Link>
        </div>
      </section>
    </div>
  );
}