import Image from 'next/image'
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/Card'
import Button from '@/components/ui/Button'

export default function FiveRoomHomesteadSection() {
  const rooms = [
    {
      name: 'The Gable Room',
      desc: 'Four-poster bed and antique armoire overlooking the front garden and gable.',
      image: 'https://images.pexels.com/photos/6287228/pexels-photo-6287228.jpeg?auto=compress&cs=tinysrgb&h=350',
      price: 'R1,800',
    },
    {
      name: 'The Vineyard Room',
      desc: 'French doors open onto a private stoep with vineyard views. Hand-painted dresser.',
      image: 'https://images.pexels.com/photos/22937955/pexels-photo-22937955.jpeg?auto=compress&cs=tinysrgb&h=350',
      price: 'R2,100',
    },
    {
      name: 'The Orchard Room',
      desc: 'Lace curtains and a claw‑foot tub. Wake to the scent of peach blossoms.',
      image: 'https://images.pexels.com/photos/6287228/pexels-photo-6287228.jpeg?auto=compress&cs=tinysrgb&h=350',
      price: 'R2,300',
    },
    {
      name: 'The Garden Room',
      desc: 'Yellowwood floors and a writing desk. Steps away from the herb garden.',
      image: 'https://images.pexels.com/photos/32963319/pexels-photo-32963319.jpeg?auto=compress&cs=tinysrgb&h=350',
      price: 'R1,950',
    },
    {
      name: 'The Homestead Suite',
      desc: 'The largest room, with a sitting area, fireplace, and views over the dam.',
      image: 'https://images.pexels.com/photos/5692285/pexels-photo-5692285.jpeg?auto=compress&cs=tinysrgb&h=350',
      price: 'R2,800',
    },
  ]

  return (
    <section data-vula-section="fiveroomhomestead" id="rooms" className="py-20 bg-[#f4f5f2]">
      <div className="container mx-auto px-4 max-w-7xl">
        <span className="inline-block text-sm uppercase tracking-widest text-[#6b8e23] mb-2">Franschhoek</span>
        <h2 className="text-3xl md:text-5xl font-bold text-[#2c331f] mb-14">Five sanctuaries, each one a story.</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {rooms.map((room) => (
            <Card key={room.name} className="bg-white rounded-[22px] overflow-hidden shadow-lg border-none">
              <div className="relative aspect-video overflow-hidden">
                <Image
                  src={room.image}
                  alt={room.name}
                  fill
                  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                  className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
                />
              </div>
              <CardHeader>
                <CardTitle className="text-xl font-semibold text-[#36454F]">{room.name}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-[#2c331f]/80">{room.desc}</p>
                <p className="mt-2 text-lg font-bold text-[#6b8e23]">{room.price}<span className="text-xs font-normal"> / night</span></p>
              </CardContent>
              <CardFooter className="pt-0">
                <Button variant="outline" size="sm" className="rounded-full border-[#6b8e23] text-[#6b8e23] hover:bg-[#6b8e23] hover:text-white">
                  <a href="#book-now">Book this room</a>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>

        {/* Trust row */}
        <div className="mt-10 flex flex-wrap gap-4 text-sm text-[#36454F] justify-center">
          <span className="flex items-center"><span className="inline-block w-1.5 h-1.5 bg-[#6b8e23] rounded-full mr-2"></span>Free Wi‑Fi</span>
          <span className="flex items-center"><span className="inline-block w-1.5 h-1.5 bg-[#6b8e23] rounded-full mr-2"></span>Farm breakfast included</span>
          <span className="flex items-center"><span className="inline-block w-1.5 h-1.5 bg-[#6b8e23] rounded-full mr-2"></span>Check‑in 14:00 · Check‑out 11:00</span>
        </div>
      </div>
    </section>
  )
}