import Image from "next/image";
import Link from "next/link";
import { Check, Wifi, Wind, Coffee, Eye, Trees } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";

const rooms = [
  {
    img: "https://images.unsplash.com/photo-1582719478250-c89404bb8a0e?q=80&w=2940&auto=format&fit=crop",
    tag: "Standart",
    name: "Standart Oda",
    desc: "Konforlu ve modern tasarımlı standart odalarımızda rahatlığın tadını çıkarın. Çift kişilik yatak ve şık dekorasyon ile dinlendirici bir atmosfer.",
    sqm: "20 m²",
    price: "₺4.500",
    features: [
      { icon: Wifi,    label: "Ücretsiz Wi-Fi"  },
      { icon: Wind,    label: "Klima"            },
      { icon: Coffee,  label: "Minibar"          },
      { icon: Eye,     label: "Bahçe Manzarası"  },
    ],
    reversed: false,
  },
  {
    img: "https://images.unsplash.com/photo-1566665797739-1674de7a421a?q=80&w=2874&auto=format&fit=crop",
    tag: "Popüler",
    name: "Nehir Manzaralı Oda",
    desc: "Güne Azmak nehrinin eşsiz manzarası eşliğinde uyanacağınız ferah odalar. Balkonunuzda sabah kahvenizi yudumlarken doğanın sesini dinleyin.",
    sqm: "25 m²",
    price: "₺5.500",
    features: [
      { icon: Eye,     label: "Nehir Manzarası"   },
      { icon: Trees,   label: "Özel Balkon"        },
      { icon: Coffee,  label: "Nespresso Makinesi" },
      { icon: Wifi,    label: "Ücretsiz Wi-Fi"     },
    ],
    reversed: true,
  },
  {
    img: "https://images.unsplash.com/photo-1499955085172-a104c9463ece?q=80&w=2940&auto=format&fit=crop",
    tag: "Premium",
    name: "Ahşap Bungalow",
    desc: "Doğayla tamamen iç içe, bağımsız girişli ve teraslı ahşap tasarımlı yaşam alanı. Gizlilik ve huzur arayan çiftler için ideal.",
    sqm: "35 m²",
    price: "₺7.000",
    features: [
      { icon: Trees,   label: "Özel Teras"       },
      { icon: Eye,     label: "Doğa Manzarası"   },
      { icon: Coffee,  label: "Premium İkramlar" },
      { icon: Wind,    label: "Klima"            },
    ],
    reversed: false,
  },
];

export default function OdalarPage() {
  return (
    <div className="min-h-screen bg-background">

      {/* Page Header */}
      <section className="relative h-[55vh] w-full flex items-end overflow-hidden">
        <div className="absolute inset-0">
          <Image
            src="https://images.unsplash.com/photo-1582719478250-c89404bb8a0e?q=80&w=2940&auto=format&fit=crop"
            alt="Odalarımız"
            fill
            className="object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-dark/85 via-dark/30 to-black/20" />
        </div>
        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-14 w-full">
          <span className="block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-3 animate-fade-up">
            Konaklama
          </span>
          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
            Odalarımız
          </h1>
          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
            Doğanın içinde, konforlu bir mola.
          </p>
        </div>
      </section>

      {/* Room Listings */}
      <section className="py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="space-y-16">
          {rooms.map((room, i) => (
            <ScrollReveal key={i}>
              <div
                className={`grid grid-cols-1 md:grid-cols-2 gap-0 bg-white rounded-3xl overflow-hidden shadow-sm border border-sand ${
                  room.reversed ? "" : ""
                }`}
              >
                {/* Image */}
                <div className={`relative h-80 md:h-auto ${room.reversed ? "md:order-2" : ""}`}>
                  <Image
                    src={room.img}
                    alt={room.name}
                    fill
                    className="object-cover"
                  />
                  {/* Tag */}
                  <span className="absolute top-5 left-5 bg-dark/80 backdrop-blur-sm text-white text-[10px] font-bold px-3 py-1.5 rounded-full tracking-widest uppercase">
                    {room.tag}
                  </span>
                </div>

                {/* Content */}
                <div className={`p-10 md:p-14 flex flex-col justify-center ${room.reversed ? "md:order-1" : ""}`}>
                  <span className="text-muted text-xs tracking-[0.2em] uppercase mb-3 block">{room.sqm}</span>
                  <h2 className="font-serif text-3xl font-bold text-dark mb-4">{room.name}</h2>
                  <p className="text-gray-500 mb-8 leading-relaxed text-[15px]">{room.desc}</p>

                  <div className="grid grid-cols-2 gap-3 mb-10">
                    {room.features.map(({ icon: Icon, label }, j) => (
                      <div key={j} className="flex items-center gap-2.5">
                        <div className="w-7 h-7 rounded-full bg-primary/8 flex items-center justify-center flex-shrink-0">
                          <Icon size={13} className="text-primary" />
                        </div>
                        <span className="text-[13px] text-foreground/70">{label}</span>
                      </div>
                    ))}
                  </div>

                  <div className="flex justify-between items-center pt-8 border-t border-sand">
                    <div>
                      <span className="text-muted text-xs block mb-1 uppercase tracking-wider">Gecelik</span>
                      <span className="font-serif text-3xl font-bold text-dark">{room.price}</span>
                    </div>
                    <Link
                      href="/iletisim"
                      className="btn-shimmer bg-accent text-white px-7 py-3.5 rounded-full text-[11px] font-bold tracking-[0.12em] uppercase hover:bg-accent/90 transition-colors shadow-lg"
                    >
                      Rezervasyon Yap
                    </Link>
                  </div>
                </div>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </section>

      {/* Info strip */}
      <section className="py-16 bg-primary">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h3 className="font-serif text-3xl text-white font-bold mb-4">
            Tüm odalarda dahil olanlar
          </h3>
          <div className="flex flex-wrap justify-center gap-4 mt-8">
            {["Organik Serpme Kahvaltı", "Ücretsiz Otopark", "Plaj & Nehir Erişimi", "Şezlong & Havlu", "Wi-Fi", "24/7 Resepsiyon"].map((item) => (
              <span key={item} className="inline-flex items-center gap-2 bg-white/10 text-white text-[13px] px-4 py-2 rounded-full border border-white/15">
                <Check size={13} className="text-accent" />
                {item}
              </span>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}