import Image from "next/image";
import Link from "next/link";
import { Check, Info } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import BentoGallery from "@/components/BentoGallery";

const galleryImages = [
  "https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.15.jpeg",
  "https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.18.jpeg",
  "https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.19.jpeg",
  "https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.20%20(1).jpeg",
  "https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.20.jpeg",
  "https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.21.jpeg",
];

export default async function OdalarPage({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const isEn = lang === "en";

  const displayAmenities = isEn 
    ? ["Organic Breakfast Spread", "Free Parking", "Beach & River Access", "Sunbed & Towel", "Wi-Fi", "24/7 Reception", "Air Conditioning", "Minibar"] 
    : ["Organik Serpme Kahvaltı", "Ücretsiz Otopark", "Plaj & Nehir Erişimi", "Şezlong & Havlu", "Wi-Fi", "24/7 Resepsiyon", "Klima", "Minibar"];

  return (
    <div className="min-h-screen bg-background pt-40 pb-10">
      {/* Page Header */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-16">
        <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4 animate-fade-up">
          {isEn ? "Accommodation" : "Konaklama"}
        </span>
        <h1 className="font-serif text-5xl md:text-6xl text-dark font-bold animate-fade-up delay-100 mb-6">
          {isEn ? "Our Rooms" : "Odalarımız"}
        </h1>
        <p className="text-muted text-lg max-w-2xl mx-auto animate-fade-up delay-200">
          {isEn ? "A comfortable break in the heart of nature." : "Doğanın içinde, konforlu bir mola."}
        </p>
      </div>

      {/* Intro & Price */}
      <section className="py-20 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <ScrollReveal className="text-center mb-12">
          <h2 className="font-serif text-4xl font-bold text-dark mb-6">
            {isEn ? "Comfort & Serenity" : "Konfor & Huzur"}
          </h2>
          <p className="text-muted text-[15px] leading-relaxed mb-10 max-w-2xl mx-auto">
            {isEn
              ? "All our rooms are carefully designed to offer you the ultimate relaxation, harmonizing with the natural beauty surrounding Akyaka. Enjoy modern amenities with a touch of Aegean warmth."
              : "Tüm odalarımız, Akyaka'yı çevreleyen doğal güzelliklerle uyum içinde, size en üst düzeyde rahatlama sunmak için özenle tasarlandı. Ege sıcaklığının dokunuşuyla modern olanakların keyfini çıkarın."}
          </p>
          
          <div className="inline-flex items-center justify-center gap-4 bg-primary/10 border-2 border-primary/20 text-primary px-8 py-5 rounded-3xl shadow-sm">
            <Info size={24} className="text-accent" />
            <div className="text-left">
              <span className="block text-xs uppercase tracking-widest text-primary/70 mb-1">
                {isEn ? "Standard Rate" : "Standart Fiyat"}
              </span>
              <span className="block font-bold text-xl md:text-2xl tracking-wide">
                {isEn ? "8000 TL / Night (Breakfast Included)" : "8000 TL / Gecelik (Kahvaltı Dahil)"}
              </span>
            </div>
          </div>
        </ScrollReveal>
      </section>

      {/* Bento Grid Gallery */}
      <section className="pb-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <ScrollReveal>
          <BentoGallery images={galleryImages} />
        </ScrollReveal>
        
        <div className="text-center mt-16">
          <Link
            href={`/${lang}/iletisim`}
            className="btn-shimmer bg-accent text-white px-10 py-4 rounded-full text-sm font-bold tracking-[0.15em] uppercase hover:bg-accent/90 transition-colors shadow-xl"
          >
            {isEn ? "Contact For Reservation" : "Rezervasyon İçin İletişime Geçin"}
          </Link>
        </div>
      </section>

      {/* Info strip (Disabled) 
      <section className="py-20 bg-primary">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h3 className="font-serif text-3xl text-white font-bold mb-6">
            {isEn ? "Included in your stay" : "Konaklamanıza dahil olanlar"}
          </h3>
          <div className="flex flex-wrap justify-center gap-5 mt-8">
            {displayAmenities.map((item) => (
              <span key={item} className="inline-flex items-center gap-2.5 bg-white/10 text-white text-[14px] px-5 py-3 rounded-full border border-white/15 backdrop-blur-sm">
                <Check size={16} className="text-accent" />
                {item}
              </span>
            ))}
          </div>
        </div>
      </section>
      */}
    </div>
  );
}