import React, { useState, useEffect, useRef } from 'react';
import { 
  Play, Heart, Music, Mic, Lock, Globe, Ghost, Star, 
  Headphones, MessageCircle, ChevronRight, X, ArrowRight,
  Check, Mail
} from 'lucide-react';

// --- Custom Hooks ---

const useScrollReveal = (threshold = 0.1) => {
  const [isVisible, setIsVisible] = useState(false);
  const domRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => setIsVisible(entry.isIntersecting));
    }, { threshold });

    const currentRef = domRef.current;
    if (currentRef) observer.observe(currentRef);

    return () => {
      if (currentRef) observer.unobserve(currentRef);
    };
  }, [threshold]);

  return [domRef, isVisible];
};

// --- Sub-Components ---

const FadeInSection = ({ children, delay = 0, className = "" }) => {
  const [ref, isVisible] = useScrollReveal(0.15);
  return (
    <div
      ref={ref}
      className={`transition-all duration-1000 ease-out transform ${
        isVisible ? 'opacity-100 translate-y-0 blur-0' : 'opacity-0 translate-y-10 blur-sm'
      } ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
    >
      {children}
    </div>
  );
};

const CustomCursor = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isHovering, setIsHovering] = useState(false);

  useEffect(() => {
    const updatePosition = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };

    const handleMouseOver = (e) => {
      if (e.target.tagName === 'BUTTON' || e.target.tagName === 'A' || e.target.closest('.interactive')) {
        setIsHovering(true);
      } else {
        setIsHovering(false);
      }
    };

    window.addEventListener('mousemove', updatePosition);
    document.addEventListener('mouseover', handleMouseOver);

    return () => {
      window.removeEventListener('mousemove', updatePosition);
      document.removeEventListener('mouseover', handleMouseOver);
    };
  }, []);

  return (
    <div 
      className="fixed pointer-events-none z-[9999] mix-blend-screen hidden md:block"
      style={{ 
        left: position.x, 
        top: position.y,
        transform: `translate(-50%, -50%) scale(${isHovering ? 2.5 : 1})`,
        transition: 'transform 0.2s ease-out'
      }}
    >
      <div className={`w-4 h-4 rounded-full bg-[#E8B4B8] opacity-60 blur-[2px] shadow-[0_0_15px_#E8B4B8]`} />
    </div>
  );
};

// --- Sections ---

const Navbar = () => {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-[#0A1128]/80 backdrop-blur-md py-4 shadow-lg' : 'bg-transparent py-6'}`}>
      <div className="container mx-auto px-6 flex justify-between items-center">
        <div className="text-2xl font-serif text-[#F7F4EA] tracking-wide interactive cursor-pointer">
          Reciprocal<span className="text-[#FF6B35]">.</span>
        </div>
        <div className="hidden md:flex space-x-8 text-[#F7F4EA] text-sm tracking-wider">
          <a href="#how-it-works" className="hover:text-[#E8B4B8] transition-colors interactive">How it Works</a>
          <a href="#features" className="hover:text-[#E8B4B8] transition-colors interactive">Features</a>
          <a href="#pricing" className="hover:text-[#E8B4B8] transition-colors interactive">Pricing</a>
        </div>
        <button className="bg-[#FF6B35] hover:bg-[#ff8659] text-white px-6 py-2 rounded-full text-sm font-medium transition-all shadow-[0_0_20px_rgba(255,107,53,0.3)] hover:shadow-[0_0_30px_rgba(255,107,53,0.5)] interactive">
          Join Waitlist
        </button>
      </div>
    </nav>
  );
};

const HeroCanvas = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    let animationFrameId;
    let particles = [];
    
    const resize = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    };
    
    window.addEventListener('resize', resize);
    resize();

    // Particle Class
    class Particle {
      constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.vx = (Math.random() - 0.5) * 0.3;
        this.vy = (Math.random() - 0.5) * 0.3;
        this.size = Math.random() * 2;
        this.color = Math.random() > 0.5 ? 'rgba(232, 180, 184, ' : 'rgba(74, 25, 66, '; // Rose Gold or Purple
      }

      update() {
        this.x += this.vx;
        this.y += this.vy;
        if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
        if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
      }

      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color + '0.5)';
        ctx.fill();
      }
    }

    // Init Particles
    for (let i = 0; i < 60; i++) particles.push(new Particle());

    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw Connections
      particles.forEach((p, index) => {
        p.update();
        p.draw();
        
        for (let j = index + 1; j < particles.length; j++) {
          const p2 = particles[j];
          const dx = p.x - p2.x;
          const dy = p.y - p2.y;
          const distance = Math.sqrt(dx * dx + dy * dy);

          if (distance < 150) {
            ctx.beginPath();
            ctx.strokeStyle = `rgba(232, 180, 184, ${0.15 - distance/1000})`;
            ctx.lineWidth = 0.5;
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.stroke();
          }
        }
      });

      animationFrameId = requestAnimationFrame(animate);
    };

    animate();

    return () => {
      window.removeEventListener('resize', resize);
      cancelAnimationFrame(animationFrameId);
    };
  }, []);

  return <canvas ref={canvasRef} className="absolute inset-0 z-0 opacity-60" />;
};

const Hero = () => {
  return (
    <section className="relative h-screen w-full flex items-center justify-center overflow-hidden bg-gradient-to-br from-[#0A1128] via-[#1a1f4d] to-[#4A1942]">
      <HeroCanvas />
      
      {/* Background Aurora Effect */}
      <div className="absolute inset-0 bg-gradient-to-t from-[#0A1128] via-transparent to-transparent z-10" />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-purple-900/20 rounded-full blur-[120px] animate-pulse" />
      
      <div className="relative z-20 text-center px-6 max-w-4xl mx-auto">
        <FadeInSection delay={200}>
          <h1 className="text-4xl md:text-7xl font-serif text-[#F7F4EA] leading-tight mb-6 tracking-tight">
            What if discovering music<br />
            <span className="italic text-[#E8B4B8]">felt like falling in love?</span>
          </h1>
        </FadeInSection>
        
        <FadeInSection delay={600}>
          <p className="text-lg md:text-xl text-gray-300 font-light mb-10 max-w-2xl mx-auto">
            One song from your heart. One song to your soul.
            <br className="hidden md:block"/> Matched with a stranger who becomes a story.
          </p>
        </FadeInSection>

        <FadeInSection delay={900}>
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <button className="bg-[#FF6B35] text-white px-8 py-4 rounded-full font-medium text-lg shadow-[0_0_30px_rgba(255,107,53,0.4)] hover:shadow-[0_0_50px_rgba(255,107,53,0.6)] hover:scale-105 transition-all duration-300 interactive flex items-center gap-2 group">
              Join the Waitlist
              <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </button>
            <button className="px-8 py-4 rounded-full text-[#F7F4EA] border border-[#F7F4EA]/30 hover:bg-[#F7F4EA]/10 backdrop-blur-sm transition-all interactive flex items-center gap-2 group">
              <Play className="w-4 h-4 fill-current group-hover:scale-110 transition-transform" />
              Watch How It Works
            </button>
          </div>
        </FadeInSection>
      </div>

      {/* Floating Scroll Indicator */}
      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce z-20 opacity-50">
        <div className="w-px h-16 bg-gradient-to-b from-transparent via-[#F7F4EA] to-transparent" />
      </div>
    </section>
  );
};

const HowItWorks = () => {
  const steps = [
    {
      icon: <Heart className="w-6 h-6 text-[#FF6B35]" />,
      title: "Share Your Song",
      desc: "Choose one song that moves you. Add a note about why it matters.",
    },
    {
      icon: <Ghost className="w-6 h-6 text-[#E8B4B8]" />,
      title: "The Blind Match",
      desc: "We pair you with someone, somewhere. No profiles. Just serendipity.",
    },
    {
      icon: <Headphones className="w-6 h-6 text-[#FF6B35]" />,
      title: "Listen & React",
      desc: "Experience their choice. Rate it. Share your thoughts or a voice note.",
    },
    {
      icon: <MessageCircle className="w-6 h-6 text-[#E8B4B8]" />,
      title: "The Reveal",
      desc: "Both reacted? Now meet. Chat. Maybe become friends.",
    }
  ];

  return (
    <section id="how-it-works" className="py-24 bg-[#0A1128] relative overflow-hidden">
      <div className="container mx-auto px-6 relative z-10">
        <FadeInSection>
          <div className="text-center mb-16">
            <span className="text-[#FF6B35] font-serif italic text-lg">The Journey</span>
            <h2 className="text-3xl md:text-5xl font-serif text-[#F7F4EA] mt-2">From Strangers to Soulmates</h2>
          </div>
        </FadeInSection>

        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 relative">
          {/* Connector Line */}
          <div className="hidden md:block absolute top-8 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-[#E8B4B8]/30 to-transparent" />

          {steps.map((step, idx) => (
            <FadeInSection key={idx} delay={idx * 200}>
              <div className="relative group interactive cursor-pointer">
                {/* Card */}
                <div className="bg-[#F7F4EA]/5 backdrop-blur-md border border-[#F7F4EA]/10 p-6 rounded-2xl h-full transition-all duration-300 group-hover:-translate-y-2 group-hover:shadow-[0_10px_40px_rgba(255,107,53,0.1)]">
                  <div className="w-16 h-16 bg-[#0A1128] rounded-full flex items-center justify-center mb-6 border border-[#F7F4EA]/20 mx-auto md:mx-0 relative z-10 group-hover:border-[#FF6B35]/50 transition-colors">
                    {step.icon}
                  </div>
                  <h3 className="text-xl font-bold text-[#F7F4EA] mb-3 text-center md:text-left">{step.title}</h3>
                  <p className="text-gray-400 text-sm leading-relaxed text-center md:text-left">{step.desc}</p>
                </div>
              </div>
            </FadeInSection>
          ))}
        </div>
      </div>
    </section>
  );
};

const WhyReciprocal = () => {
  return (
    <section className="py-24 bg-gradient-to-b from-[#0A1128] to-[#1a0f1d] overflow-hidden">
      <div className="container mx-auto px-6 flex flex-col md:flex-row items-center gap-16">
        <div className="md:w-1/2">
          <FadeInSection>
            <h2 className="text-4xl md:text-6xl font-serif text-[#F7F4EA] mb-8 leading-tight">
              Because music discovery shouldn't feel like <span className="text-[#E8B4B8] italic">homework</span>.
            </h2>
            <div className="space-y-6 text-lg text-gray-300 font-light">
              <p className="flex items-center gap-3">
                <X className="w-5 h-5 text-red-400" /> No endless scrolling.
              </p>
              <p className="flex items-center gap-3">
                <X className="w-5 h-5 text-red-400" /> No impersonal playlists.
              </p>
              <p className="flex items-center gap-3">
                <X className="w-5 h-5 text-red-400" /> No "users who liked X also liked Y."
              </p>
              <div className="pt-4 border-l-2 border-[#FF6B35] pl-6 mt-8">
                <p className="text-2xl text-[#F7F4EA] font-serif">
                  Just two people. Two songs.<br/>
                  One moment of genuine connection.
                </p>
              </div>
            </div>
          </FadeInSection>
        </div>

        <div className="md:w-1/2 relative h-[500px] w-full flex items-center justify-center">
           {/* Abstract Phone UI Representation */}
           <FadeInSection delay={300} className="relative w-full h-full flex items-center justify-center">
              <div className="relative w-64 h-[450px] bg-gradient-to-br from-[#2a2a4a] to-[#0A1128] rounded-[2.5rem] border-4 border-[#4A1942] shadow-2xl rotate-y-12 rotate-z-3 transform transition-transform duration-700 hover:rotate-0 hover:scale-105 z-10 overflow-hidden">
                {/* Screen Content */}
                <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1493225255756-d9584f8606e9?q=80&w=2070&auto=format&fit=crop')] bg-cover opacity-40 mix-blend-overlay"></div>
                <div className="absolute bottom-0 w-full p-6 bg-gradient-to-t from-[#0A1128] to-transparent">
                   <div className="w-10 h-10 rounded-full bg-[#FF6B35] flex items-center justify-center mb-4 animate-bounce">
                     <Heart className="w-5 h-5 text-white" />
                   </div>
                   <p className="text-white font-serif text-lg">"This track reminds me of rainy Sundays..."</p>
                </div>
              </div>
              
              {/* Second Floating Card */}
              <div className="absolute top-10 right-10 md:right-20 w-48 h-64 bg-[#E8B4B8]/10 backdrop-blur-xl border border-[#E8B4B8]/30 rounded-xl p-4 shadow-xl transform -rotate-6 animate-pulse">
                <div className="w-8 h-8 rounded-full bg-[#E8B4B8] mb-3"></div>
                <div className="h-2 w-3/4 bg-[#E8B4B8]/40 rounded mb-2"></div>
                <div className="h-2 w-1/2 bg-[#E8B4B8]/40 rounded"></div>
              </div>
           </FadeInSection>
        </div>
      </div>
    </section>
  );
};

const Testimonials = () => {
  const reviews = [
    {
      text: "I matched with someone in Tokyo who sent me a City Pop song I'd never heard. Now we exchange music weekly.",
      author: "Sarah, Brooklyn",
      bg: "bg-[#4A1942]"
    },
    {
      text: "Tinder for music nerds, except it actually works and feels... intimate? I found my music soulmate.",
      author: "Marcus, London",
      bg: "bg-[#0A1128]"
    },
    {
      text: "My match sent me a song her grandmother used to sing. We both cried. Strangers can understand you best.",
      author: "Yuki, Kyoto",
      bg: "bg-[#1a1f4d]"
    }
  ];

  return (
    <section className="py-24 bg-[#F7F4EA] text-[#0A1128]">
      <div className="container mx-auto px-6">
        <div className="mb-12">
          <h2 className="text-4xl font-serif text-[#0A1128] -rotate-1 inline-block border-b-4 border-[#FF6B35]">Early Stories</h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {reviews.map((r, i) => (
            <FadeInSection key={i} delay={i * 150}>
              <div className="bg-white p-8 shadow-[0_10px_30px_rgba(0,0,0,0.1)] transform rotate-1 hover:rotate-0 transition-all duration-300 relative overflow-hidden h-full flex flex-col justify-between group interactive cursor-pointer">
                <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#FF6B35] to-[#E8B4B8]" />
                <p className="text-lg italic font-serif leading-relaxed text-gray-700 mb-6">"{r.text}"</p>
                <div className="flex items-center gap-3">
                  <div className={`w-10 h-10 rounded-full ${r.bg} text-white flex items-center justify-center font-bold text-sm`}>
                    {r.author[0]}
                  </div>
                  <span className="font-bold tracking-wide text-sm uppercase text-gray-500">{r.author}</span>
                </div>
                <Heart className="absolute bottom-4 right-4 w-6 h-6 text-[#E8B4B8] opacity-0 group-hover:opacity-100 transition-opacity transform group-hover:scale-125" />
              </div>
            </FadeInSection>
          ))}
        </div>
      </div>
    </section>
  );
};

const Features = () => {
  const features = [
    { icon: <Star />, title: "One Match Daily", desc: "Anticipation over abundance. Quality over quantity." },
    { icon: <Mic />, title: "Voice Reactions", desc: "Say it with your voice. Let them hear your excitement.", premium: true },
    { icon: <Check />, title: "No Ghosting", desc: "48-hour window. Both must listen. Mutual respect built-in." },
    { icon: <Lock />, title: "Private & Safe", desc: "Anonymous until both react. Report tools. Zero tolerance." },
    { icon: <Heart />, title: "Premium Matching", desc: "Taste-based pairing for deeper connections.", premium: true },
    { icon: <Globe />, title: "Cross-Platform", desc: "Share from Spotify, Apple, YouTube. We store links, not files." },
  ];

  return (
    <section id="features" className="py-24 bg-[#0A1128] text-[#F7F4EA]">
      <div className="container mx-auto px-6">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {features.map((f, i) => (
            <FadeInSection key={i} delay={i * 100}>
              <div className="bg-[#1a1f4d]/50 p-8 rounded-xl border border-white/5 hover:border-[#FF6B35]/30 transition-all duration-300 hover:bg-[#1a1f4d] group interactive">
                <div className="flex justify-between items-start mb-4">
                  <div className="w-12 h-12 bg-[#0A1128] rounded-lg flex items-center justify-center text-[#E8B4B8] group-hover:text-[#FF6B35] transition-colors">
                    {React.cloneElement(f.icon, { className: "w-6 h-6" })}
                  </div>
                  {f.premium && (
                    <span className="text-[10px] font-bold uppercase tracking-widest bg-[#E8B4B8] text-[#0A1128] px-2 py-1 rounded-sm">
                      Plus
                    </span>
                  )}
                </div>
                <h3 className="text-xl font-bold mb-2">{f.title}</h3>
                <p className="text-gray-400 text-sm">{f.desc}</p>
              </div>
            </FadeInSection>
          ))}
        </div>
      </div>
    </section>
  );
};

const Pricing = () => {
  const [annual, setAnnual] = useState(false);

  return (
    <section id="pricing" className="py-24 bg-gradient-to-b from-[#1a0f1d] to-[#0A1128] relative">
      <div className="container mx-auto px-6 relative z-10">
        <div className="text-center mb-12">
          <h2 className="text-4xl font-serif text-[#F7F4EA] mb-4">Choose Your Rhythm</h2>
          <div className="flex items-center justify-center gap-4">
            <span className={`text-sm ${!annual ? 'text-[#F7F4EA]' : 'text-gray-500'}`}>Monthly</span>
            <button 
              onClick={() => setAnnual(!annual)}
              className="w-14 h-8 bg-[#FF6B35] rounded-full p-1 transition-all interactive"
            >
              <div className={`w-6 h-6 bg-white rounded-full shadow-md transform transition-transform ${annual ? 'translate-x-6' : 'translate-x-0'}`} />
            </button>
            <span className={`text-sm ${annual ? 'text-[#F7F4EA]' : 'text-gray-500'}`}>Yearly <span className="text-[#E8B4B8] text-xs">(Save 20%)</span></span>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto items-center">
          {/* Free Tier */}
          <FadeInSection delay={100}>
            <div className="bg-[#0A1128]/80 border border-white/10 p-8 rounded-2xl text-center hover:border-white/20 transition-all">
              <h3 className="text-[#E8B4B8] font-serif text-2xl mb-2">The Romantic</h3>
              <p className="text-4xl font-bold text-[#F7F4EA] mb-6">$0</p>
              <ul className="text-gray-400 space-y-4 text-sm mb-8 text-left mx-auto max-w-[200px]">
                <li className="flex gap-2"><Check className="w-4 h-4 text-[#FF6B35]"/> 1 match per day</li>
                <li className="flex gap-2"><Check className="w-4 h-4 text-[#FF6B35]"/> Text reactions</li>
                <li className="flex gap-2"><Check className="w-4 h-4 text-[#FF6B35]"/> 3 active chats</li>
              </ul>
              <button className="w-full py-3 border border-[#F7F4EA]/30 rounded-full text-[#F7F4EA] hover:bg-[#F7F4EA]/10 interactive">Start Free</button>
            </div>
          </FadeInSection>

          {/* Premium Tier */}
          <FadeInSection delay={200} className="md:-mt-8">
            <div className="bg-gradient-to-b from-[#4A1942] to-[#0A1128] border border-[#FF6B35]/50 p-8 rounded-2xl text-center relative shadow-[0_0_40px_rgba(74,25,66,0.6)] transform hover:scale-105 transition-all duration-300">
              <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[#FF6B35] text-white text-xs font-bold px-4 py-1 rounded-full uppercase tracking-wider">Most Popular</div>
              <h3 className="text-[#F7F4EA] font-serif text-2xl mb-2">The Enthusiast</h3>
              <p className="text-5xl font-bold text-[#F7F4EA] mb-6">${annual ? '3.99' : '4.99'}<span className="text-lg font-normal text-gray-400">/mo</span></p>
              <ul className="text-gray-300 space-y-4 text-sm mb-8 text-left mx-auto max-w-[220px]">
                <li className="flex gap-2"><Check className="w-4 h-4 text-[#FF6B35]"/> Unlimited matches</li>
                <li className="flex gap-2"><Check className="w-4 h-4 text-[#FF6B35]"/> Voice reactions</li>
                <li className="flex gap-2"><Check className="w-4 h-4 text-[#FF6B35]"/> Smart matching</li>
                <li className="flex gap-2"><Check className="w-4 h-4 text-[#FF6B35]"/> Ad-free experience</li>
              </ul>
              <button className="w-full py-4 bg-[#FF6B35] rounded-full text-white font-bold hover:shadow-[0_0_20px_rgba(255,107,53,0.5)] interactive">Start 7-Day Trial</button>
            </div>
          </FadeInSection>

           {/* Premium+ Tier */}
           <FadeInSection delay={300}>
            <div className="bg-[#0A1128]/80 border border-white/10 p-8 rounded-2xl text-center hover:border-white/20 transition-all">
              <h3 className="text-[#E8B4B8] font-serif text-2xl mb-2">The Curator</h3>
              <p className="text-4xl font-bold text-[#F7F4EA] mb-6">${annual ? '7.99' : '9.99'}</p>
              <ul className="text-gray-400 space-y-4 text-sm mb-8 text-left mx-auto max-w-[200px]">
                <li className="flex gap-2"><Check className="w-4 h-4 text-[#FF6B35]"/> All Premium features</li>
                <li className="flex gap-2"><Check className="w-4 h-4 text-[#FF6B35]"/> Group exchanges</li>
                <li className="flex gap-2"><Check className="w-4 h-4 text-[#FF6B35]"/> Priority support</li>
              </ul>
              <button className="w-full py-3 border border-[#F7F4EA]/30 rounded-full text-[#F7F4EA] hover:bg-[#F7F4EA]/10 interactive">Start Trial</button>
            </div>
          </FadeInSection>
        </div>
      </div>
    </section>
  );
};

const TrustTicker = () => {
  return (
    <div className="bg-[#0A1128] border-y border-white/5 py-4 overflow-hidden flex">
      <div className="animate-marquee whitespace-nowrap flex gap-12 text-gray-500 text-sm font-medium">
        <span>🔒 GDPR Compliant</span>
        <span>✅ WCAG AA Accessible</span>
        <span>💳 Secure Payments via Stripe</span>
        <span>🌍 Available in 120+ Countries</span>
        <span>🎵 Spotify & Apple Music Compatible</span>
        {/* Duplicate for infinite loop */}
        <span>🔒 GDPR Compliant</span>
        <span>✅ WCAG AA Accessible</span>
        <span>💳 Secure Payments via Stripe</span>
        <span>🌍 Available in 120+ Countries</span>
        <span>🎵 Spotify & Apple Music Compatible</span>
      </div>
    </div>
  );
};

const FinalCTA = () => {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if(email) {
      setSubmitted(true);
      setTimeout(() => setSubmitted(false), 3000);
    }
  };

  return (
    <section className="py-32 relative bg-gradient-to-t from-[#4A1942] to-[#0A1128] flex items-center justify-center overflow-hidden">
      {/* Background Particles */}
      <div className="absolute w-full h-full inset-0 opacity-20 pointer-events-none">
        {[...Array(20)].map((_,i) => (
           <div key={i} className="absolute bg-[#E8B4B8] rounded-full w-2 h-2 animate-pulse" 
                style={{
                  top: Math.random()*100 + '%',
                  left: Math.random()*100 + '%',
                  animationDelay: Math.random()*2 + 's'
                }} 
           />
        ))}
      </div>

      <div className="relative z-10 text-center px-6">
        <FadeInSection>
          <h2 className="text-5xl md:text-7xl font-serif text-[#F7F4EA] mb-6">
            Ready to fall in love<br/><span className="italic text-[#FF6B35]">with music again?</span>
          </h2>
          <p className="text-xl text-[#F7F4EA]/80 mb-10 font-light">Join 10,000+ early adopters trading songs and stories.</p>
          
          <form onSubmit={handleSubmit} className="flex flex-col md:flex-row gap-4 justify-center max-w-lg mx-auto">
            <input 
              type="email" 
              placeholder="Enter your email..." 
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="px-6 py-4 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white placeholder-white/50 focus:outline-none focus:border-[#FF6B35] flex-grow transition-all interactive"
            />
            <button 
              type="submit"
              className={`px-8 py-4 rounded-full font-bold transition-all shadow-lg interactive flex items-center justify-center gap-2
                ${submitted ? 'bg-green-500 text-white' : 'bg-[#FF6B35] text-white hover:bg-[#e55a2b]'}`}
            >
              {submitted ? (
                <>Joined! <Check className="w-5 h-5"/></>
              ) : (
                <>Join Waitlist <ChevronRight className="w-5 h-5"/></>
              )}
            </button>
          </form>
          <p className="mt-6 text-sm text-[#E8B4B8] opacity-80">🎁 First 1,000 signups get Premium free for 3 months</p>
        </FadeInSection>
      </div>
    </section>
  );
};

const Footer = () => {
  return (
    <footer className="bg-[#4A1942] text-[#F7F4EA]/60 py-16 border-t border-white/5">
      <div className="container mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12">
        <div>
          <h4 className="text-2xl font-serif text-[#F7F4EA] mb-4">Reciprocal.</h4>
          <p className="text-sm">Made with 💝 for music lovers who believe in human connection.</p>
        </div>
        <div>
          <h5 className="text-[#F7F4EA] font-bold mb-4 uppercase tracking-widest text-xs">Product</h5>
          <ul className="space-y-2 text-sm">
            <li className="hover:text-[#FF6B35] cursor-pointer interactive">How it Works</li>
            <li className="hover:text-[#FF6B35] cursor-pointer interactive">Pricing</li>
            <li className="hover:text-[#FF6B35] cursor-pointer interactive">FAQ</li>
          </ul>
        </div>
        <div>
          <h5 className="text-[#F7F4EA] font-bold mb-4 uppercase tracking-widest text-xs">Legal</h5>
          <ul className="space-y-2 text-sm">
            <li className="hover:text-[#FF6B35] cursor-pointer interactive">Privacy</li>
            <li className="hover:text-[#FF6B35] cursor-pointer interactive">Terms</li>
          </ul>
        </div>
        <div>
          <h5 className="text-[#F7F4EA] font-bold mb-4 uppercase tracking-widest text-xs">Newsletter</h5>
          <div className="flex border-b border-white/20 pb-2">
            <input type="text" placeholder="Monthly music stories" className="bg-transparent focus:outline-none text-[#F7F4EA] w-full text-sm"/>
            <button className="text-[#FF6B35] text-sm uppercase font-bold interactive">Sub</button>
          </div>
        </div>
      </div>
      <div className="text-center mt-16 text-xs opacity-40">
        &copy; 2024 Reciprocal. Music brings us together.
      </div>
    </footer>
  );
};

// --- Main App ---

export default function App() {
  return (
    <div className="bg-[#0A1128] min-h-screen text-[#F7F4EA] font-sans selection:bg-[#FF6B35] selection:text-white overflow-x-hidden">
      <CustomCursor />
      <Navbar />
      <Hero />
      <HowItWorks />
      <WhyReciprocal />
      <Testimonials />
      <Features />
      <Pricing />
      <TrustTicker />
      <FinalCTA />
      <Footer />
      
      {/* Global Styles for Animations */}
      <style jsx global>{`
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;600&display=swap');
        
        :root {
          --font-serif: 'Playfair Display', serif;
          --font-sans: 'Inter', sans-serif;
        }
        
        body {
          font-family: var(--font-sans);
          cursor: none; /* Hide default cursor */
        }

        h1, h2, h3, h4, .font-serif {
          font-family: var(--font-serif);
        }

        /* Re-enable default cursor for mobile/touch */
        @media (pointer: coarse) {
          body { cursor: auto; }
          .fixed.pointer-events-none { display: none; }
        }

        .animate-marquee {
          animation: marquee 25s linear infinite;
        }

        @keyframes marquee {
          0% { transform: translateX(0%); }
          100% { transform: translateX(-50%); }
        }

        .rotate-y-12 { transform: rotateY(12deg) rotateZ(-2deg); }
      `}</style>
    </div>
  );
}