import { ArrowRight } from "lucide-react";
import { Link } from "@/i18n/routing"; 
// 🔥 IMPORTAMOS LA VERSIÓN DE SERVIDOR
import { getTranslations } from "next-intl/server"; 

export default async function PatrizioLegacy() {
  const t = await getTranslations("PatrizioLegacy"); 

  return (
    <section id="legacy" className="relative w-full max-w-7xl mx-auto px-6 py-32 md:py-48 z-10">
      
      <div className="absolute inset-0 bg-white/50 dark:bg-[#0A0A0C]/70 backdrop-blur-2xl rounded-[4rem] -z-10 [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_70%)] transition-colors duration-700" />

      <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24 items-center relative z-10">
        
        <div className="animate-fade-in-up">
          <h2 className="text-xs font-semibold tracking-widest text-[#0066CC] dark:text-[#4DA6FF] uppercase mb-6 transition-colors">
            {t("subtitle")}
          </h2>
          <h3 className="text-5xl md:text-6xl lg:text-7xl font-light text-[#1D1D1F] dark:text-[#F5F5F7] tracking-tight leading-[1.05] transition-colors">
            {t("title1")} <br />
            <span className="font-medium italic text-black/40 dark:text-white/40 transition-colors">
              {t("title2")}
            </span>
          </h3>
        </div>

        <div className="flex flex-col justify-center animate-fade-in-up delay-200">
          <p className="text-lg md:text-xl font-light text-[#86868B] dark:text-[#A1A1A6] mb-6 leading-relaxed transition-colors">
            {t("p1_1")}<span className="font-medium text-[#1D1D1F] dark:text-[#F5F5F7] transition-colors">{t("p1_2")}</span>{t("p1_3")}
          </p>
          <p className="text-lg md:text-xl font-light text-[#86868B] dark:text-[#A1A1A6] mb-10 leading-relaxed transition-colors">
            {t("p2")}
          </p>
          
          <Link href="/heritage" className="inline-flex items-center gap-2 text-sm font-semibold text-[#1D1D1F] dark:text-white group hover:text-[#0066CC] dark:hover:text-[#4DA6FF] transition-colors">
            {t("button")} <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
          </Link>
        </div>

      </div>
    </section>
  );
}