import React, { useState, useEffect, useRef } from 'react';
import { MapPin, Calendar, Clock, Phone, Sparkles, Heart, Music, Music2, CalendarPlus, Navigation } from 'lucide-react';

// --- Custom Styles for Premium Look ---
const PremiumStyles = () => (
  <style>
    {`
      .gold-shimmer {
        background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        background-size: 200% auto;
        animation: shine 4s linear infinite;
      }
      @keyframes shine {
        to { background-position: 200% center; }
      }
      .glass-card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 8px 32px 0 rgba(92, 10, 25, 0.08);
      }
      .interactive-hover {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      .interactive-hover:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 15px 30px -5px rgba(212, 175, 55, 0.3);
      }
    `}
  </style>
);

// --- Reusable Interactive Components ---

// 1. Scroll Reveal Component for smooth fade-ins
const Reveal = ({ children, delay = 0 }) => {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(entry.target);
        }
      },
      { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => observer.disconnect();
  }, []);

  return (
    <div
      ref={ref}
      style={{ transitionDelay: `${delay}ms` }}
      className={`transition-all duration-1000 ease-out ${
        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'
      }`}
    >
      {children}
    </div>
  );
};

// 2. Interactive 3D Tilt Image Component
const InteractiveImage = ({ src, alt, className }) => {
  const [style, setStyle] = useState({});
  const imageRef = useRef(null);

  const handleMouseMove = (e) => {
    if (!imageRef.current) return;
    const { left, top, width, height } = imageRef.current.getBoundingClientRect();
    const x = (e.clientX - left) / width;
    const y = (e.clientY - top) / height;
    
    // Calculate tilt angles (max 15 degrees)
    const tiltX = (y - 0.5) * 30; 
    const tiltY = (x - 0.5) * -30;

    setStyle({
      transform: `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale3d(1.02, 1.02, 1.02)`,
      transition: 'transform 0.1s ease-out'
    });
  };

  const handleMouseLeave = () => {
    setStyle({
      transform: 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)',
      transition: 'transform 0.5s ease-out'
    });
  };

  return (
    <div className={`relative overflow-hidden rounded-2xl shadow-2xl ${className}`} style={{ transformStyle: 'preserve-3d' }}>
      <img
        ref={imageRef}
        src={src}
        alt={alt}
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
        className="w-full h-full object-cover cursor-pointer"
        style={style}
        onError={(e) => {
          // Fallback if local image isn't available during dev
          e.target.src = 'https://images.unsplash.com/photo-1583939003579-730e3918a45a?auto=format&fit=crop&w=800&q=80';
        }}
      />
      {/* Interactive Glare Effect Overlay */}
      <div className="absolute inset-0 pointer-events-none bg-gradient-to-tr from-transparent via-white/10 to-transparent mix-blend-overlay"></div>
    </div>
  );
};

// 3. Falling Petals Animation
const Petals = () => {
  const [petals, setPetals] = useState([]);

  useEffect(() => {
    // Generate petals with random properties
    const newPetals = Array.from({ length: 25 }).map((_, i) => ({
      id: i,
      left: `${Math.random() * 100}%`,
      animationDuration: `${Math.random() * 5 + 5}s`, // 5 to 10s
      animationDelay: `${Math.random() * 5}s`,
      width: `${Math.random() * 10 + 10}px`, // 10 to 20px
      opacity: Math.random() * 0.5 + 0.3,
    }));
    setPetals(newPetals);
  }, []);

  return (
    <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
      <style>
        {`
          @keyframes fall {
            0% { transform: translateY(-10vh) rotate(0deg) translateX(0); opacity: 0; }
            10% { opacity: 1; }
            100% { transform: translateY(110vh) rotate(360deg) translateX(20px); opacity: 0; }
          }
        `}
      </style>
      {petals.map((petal) => (
        <div
          key={petal.id}
          className="absolute top-0 bg-red-500/40 rounded-full"
          style={{
            left: petal.left,
            width: petal.width,
            height: petal.width,
            borderRadius: '50% 0 50% 50%', // Petal shape
            opacity: petal.opacity,
            animation: `fall ${petal.animationDuration} linear infinite`,
            animationDelay: petal.animationDelay,
            boxShadow: '0 0 10px rgba(239, 68, 68, 0.3)'
          }}
        />
      ))}
    </div>
  );
};

// --- Main Application ---
export default function App() {
  const [isMusicPlaying, setIsMusicPlaying] = useState(false);

  const handleSaveDate = () => {
    // Simulated Add to Calendar functionality
    alert("Event 'Armahi Engagement' has been added to your calendar!");
  };

  return (
    <div className="min-h-screen bg-[#FFFDF7] text-[#5C0A19] font-sans overflow-x-hidden selection:bg-[#D4AF37] selection:text-white">
      <PremiumStyles />
      <Petals />

      {/* Floating Music Button */}
      <button 
        onClick={() => setIsMusicPlaying(!isMusicPlaying)}
        className="fixed bottom-6 right-6 z-50 bg-gradient-to-br from-[#5C0A19] to-[#8A162B] text-[#D4AF37] p-4 rounded-full shadow-2xl hover:scale-110 transition-all duration-300 border border-[#D4AF37]/40 group"
      >
        {isMusicPlaying ? <Music2 className="animate-bounce" /> : <Music className="group-hover:rotate-12 transition-transform" />}
      </button>

      {/* Decorative Top Border */}
      <div className="w-full h-3 bg-gradient-to-r from-[#D4AF37] via-[#F3E5AB] to-[#D4AF37]"></div>

      {/* Hero Section */}
      <header className="relative min-h-[90vh] flex flex-col items-center justify-center px-4 py-20 overflow-hidden">
        {/* Background Mandala/Pattern Suggestion */}
        <div className="absolute inset-0 opacity-5 pointer-events-none bg-[radial-gradient(circle_at_center,_#5C0A19_0%,_transparent_70%)]"></div>
        
        <Reveal>
          <div className="text-center space-y-6 max-w-4xl mx-auto relative z-10">
            <p className="text-sm md:text-lg font-medium tracking-widest text-[#D4AF37] uppercase flex items-center justify-center gap-2">
              <Sparkles size={16} />
              II Shree Ganeshaya Namah II
              <Sparkles size={16} />
            </p>
            
            <p className="text-lg md:text-xl font-light italic mt-8 text-gray-700">
              We invite you to the engagement ceremony of
            </p>

            <h1 className="text-7xl md:text-9xl font-serif py-8 relative cursor-default">
              <span className="block transform transition-all duration-700 hover:scale-105 gold-shimmer drop-shadow-lg">Armahi</span>
              {/* Decorative underline */}
              <div className="absolute left-1/2 bottom-4 -translate-x-1/2 w-48 h-1 bg-gradient-to-r from-transparent via-[#D4AF37] to-transparent opacity-70"></div>
            </h1>

            <p className="text-xl md:text-2xl font-light tracking-wide flex items-center justify-center gap-4">
              <span className="interactive-hover px-5 py-2 rounded-full hover:bg-[#5C0A19]/5">Arpita</span> 
              <span className="text-[#D4AF37] font-serif italic text-3xl">&</span> 
              <span className="interactive-hover px-5 py-2 rounded-full hover:bg-[#5C0A19]/5">Mahendra</span>
            </p>
          </div>
        </Reveal>

        {/* Hero Interactive Image */}
        <Reveal delay={300}>
          <div className="mt-16 relative w-full max-w-lg mx-auto px-4 z-10 group">
            {/* Glowing background blob matching the neon sign vibe */}
            <div className="absolute -inset-8 bg-gradient-to-r from-[#D4AF37] via-pink-200 to-[#5C0A19] opacity-20 blur-3xl group-hover:opacity-40 transition-opacity duration-700 rounded-full"></div>
            
            <InteractiveImage 
              src="armahi.png" 
              alt="Arpita and Mahendra Ring Ceremony"
              className="aspect-[3/4] md:aspect-[4/5] border-4 border-white shadow-[0_20px_50px_rgba(92,10,25,0.3)] transition-shadow duration-300 group-hover:shadow-[0_30px_60px_rgba(212,175,55,0.4)]"
            />
            
            {/* Floating Ring SVG Icon with enhanced animation */}
            <div className="absolute -bottom-6 -right-6 bg-white p-4 rounded-full shadow-2xl animate-[bounce_3s_infinite] border-2 border-[#D4AF37] z-20">
              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#D4AF37" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="16" r="5"></circle>
                <path d="M12 11l-3-5h6z"></path>
              </svg>
            </div>
            
             {/* Decorative Sparkles around the image mimicking background lights */}
             <div className="absolute -top-4 -left-4 text-[#D4AF37] animate-pulse">
                <Sparkles size={32} />
             </div>
             <div className="absolute top-1/2 -right-8 text-pink-300 animate-pulse delay-75">
                <Heart size={24} fill="currentColor" className="opacity-50" />
             </div>
          </div>
        </Reveal>
      </header>

      {/* Details Section */}
      <section className="py-20 px-4 bg-white relative">
        <div className="max-w-4xl mx-auto space-y-24">
          
          {/* The Couple Details */}
          <Reveal>
            <div className="flex flex-col md:flex-row items-center justify-center gap-12 md:gap-24">
              {/* Bride */}
              <div className="text-center group">
                <div className="w-32 h-32 mx-auto rounded-full border-4 border-[#D4AF37]/30 p-1 mb-6 transform group-hover:scale-105 transition-transform duration-500 shadow-lg overflow-hidden relative">
                  {/* Using object-position to focus on the bride's face from the group photo */}
                  <img src="armahi.png" alt="Arpita" className="w-[200%] max-w-none h-auto absolute top-[-10%] left-[-15%] object-cover" />
                </div>
                <h2 className="text-3xl font-serif text-[#5C0A19] mb-3">Arpita</h2>
                <p className="text-sm text-gray-600 font-light max-w-[250px] mx-auto leading-relaxed">
                  D/O Late Rajlakshmi Devi <br/>& Mr. Yogendra Kumar
                </p>
              </div>

              {/* Heart Divider */}
              <div className="text-[#D4AF37] animate-pulse">
                <Heart size={40} fill="#D4AF37" className="opacity-50" />
              </div>

              {/* Groom */}
              <div className="text-center group">
                <div className="w-32 h-32 mx-auto rounded-full border-4 border-[#D4AF37]/30 p-1 mb-6 transform group-hover:scale-105 transition-transform duration-500 shadow-lg overflow-hidden relative">
                  {/* Using object-position to focus on the groom's face from the group photo */}
                  <img src="armahi.png" alt="Mahendra" className="w-[200%] max-w-none h-auto absolute top-[-10%] left-[-85%] object-cover" />
                </div>
                <h2 className="text-3xl font-serif text-[#5C0A19] mb-3">Mahendra</h2>
                <p className="text-sm text-gray-600 font-light max-w-[250px] mx-auto leading-relaxed">
                  S/O Mrs. Ramkanwari Devi <br/>& Mr. Kunnaram
                </p>
              </div>
            </div>
          </Reveal>

          {/* Event Details Card */}
          <Reveal>
            <div className="glass-card rounded-3xl p-8 md:p-12 relative overflow-hidden group">
              <div className="absolute top-0 right-0 w-32 h-32 bg-[#D4AF37]/10 rounded-bl-full transition-transform duration-700 group-hover:scale-150"></div>
              <div className="absolute bottom-0 left-0 w-32 h-32 bg-[#5C0A19]/10 rounded-tr-full transition-transform duration-700 group-hover:scale-150"></div>
              
              <div className="text-center space-y-4 mb-12 relative z-10">
                <h3 className="text-3xl md:text-4xl font-serif text-[#5C0A19] gold-shimmer">Gracious Presence</h3>
                <p className="text-gray-600 font-light">Join us to celebrate this special day</p>
              </div>

              <div className="grid md:grid-cols-2 gap-8 relative z-10">
                {/* Date & Time */}
                <div className="interactive-hover flex flex-col items-center justify-center text-center p-8 bg-white/80 rounded-2xl border border-white">
                  <div className="bg-gradient-to-br from-[#5C0A19] to-[#8A162B] p-4 rounded-full mb-4 text-[#D4AF37] shadow-lg">
                    <Calendar size={32} />
                  </div>
                  <h4 className="text-xl font-bold mb-2 text-[#5C0A19]">Wednesday</h4>
                  <p className="text-2xl text-[#D4AF37] font-serif mb-4">16 Sep, 2026</p>
                  <div className="flex items-center gap-2 text-gray-700 bg-[#5C0A19]/5 px-4 py-2 rounded-full">
                    <Clock size={18} className="text-[#5C0A19]" />
                    <span className="font-medium">Evening 7 PM</span>
                  </div>
                </div>

                {/* Venue */}
                <div className="interactive-hover flex flex-col items-center justify-center text-center p-8 bg-white/80 rounded-2xl border border-white">
                  <div className="bg-gradient-to-br from-[#D4AF37] to-[#B38728] p-4 rounded-full mb-4 text-white shadow-lg">
                    <MapPin size={32} />
                  </div>
                  <h4 className="text-xl font-bold mb-2 text-[#5C0A19]">Venue</h4>
                  <p className="text-lg font-medium text-gray-800 mb-2">Galaxy Banquet Hall</p>
                  <p className="text-gray-600 font-light mb-4">Kashiram Nagar, Moradabad</p>
                  <a href="https://maps.google.com" target="_blank" rel="noreferrer" className="flex items-center gap-2 text-sm text-[#D4AF37] hover:text-[#5C0A19] transition-colors font-medium">
                    <Navigation size={16} /> Get Directions
                  </a>
                </div>
              </div>

              {/* Action Button */}
              <div className="mt-12 flex justify-center relative z-10">
                <button 
                  onClick={handleSaveDate}
                  className="interactive-hover flex items-center gap-2 bg-[#5C0A19] text-white px-8 py-4 rounded-full font-medium shadow-[0_10px_20px_rgba(92,10,25,0.2)] border border-[#5C0A19] hover:bg-transparent hover:text-[#5C0A19] transition-all duration-300"
                >
                  <CalendarPlus size={20} />
                  Save the Date
                </button>
              </div>
            </div>
          </Reveal>

        </div>
      </section>

      {/* Interactive Memories Gallery Section */}
      <section className="py-20 px-4 bg-[#FFFDF7] relative overflow-hidden">
        <div className="max-w-4xl mx-auto space-y-12 text-center">
          <Reveal>
            <div className="space-y-4">
              <p className="text-[#D4AF37] uppercase tracking-widest text-sm font-medium flex items-center justify-center gap-2">
                <Sparkles size={16} /> Precious Moments <Sparkles size={16} />
              </p>
              <h3 className="text-4xl md:text-5xl font-serif text-[#5C0A19]">Our Celebration</h3>
              <p className="text-gray-600 font-light max-w-lg mx-auto">
                A glimpse of our joy and the beautiful journey ahead together.
              </p>
            </div>
          </Reveal>

          <Reveal delay={200}>
            <div className="relative max-w-2xl mx-auto group">
              <div className="absolute -inset-4 bg-gradient-to-r from-[#5C0A19] to-[#D4AF37] opacity-15 blur-2xl rounded-3xl group-hover:opacity-30 transition-opacity duration-700"></div>
              <InteractiveImage 
                src="image_6a4aad.jpg" 
                alt="Arpita and Mahendra Celebration" 
                className="aspect-[4/3] md:aspect-[16/10] border-4 border-white shadow-2xl rounded-3xl"
              />
            </div>
          </Reveal>
        </div>
      </section>

      {/* Family & Contact Section */}
      <section className="py-20 px-4 relative bg-[#5C0A19] text-white overflow-hidden">
        <div className="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')]"></div>
        
        <div className="max-w-4xl mx-auto grid md:grid-cols-2 gap-16 relative z-10">
          
          <Reveal>
            <div className="space-y-12">
              <div>
                <h3 className="text-[#D4AF37] font-serif text-3xl mb-6 flex items-center gap-3">
                  <Sparkles size={24}/> Welcome Eagerly
                </h3>
                <ul className="space-y-3 font-light text-xl">
                  <li className="hover:text-[#D4AF37] transition-colors cursor-default">Mr. Arun Kumar</li>
                  <li className="hover:text-[#D4AF37] transition-colors cursor-default">Dr. Anoop Kumar</li>
                </ul>
              </div>

              <div>
                <h3 className="text-[#D4AF37] font-serif text-3xl mb-6 flex items-center gap-3">
                  <Heart size={24}/> Aspirants
                </h3>
                <p className="font-light leading-relaxed text-white/90 text-lg">
                  Ankita Gupta, Khushi, Anmol, Ujjawal, Vikhyaat, Lakshyaraj, Rudransh, Saanvi, and all relatives & friends.
                </p>
              </div>
            </div>
          </Reveal>

          <Reveal delay={200}>
            <div className="bg-white/10 backdrop-blur-md rounded-3xl p-8 border border-white/20 shadow-2xl relative overflow-hidden group">
               <div className="absolute -right-16 -top-16 w-32 h-32 bg-[#D4AF37]/20 rounded-full blur-2xl group-hover:bg-[#D4AF37]/40 transition-colors duration-500"></div>
              
              <h3 className="text-[#D4AF37] font-serif text-3xl mb-8 relative z-10">Connect</h3>
              
              <div className="space-y-8 relative z-10">
                <div>
                  <p className="font-medium text-xl mb-2 text-white">Mr. Yogendra Kumar</p>
                  <p className="font-light text-white/80 text-base flex items-start gap-2">
                    <MapPin size={18} className="mt-1 flex-shrink-0 text-[#D4AF37]" /> 
                    Himgiri Colony, Moradabad
                  </p>
                </div>

                <div className="space-y-4 pt-6 border-t border-white/10">
                  <a href="tel:+918279347475" className="interactive-hover flex items-center gap-4 bg-white/5 p-4 rounded-2xl border border-white/10 text-white/90 hover:bg-[#D4AF37]/20 hover:border-[#D4AF37]/50 transition-all cursor-pointer shadow-sm hover:shadow-md">
                    <div className="bg-gradient-to-br from-[#D4AF37] to-[#B38728] p-3 rounded-full text-white shadow-inner">
                      <Phone size={20} />
                    </div>
                    <span className="font-medium tracking-wide">+91 82793-47475</span>
                  </a>
                  <a href="tel:+919259327232" className="interactive-hover flex items-center gap-4 bg-white/5 p-4 rounded-2xl border border-white/10 text-white/90 hover:bg-[#D4AF37]/20 hover:border-[#D4AF37]/50 transition-all cursor-pointer shadow-sm hover:shadow-md">
                    <div className="bg-gradient-to-br from-[#D4AF37] to-[#B38728] p-3 rounded-full text-white shadow-inner">
                      <Phone size={20} />
                    </div>
                    <span className="font-medium tracking-wide">+91 92593-27232</span>
                  </a>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
        
        {/* Footer Text */}
        <div className="mt-24 text-center text-white/60 text-sm font-light flex flex-col items-center justify-center gap-2">
           <Heart size={16} className="text-[#D4AF37] animate-pulse" />
          <p>Created with love for Arpita & Mahendra</p>
        </div>
      </section>
    </div>
  );
}