"use client";

import { motion } from "framer-motion";
import {
  Layers,
  Paintbrush,
  Database,
  FileCode,
  Zap,
  ArrowRight
} from 'lucide-react';
import  {Button } from "@/components/ui/button";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";

const features = [
  {
    icon: Layers,
    title: 'Next.js 16 + App Router',
    description: 'Server components, layouts, and the latest React features'
  },
  {
    icon: Paintbrush,
    title:'Tailwind CSS + shadcn/ui',
    description: 'Utility-first CSS framework with pre-designed components'
  },
  {
    icon: Database,
    title: 'Zustand + TanStack Query',
    description: 'State management and data fetching solutions'
  },
  {
    icon: FileCode,
    title: 'React Hook Form + Zod',
    description: 'Form handling and validation with TypeScript support'
  },
  {
    icon: Zap,
    title: 'Framer Motion + Lucide Icons',
    description: 'Animation library and icon set for React'
  },
  {
    icon: ArrowRight,
    title: 'Axios + Interceptors',
    description: 'HTTP client with request and response interceptors'
  },
];

const containerVariants = {
  hidden : { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
};

export default function Home() {
  return (
    <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
      {/* Hero */}
      <motion.section
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="text-center mb-20"
      >
        <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
          welcome to Idea Guru
        </h1>
        <p className="mt-4 mx-auto max-w-2xl text-lg text-muted-foreground">
          A Next.js starter template with a curated tech stack
        </p>
        <div className="mt-8 flex items-center justify-center gap-4">
          <Button size="lg">
            Get Started
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
          <Button variant="outline" size="lg">
            View on GitHub
          </Button>
        </div>
      </motion.section>

      {/* Features */}
      <motion.section
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
      >
        {features.map((feature, index) => (
          <motion.div key={index} variants={itemVariants}>
            <Card className="h-full transition-shadow hover:shadow-md">
              <CardHeader>
                <feature.icon className="text-primary mb-2 h-8 w-8" />
                <CardTitle className="text-lg">{feature.title}</CardTitle>
                <CardDescription>{feature.description}</CardDescription>
              </CardHeader>
            </Card>
          </motion.div>
        ))}
      </motion.section>
    </div>
  );
}