import type { ReactNode } from 'react';
import Logo from './Logo';
import CategoryCard from './CategoryCard';
import type { JewelryType } from '../types';

const categories: { title: string; icon: ReactNode; type: JewelryType }[] = [
  {
    title: 'Bileklik',
    type: 'bileklik',
    icon: (
      <svg viewBox="0 0 48 48" fill="none" className="w-12 h-12">
        <circle cx="24" cy="24" r="18" stroke="white" strokeWidth="3" fill="none" />
        <circle cx="24" cy="6" r="3" fill="#a78bfa" />
        <circle cx="42" cy="24" r="3" fill="#60a5fa" />
        <circle cx="24" cy="42" r="3" fill="#a78bfa" />
        <circle cx="6" cy="24" r="3" fill="#60a5fa" />
      </svg>
    ),
  },
  {
    title: 'Kolye',
    type: 'kolye',
    icon: (
      <svg viewBox="0 0 48 48" fill="none" className="w-12 h-12">
        <path d="M12 8 Q24 40 36 8" stroke="white" strokeWidth="3" fill="none" />
        <circle cx="24" cy="36" r="4" fill="#a78bfa" />
        <circle cx="16" cy="20" r="2.5" fill="#60a5fa" />
        <circle cx="32" cy="20" r="2.5" fill="#60a5fa" />
      </svg>
    ),
  },
  {
    title: 'Tesbih',
    type: 'tesbih',
    icon: (
      <svg viewBox="0 0 48 48" fill="none" className="w-12 h-12">
        <line x1="24" y1="4" x2="24" y2="44" stroke="white" strokeWidth="2" />
        <circle cx="24" cy="8" r="3" fill="#a78bfa" />
        <circle cx="24" cy="16" r="3" fill="#60a5fa" />
        <circle cx="24" cy="24" r="3" fill="#a78bfa" />
        <circle cx="24" cy="32" r="3" fill="#60a5fa" />
        <circle cx="24" cy="40" r="4" fill="#a78bfa" />
      </svg>
    ),
  },
];

export default function LandingPage() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center px-4 py-12">
      <Logo className="w-20 h-20 mb-6" />

      <h1 className="text-4xl font-bold text-white tracking-tight sm:text-5xl">
        Safnaturel
      </h1>

      <p className="mt-2 text-lg text-white/80">Özel Tasarım Takılar</p>

      <h2 className="mt-12 mb-8 text-xl font-medium text-white/90">
        Tasarım Türü Seçin
      </h2>

      <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
        {categories.map((cat) => (
          <CategoryCard
            key={cat.type}
            title={cat.title}
            icon={cat.icon}
            type={cat.type}
          />
        ))}
      </div>
    </main>
  );
}
