// app/components/BeachPromo.tsx

import Link from 'next/link';
import { FaVolleyballBall } from "react-icons/fa";

export default function BeachPromo() {
    return (
        <section className="bg-[#fdb84b] flex justify-center py-4 transition-all duration-500 hover:brightness-105 group/promo cursor-pointer">
            <div className="p-2.5">
                <h2 className="font-beachday text-black text-center text-[clamp(1.2rem,6vw,2.25rem)] uppercase tracking-tight flex items-baseline justify-center flex-wrap gap-x-3 md:gap-x-5">
                    <span className="whitespace-nowrap transition-all duration-300 group-hover/promo:opacity-80">
                        Kolla in vår
                    </span>
                    <Link
                        href="/beach"
                        className="relative text-[#406185] transition-all duration-300 inline-flex items-center gap-3 group/link hover:tracking-wider hover:-translate-y-1"
                    >
                        <span className="relative">
                            Beachturnering
                            <span className="absolute -bottom-1 left-0 w-full h-1 bg-[#406185] transform scale-x-0 transition-transform duration-300 origin-left group-hover/link:scale-x-100" />
                        </span>
                        <FaVolleyballBall
                            className="text-[#406185] transition-all duration-700 ease-out group-hover/promo:rotate-360 group-hover/link:scale-125 group-hover/link:text-black self-center"
                            size="0.8em"
                        />
                    </Link>
                </h2>
            </div>
        </section>
    );
}