import React, { useEffect, useState } from "react";
import { motion, AnimatePresence, useScroll, useTransform } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Instagram, Mail, ArrowLeft } from "lucide-react";

export default function MeowWebsite() {
  const [page, setPage] = useState("festival");
  const { scrollY } = useScroll();
  const yParallax = useTransform(scrollY, [0, 500], [0, -150]);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (e) => {
      setMousePosition({ x: e.clientX, y: e.clientY });
    };
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);

  const handleBodasClick = () => {
    setPage("weddings");
  };

  return (
    <div className="min-h-screen bg-black text-white w-full h-full overflow-x-hidden relative">
      {/* Mouse Glow */}
      <motion.div
        className="pointer-events-none fixed top-0 left-0 w-40 h-40 rounded-full bg-pink-500/20 blur-3xl z-50"
        animate={{ x: mousePosition.x - 80, y: mousePosition.y - 80 }}
        transition={{ type: "tween", ease: "linear", duration: 0.1 }}
      />

      <AnimatePresence mode="wait">
        {page === "festival" && (
          <motion.div
            key="festival"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0, scale: 1.1, filter: "blur(20px)" }}
            transition={{ duration: 0.8 }}
          >
            {/* HERO FESTIVAL */}
            <section className="h-screen flex flex-col items-center justify-center text-center relative overflow-hidden w-full min-h-screen">
              <motion.div
                style={{ y: yParallax }}
                className="absolute inset-0 w-full h-full bg-gradient-to-br from-purple-700 via-black to-pink-700"
              />

              {/* Fondo con isotipo ligeramente arriba, opacidad 100 y desenfoque gaussiano */}
              <motion.img
                src="https://meow-4esrni7jsi.live-website.com/wp-content/uploads/2026/03/MEOW-ISOTIPO-2026-negro.png"
                alt="MEOW Isotipo"
                className="absolute w-96 md:w-[600px] opacity-100 z-0 filter blur-lg -top-24"
              />

              {/* LOGO ANIMADO CON MOUSE REACTIVO */}
              <motion.img
                src="https://meow-4esrni7jsi.live-website.com/wp-content/uploads/2026/03/MEOW-Logo-2026-blanco.png"
                alt="MEOW Logo"
                initial={{ scale: 0, opacity: 0, rotate: -10 }}
                animate={{ scale: 1, opacity: 1, rotate: 0 }}
                whileHover={{ scale: 1.03, x: mousePosition.x / 100 - 4, y: mousePosition.y / 100 - 4 }}
                transition={{ type: "spring", stiffness: 250, damping: 20, duration: 0.3 }}
                className="w-72 md:w-[500px] z-10 drop-shadow-[0_0_15px_rgba(255,0,204,0.8)]"
              />

              <motion.p
                initial={{ opacity: 0, y: 40 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.6 }}
                className="mt-6 text-xl md:text-3xl text-gray-200 z-10"
              >
                Festival Energy • Global Connection • Pure Impact
              </motion.p>

              <div className="mt-10 z-10 flex gap-6">
                {/* Botones con efecto hover estilo Dock de Apple más fluido */}
                <motion.button
                  onClick={() => {}}
                  className="px-10 py-6 rounded-2xl bg-pink-600 text-white"
                  whileHover={{ scale: 1.1, y: -4 }}
                  transition={{ type: 'spring', stiffness: 300, damping: 20 }}
                >
                  Próximas Fechas
                </motion.button>

                <motion.button
                  onClick={handleBodasClick}
                  className="px-10 py-6 rounded-2xl bg-white text-black"
                  whileHover={{ scale: 1.1, y: -4, boxShadow: '0 0 15px rgba(255,255,255,0.6)' }}
                  whileTap={{ scale: 1.05 }}
                  transition={{ type: 'spring', stiffness: 300, damping: 20 }}
                >
                  Bodas & Eventos Privados
                </motion.button>
              </div>
            </section>
          </motion.div>
        )}
      </AnimatePresence>

      {/* FOOTER */}
      <footer className="py-12 text-center border-t border-zinc-800 text-gray-400 bg-black">
        <div className="flex justify-center gap-6 mb-4">
          <a href="https://www.instagram.com/djmeowofficial" target="_blank" rel="noopener noreferrer">
            <motion.div whileHover={{ scale: 1.1, color: '#FFFFFF' }} className="transition-colors duration-300">
              <Instagram />
            </motion.div>
          </a>
          <a href="mailto:contacto@djmeowofficial.com">
            <motion.div whileHover={{ scale: 1.1, color: '#FFFFFF' }} className="transition-colors duration-300">
              <Mail />
            </motion.div>
          </a>
        </div>
        <p>© {new Date().getFullYear()} MEOW! All rights reserved.</p>
      </footer>
    </div>
  );
}