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

const sections = [
  {
    title: "Portfolio",
    href: "/portfolio",
    description: "Browse past artworks and highlights.",
    icon: Palette,
  },
  {
    title: "Commissions",
    href: "/commissions",
    description: "See pricing, types, and open slots.",
    icon: Brush,
  },
  {
    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-6">
      {/* Hero Section */}
      <div className="relative w-full h-64 md:h-96 overflow-hidden rounded-2xl shadow-md">
        <Image
          src="https://placehold.co/1600x600.png"
          width={1600}
          height={600}
          alt="Hero"
          className="object-cover w-full h-full"
        />
        <div className="absolute inset-0 bg-black/40 flex items-center justify-center text-center">
          <h1 className="text-white text-3xl md:text-5xl font-bold drop-shadow">
            Welcome to PLACEHOLDER
          </h1>
        </div>
      </div>

      {/* Search */}
      <div className="relative w-full mx-auto">
        <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, pages ..."
          className="p-6 pl-10 "
        />
      </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>
  );
}
