kitebeachakyaka/app/[lang]/odalar/page.tsx

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">

      {/* 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>

      {/* 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>
  );
}