import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import {
  Brush,
  HeartHandshake,
  Logs,
  Palette,
  Search,
  Star
} from "lucide-react";
import Link from "next/link";

const sections = [
  {
    title: "Art Portfolio",
    href: "/portfolio/art",
    description: "My artwork gallery",
    icon: Palette,
  },
  {
    title: "Artfight",
    href: "/portfolio/artfight",
    description: "Artfight pieces",
    icon: Palette,
  },
  {
    title: "Miniatures",
    href: "/portfolio/minis",
    description: "See my painted miniatures",
    icon: Brush,
  },
  {
    title: "Commissions",
    href: "/commissions",
    description: "See pricing, types, and open slots.",
    icon: Logs,
  },
  {
    title: "YCH (Your Character Here)",
    href: "/ych",
    description: "Claim open YCHs and other offers or view past ones.",
    icon: Star,
  },
  {
    title: "Terms of Service",
    href: "/tos",
    description: "Read commission rules and conditions.",
    icon: HeartHandshake,
  },
]

export default function Home() {
  return (
    <div className="flex flex-col gap-10 px-4 py-8">
      {/* Hero Section */}
      <div className="text-center flex flex-col items-center justify-center mt-10 px-4">
        <h1 className="text-4xl md:text-5xl font-bold mb-4">
          Welcome to my place!
        </h1>
        <p className="text-muted-foreground max-w-xl text-lg mb-6">
          I&apos;m an illustrator, character designer, miniature painter, 3d modeller, makeup artist and much more and happy to show you things i&apos;ve created.
        </p>

        {/* Search */}
        <div className="relative w-full max-w-lg">
          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
            <Search className="w-4 h-4" />
          </span>
          <Input
            type="text"
            placeholder="Search artworks, commissions, pages..."
            className="p-6 pl-10"
          />
        </div>
      </div>


      {/* Section Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        {sections.map((section) => (
          <Link href={section.href} key={section.title}>
            <Card className="hover:shadow-xl transition-shadow group">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-lg">
                  <section.icon className="w-5 h-5 text-muted-foreground group-hover:text-primary" />
                  {section.title}
                </CardTitle>
              </CardHeader>
              <CardContent className="text-sm text-muted-foreground">
                {section.description}
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </div >
  );
}
