import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { Shield, Brain, Users, Lock, Zap, Heart } 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 capability markdown files
const capabilityModules = import.meta.glob('../blogs/capability_*.md', { as: 'raw', eager: true });

const Home = () => {
  const [capabilities, setCapabilities] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadCapabilities = async () => {
      try {
        const loadedCapabilities = [];
        
        for (const path in capabilityModules) {
          const content = capabilityModules[path];
          const { data: frontmatter } = matter(content);
          
          // Map icon strings to actual components
          const iconMap = {
            'Brain': <Brain size={32} />,
            'Zap': <Zap size={32} />,
            'Shield': <Shield size={32} />,
            'Users': <Users size={32} />,
            'Lock': <Lock size={32} />,
            'Heart': <Heart size={32} />
          };

          // Map image paths to actual imports
          const imageMap = {
            '/src/assets/communicate.jpg': communicateImage,
            '/src/assets/heart.jpg': heartTechImage,
            '/src/assets/discover.jpg': networkImage,
            '/src/assets/develop.jpg': developImage,
            '/src/assets/share.jpg': privacyImage,
            '/src/assets/transact.jpg': transactImage
          };

          loadedCapabilities.push({
            icon: iconMap[frontmatter.icon] || <Brain size={32} />,
            title: frontmatter.title,
            description: frontmatter.description,
            image: imageMap[frontmatter.image] || heartTechImage,
            order: frontmatter.order || 999,
            slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
          });
        }

        // Sort by order
        loadedCapabilities.sort((a, b) => a.order - b.order);
        setCapabilities(loadedCapabilities);
      } catch (error) {
        console.error('Error loading capabilities:', error);
        // Fallback to static data if loading fails
        setCapabilities([
          {
            icon: <Brain size={32} />,
            title: "Communicate",
            description: "Secure messaging, voice, and video chat — all managed privately by your Personal Agent",
            image: communicateImage,
            slug: "communicate"
          },
          {
            icon: <Zap size={32} />,
            title: "Create", 
            description: "Build documents, videos, and creative assets collaboratively with AI assistance",
            image: heartTechImage,
            slug: "create"
          },
          {
            icon: <Shield size={32} />,
            title: "Discover",
            description: "Browse and search using authentic sources and AI assistance while maintaining privacy",
            image: networkImage,
            slug: "discover"
          },
          {
            icon: <Users size={32} />,
            title: "Develop",
            description: "Build and deploy applications faster with local AI and secure storage",
            image: developImage,
            slug: "develop"
          },
          {
            icon: <Lock size={32} />,
            title: "Share",
            description: "Distribute content without central platforms — sovereignly and securely",
            image: privacyImage,
            slug: "share"
          },
          {
            icon: <Heart size={32} />,
            title: "Transact",
            description: "Send and receive digital value safely and without intermediaries",
            image: transactImage,
            slug: "transact"
          }
        ]);
      } finally {
        setLoading(false);
      }
    };

    loadCapabilities();
  }, []);

  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-4xl 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-3xl 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>
            ))
          ) : (
            capabilities.map((capability, index) => (
              <Link key={index} to={`/capability/${capability.slug}`} className="block">
                <FeatureCard
                  icon={capability.icon}
                  title={capability.title}
                  description={capability.description}
                  image={capability.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-3xl 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;