import React from 'react';
import { Link } from 'react-router-dom';
import { BookOpenIcon, PuzzleIcon, SparklesIcon, CogIcon } from '../components/Icons';

export const HomePage: React.FC = () => {
  return (
    <div className="text-center">
      <h1 className="text-5xl font-extrabold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
        Chemical Docs v0.2.5
      </h1>
      <p className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto">
        Your comprehensive guide to the Chemical library – a powerful Luau solution for reactive state management and declarative UI composition.
      </p>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
        <FeatureCard
          icon={<BookOpenIcon className="h-12 w-12 text-purple-400 mb-4" />}
          title="Reactive Primitives"
          description="Understand Values, Computeds, and Effects for building dynamic applications."
          linkTo="/api/value"
          linkText="Explore Values"
        />
        <FeatureCard
          icon={<PuzzleIcon className="h-12 w-12 text-green-400 mb-4" />}
          title="Stateful Collections"
          description="Manage complex state with reactive Tables and Maps."
          linkTo="/api/table"
          linkText="Learn about Tables"
        />
        <FeatureCard
          icon={<SparklesIcon className="h-12 w-12 text-yellow-400 mb-4" />}
          title="Declarative UI"
          description="Compose user interfaces with ease using the `Compose` API."
          linkTo="/api/compose"
          linkText="Discover Compose"
        />
         <FeatureCard
          icon={<CogIcon className="h-12 w-12 text-blue-400 mb-4" />}
          title="Networked State"
          description="Synchronize state between server and clients with Reactions and Reactors."
          linkTo="/api/reactor"
          linkText="Understand Reactors"
        />
      </div>

      <div className="space-x-4">
        <Link 
          to="/introduction"
          className="bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-6 rounded-lg text-lg transition duration-150 ease-in-out shadow-md hover:shadow-lg"
        >
          Get Started
        </Link>
        <Link 
          to="/core-concepts"
          className="bg-gray-700 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg text-lg transition duration-150 ease-in-out shadow-md hover:shadow-lg"
        >
          Core Concepts
        </Link>
      </div>
    </div>
  );
};

interface FeatureCardProps {
  icon: React.ReactNode;
  title: string;
  description: string;
  linkTo: string;
  linkText: string;
}

const FeatureCard: React.FC<FeatureCardProps> = ({ icon, title, description, linkTo, linkText }) => (
  <div className="bg-gray-800 p-8 rounded-xl shadow-xl hover:shadow-2xl transition-shadow duration-300 flex flex-col items-center">
    {icon}
    <h3 className="text-2xl font-semibold text-white mb-3">{title}</h3>
    <p className="text-gray-400 mb-6 text-center">{description}</p>
    <Link 
      to={linkTo} 
      className="mt-auto text-purple-400 hover:text-purple-300 font-medium transition-colors"
    >
      {linkText} &rarr;
    </Link>
  </div>
);