import Image from 'next/image';
import Link from 'next/link';

export default function FleetPreview() {
  const featuredYachts = [
    {
      name: 'M/S MEIRA',
      length: '55m',
      guests: '12',
      image: 'https://images.unsplash.com/photo-1569263979104-865ab7cd8d13?q=80&w=2074&auto=format&fit=crop',
      href: '/fleet/meira'
    },
    {
      name: 'M/Y PRINCESS MELDA',
      length: '45m',
      guests: '10',
      image: 'https://images.unsplash.com/photo-1621275471769-e6aa344546d5?q=80&w=2073&auto=format&fit=crop',
      href: '/fleet/princess-melda'
    },
    {
      name: 'QUEEN OF SALMAKIS',
      length: '40m',
      guests: '18',
      image: 'https://images.unsplash.com/photo-1605281317010-fe5ffe798156?q=80&w=2044&auto=format&fit=crop',
      href: '/fleet/queen-of-salmakis'
    }
  ];

  return (
    <section className="py-24 bg-soft-grey px-8">
      <div className="max-w-7xl mx-auto">
        <div className="flex justify-between items-end mb-16">
          <div>
            <span className="text-gold luxury-text text-sm mb-4 block">Our Collection</span>
            <h2 className="text-midnight text-5xl">Featured Fleet</h2>
          </div>
          <Link href="/fleet" className="luxury-text text-sm border-b border-gold pb-1 hover:text-gold smooth-transition">
            View All Yachts
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {featuredYachts.map((yacht) => (
            <Link key={yacht.name} href={yacht.href} className="group overflow-hidden bg-white shadow-lg smooth-transition hover:-translate-y-2">
              <div className="aspect-[4/5] relative overflow-hidden">
                <img 
                  src={yacht.image} 
                  alt={yacht.name} 
                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                />
                <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors" />
                <div className="absolute bottom-8 left-8 text-white">
                  <h3 className="text-2xl mb-2">{yacht.name}</h3>
                  <div className="flex gap-4 text-xs luxury-text opacity-80">
                    <span>{yacht.length}</span>
                    <span>{yacht.guests} Guests</span>
                  </div>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}