src/components/Hero.tsx

import React from 'react';
import { ArrowRight, BookOpen, Users, Globe, Sparkles } from 'lucide-react';

interface HeroProps {
  onGetStarted: () => void;
}

const Hero: React.FC<HeroProps> = ({ onGetStarted }) => {
  const features = [
    {
      icon: BookOpen,
      title: 'Interactive Learning',
      description: 'Transform static content into engaging study experiences'
    },
    {
      icon: Globe,
      title: 'Multi-language Support',
      description: 'Access knowledge in hundreds of languages'
    },
    {
      icon: Users,
      title: 'Community Driven',
      description: 'Built on the foundation of collaborative knowledge'
    },
    {
      icon: Sparkles,
      title: 'Smart Recommendations',
      description: 'Discover related topics and build comprehensive understanding'
    }
  ];

  return (
    <div className="relative bg-gradient-to-br from-primary-50 via-white to-secondary-50 py-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6 animate-fade-in">
            Transform{' '}
            <span className="bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent">
              Knowledge
            </span>{' '}
            into Learning
          </h1>
          
          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed animate-slide-up">
            Leverage the power of Wikimedia APIs to create interactive learning experiences from Wikipedia, 
            Wikibooks, and other open knowledge sources. Build study plans, explore topics, and enhance 
            your understanding with AI-powered tools.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-16">
            <button
              onClick={onGetStarted}
              className="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-xl text-white bg-gradient-to-r from-primary-600 to-secondary-600 hover:from-primary-700 hover:to-secondary-700 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-1"
            >
              Get Started
              <ArrowRight className="ml-2 w-5 h-5" />
            </button>
            
            <button className="inline-flex items-center px-8 py-4 border-2 border-primary-200 text-lg font-medium rounded-xl text-primary-700 bg-white hover:bg-primary-50 transition-all duration-200 shadow-sm hover:shadow-md">
              View Documentation
            </button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {features.map((feature, index) => {
              const Icon = feature.icon;
              return (
                <div
                  key={index}
                  className="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-1 animate-fade-in"
                  style={{ animationDelay: `${index * 0.1}s` }}
                >
                  <div className="w-12 h-12 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-xl flex items-center justify-center mb-4">
                    <Icon className="w-6 h-6 text-white" />
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">{feature.title}</h3>
                  <p className="text-gray-600 text-sm leading-relaxed">{feature.description}</p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Hero;