import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { Shield, Brain, Users, Lock, Zap, Heart, MessageSquare, Lightbulb, Globe, Code, Share2, DollarSign } from 'lucide-react';
import HeroSection from '../components/HeroSection';
import Section from '../components/Section';
import FeatureCard from '../components/FeatureCard';
import { Button } from '@/components/ui/button';
import matter from 'gray-matter';

// Import images
import networkImage from '../assets/discover.jpg'; // Connected lines
import heartTechImage from '../assets/heart.jpg'; // Technology heart
import humanConnectionImage from '../assets/myherozoom.png'; // Digital human connection
import privacyImage from '../assets/share.jpg'; // Digital privacy
import transactImage from '../assets/transact.jpg'; // Digital transaction
import developImage from '../assets/develop.jpg'; // Development scene
import communicateImage from '../assets/communicate.jpg'; // Communication scene

// Use Vite's import.meta.glob to import all home content markdown files and images
const homeModules = import.meta.glob('../content/home/*.md', { as: 'raw', eager: true });
const imageModules = import.meta.glob('../assets/*.jpg', { eager: true, import: 'default' });
const iconComponents = {
  Shield, Brain, Users, Lock, Zap, Heart, MessageSquare, Lightbulb, Globe, Code, Share2, DollarSign
};

const Home = () => {
  const [homeContent, setHomeContent] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadHomeContent = async () => {
      try {
        const loadedHomeContent = [];
        
        for (const path in homeModules) {
          const content = homeModules[path];
          const { data: frontmatter } = matter(content);
          
          const IconComponent = iconComponents[frontmatter.iconname];
          const imagePath = `../assets/${frontmatter.image}`; // Construct full path
          const importedImage = imageModules[imagePath];

          loadedHomeContent.push({
            icon: IconComponent ? <IconComponent size={32} /> : <Lightbulb size={32} />, // Default icon
            title: frontmatter.title,
            description: frontmatter.description,
            image: importedImage,
            order: frontmatter.order || 999,
            slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
          });
        }

        // Sort by order
        loadedHomeContent.sort((a, b) => a.order - b.order);
        setHomeContent(loadedHomeContent);
      } catch (error) {
        console.error('Error loading home content:', error);
      } finally {
        setLoading(false);
      }
    };

    loadHomeContent();
  }, []);

  const benefits = [
    "Your memory can never be lost, stolen, or corrupted",
    "Authentic information flow between real, verified people", 
    "Equal access to knowledge and collaboration",
    "Enhanced personal productivity with local AI support",
    "Legal identity and digital autonomy through sovereign zones",
    "Full control of your assets and data — for you and your children"
  ];

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <HeroSection
        subtitle="Take Back Control of Your Digital Life"
        title={
          <span>
            Your <span className="hero-text-gradient">Personal Agent</span>
          </span>
        }
        description="HERO is not just another app — it's your trusted digital extension that works for you and no one else. Own your data, decide who accesses what, and preserve your memory in a way that can never be corrupted, lost, or hacked."
        showVideo={true}
        videoEmbed={
          <iframe
            src="https://player.vimeo.com/video/1106821376?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&background=1&muted=1&loop=1"
            frameBorder="0"
            allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
            referrerPolicy="strict-origin-when-cross-origin"
            style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", objectFit: "cover"}}
            title="HERO BACK 2"
          />
        }
        ctaText="Start Your Journey"
        ctaLink="/get-started"
      />

      {/* What is HERO 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">
              What is a <span className="text-blue-400">HERO</span>?
            </h2>
            <p className="text-xl text-gray-300 mb-6 leading-relaxed">
              A <strong className="text-white">HERO</strong> is your <strong className="text-blue-400">Personal Agent (PA)</strong> — 
              a secure piece of software that acts entirely on your behalf.
            </p>
            <div className="space-y-4 text-lg text-gray-300">
              <div className="flex items-start space-x-3">
                <Shield className="text-blue-400 mt-1 flex-shrink-0" size={20} />
                <span>Fully owned and controlled by you</span>
              </div>
              <div className="flex items-start space-x-3">
                <Brain className="text-blue-400 mt-1 flex-shrink-0" size={20} />
                <span>Capable of managing your digital life: data, identity, communication, AI, and transactions</span>
              </div>
              <div className="flex items-start space-x-3">
                <Lock className="text-blue-400 mt-1 flex-shrink-0" size={20} />
                <span>Designed for privacy, security, and sovereignty</span>
              </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={humanConnectionImage} 
              alt="Digital Human Connection"
              className="w-full rounded-2xl shadow-2xl hover-lift"
            />
            <div className="absolute inset-0 rounded-2xl"></div>
          </motion.div>
        </div>
      </Section>

      {/* Why HEROs Matter 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 }}
          >
            Why <span className="text-purple-400">HEROs</span> Matter
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 max-w-6xl mx-auto leading-relaxed"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            Today, most AI tools are owned by corporations. They process your data, monitor your interactions, 
            and store your digital memory in centralized systems. <strong className="text-white">HERO flips that model.</strong>
          </motion.p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
          {benefits.map((benefit, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              viewport={{ once: true }}
              className="glass-effect rounded-xl p-6 hover:glow-blue transition-all duration-300"
            >
              <div className="flex items-start space-x-3">
                <Heart className="text-purple-400 mt-1 flex-shrink-0" size={20} />
                <p className="text-gray-300">{benefit}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </Section>

      {/* HERO Capabilities Section */}
      <Section background="gradient" 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 }}
          >
            HERO <span className="text-cyan-400">Capabilities</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 }}
          >
            Your Personal Agent empowers you with comprehensive digital capabilities
          </motion.p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {loading ? (
            // Loading skeleton
            Array.from({ length: 6 }).map((_, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.3, delay: index * 0.05 }}
                className="glass-effect rounded-xl p-6 animate-pulse"
              >
                <div className="h-8 w-8 bg-gray-600 rounded mb-4"></div>
                <div className="h-6 bg-gray-600 rounded mb-3"></div>
                <div className="h-4 bg-gray-600 rounded mb-4"></div>
                <div className="h-32 bg-gray-600 rounded-lg"></div>
              </motion.div>
            ))
          ) : (
            homeContent.map((item, index) => (
              <Link key={index} to={`/home/${item.slug}`} className="block">
                <FeatureCard
                  icon={item.icon}
                  title={item.title}
                  description={item.description}
                  image={item.image}
                  delay={index * 0.1}
                />
              </Link>
            ))
          )}
        </div>
      </Section>

      {/* Call to Action 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 Take Control?
          </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 }}
          >
            This is not just better tech. This is <strong className="text-blue-400">freedom through infrastructure</strong>.
          </motion.p>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            viewport={{ once: true }}
          >
            <Button 
              size="lg" 
              className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-12 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 pulse-glow"
              onClick={() => window.location.href = '/get-started'}
            >
              Get Started Today
            </Button>
          </motion.div>
        </div>
      </Section>
    </div>
  );
};

export default Home;