"use client";

import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { Utensils, Wine, Coffee, ArrowRight } from 'lucide-react';

const CARDS = [
  { id: 'seafood',   icon: Utensils, accent: '#FF5A36' },
  { id: 'cocktails', icon: Wine,     accent: '#00BFA5' },
  { id: 'breakfast', icon: Coffee,   accent: '#FFA827' },
];

export default function Dining() {
  const t = useTranslations('Dining');
  const menuUrl = process.env.NEXT_PUBLIC_MENU_URL || '#';

  return (
    <section
      id="dining"
      className="pt-20 pb-28 text-white relative overflow-hidden"
      style={{ background: '#080D18' }}
    >
      {/* Background blobs */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div
          className="absolute bottom-0 left-1/4 w-[500px] h-[500px] rounded-full opacity-20"
          style={{ background: 'radial-gradient(circle, #FF5A36 0%, transparent 70%)' }}
        />
        <div
          className="absolute top-0 right-1/4 w-[400px] h-[400px] rounded-full opacity-15"
          style={{ background: 'radial-gradient(circle, #00BFA5 0%, transparent 70%)' }}
        />
      </div>

      <div className="container mx-auto px-6 lg:px-12 relative z-10">
        <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-amber mb-4 block"
          >
            — Yeme &amp; İçme
          </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"
          >
            <span className="gradient-text">{t('title')}</span>
          </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-white/50 mb-8"
          >
            {t('description')}
          </motion.p>

          <motion.a
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            href={menuUrl}
            target={menuUrl !== '#' ? '_blank' : '_self'}
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 px-8 py-3.5 rounded-full font-black text-sm text-midnight transition-all hover:scale-105"
            style={{ background: 'linear-gradient(135deg, #FFA827, #FFD166)' }}
          >
            {t('view_menu')}
            <ArrowRight size={15} />
          </motion.a>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {CARDS.map(({ id, icon: Icon, accent }, index) => (
            <motion.div
              key={id}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1 + 0.2 }}
              className="group relative p-8 rounded-3xl border border-white/10 hover:border-white/25 transition-all duration-300"
              style={{ background: 'rgba(255,255,255,0.04)' }}
            >
              {/* Icon */}
              <div
                className="w-14 h-14 rounded-2xl mb-6 flex items-center justify-center"
                style={{ background: `${accent}18`, color: accent }}
              >
                <Icon size={26} />
              </div>

              <h3 className="font-heading text-2xl font-black mb-3 text-white">
                {t(`cards.${id}.title`)}
              </h3>
              <p className="text-white/45 text-sm leading-relaxed">{t(`cards.${id}.desc`)}</p>

              {/* Bottom accent line on hover */}
              <div
                className="absolute bottom-0 left-8 right-8 h-[1px] opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"
                style={{ background: `linear-gradient(90deg, transparent, ${accent}, transparent)` }}
              />
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}