import React from 'react';
import { motion } from 'framer-motion';
import { Check, Star, Shield, Zap, Users, Crown } from 'lucide-react';
import HeroSection from '../components/HeroSection';
import Section from '../components/Section';
import { Button } from '@/components/ui/button';

// Import images
import startImage from '../assets/getstarted.jpg'; // Getting started with HERO
import securityImage from '../assets/sphere.jpg'; // Digital privacy

const GetStarted = () => {
  const features = [
    "Operate in the Freezone with complete digital sovereignty",
    "Own and control your digital assets",
    "Collaborate with built-in dispute resolution mechanisms",
    "Collaborate globally without intermediaries",
    "Complete digital sovereignty and data ownership",
    "Quantum-safe memory storage across multiple nodes",
    "Private AI agent access and local processing",
    "Secure peer-to-peer communication",
    "Geographic data placement control",
    "24/7 Personal Agent assistance",
    "Unlimited secure storage",
    "Cross-platform compatibility",
  
  ];

  const steps = [
    {
      number: "01",
      title: "Create Your Account",
      description: "Sign up with your email and create your secure HERO identity. Choose your preferred data sovereignty settings."
    },
    {
      number: "02", 
      title: "Complete Payment",
      description: "Subscribe for $20/month to access your Personal Agent and all HERO capabilities. Cancel anytime."
    },
    {
      number: "03",
      title: "Setup Your HERO",
      description: "Download the HERO client, configure your preferences, and begin migrating your digital life."
    },
    {
      number: "04",
      title: "Start Living Sovereignly", 
      description: "Experience true digital freedom with your Personal Agent managing your secure, private digital ecosystem."
    }
  ];

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <HeroSection
        subtitle="Begin Your Digital Sovereignty"
        title="Get Started with HERO"
        description="Join the revolution and take back control of your digital life. Your Personal Agent is waiting to serve you with complete privacy and security."
        backgroundImage={startImage}
        ctaText="Get Started Now"
        ctaLink="#pricing"
        showVideo={false}
      />

      {/* Pricing Section */}
      <Section background="gradient" padding="xlarge" className="scroll-mt-20" id="pricing">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Simple, <span className="text-green-400">Transparent</span> Pricing
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 max-w-5xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            One price, unlimited possibilities. No hidden fees, no data harvesting, no compromises.
          </motion.p>
        </div>

        <div className="max-w-4xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="relative bg-gradient-to-br from-gray-900/80 to-black/80 backdrop-blur-sm border border-green-400/30 rounded-2xl p-8 hover:border-green-400/50 transition-all duration-300 glow-blue"
          >
            <div className="absolute top-4 right-4">
              <Crown className="text-green-400" size={32} />
            </div>
            
            <div className="text-center mb-8">
              <h3 className="text-3xl font-bold text-white mb-2">HERO Personal Agent</h3>
              <div className="flex items-center justify-center space-x-2 mb-4">
                <span className="text-5xl font-bold text-green-400">$20</span>
                <span className="text-xl text-gray-300">/month</span>
              </div>
              <p className="text-gray-300">Complete digital sovereignty for everyone</p>
            </div>

            <div className="grid md:grid-cols-2 gap-4 mb-8">
              {features.map((feature, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.05 }}
                  viewport={{ once: true }}
                  className="flex items-start space-x-3"
                >
                  <Check className="text-green-400 mt-1 flex-shrink-0" size={16} />
                  <span className="text-gray-300 text-sm">{feature}</span>
                </motion.div>
              ))}
            </div>

            <div className="text-center">
              <Button 
                size="lg" 
                className="bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white px-12 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 w-full md:w-auto"
              >
                Become a member of our Cooperative
              </Button>
              <p className="text-gray-400 text-sm mt-4">No credit card required • Cancel anytime</p>
            </div>
          </motion.div>
        </div>
      </Section>

      {/* How to Get Started Section */}
      <Section background="dark" padding="xlarge">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            How to <span className="text-blue-400">Get Started</span>
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 max-w-5xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            Setting up your HERO Personal Agent is simple and secure. Follow these steps to begin your journey to digital sovereignty.
          </motion.p>
        </div>

        <div className="max-w-4xl mx-auto">
          <div className="space-y-12">
            {steps.map((step, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: index * 0.2 }}
                viewport={{ once: true }}
                className="flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8"
              >
                <div className="flex-shrink-0 w-20 h-20 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center text-white font-bold text-xl">
                  {step.number}
                </div>
                <div className="flex-1 text-center md:text-left">
                  <h3 className="text-2xl font-semibold text-white mb-3">{step.title}</h3>
                  <p className="text-gray-300 text-lg leading-relaxed">{step.description}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </Section>

      {/* Security Guarantee Section */}
      <Section background="gradient" padding="xlarge">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
          >
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Your <span className="text-purple-400">Security</span> is Guaranteed
            </h2>
            <p className="text-xl text-gray-300 mb-6 leading-relaxed">
              We use military-grade encryption and quantum-safe algorithms to ensure your data remains private and secure. 
              Your HERO operates under your complete control with zero-knowledge architecture.
            </p>
            
            <div className="space-y-4">
              {[
                "End-to-end encryption for all communications",
                "Zero-knowledge data storage and processing", 
                "Quantum-resistant cryptographic algorithms",
                "Geographic data sovereignty options",
                "Regular security audits and updates",
                "24/7 monitoring and threat detection"
              ].map((item, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="flex items-start space-x-3"
                >
                  <Shield className="text-purple-400 mt-1 flex-shrink-0" size={20} />
                  <span className="text-gray-300">{item}</span>
                </motion.div>
              ))}
            </div>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="relative"
          >
            <img 
              src={securityImage} 
              alt="Digital Security"
              className="w-full rounded-2xl shadow-2xl hover-lift"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-2xl"></div>
          </motion.div>
        </div>
      </Section>

      {/* Final CTA Section */}
      <Section background="dark" padding="xlarge">
        <div className="text-center">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Ready to Reclaim Your <span className="text-green-400">Digital Freedom</span>?
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 mb-8 max-w-5xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            Join thousands of users who have already taken control of their digital lives with HERO Personal Agent.
          </motion.p>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            viewport={{ once: true }}
            className="space-y-4"
          >
            <Button 
              size="lg" 
              className="bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white px-12 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 pulse-glow"
            >
              Become a member of our Cooperative
            </Button>
            <p className="text-gray-400">7-day free trial • $20/month after • Cancel anytime</p>
          </motion.div>
        </div>
      </Section>
    </div>
  );
};

export default GetStarted;