import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { Reveal } from "@/components/shared/Reveal";

const intents = [
  {
    title: "A Wedding",
    action: "Explore Weddings",
    href: "/weddings/destination-wedding-venue-pune",
  },
  {
    title: "A Corporate Event",
    action: "Plan a Corporate Event",
    href: "/corporate/corporate-event-venue-pune",
  },
  {
    title: "A Resort Stay",
    action: "Explore Stays",
    href: "/rooms/staycation-resort-near-pune",
  },
];

export default function IntentSelector() {
  return (
    <section className="bg-cream px-6 py-16 md:px-12 md:py-16">
      <Reveal>
        <div className="mx-auto max-w-7xl">
          {/* Heading */}
          <div className="mb-10 text-center md:mb-14">
            <span className="mb-4 block font-sans text-[10px] font-normal uppercase tracking-[0.35em] text-gold">
              Choose Your Occasion
            </span>

            <h2 className="font-serif text-3xl font-light leading-tight text-espresso md:text-4xl">
              What are you planning?
            </h2>
          </div>

          {/* Intent Cards */}
          <div className="grid gap-5 md:grid-cols-3">
            {intents.map((intent) => (
              <Link
                key={intent.title}
                href={intent.href}
                title={intent.title}
                className="group block border border-espresso/10 bg-ivory/70 p-7 transition-all duration-500 hover:border-gold hover:bg-white md:p-8"
              >
                <div className="flex min-h-[80px] flex-col justify-between">
                  <h3 className="font-serif text-2xl font-light text-espresso transition-colors duration-300 group-hover:text-gold-deep md:text-3xl">
                    {intent.title}
                  </h3>

                  <span className="mt-4 inline-flex items-center gap-2 font-sans text-[10px] font-normal uppercase tracking-[0.25em] text-gold transition-all duration-500 group-hover:translate-x-2">
                    {intent.action}
                    <ChevronRight className="h-3.5 w-3.5" />
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </Reveal>
    </section>
  );
}