import { SocialLinks } from "@/components/SocialLinks";
import Link from "next/link";

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>
        <p className="text-muted-foreground max-w-xl text-lg mb-6">
          If you want to commission me<br />you can find all the information you need here:<br /> <Link href="/commissions" className="underline text-primary"  >Commissions</Link>
        </p>
        <div>
          <SocialLinks />
        </div>
      </div>


      {/* Section Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        {/* <p>
          If you want to commission me you can find all the information you need under following link: <a href="https://linktr.ee/gaertan" target="_blank">Linktree</a>
        </p> */}
        {/* {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 >
  );
}