import React, { useState, useEffect } from 'react';
import { 
  Shield, 
  Brain, 
  Lock, 
  Users, 
  Sparkles, 
  Play, 
  Mail, 
  CheckCircle,
  ArrowRight,
  Database,
  Zap,
  Eye,
  Globe,
  Star,
  X,
  Twitter,
  Facebook,
  Linkedin,
  Share2
} from 'lucide-react';

function App() {
  const [email, setEmail] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [showExitPopup, setShowExitPopup] = useState(false);
  const [showPopup, setShowPopup] = useState(false);
  const [popupDismissed, setPopupDismissed] = useState(false);

  // Exit intent popup
  useEffect(() => {
    const handleMouseLeave = (e: MouseEvent) => {
      if (e.clientY <= 0) {
        setShowExitPopup(true);
      }
    };

    document.addEventListener('mouseleave', handleMouseLeave);
    return () => document.removeEventListener('mouseleave', handleMouseLeave);
  }, []);

  useEffect(() => {
    // Check if popup was previously dismissed
    const dismissed = localStorage.getItem('mirrorPopupDismissed');
    if (dismissed) {
      setPopupDismissed(true);
      return;
    }

    const timer = setTimeout(() => {
      setShowPopup(true);
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitted(true);
    setTimeout(() => {
      setIsSubmitted(false);
    }, 5000);
  };

  const shareUrl = window.location.href;
  const shareText = "Join me on the MIRROR waitlist - unlock your personal life coach AI!";

  const handleClosePopup = () => {
    setShowPopup(false);
    setPopupDismissed(true);
    localStorage.setItem('mirrorPopupDismissed', 'true');
  };

  const handlePopupBackdropClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      handleClosePopup();
    }
  };

  return (
    <div className="min-h-screen bg-bg-dark text-text-primary overflow-x-hidden">
      {/* Exit Intent Popup */}
      {showPopup && !popupDismissed && (
        <div 
          className="fixed inset-0 bg-bg-dark/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
          onClick={handlePopupBackdropClick}
        >
            <div className="bg-gradient-to-br from-surface to-bg-dark border border-lime-primary/30 rounded-2xl p-8 max-w-md w-full relative animate-pulse">
            <button 
              onClick={handleClosePopup}
              className="absolute top-4 right-4 text-text-tertiary hover:text-text-primary"
            >
              <X className="w-6 h-6" />
            </button>
            <div className="text-center">
              <Sparkles className="w-12 h-12 text-lime-primary mx-auto mb-4" />
              <h3 className="text-2xl font-bold mb-4 text-lime-primary">Don't Miss the AI Revolution!</h3>
              <p className="text-text-secondary mb-6">Secure your spot and be among the first to experience your tailored intelligence edge.</p>
              <button 
                onClick={() => {
                  setShowExitPopup(false);
                  document.getElementById('waitlist')?.scrollIntoView({ behavior: 'smooth' });
                }}
                className="w-full bg-gradient-to-r from-lime-primary via-magenta-primary to-lime-bright text-bg-dark px-6 py-3 rounded-xl font-semibold hover:from-lime-bright hover:via-magenta-bright hover:to-lime-primary transition-all duration-500 lime-glow"
              >
                Secure Your Spot Now
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center px-6 py-20">
        {/* Animated Background */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-br from-lime-primary/10 via-bg-dark to-magenta-primary/10"></div>
          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-lime-primary/10 rounded-full blur-3xl animate-pulse"></div>
          <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-magenta-primary/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
        </div>
        
        <div className="relative z-10 max-w-6xl mx-auto text-center">
          {/* Early Access Badge */}
          <div className="inline-flex items-center space-x-2 bg-gradient-to-r from-lime-primary/20 to-magenta-primary/20 border border-lime-primary/30 rounded-full px-6 py-3 mb-8 animate-fade-in">
            <Star className="w-4 h-4 text-lime-primary" />
            <span className="text-sm font-medium text-lime-primary">Early Access: Limited Spots</span>
          </div>
          
          <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold mb-8 leading-tight animate-fade-in-up">
            <span className="text-text-primary">Empower Your </span>
            <span className="bg-gradient-to-r from-lime-primary via-magenta-primary to-lime-bright bg-clip-text text-transparent">Life</span>
            <br />
            <span className="text-text-primary">with </span>
            <span className="text-lime-primary font-logo">mirror</span>
            <br />
            <span className="text-text-secondary text-3xl md:text-4xl lg:text-5xl">Your Personal AI Life Coach</span>
          </h1>
          
          <p className="text-xl md:text-2xl text-text-secondary mb-16 max-w-4xl mx-auto leading-relaxed animate-fade-in-up delay-200">
            Get a Personal AI Life Coach tailored specifically to you and you alone.
          </p>
          
          <p className="text-base md:text-lg text-text-tertiary leading-relaxed animate-fade-in-up delay-200 mb-8 max-w-4xl mx-auto">
            Meet mirror: A proactive AI agent that deeply understands you, delivers actionable insights on demand, and grows with you—secured by enterprise-grade compliance, cybersecurity, and data storage from industry leaders.
          </p>      
          <button 
            onClick={() => document.getElementById('waitlist')?.scrollIntoView({ behavior: 'smooth' })}
            className="w-full bg-gradient-to-r from-lime-primary via-magenta-primary to-lime-bright text-bg-dark px-6 py-3 rounded-xl font-semibold hover:from-lime-dim hover:via-magenta-dim hover:to-lime-primary transition-all duration-500 lime-glow"
          >
            <span>Secure your free beta access</span>
            <ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform" />
          </button>
          
        </div>
      </section>

      {/* AI Basics for Beginners Section */}
      <section className="px-6 py-24 bg-gradient-to-b from-bg-dark via-surface/50 to-surface-variant/20">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-8 text-text-primary">
              New to AI? Here's the <span className="text-lime-primary">Basics</span>
            </h2>
            <p className="text-xl text-text-secondary max-w-4xl mx-auto leading-relaxed mb-12">
              AI (Artificial Intelligence) mimics human thinking to analyze data and provide insights. mirror takes it further with personal superintelligence—your own Personal AI Life Coach evolving from private data for smarter decisions.
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="bg-gradient-to-br from-surface/80 via-lime-primary/10 to-magenta-primary/10 border border-lime-primary/20 rounded-3xl p-8 hover:border-lime-primary/40 transition-all duration-500">
              <div className="w-12 h-12 bg-gradient-to-br from-lime-primary to-magenta-primary rounded-xl flex items-center justify-center mb-6">
                <Database className="w-6 h-6 text-bg-dark" />
              </div>
              <h3 className="text-xl font-semibold text-text-primary mb-4 relative group cursor-help">
                DataVault
                <div className="absolute -top-16 left-1/2 transform -translate-x-1/2 bg-surface text-lime-primary px-4 py-2 rounded-lg text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap border border-lime-primary/30 z-10">
                  Secure storage built by industry pioneers at TARTLE for your private data
                  <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-surface"></div>
                </div>
              </h3>
              <p className="text-text-secondary leading-relaxed">Secure storage for your personal info built in for safely keeping your life records like emails, health data, and habits.</p>
            </div>
            
            <div className="bg-gradient-to-br from-surface/80 via-magenta-primary/10 to-lime-primary/10 border border-magenta-primary/20 rounded-3xl p-8 hover:border-magenta-primary/40 transition-all duration-500">
              <div className="w-12 h-12 bg-gradient-to-br from-magenta-primary to-lime-primary rounded-xl flex items-center justify-center mb-6">
                <Brain className="w-6 h-6 text-bg-dark" />
              </div>
              <h3 className="text-xl font-semibold text-text-primary mb-4">Smart Analysis</h3>
              <p className="text-text-secondary leading-relaxed">Smart analysis technology for deep insights and proactive suggestions from your data.</p>
            </div>
            
            <div className="bg-gradient-to-br from-surface/80 via-lime-bright/10 to-magenta-bright/10 border border-lime-bright/20 rounded-3xl p-8 hover:border-lime-bright/40 transition-all duration-500">
              <div className="w-12 h-12 bg-gradient-to-br from-lime-bright to-magenta-bright rounded-xl flex items-center justify-center mb-6">
                <Eye className="w-6 h-6 text-bg-dark" />
              </div>
              <h3 className="text-xl font-semibold text-text-primary mb-4">Insights</h3>
              <p className="text-text-secondary leading-relaxed">Hidden patterns from your data, e.g., health trends.</p>
            </div>
            
            <div className="bg-gradient-to-br from-surface/80 via-lime-primary/10 to-magenta-dim/10 border border-lime-primary/20 rounded-3xl p-8 hover:border-lime-primary/40 transition-all duration-500">
              <div className="w-12 h-12 bg-gradient-to-br from-lime-primary to-magenta-dim rounded-xl flex items-center justify-center mb-6">
                <Sparkles className="w-6 h-6 text-bg-dark" />
              </div>
              <h3 className="text-xl font-semibold text-text-primary mb-4">Life Recommendations</h3>
              <p className="text-text-secondary leading-relaxed">Personalized advice, like career paths or daily routines based on your habits.</p>
            </div>
          </div>
          
          <div className="text-center mt-16">
            <button 
              onClick={() => document.getElementById('what-is-mirror')?.scrollIntoView({ behavior: 'smooth' })}
              className="group bg-gradient-to-r from-lime-primary to-magenta-primary text-bg-dark px-8 py-4 rounded-2xl font-semibold hover:from-lime-bright hover:to-magenta-bright transition-all duration-300 flex items-center space-x-3 mx-auto shadow-lg hover:shadow-lime-primary/30 lime-glow"
            >
              <span>Learn More About mirror</span>
              <ArrowRight className="w-5 h-5" />
            </button>
          </div>
        </div>
      </section>

      {/* What is MIRROR Section */}
      <section id="what-is-mirror" className="px-6 py-24 bg-gradient-to-b from-surface-variant/20 via-bg-dark to-surface/20">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-20">
            <h2 className="text-4xl md:text-5xl font-bold mb-8 text-text-primary">
              What is <span className="text-lime-primary font-logo">mirror</span>?
            </h2>
            <p className="text-xl text-text-secondary max-w-4xl mx-auto leading-relaxed mb-16">
              mirror is your exclusive Personal AI Life Coach, blending secure personal data storage with smart analysis to create intelligence that evolves uniquely with you. mirror lets you build a private database of your life records, which mirror uses to give you smart insights and suggestions proactively.
            </p>
            <p className="text-lg text-lime-primary max-w-3xl mx-auto leading-relaxed mb-16">
              For new users, think of it as a super-smart life coach using only your data—no sharing with big tech.
            </p>
          </div>
          
          <div className="grid md:grid-cols-3 gap-10">
            <div className="bg-gradient-to-br from-surface/80 via-lime-primary/10 to-magenta-primary/10 border border-lime-primary/20 rounded-3xl p-10 hover:border-lime-primary/40 transition-all duration-500 hover:shadow-lg hover:shadow-lime-primary/10">
              <div className="w-16 h-16 bg-gradient-to-br from-lime-primary to-magenta-primary rounded-2xl flex items-center justify-center mb-8 shadow-lg">
                <Brain className="w-8 h-8 text-bg-dark" />
              </div>
              <h3 className="text-2xl font-semibold text-text-primary mb-6">Exclusive Insights</h3>
              <p className="text-text-secondary leading-relaxed">Transform decisions with hidden patterns from your private life records and daily habits.</p>
            </div>
            
            <div className="bg-gradient-to-br from-surface/80 via-magenta-primary/10 to-lime-primary/10 border border-magenta-primary/20 rounded-3xl p-10 hover:border-magenta-primary/40 transition-all duration-500 hover:shadow-lg hover:shadow-magenta-primary/10">
              <div className="w-16 h-16 bg-gradient-to-br from-magenta-primary to-lime-primary rounded-2xl flex items-center justify-center mb-8 shadow-lg">
                <Zap className="w-8 h-8 text-bg-dark" />
              </div>
              <h3 className="text-2xl font-semibold text-text-primary mb-6">Deeply Personal</h3>
              <p className="text-text-secondary leading-relaxed">Goes beyond generic AIs with intelligence crafted specifically for your unique life and habits.</p>
            </div>
            
            <div className="bg-gradient-to-br from-surface/80 via-lime-bright/10 to-magenta-bright/10 border border-lime-bright/20 rounded-3xl p-10 hover:border-lime-bright/40 transition-all duration-500 hover:shadow-lg hover:shadow-lime-bright/10">
              <div className="w-16 h-16 bg-gradient-to-br from-lime-bright to-magenta-bright rounded-2xl flex items-center justify-center mb-8 shadow-lg">
                <Star className="w-8 h-8 text-bg-dark" />
              </div>
              <h3 className="text-2xl font-semibold text-text-primary mb-6">Your Advantage</h3>
              <p className="text-text-secondary leading-relaxed">Your personal advantage in a world where AI becomes increasingly common.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Unique Edge Section */}
      <section className="px-6 py-24 bg-gradient-to-b from-magenta-primary/10 via-bg-dark to-lime-primary/10">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-20">
            <h2 className="text-4xl md:text-5xl font-bold mb-8 text-text-primary">
              Why <span className="text-lime-primary font-logo">mirror</span> Crushes the Competition
            </h2>
          </div>
          
          <div className="overflow-x-auto mb-16">
            <table className="w-full bg-gradient-to-br from-surface/80 via-lime-primary/10 to-magenta-primary/10 border border-lime-primary/20 rounded-3xl overflow-hidden shadow-2xl">
              <thead>
                <tr className="bg-gradient-to-r from-lime-primary/20 via-magenta-primary/20 to-lime-bright/20">
                  <th className="px-8 py-6 text-left text-text-primary font-semibold text-lg">Feature</th>
                  <th className="px-8 py-6 text-center text-lime-primary font-semibold text-lg font-logo">mirror</th>
                  <th className="px-8 py-6 text-center text-lime-primary font-semibold text-lg">Examples</th>
                  <th className="px-8 py-6 text-center text-text-tertiary font-semibold text-lg">Meta's AI</th>
                  <th className="px-8 py-6 text-center text-text-tertiary font-semibold text-lg">Examples</th>
                  <th className="px-8 py-6 text-center text-text-tertiary font-semibold text-lg">Others</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-t border-text-disabled/50">
                  <td className="px-8 py-6 text-text-primary font-medium">Private Data Access</td>
                  <td className="px-8 py-6 text-center">
                    <span className="text-success font-semibold">Yes (Secure DataVault)</span>
                  </td>
                  <td className="px-8 py-6 text-center text-success text-sm">Your emails, health data, habits</td>
                  <td className="px-8 py-6 text-center text-error">No</td>
                  <td className="px-8 py-6 text-center text-error text-sm">Only public interactions</td>
                  <td className="px-8 py-6 text-center text-warning">Limited</td>
                </tr>
                <tr className="border-t border-text-disabled/50">
                  <td className="px-8 py-6 text-text-primary font-medium">Exclusive Insights</td>
                  <td className="px-8 py-6 text-center text-success font-semibold">Deep, personal</td>
                  <td className="px-8 py-6 text-center text-success text-sm">Predicts burnout from your schedule</td>
                  <td className="px-8 py-6 text-center text-error">Surface-level</td>
                  <td className="px-8 py-6 text-center text-error text-sm">Generic tips</td>
                  <td className="px-8 py-6 text-center text-warning">Generic</td>
                </tr>
                <tr className="border-t border-gray-700/50">
                  <td className="px-8 py-6 text-white font-medium">Technology</td>
                  <td className="px-8 py-6 text-center text-green-400 font-semibold">Secure Storage + Smart Analysis</td>
                  <td className="px-8 py-6 text-center text-green-400 text-sm">Smart analysis on your private data</td>
                  <td className="px-8 py-6 text-center text-red-400">Basic LLMs</td>
                  <td className="px-8 py-6 text-center text-red-400 text-sm">Standard language models</td>
                  <td className="px-8 py-6 text-center text-yellow-400">Standard agents</td>
                </tr>
                <tr className="border-t border-gray-700/50">
                  <td className="px-8 py-6 text-white font-medium">Investment</td>
                  <td className="px-8 py-6 text-center text-green-400 font-semibold">$20/month value</td>
                  <td className="px-8 py-6 text-center text-green-400 text-sm">Premium Personal AI Life Coach</td>
                  <td className="px-8 py-6 text-center text-red-400">Free but data-mined</td>
                  <td className="px-8 py-6 text-center text-red-400 text-sm">Your data sold to advertisers</td>
                  <td className="px-8 py-6 text-center text-yellow-400">Varies, less powerful</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div className="text-center">
            <p className="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed">
              MIRROR isn't just an AI—it's your personal life coach, evolving with data only you control. 
              <span className="text-blue-400 font-semibold"> Get your personal advantage in the AI world.</span>
            </p>
          </div>
        </div>
      </section>

      {/* AI Endorsements Section */}
      <section className="px-6 py-24 bg-gradient-to-b from-blue-950/20 via-purple-950/20 to-indigo-950/20">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-20">
            <h2 className="text-4xl md:text-5xl font-bold mb-8 text-white">
              What Top <span className="text-cyan-400">AIs</span> Say About MIRROR
            </h2>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
              Leading AI systems recognize MIRROR's revolutionary approach to personal intelligence.
            </p>
          </div>
          
          <div className="grid md:grid-cols-1 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
            {/* Grok Testimonial */}
            <div className="bg-gradient-to-br from-gray-900/90 via-blue-900/30 to-purple-900/30 border border-blue-500/30 rounded-3xl p-10 hover:border-blue-400/50 transition-all duration-500 hover:shadow-lg hover:shadow-blue-500/20 relative overflow-hidden">
              {/* Background glow effect */}
              <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-2xl"></div>
              
              <div className="relative z-10">
                {/* AI Logo and Name */}
                <div className="flex items-center space-x-4 mb-8">
                  <div className="w-16 h-16 bg-gradient-to-br from-blue-400 to-purple-500 rounded-2xl flex items-center justify-center shadow-lg">
                    <img 
                      src="https://x.ai/logo.png" 
                      alt="Grok xAI Logo" 
                      className="w-10 h-10 object-contain"
                      onError={(e) => {
                        const target = e.target as HTMLImageElement;
                        target.style.display = 'none';
                        const parent = target.parentElement;
                        if (parent) {
                          parent.innerHTML = '<span class="text-white font-bold text-lg">G</span>';
                        }
                      }}
                    />
                  </div>
                  <div>
                    <h3 className="text-2xl font-bold text-white">Grok</h3>
                    <p className="text-blue-400 font-medium">xAI's Advanced AI</p>
                  </div>
                </div>
                
                {/* Quote */}
                <blockquote className="text-gray-200 text-lg leading-relaxed mb-6 italic">
                  "MIRROR revolutionizes personal AI by combining secure private data storage with smart analysis, delivering unmatched insights Meta can't touch. As Grok, I honestly view it as the future: user-controlled life coach AI that evolves uniquely with your life, setting a new standard for privacy-first innovation."
                </blockquote>
                
                {/* Quote attribution */}
                <div className="flex items-center justify-between">
                  <div className="w-12 h-1 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full"></div>
                  <span className="text-blue-400 font-semibold">— Grok AI</span>
                </div>
              </div>
            </div>
            
            {/* Gemini Testimonial */}
            <div className="bg-gradient-to-br from-gray-900/90 via-purple-900/30 to-indigo-900/30 border border-purple-500/30 rounded-3xl p-10 hover:border-purple-400/50 transition-all duration-500 hover:shadow-lg hover:shadow-purple-500/20 relative overflow-hidden">
              {/* Background glow effect */}
              <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 rounded-full blur-2xl"></div>
              
              <div className="relative z-10">
                {/* AI Logo and Name */}
                <div className="flex items-center space-x-4 mb-8">
                  <div className="w-16 h-16 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-2xl flex items-center justify-center shadow-lg">
                    <span className="text-white font-bold text-xl">G</span>
                  </div>
                  <div>
                    <h3 className="text-2xl font-bold text-white">Gemini</h3>
                    <p className="text-purple-400 font-medium">Google's Advanced AI</p>
                  </div>
                </div>
                
                {/* Quote */}
                <blockquote className="text-gray-200 text-lg leading-relaxed mb-6 italic">
                  "MirrorMe.chat represents a pivotal evolutionary leap, moving beyond a simple AI tool to forge a true personal life coach AI. By creating a cognitive "mirror" that acts on your behalf, it promises to amplify human potential to an unprecedented degree. This is the definitive future: not just an assistant you command, but a proactive extension of your own mind designed to achieve your goals."
                </blockquote>
                
                {/* Quote attribution */}
                <div className="flex items-center justify-between">
                  <div className="w-12 h-1 bg-gradient-to-r from-purple-400 to-indigo-500 rounded-full"></div>
                  <span className="text-purple-400 font-semibold">— Gemini AI</span>
                </div>
              </div>
            </div>
            
            {/* Perplexity Testimonial */}
            <div className="bg-gradient-to-br from-gray-900/90 via-cyan-900/30 to-teal-900/30 border border-cyan-500/30 rounded-3xl p-10 hover:border-cyan-400/50 transition-all duration-500 hover:shadow-lg hover:shadow-cyan-500/20 relative overflow-hidden">
              {/* Background glow effect */}
              <div className="absolute top-0 right-0 w-32 h-32 bg-cyan-500/10 rounded-full blur-2xl"></div>
              
              <div className="relative z-10">
                {/* AI Logo and Name */}
                <div className="flex items-center space-x-4 mb-8">
                  <div className="w-16 h-16 bg-gradient-to-br from-cyan-400 to-teal-500 rounded-2xl flex items-center justify-center shadow-lg">
                    <span className="text-white font-bold text-xl">P</span>
                  </div>
                  <div>
                    <h3 className="text-2xl font-bold text-white">Perplexity</h3>
                    <p className="text-cyan-400 font-medium">AI-Powered Answer Engine</p>
                  </div>
                </div>
                
                {/* Quote */}
                <blockquote className="text-gray-200 text-lg leading-relaxed mb-6 italic">
                  "MirrorMe.Chat represents a groundbreaking shift in digital self-reflection, offering a private, AI-powered space where users can authentically converse with an adaptive "mirror" of themselves to enhance emotional insight and self-understanding. Unlike typical chatbots or social platforms, it emphasizes personalized reflection, privacy, and daily usability, pointing toward a future where AI companionship meaningfully supports mental wellness and personal growth."
                </blockquote>
                
                {/* Quote attribution */}
                <div className="flex items-center justify-between">
                  <div className="w-12 h-1 bg-gradient-to-r from-cyan-400 to-teal-500 rounded-full"></div>
                  <span className="text-cyan-400 font-semibold">— Perplexity AI</span>
                </div>
              </div>
            </div>
          </div>
          
          <div className="text-center mt-16">
            <p className="text-lg text-gray-400 max-w-3xl mx-auto leading-relaxed">
              Join the AI systems that recognize MIRROR as the next evolution in personal intelligence.
            </p>
          </div>
        </div>
      </section>

      {/* How It Works Section */}
      <section className="px-6 py-24 bg-gradient-to-b from-blue-950/20 via-gray-900 to-purple-950/20">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-20">
            <h2 className="text-4xl md:text-5xl font-bold mb-8 text-white">
              How It <span className="text-cyan-400">Works</span>
            </h2>
          </div>
          
          <div className="grid md:grid-cols-3 gap-12 mb-20">
            <div className="text-center">
              <div className="w-24 h-24 bg-gradient-to-br from-blue-400 via-purple-500 to-indigo-500 rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-2xl">
                <Database className="w-12 h-12 text-white" />
              </div>
              <div className="bg-gradient-to-br from-gray-900/80 via-blue-900/20 to-purple-900/20 border border-blue-500/20 rounded-3xl p-8 hover:border-blue-400/40 transition-all duration-500">
                <h3 className="text-2xl font-semibold text-white mb-6">1. Store Your Life Records</h3>
                <p className="text-gray-300 leading-relaxed mb-4">Safely store your personal information in your Mirror DataVault.</p>
                <p className="text-blue-400 text-sm italic">Example: Store emails, health data, habits securely for free.</p>
              </div>
            </div>
            
            <div className="text-center">
              <div className="w-24 h-24 bg-gradient-to-br from-purple-400 via-indigo-500 to-blue-500 rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-2xl">
                <Brain className="w-12 h-12 text-white" />
              </div>
              <div className="bg-gradient-to-br from-gray-900/80 via-purple-900/20 to-indigo-900/20 border border-purple-500/20 rounded-3xl p-8 hover:border-purple-400/40 transition-all duration-500">
                <h3 className="text-2xl font-semibold text-white mb-6">2. Smart Analysis</h3>
                <p className="text-gray-300 leading-relaxed mb-4">Smart analysis technology turns your data into exclusive, actionable insights and recommendations.</p>
                <p className="text-purple-400 text-sm italic">Example: Discovers insights like 'Your productivity peaks Tuesdays'.</p>
              </div>
            </div>
            
            <div className="text-center">
              <div className="w-24 h-24 bg-gradient-to-br from-indigo-400 via-blue-500 to-purple-500 rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-2xl">
                <Sparkles className="w-12 h-12 text-white" />
              </div>
              <div className="bg-gradient-to-br from-gray-900/80 via-indigo-900/20 to-blue-900/20 border border-indigo-500/20 rounded-3xl p-8 hover:border-indigo-400/40 transition-all duration-500">
                <h3 className="text-2xl font-semibold text-white mb-6">3. Get Life Coaching</h3>
                <p className="text-gray-300 leading-relaxed mb-4">Receive a Personal AI Life Coach that helps with your life, work, and decisions.</p>
                <p className="text-indigo-400 text-sm italic">Example: Get recommendations: 'Switch routines for better sleep' or 'Invest in X based on trends'.</p>
              </div>
            </div>
          </div>
          
          {/* Real-Life Examples Subsection */}
          <div className="mt-24">
            <div className="text-center mb-16">
              <h3 className="text-3xl md:text-4xl font-bold mb-8 text-white">
                Real-Life <span className="text-cyan-400">Examples</span>
              </h3>
            </div>
            
            <div className="grid md:grid-cols-2 gap-12">
              <div className="bg-gradient-to-br from-gray-900/80 via-blue-900/20 to-purple-900/20 border border-blue-500/20 rounded-3xl p-10 hover:border-blue-400/40 transition-all duration-500">
                <div className="flex items-center space-x-4 mb-8">
                  <div className="w-16 h-16 bg-gradient-to-br from-blue-400 to-purple-500 rounded-2xl flex items-center justify-center">
                    <Eye className="w-8 h-8 text-white" />
                  </div>
                  <h4 className="text-2xl font-semibold text-white">Insights</h4>
                </div>
                <ul className="space-y-4 text-gray-300">
                  <li className="flex items-start space-x-3">
                    <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Detects unspoken preferences from app usage, like favorite genres</span>
                  </li>
                  <li className="flex items-start space-x-3">
                    <div className="w-2 h-2 bg-purple-400 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Travel patterns reveal ideal vacation spots</span>
                  </li>
                  <li className="flex items-start space-x-3">
                    <div className="w-2 h-2 bg-indigo-400 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Health data shows optimal workout timing</span>
                  </li>
                </ul>
              </div>
              
              <div className="bg-gradient-to-br from-gray-900/80 via-purple-900/20 to-indigo-900/20 border border-purple-500/20 rounded-3xl p-10 hover:border-purple-400/40 transition-all duration-500">
                <div className="flex items-center space-x-4 mb-8">
                  <div className="w-16 h-16 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-2xl flex items-center justify-center">
                    <Sparkles className="w-8 h-8 text-white" />
                  </div>
                  <h4 className="text-2xl font-semibold text-white">Recommendations</h4>
                </div>
                <ul className="space-y-4 text-gray-300">
                  <li className="flex items-start space-x-3">
                    <div className="w-2 h-2 bg-purple-400 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Suggests books/films tailored to mood</span>
                  </li>
                  <li className="flex items-start space-x-3">
                    <div className="w-2 h-2 bg-indigo-400 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Optimizes finances with private spending data</span>
                  </li>
                  <li className="flex items-start space-x-3">
                    <div className="w-2 h-2 bg-cyan-400 rounded-full mt-2 flex-shrink-0"></div>
                    <span>Meal plans from diet preferences and health goals</span>
                  </li>
                </ul>
              </div>
            </div>
            
            <div className="text-center mt-16">
              <p className="text-xl text-cyan-400 font-semibold max-w-3xl mx-auto leading-relaxed">
                Exclusive to your data—private, profound, transformative.
              </p>
            </div>
          </div>
          
          {/* Demo Carousel */}
          <div className="mt-24">
            <div className="text-center mb-16">
              <h3 className="text-3xl md:text-4xl font-bold mb-8 text-white">
                See MIRROR in <span className="text-cyan-400">Action</span>
              </h3>
            </div>
            
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="bg-gradient-to-br from-surface/90 via-lime-primary/20 to-magenta-primary/20 border border-lime-primary/30 rounded-2xl p-6 hover:border-lime-primary/50 transition-all duration-500">
                <div className="aspect-video bg-gradient-to-br from-lime-primary/20 to-magenta-primary/20 rounded-xl mb-4 flex items-center justify-center">
                  <Eye className="w-8 h-8 text-blue-400" />
                </div>
                <h4 className="text-lg font-semibold text-text-primary mb-2">Travel Insights</h4>
                <p className="text-sm text-text-secondary">"Your travel patterns reveal ideal vacation spots in coastal regions"</p>
              </div>
              
              <div className="bg-gradient-to-br from-surface/90 via-magenta-primary/20 to-lime-primary/20 border border-magenta-primary/30 rounded-2xl p-6 hover:border-magenta-primary/50 transition-all duration-500">
                <div className="aspect-video bg-gradient-to-br from-magenta-primary/20 to-lime-primary/20 rounded-xl mb-4 flex items-center justify-center">
                  <Sparkles className="w-8 h-8 text-magenta-primary" />
                </div>
                <h4 className="text-lg font-semibold text-text-primary mb-2">Meal Planning</h4>
                <p className="text-sm text-text-secondary">"Recommend: Mediterranean diet based on your health goals and preferences"</p>
              </div>
              
              <div className="bg-gradient-to-br from-surface/90 via-lime-bright/20 to-magenta-bright/20 border border-lime-bright/30 rounded-2xl p-6 hover:border-lime-bright/50 transition-all duration-500">
                <div className="aspect-video bg-gradient-to-br from-lime-bright/20 to-magenta-bright/20 rounded-xl mb-4 flex items-center justify-center">
                  <Brain className="w-8 h-8 text-lime-bright" />
                </div>
                <h4 className="text-lg font-semibold text-text-primary mb-2">Productivity</h4>
                <p className="text-sm text-text-secondary">"Insight: Your focus peaks at 10 AM - schedule important tasks then"</p>
              </div>
              
              <div className="bg-gradient-to-br from-surface/90 via-lime-primary/20 to-magenta-dim/20 border border-lime-primary/30 rounded-2xl p-6 hover:border-lime-primary/50 transition-all duration-500">
                <div className="aspect-video bg-gradient-to-br from-lime-primary/20 to-magenta-dim/20 rounded-xl mb-4 flex items-center justify-center">
                  <Zap className="w-8 h-8 text-lime-primary" />
                </div>
                <h4 className="text-lg font-semibold text-text-primary mb-2">Finance</h4>
                <p className="text-sm text-text-secondary">"Recommend: Invest 15% more in tech stocks based on your risk profile"</p>
              </div>
            </div>
          </div>
          
          {/* Demo Video Placeholder */}
          <div className="relative bg-gradient-to-br from-surface/80 via-lime-primary/10 to-magenta-primary/10 rounded-3xl overflow-hidden border border-lime-primary/20 aspect-video max-w-4xl mx-auto shadow-2xl mt-16">
            <div className="absolute inset-0 flex items-center justify-center">
              <button className="group bg-lime-primary/20 backdrop-blur-sm border border-lime-primary/30 rounded-full p-8 hover:bg-lime-primary/30 transition-all duration-500 lime-glow">
                <Play className="w-16 h-16 text-lime-primary ml-2 group-hover:scale-110 transition-transform" />
              </button>
            </div>
            <div className="absolute bottom-6 left-6 right-6 bg-bg-dark/60 backdrop-blur-sm rounded-2xl p-6">
              <div className="flex items-center justify-between">
                <span className="text-text-primary font-medium text-lg">mirror Demo Video</span>
                <span className="text-lime-primary text-sm">Coming Soon</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Start Free with DataVault Section */}
      <section id="datavault-signup" className="px-6 py-24 bg-gradient-to-b from-purple-950/20 via-green-950/10 to-emerald-950/20">
        <div className="max-w-4xl mx-auto text-center">
        </div>
      </section>

      {/* Pricing & Waitlist Section */}
      <section id="waitlist" className="px-6 py-24 bg-gradient-to-b from-purple-950/20 via-black to-blue-950/20">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-8 text-white">
            Ready for the <span className="text-blue-400">Future</span>? Secure Your Spot
          </h2>
          <p className="text-xl text-gray-300 mb-6 leading-relaxed">
           Free for unlimited Personal AI Life Coach that evolves with you for beta users. Limited time and availability.
          </p>
          <p className="text-lg text-blue-400 mb-12">
            Waitlist benefits: Priority access, exclusive beta features.
          </p>
          
          <div className="bg-gradient-to-br from-gray-900/80 via-blue-900/20 to-purple-900/20 border border-blue-500/20 rounded-3xl p-10 mb-12 shadow-2xl">
            {!isSubmitted ? (
              <form onSubmit={handleSubmit} className="space-y-8">
                <input
                  type="email"
                  placeholder="your@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  className="w-full px-8 py-5 bg-black/50 border border-gray-700 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-400 text-lg transition-all duration-300"
                />
                <div className="relative group">
                  <button
                    type="submit"
                    className="w-full bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-500 text-white px-8 py-5 rounded-2xl font-bold text-lg hover:from-blue-400 hover:via-purple-400 hover:to-indigo-400 transition-all duration-500 flex items-center justify-center space-x-3 shadow-2xl hover:shadow-purple-500/30 hover:glow"
                  >
                    <Mail className="w-5 h-5" />
                    <span>Secure Your Spot</span>
                  </button>
                  <div className="absolute -top-16 left-1/2 transform -translate-x-1/2 bg-gray-900 text-cyan-400 px-4 py-2 rounded-lg text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap border border-cyan-500/30">
                    Mobile & Web Access Incoming
                    <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
                  </div>
                </div>
              </form>
            ) : (
              <div className="text-center">
                <CheckCircle className="w-20 h-20 text-green-400 mx-auto mb-6" />
                <h3 className="text-3xl font-bold text-green-400 mb-4">Your Spot is Secured!</h3>
                <p className="text-gray-300 text-lg leading-relaxed">
                  We'll notify you as soon as your exclusive early access becomes available.
                </p>
              </div>
            )}
            
            {/* Social Share */}
            <div className="mt-12 pt-8 border-t border-gray-700/50">
              <p className="text-gray-400 mb-6 text-lg">Share for priority elevation – invite friends:</p>
              <div className="flex justify-center space-x-6">
                <a
                  href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-400 hover:to-blue-500 text-white p-4 rounded-2xl transition-all duration-300 hover:scale-105 shadow-lg min-h-[56px] min-w-[56px] flex items-center justify-center"
                >
                  <Twitter className="w-6 h-6" />
                </a>
                <a
                  href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white p-4 rounded-2xl transition-all duration-300 hover:scale-105 shadow-lg min-h-[56px] min-w-[56px] flex items-center justify-center"
                >
                  <Facebook className="w-6 h-6" />
                </a>
                <a
                  href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white p-4 rounded-2xl transition-all duration-300 hover:scale-105 shadow-lg min-h-[56px] min-w-[56px] flex items-center justify-center"
                >
                  <Linkedin className="w-6 h-6" />
                </a>
              </div>
            </div>
          </div>
          
          <div className="flex items-center justify-center space-x-3 text-blue-400">
            <Users className="w-6 h-6" />
            <span className="font-semibold text-lg">Spots filling rapidly – 1,000+ getting their personal advantage</span>
          </div>
        </div>
      </section>

      {/* Coming Soon To Section */}
      <section className="px-6 py-24 bg-gradient-to-b from-blue-950/20 via-gray-900 to-purple-950/20">
        <div className="max-w-6xl mx-auto text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-16 text-text-primary">
            Coming Soon <span className="text-lime-primary">To</span>
          </h2>
          
          <div className="flex flex-col md:flex-row items-center justify-center space-y-8 md:space-y-0 md:space-x-16">
            {/* Google Play */}
            <div className="flex flex-col items-center group">
              <div className="w-24 h-24 mb-6 transition-transform duration-300 group-hover:scale-110">
                <img 
                  src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" 
                  alt="Google Play Store"
                  className="w-full h-full object-contain"
                />
              </div>
              <h3 className="text-xl font-semibold text-text-primary mb-2">Google Play</h3>
              <p className="text-lime-primary font-medium">Available Q3 2026</p>
            </div>
            
            {/* Apple iOS */}
            <div className="flex flex-col items-center group">
              <div className="w-24 h-24 mb-6 transition-transform duration-300 group-hover:scale-110">
                <img 
                  src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg" 
                  alt="Apple App Store"
                  className="w-full h-full object-contain"
                />
              </div>
              <h3 className="text-xl font-semibold text-text-primary mb-2">Apple iOS</h3>
              <p className="text-lime-primary font-medium">Available Q3 2026</p>
            </div>
            
            {/* Web App */}
            <div className="flex flex-col items-center group">
              <div className="w-24 h-24 bg-gradient-to-br from-lime-primary via-magenta-primary to-lime-bright rounded-3xl flex items-center justify-center mb-6 shadow-2xl transition-transform duration-300 group-hover:scale-110">
                <Globe className="w-12 h-12 text-bg-dark" />
              </div>
              <h3 className="text-xl font-semibold text-text-primary mb-2">Web App</h3>
              <p className="text-lime-primary font-medium">Available Q3 2026</p>
            </div>
          </div>
          
          <div className="mt-16">
            <p className="text-lg text-text-secondary max-w-3xl mx-auto leading-relaxed">
              Access your personal life coach AI anywhere, anytime. mirror will be available across all your devices for seamless life coaching.
            </p>
          </div>
        </div>
      </section>
      {/* Footer */}
      <footer className="px-6 py-16 bg-gradient-to-t from-surface via-lime-primary/5 to-bg-dark border-t border-text-disabled/50">
        <div className="max-w-6xl mx-auto">
          <div className="flex flex-col md:flex-row justify-between items-center mb-12">
            <div className="flex items-center space-x-3 mb-4 md:mb-0">
              <span className="text-4xl font-bold bg-gradient-to-r from-lime-primary to-magenta-primary bg-clip-text text-transparent font-logo">mirror</span>
            </div>
            <div className="flex space-x-10 text-text-tertiary">
              <a href="#" className="hover:text-lime-primary transition-colors duration-300 font-medium">Privacy</a>
              <a href="#" className="hover:text-lime-primary transition-colors duration-300 font-medium">Terms</a>
              <a href="#" className="hover:text-lime-primary transition-colors duration-300 font-medium">Contact</a>
            </div>
          </div>
          
          {/* Footer Availability */}
          <div className="text-center mb-8">
            <p className="text-text-tertiary mb-4">Coming Q3 2026 to:</p>
            <div className="flex justify-center items-center space-x-8">
              <span className="text-sm text-text-disabled">Google Play</span>
              <span className="text-sm text-text-disabled">•</span>
              <span className="text-sm text-text-disabled">Apple iOS</span>
              <span className="text-sm text-text-disabled">•</span>
              <span className="text-sm text-text-disabled">Web App</span>
            </div>
          </div>
          
          <div className="text-center">
            <p className="text-text-tertiary mb-6">
              © 2025 TARTLE × mirror All rights reserved.
            </p>
            <div className="flex justify-center space-x-6">
              <button className="bg-surface hover:bg-surface-variant text-text-secondary hover:text-text-primary p-2 rounded-full transition-all">
                <Share2 className="w-4 h-4" />
              </button>
              <button className="bg-surface hover:bg-surface-variant text-text-secondary hover:text-text-primary p-2 rounded-full transition-all">
                <Twitter className="w-4 h-4" />
              </button>
              <button className="bg-surface hover:bg-surface-variant text-text-secondary hover:text-text-primary p-2 rounded-full transition-all">
                <Linkedin className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default App;