import Link from "next/link";
import { getStories } from "@/data/creativeData";
import ExpandableStory from "@/components/ExpandableStory";

export default async function StoriesPage() {
  const stories = await getStories();

  return (
    <div className="min-h-screen bg-gradient-to-br from-yellow-50 via-orange-50 to-red-50 font-mono">
      <div className="max-w-4xl mx-auto px-6 py-12">
        <header className="text-center mb-16">
          <div className="mb-8">
            <div className="w-32 h-32 mx-auto bg-black rounded-full flex items-center justify-center border-4 border-yellow-300">
              <div className="text-4xl font-bold text-yellow-300">📝</div>
            </div>
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
            Mini Stories
          </h1>
          <p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
            Capturing moments in brief narratives
          </p>
        </header>

        <nav className="mb-16">
          <div className="bg-white border-4 border-black rounded-none p-6 shadow-brutal">
            <ul className="flex flex-wrap justify-center gap-4 md:gap-8">
              <li>
                <Link
                  href="/"
                  className="text-black font-bold hover:bg-green-200 px-4 py-2 transition-colors border-2 border-black hover:border-green-400"
                >
                  Home
                </Link>
              </li>
              <li>
                <Link
                  href="/digital-art"
                  className="text-black font-bold hover:bg-purple-200 px-4 py-2 transition-colors border-2 border-black hover:border-purple-400"
                >
                  Digital Art
                </Link>
              </li>
              <li>
                <Link
                  href="/stories"
                  className="border-yellow-200 bg-yellow-300 px-4 py-2 border-2 text-black"
                >
                  Stories
                </Link>
              </li>
              <li>
                <Link
                  href="/thoughts"
                  className="text-black font-bold hover:bg-teal-200 px-4 py-2 transition-colors border-2 border-black hover:border-teal-400"
                >
                  Thoughts
                </Link>
              </li>
            </ul>
          </div>
        </nav>

        <main className="space-y-8">
          {stories.map((story) => (
            <ExpandableStory key={story.id} story={story} />
          ))}
        </main>

        <footer className="mt-20 text-center">
          <div className="bg-black text-white p-4 font-bold">
            <p className="text-sm uppercase">Built with brutalist pastels</p>
          </div>
        </footer>
      </div>
    </div>
  );
}