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 roomsTr = [
  {
    img: "https://images.unsplash.com/photo-1618773928121-c32242e63f39?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,
  },
];

const roomsEn = [
  {
    img: "https://images.unsplash.com/photo-1618773928121-c32242e63f39?q=80&w=2940&auto=format&fit=crop",
    tag: "Standard",
    name: "Standard Room",
    desc: "Enjoy comfort in our modern standard rooms. Relaxing atmosphere with a double bed and stylish decoration.",
    sqm: "20 m²",
    price: "₺4.500",
    features: [
      { icon: Wifi,    label: "Free Wi-Fi"  },
      { icon: Wind,    label: "Air Conditioning" },
      { icon: Coffee,  label: "Minibar"          },
      { icon: Eye,     label: "Garden View"  },
    ],
    reversed: false,
  },
  {
    img: "https://images.unsplash.com/photo-1566665797739-1674de7a421a?q=80&w=2874&auto=format&fit=crop",
    tag: "Popular",
    name: "River View Room",
    desc: "Spacious rooms where you wake up to the unique view of the Azmak river. Listen to the sound of nature while sipping morning coffee on your private balcony.",
    sqm: "25 m²",
    price: "₺5.500",
    features: [
      { icon: Eye,     label: "River View"   },
      { icon: Trees,   label: "Private Balcony" },
      { icon: Coffee,  label: "Nespresso Machine" },
      { icon: Wifi,    label: "Free Wi-Fi"     },
    ],
    reversed: true,
  },
  {
    img: "https://images.unsplash.com/photo-1499955085172-a104c9463ece?q=80&w=2940&auto=format&fit=crop",
    tag: "Premium",
    name: "Wooden Bungalow",
    desc: "Wooden living area with private entrance and terrace, fully integrated with nature. Ideal for couples seeking privacy and serenity.",
    sqm: "35 m²",
    price: "₺7.000",
    features: [
      { icon: Trees,   label: "Private Terrace"  },
      { icon: Eye,     label: "Nature View"   },
      { icon: Coffee,  label: "Premium Amenities" },
      { icon: Wind,    label: "Air Conditioning" },
    ],
    reversed: false,
  },
];

export default async function OdalarPage({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const isEn = lang === "en";
  const displayRooms = isEn ? roomsEn : roomsTr;
  const displayAmenities = isEn 
    ? ["Organic Breakfast Spread", "Free Parking", "Beach & River Access", "Sunbed & Towel", "Wi-Fi", "24/7 Reception"] 
    : ["Organik Serpme Kahvaltı", "Ücretsiz Otopark", "Plaj & Nehir Erişimi", "Şezlong & Havlu", "Wi-Fi", "24/7 Resepsiyon"];

  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-1618773928121-c32242e63f39?q=80&w=2940&auto=format&fit=crop"
            alt={isEn ? "Our Rooms" : "Odalarımız"}
            fill
            sizes="100vw"
            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">
            {isEn ? "Accommodation" : "Konaklama"}
          </span>
          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
            {isEn ? "Our Rooms" : "Odalarımız"}
          </h1>
          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
            {isEn ? "A comfortable break in the heart of nature." : "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">
          {displayRooms.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"
              >
                {/* Image */}
                <div className={`relative h-80 md:h-auto ${room.reversed ? "md:order-2" : ""}`}>
                  <Image
                    src={room.img}
                    alt={room.name}
                    fill
                    sizes="(max-width: 768px) 100vw, 50vw"
                    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">
                        {isEn ? "Per Night" : "Gecelik"}
                      </span>
                      <span className="font-serif text-3xl font-bold text-dark">{room.price}</span>
                    </div>
                    <Link
                      href={`/${lang}/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"
                    >
                      {isEn ? "Contact Us" : "Bize Ulaşın"}
                    </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">
            {isEn ? "What's included in all rooms" : "Tüm odalarda dahil olanlar"}
          </h3>
          <div className="flex flex-wrap justify-center gap-4 mt-8">
            {displayAmenities.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>
  );
}