interactives/src/pages/Index.tsx

import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { ArrowRight, Sparkles } from "lucide-react";
import Layout from "@/components/Layout";

// All interactives data
const allInteractives = [{
  id: 'binary-number-game',
  title: 'Binary Number Representation',
  description: 'Learn how numbers are represented in binary (base-2) format through an interactive guessing game.',
  tags: ['binary', 'numbers', 'conversion'],
  path: '/binary-number-game',
  theme: 'Discrete Math'
}, {
  id: 'ternary-number-game',
  title: 'Ternary Number Representation',
  description: 'Learn how numbers are represented in ternary (base-3) format by toggling between 0, 1, or 2 copies of powers of three.',
  tags: ['ternary', 'numbers', 'base-3'],
  path: '/ternary-number-game',
  theme: 'Discrete Math'
}, {
  id: 'balanced-ternary-game',
  title: 'Balanced Ternary Representation',
  description: 'Explore balanced ternary using digits T (-1), 0, and 1. Add or subtract powers of three to match the target number.',
  tags: ['balanced-ternary', 'numbers', 'signed-digits'],
  path: '/balanced-ternary-game',
  theme: 'Discrete Math'
}, {
  id: 'binary-search-trick',
  title: 'Binary Search Magic Trick',
  description: 'Perform an amazing magic trick that reveals how binary numbers work. Think of a number and watch the magic happen!',
  tags: ['binary', 'magic', 'trick'],
  path: '/binary-search-trick',
  theme: 'Data Structures'
}, {
  id: 'game-of-sim',
  title: 'Game of Sim',
  description: 'A strategic two-player game where you take turns coloring edges between vertices, trying to avoid creating a triangle of your own color.',
  tags: ['strategy', 'graph-theory', 'two-player'],
  path: '/game-of-sim',
  theme: 'Games'
}, {
  id: 'ternary-search-trick',
  title: 'Ternary Search Magic Trick',
  description: 'Experience the magic of ternary search! Think of a number and watch as the cards reveal it through mathematical calculations.',
  tags: ['ternary', 'magic', 'search'],
  path: '/ternary-search-trick',
  theme: 'Data Structures'
}, {
  id: 'northcotts-game',
  title: "Northcott's Game",
  description: 'A strategic board game where players move their pieces to outmaneuver their opponent in a tactical race.',
  tags: ['strategy', 'board-game', 'two-player'],
  path: '/northcotts-game',
  theme: 'Games'
}, {
  id: 'knights-puzzle',
  title: 'Knights Exchange Puzzle',
  description: 'A classic chess puzzle where you must exchange the positions of white and black knights using legal knight moves.',
  tags: ['chess', 'knights', 'puzzle'],
  path: '/knights-puzzle',
  theme: 'Puzzles'
}];

// Featured interactives (3 fixed ones)
const featuredInteractives = allInteractives.filter(interactive => ['northcotts-game', 'ternary-search-trick', 'game-of-sim'].includes(interactive.id));

// Function to get random interactives (excluding featured ones)
const getRandomInteractives = (count: number) => {
  const availableInteractives = allInteractives.filter(interactive => !['northcotts-game', 'ternary-search-trick', 'game-of-sim'].includes(interactive.id));
  const shuffled = [...availableInteractives].sort(() => 0.5 - Math.random());
  return shuffled.slice(0, count);
};
const Index = () => {
  const randomInteractives = getRandomInteractives(3);
  return <Layout>
      {/* Hero Section */}
      

      {/* Featured Interactives Section */}
      <section className="py-16 px-4 bg-muted/20">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-foreground mb-8 text-center">
            Featured Interactives
          </h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {featuredInteractives.map(interactive => <Card key={interactive.id} className="hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <CardHeader>
                  <CardTitle className="text-lg leading-tight">
                    <Link to={interactive.path} className="text-foreground hover:text-primary transition-colors">
                      {interactive.title}
                    </Link>
                  </CardTitle>
                  <Badge variant="outline" className="w-fit text-xs">
                    {interactive.theme}
                  </Badge>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
                    {interactive.description}
                  </p>
                  <div className="flex flex-wrap gap-1 mb-4">
                    {interactive.tags.slice(0, 3).map(tag => <Badge key={tag} variant="secondary" className="text-xs">
                        {tag}
                      </Badge>)}
                  </div>
                  <Button asChild size="sm" className="w-full">
                    <Link to={interactive.path}>
                      Try Interactive
                    </Link>
                  </Button>
                </CardContent>
              </Card>)}
          </div>

        </div>
      </section>

      {/* Random Interactives Section */}
      <section className="py-16 px-4">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-8">
            <div className="flex items-center justify-center gap-2 mb-4">
              <Sparkles className="w-6 h-6 text-accent" />
              <h2 className="text-3xl font-bold text-foreground">
                Random Interactives
              </h2>
              <Sparkles className="w-6 h-6 text-accent" />
            </div>
            <p className="text-muted-foreground">
              Explore something new with these randomly selected interactives
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {randomInteractives.map(interactive => <Card key={interactive.id} className="hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <CardHeader>
                  <CardTitle className="text-lg leading-tight">
                    <Link to={interactive.path} className="text-foreground hover:text-primary transition-colors">
                      {interactive.title}
                    </Link>
                  </CardTitle>
                  <Badge variant="outline" className="w-fit text-xs">
                    {interactive.theme}
                  </Badge>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
                    {interactive.description}
                  </p>
                  <div className="flex flex-wrap gap-1 mb-4">
                    {interactive.tags.slice(0, 3).map(tag => <Badge key={tag} variant="secondary" className="text-xs">
                        {tag}
                      </Badge>)}
                  </div>
                  <Button asChild size="sm" className="w-full">
                    <Link to={interactive.path}>
                      Try Interactive
                    </Link>
                  </Button>
                </CardContent>
              </Card>)}
          </div>

          <div className="text-center mt-12">
            <Button asChild variant="outline" size="lg">
              <Link to="/index" className="inline-flex items-center">
                View All Interactives
                <ArrowRight className="ml-2 w-4 h-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>
    </Layout>;
};
export default Index;