"use client";

import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import Image from 'next/image';
import { Users, Check, Sparkles } from 'lucide-react';

export default function Accommodation() {
  const t = useTranslations('Accommodation');

  const openWhatsApp = () => {
    const phone = process.env.NEXT_PUBLIC_WHATSAPP_NUMBER || '905000000000';
    window.open(`https://wa.me/${phone}`, '_blank');
  };

  const rooms = [
    {
      id: 'standard',
      image: 'https://picsum.photos/600/400?random=3',
      capacity: 2,
      features: t.raw('rooms.standard.features') as string[],
      featured: false,
      gradient: 'linear-gradient(135deg, #00BFA5, #00E5FF)',
    },
    {
      id: 'sea_view',
      image: 'https://picsum.photos/600/400?random=4',
      capacity: 2,
      features: t.raw('rooms.sea_view.features') as string[],
      featured: true,
      gradient: 'linear-gradient(135deg, #FF5A36, #FFA827)',
    },
    {
      id: 'garden_suite',
      image: 'https://picsum.photos/600/400?random=5',
      capacity: 4,
      features: t.raw('rooms.garden_suite.features') as string[],
      featured: false,
      gradient: 'linear-gradient(135deg, #00BFA5, #00E5FF)',
    },
  ];

  return (
    <section id="accommodation" className="py-28 bg-sandy/25 text-midnight">
      <div className="container mx-auto px-6 lg:px-12">

        <div className="text-center max-w-3xl mx-auto mb-16">
          <motion.span
            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-xs tracking-[0.4em] uppercase font-black text-coral mb-4 block"
          >
            — Konaklama
          </motion.span>
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="font-heading text-5xl md:text-6xl font-black mb-6 text-midnight"
          >
            {t('title')}
          </motion.h2>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-lg text-midnight/60"
          >
            {t('description')}
          </motion.p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {rooms.map((room, index) => (
            <motion.div
              key={room.id}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1, duration: 0.6 }}
              className={`relative rounded-3xl overflow-hidden bg-white shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-1 ${
                room.featured ? 'outline outline-2 outline-offset-2 outline-coral' : ''
              }`}
            >
              {/* Featured badge */}
              {room.featured && (
                <div
                  className="absolute top-4 right-4 z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[11px] font-black text-white tracking-wider"
                  style={{ background: 'linear-gradient(135deg, #FF5A36, #FFA827)' }}
                >
                  <Sparkles size={10} />
                  FEATURED
                </div>
              )}

              {/* Image */}
              <div className="relative h-52 w-full overflow-hidden">
                <Image
                  src={room.image}
                  alt={t(`rooms.${room.id}.name`)}
                  fill
                  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                  className="object-cover transition-transform duration-700 hover:scale-110"
                />
                <div
                  className="absolute inset-0"
                  style={{ background: 'linear-gradient(to top, rgba(8,13,24,0.5), transparent)' }}
                />
              </div>

              {/* Content */}
              <div className="p-7">
                <h3 className="font-heading text-xl font-black mb-2 text-midnight">
                  {t(`rooms.${room.id}.name`)}
                </h3>

                <div className="flex items-center gap-2 text-midnight/45 mb-5 text-sm">
                  <Users size={14} />
                  <span>
                    {t('capacity')} {room.capacity} {t('person')}
                  </span>
                </div>

                <ul className="space-y-2 mb-7">
                  {room.features.map((feature, i) => (
                    <li key={i} className="flex items-center gap-2.5 text-sm text-midnight/65">
                      <Check size={13} className="text-aqua flex-shrink-0" />
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>

                <button
                  onClick={openWhatsApp}
                  className="w-full py-3.5 rounded-2xl font-black text-sm text-white transition-all duration-300 hover:opacity-90 hover:scale-[1.02]"
                  style={{ background: room.gradient }}
                >
                  {t('book_whatsapp')}
                </button>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}