"use client";

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Utensils, Globe, X } from 'lucide-react';
import Link from 'next/link';

export default function WelcomePopup() {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    // Sadece ilk ziyarette göstermek için sessionStorage kullanımı:
    const hasSeenPopup = sessionStorage.getItem('kozmos-welcome-popup');
    if (!hasSeenPopup) {
      // Sayfa yüklendikten kısa süre sonra açılsın
      const timer = setTimeout(() => setIsOpen(true), 600);
      return () => clearTimeout(timer);
    }
  }, []);

  const handleClose = () => {
    setIsOpen(false);
    sessionStorage.setItem('kozmos-welcome-popup', 'true');
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[100] flex items-center justify-center bg-charcoal/80 backdrop-blur-md p-4"
        >
          <motion.div
            initial={{ scale: 0.95, opacity: 0, y: 20 }}
            animate={{ scale: 1, opacity: 1, y: 0 }}
            exit={{ scale: 0.95, opacity: 0, y: 20 }}
            className="bg-cream rounded-3xl shadow-2xl max-w-sm w-full p-8 relative overflow-hidden"
          >
            {/* Dekoratif Arka Plan */}
            <div className="absolute -top-24 -right-24 w-48 h-48 bg-sand/30 rounded-full blur-3xl"></div>
            
            <button 
              onClick={handleClose}
              className="absolute top-4 right-4 text-charcoal/50 hover:text-charcoal transition-colors z-20"
              aria-label="Kapat"
            >
              <X className="w-6 h-6" />
            </button>

            <div className="relative z-10 text-center space-y-6">
              <div className="space-y-2">
                <h2 className="text-3xl font-serif text-charcoal">Kozmos'a<br/>Hoş Geldiniz</h2>
                <p className="text-charcoal/70">Nereye gitmek istersiniz?</p>
              </div>

              <div className="flex flex-col gap-4 pt-4">
                {/* Menü Linki - QR menü için buradaki href değerini kendi menü linkinle değiştirebilirsin */}
                <Link
                  href="/menu" 
                  onClick={handleClose}
                  className="group relative flex items-center justify-center gap-3 w-full bg-turquoise text-white py-4 rounded-xl hover:bg-turquoise/90 transition-all font-medium overflow-hidden shadow-lg shadow-turquoise/20"
                >
                  <div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out"></div>
                  <Utensils className="w-5 h-5 relative z-10" />
                  <span className="relative z-10">Menüye Git</span>
                </Link>
                
                <button
                  onClick={handleClose}
                  className="group flex items-center justify-center gap-3 w-full bg-charcoal text-cream py-4 rounded-xl hover:bg-charcoal/90 transition-colors font-medium shadow-lg"
                >
                  <Globe className="w-5 h-5" />
                  <span>Siteye Git</span>
                </button>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}