import React, { useState } from 'react';
import { Heart, Home, Palette, Users, Sword, ChevronRight, Star, Play } from 'lucide-react';

const GameCard = ({ title, description, features, icon: Icon, color, isSelected, onClick }) => {
  return (
    <div 
      className={`relative overflow-hidden rounded-xl cursor-pointer transition-all duration-300 transform hover:scale-105 ${
        isSelected ? 'ring-4 ring-blue-500 shadow-2xl' : 'shadow-lg hover:shadow-xl'
      }`}
      onClick={onClick}
    >
      <div className={`bg-gradient-to-br ${color} p-6 text-white min-h-[280px] flex flex-col`}>
        <div className="flex items-center mb-4">
          <div className="p-3 bg-white/20 rounded-lg mr-4">
            <Icon size={32} />
          </div>
          <h3 className="text-xl font-bold">{title}</h3>
        </div>
        
        <p className="text-white/90 mb-4 flex-grow">{description}</p>
        
        <div className="space-y-2">
          {features.map((feature, index) => (
            <div key={index} className="flex items-center text-sm text-white/80">
              <Star size={14} className="mr-2 fill-current" />
              {feature}
            </div>
          ))}
        </div>
        
        <div className="mt-4 flex items-center justify-between">
          <span className="text-sm font-medium">Click to explore</span>
          <ChevronRight size={20} />
        </div>
      </div>
    </div>
  );
};

const GameDetails = ({ game, onBack }) => {
  if (!game) return null;

  return (
    <div className="bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto">
      <button 
        onClick={onBack}
        className="mb-6 flex items-center text-blue-600 hover:text-blue-800 transition-colors"
      >
        <ChevronRight size={20} className="rotate-180 mr-2" />
        Back to Game Concepts
      </button>
      
      <div className="flex items-center mb-6">
        <div className={`p-4 bg-gradient-to-br ${game.color} rounded-lg mr-6`}>
          <game.icon size={40} className="text-white" />
        </div>
        <div>
          <h2 className="text-3xl font-bold text-gray-800 mb-2">{game.title}</h2>
          <p className="text-gray-600">{game.description}</p>
        </div>
      </div>

      <div className="grid md:grid-cols-2 gap-8">
        <div>
          <h3 className="text-xl font-semibold mb-4 text-gray-800">Core Features</h3>
          <ul className="space-y-3">
            {game.features.map((feature, index) => (
              <li key={index} className="flex items-start">
                <Star size={16} className="text-yellow-500 mr-3 mt-1 fill-current" />
                <span className="text-gray-700">{feature}</span>
              </li>
            ))}
          </ul>
        </div>
        
        <div>
          <h3 className="text-xl font-semibold mb-4 text-gray-800">Game Mechanics</h3>
          <ul className="space-y-3">
            {game.mechanics.map((mechanic, index) => (
              <li key={index} className="flex items-start">
                <Play size={16} className="text-blue-500 mr-3 mt-1 fill-current" />
                <span className="text-gray-700">{mechanic}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="mt-8 p-6 bg-gray-50 rounded-lg">
        <h3 className="text-xl font-semibold mb-3 text-gray-800">Why This Game?</h3>
        <p className="text-gray-700 leading-relaxed">{game.appeal}</p>
      </div>
    </div>
  );
};

export default function GameConceptExplorer() {
  const [selectedGame, setSelectedGame] = useState(null);

  const gameOptions = [
    {
      id: 1,
      title: "Dating/Romance Simulation",
      description: "A wholesome relationship-building game focused on meaningful connections and emotional growth.",
      icon: Heart,
      color: "from-pink-500 to-rose-600",
      features: [
        "Deep conversation system",
        "Compatibility matching",
        "Character development",
        "Multiple story paths"
      ],
      mechanics: [
        "Dialogue trees with meaningful choices",
        "Relationship progression system",
        "Personality compatibility scoring",
        "Event-based storytelling",
        "Character customization"
      ],
      appeal: "This game focuses on the emotional and intellectual aspects of relationships, emphasizing communication, shared interests, and personal growth. Players learn about building healthy relationships while enjoying engaging storylines and character development."
    },
    {
      id: 2,
      title: "Life Simulation",
      description: "Manage daily activities, career growth, and social relationships in a vibrant virtual world.",
      icon: Home,
      color: "from-green-500 to-emerald-600",
      features: [
        "Career progression",
        "Social networking",
        "Skill development",
        "Home customization"
      ],
      mechanics: [
        "Time management system",
        "Skill trees and progression",
        "Social interaction mechanics",
        "Economic simulation",
        "Achievement system"
      ],
      appeal: "Experience the satisfaction of building a virtual life from the ground up. Balance work, relationships, and personal interests while making meaningful choices that shape your character's future. Perfect for players who enjoy long-term progression and strategic planning."
    },
    {
      id: 3,
      title: "Character Creator",
      description: "A comprehensive tool for designing and customizing unique characters with endless possibilities.",
      icon: Palette,
      color: "from-purple-500 to-violet-600",
      features: [
        "Extensive customization",
        "Style presets",
        "Export capabilities",
        "Community sharing"
      ],
      mechanics: [
        "Layered customization system",
        "Color palette tools",
        "Asset library management",
        "Template system",
        "Gallery and sharing features"
      ],
      appeal: "Unleash your creativity with powerful character design tools. Whether you're creating avatars for other games, designing characters for stories, or just exploring artistic expression, this tool provides professional-grade customization in an accessible format."
    },
    {
      id: 4,
      title: "Social Party Game",
      description: "Fun multiplayer experiences perfect for friends, featuring party games and social deduction.",
      icon: Users,
      color: "from-blue-500 to-cyan-600",
      features: [
        "Multiplayer support",
        "Mini-game collection",
        "Team challenges",
        "Voice chat integration"
      ],
      mechanics: [
        "Real-time multiplayer",
        "Round-based gameplay",
        "Voting and discussion phases",
        "Role assignment system",
        "Leaderboard tracking"
      ],
      appeal: "Bring people together with engaging social gameplay that encourages interaction, laughter, and friendly competition. Perfect for parties, family gatherings, or online friend groups looking for shared entertainment experiences."
    },
    {
      id: 5,
      title: "Adventure RPG",
      description: "Embark on epic quests with rich storytelling, character development, and exploration.",
      icon: Sword,
      color: "from-orange-500 to-red-600",
      features: [
        "Epic storylines",
        "Character progression",
        "World exploration",
        "Quest system"
      ],
      mechanics: [
        "Turn-based or real-time combat",
        "Skill trees and abilities",
        "Inventory management",
        "Dialogue and choice systems",
        "World map exploration"
      ],
      appeal: "Immerse yourself in rich fantasy worlds filled with memorable characters, challenging quests, and meaningful choices. Experience the classic RPG formula with modern design sensibilities, focusing on storytelling and character growth over grinding."
    }
  ];

  if (selectedGame) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
        <GameDetails 
          game={selectedGame} 
          onBack={() => setSelectedGame(null)} 
        />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
            Wholesome Game Concepts
          </h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            Explore engaging and family-friendly game ideas that focus on creativity, 
            social connection, and positive experiences. Click on any concept to learn more!
          </p>
        </div>

        {/* Game Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
          {gameOptions.map((game) => (
            <GameCard
              key={game.id}
              {...game}
              isSelected={false}
              onClick={() => setSelectedGame(game)}
            />
          ))}
        </div>

        {/* Call to Action */}
        <div className="text-center bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">
            Ready to Build Your Game?
          </h2>
          <p className="text-gray-600 mb-6 leading-relaxed">
            Each of these concepts can be developed into a full game experience. 
            Choose the one that resonates with you most, and let's create something amazing together!
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">
              Start Planning
            </button>
            <button className="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium transition-colors">
              Learn More
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}