import Link from "next/link";
import { Reveal } from "@/components/shared/Reveal";

export default function AwardsSection() {
  const awards = [
    {
      title: "WeddingWire India Couples’ Choice Award 2026",
      description: "Three Consecutive Awards: 2024–2026",
    },
    {
      title: "WedMeGood Users’ Choice Award",
      description: "Three Consecutive Awards: 2024–2026",
    },
    {
      title: "Excellence in Innovation",
      description:
        "Awarded by The World Innovation Congress",
    },
    {
      title: "Best Luxury Resort",
      description: "Awarded by The Business Tycoons Magazine",
    },
  ];

  return (
    <section className="relative overflow-hidden bg-ivory py-12 md:py-12 text-midnight">
      <Reveal>
        <div className="mx-auto max-w-screen-2xl px-6 lg:px-10">
            <span className="mb-10 font-sans text-[10px] text-center font-normal uppercase tracking-widest-x text-gold block">
              Awards & Recognition
            </span> 
          <Link href="/awards-recognitions" title="Awards and Recognitions">
          <div className="grid gap-8 md:grid-cols-2 xl:grid-cols-4">
            {awards.map((award) => (         
              <div
                key={award.title}
                className="group relative overflow-hidden rounded-xl border border-midnight/15 bg-gradient-to-t from-cream to-ivory p-8 will-change-transform transition-all duration-700 hover:-translate-y-2 hover:scale-[1.02] hover:border-gold-deep/50 hover:bg-white/90 hover:shadow-[0_28px_70px_rgba(0,0,0,0.18)]" >

                {/* Animated Gold Border */}
                <div className="pointer-events-none absolute inset-0 rounded-xl overflow-hidden">
                  <div className="absolute -left-1/2 top-0 h-[2px] w-1/2 bg-gradient-to-r from-transparent via-[#926304] to-transparent translate-x-[-150%] group-hover:translate-x-[450%] transition-transform duration-1000"/>
                  <div className="absolute bottom-0 right-0 h-[2px] w-1/2 bg-gradient-to-l from-transparent via-[#926304] to-transparent translate-x-[150%] transition-transform duration-1000 group-hover:-translate-x-[450%]"/>
                </div>

                {/* Luxury Light Sweep */}
                <div className="pointer-events-none absolute inset-0 overflow-hidden">
                  <div className=" absolute -left-1/3 top-0 h-full w-24 -skew-x-12 bg-gradient-to-r from-transparent via-white/60 to-transparent translate-x-[-300%] transition-transform duration-1000 ease-out group-hover:translate-x-[900%]"/>
                </div>

                <div className="relative z-10">
                <div className="mb-6 h-[2px] w-12 bg-midnight transition-all duration-500 group-hover:w-20 group-hover:bg-gold-deep" />

                <h3 className="font-serif text-xl leading-snug text-midnight will-change-transform transition-all duration-500 group-hover:text-gold-deep">
                  {award.title}
                </h3>

                <p className="mt-5 text-sm leading-7 text-midnight/7 will-change-transform transition-colors duration-300 group-hover:text-black">
                  {award.description}
                </p>
                </div>
              </div>
            ))}
          </div>
          </Link>

          <div className="mt-12 flex justify-center">
            <Link
              href="/awards-recognitions"
              title="Awards-Recognitions"
              className="group inline-flex items-center gap-3 rounded-full border border-midnight px-8 py-3 font-serif text-sm uppercase tracking-[0.2em] transition-all duration-300 hover:bg-sand/90 hover:text-black">
              View All Awards
              <span className="transition-transform duration-300 group-hover:translate-x-1">
                →
              </span>
            </Link>
          </div>
        </div>
      </Reveal>
    </section>
  );
}