shadow-gunbuilder-ai-proto/app/gunbuilder/[categoryId]/[partId]/page.tsx

"use client";

import { useMemo } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { CATEGORIES, PARTS } from "@/data/gunbuilderParts";
import type { CategoryId } from "@/types/gunbuilder";

export default function PartDetailPage() {
  const params = useParams();
  const categoryId = params.categoryId as CategoryId;
  const partId = params.partId as string;

  const category = useMemo(
    () => CATEGORIES.find((c) => c.id === categoryId),
    [categoryId],
  );

  const part = useMemo(
    () => PARTS.find((p) => p.id === partId && p.categoryId === categoryId),
    [partId, categoryId],
  );

  if (!category || !part) {
    return (
      <main className="min-h-screen bg-black text-zinc-50">
        <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
          <div className="text-center">
            <h1 className="text-2xl font-semibold text-zinc-50 mb-4">
              Product Not Found
            </h1>
            <Link
              href="/gunbuilder"
              className="text-amber-300 hover:text-amber-200 underline"
            >
              Return to Gunbuilder
            </Link>
          </div>
        </div>
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-black text-zinc-50">
      <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
        {/* Header */}
        <header className="mb-6">
          <Link
            href={`/gunbuilder/${categoryId}`}
            className="text-xs text-zinc-400 hover:text-zinc-300 mb-4 inline-block"
          >
            ← Back to {category.name}
          </Link>
          <div>
            <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
              Shadow Standard
            </p>
            <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
              {part.brand} <span className="text-amber-300">{part.name}</span>
            </h1>
            <p className="mt-2 text-sm text-zinc-400 max-w-xl">
              {category.name} • Product Details
            </p>
          </div>
        </header>

        {/* Product Details */}
        <div className="grid gap-4 lg:grid-cols-[2fr,1fr]">
          {/* Main Content */}
          <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 md:p-6">
            <div className="grid gap-6 md:grid-cols-[1fr,1fr]">
              {/* Product Info */}
              <div>
                <div className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400 mb-2">
                  Product Information
                </div>
                <div className="space-y-3">
                  <div>
                    <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
                      Brand
                    </div>
                    <div className="text-lg font-semibold text-zinc-50">
                      {part.brand}
                    </div>
                  </div>
                  <div>
                    <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
                      Model
                    </div>
                    <div className="text-lg font-semibold text-zinc-50">
                      {part.name}
                    </div>
                  </div>
                  <div>
                    <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
                      Category
                    </div>
                    <div className="text-lg font-semibold text-zinc-50">
                      {category.name}
                    </div>
                  </div>
                  {part.notes && (
                    <div>
                      <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
                        Details
                      </div>
                      <div className="text-sm text-zinc-300 leading-relaxed">
                        {part.notes}
                      </div>
                    </div>
                  )}
                </div>
              </div>

              {/* Product Image */}
              <div className="flex items-start justify-center">
                <div className="w-full aspect-square max-w-md rounded-md border border-zinc-700 bg-zinc-900/50 flex items-center justify-center">
                  <div className="text-center p-8">
                    <svg
                      className="w-16 h-16 mx-auto text-zinc-600 mb-2"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={1.5}
                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                      />
                    </svg>
                    <p className="text-xs text-zinc-500 uppercase tracking-wide">
                      Product Image
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* Sidebar */}
          <aside className="rounded-lg border border-zinc-800 bg-zinc-950/80 p-4 md:p-6 flex flex-col">
            <div className="mb-4">
              <div className="text-xs text-zinc-400 mb-2">Price</div>
              <div className="text-3xl font-semibold text-amber-300">
                ${part.price.toFixed(2)}
              </div>
            </div>

            <div className="mt-auto space-y-3">
              <Link
                href={`/gunbuilder?select=${categoryId}:${part.id}`}
                className="block w-full rounded-md border border-amber-400/60 bg-amber-400/10 px-4 py-3 text-sm font-medium text-amber-200 hover:bg-amber-400/15 text-center transition-colors"
              >
                Add to Build
              </Link>
              <a
                href={part.affiliateUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="block w-full rounded-md border border-zinc-700 bg-zinc-900/50 px-4 py-3 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 text-center transition-colors"
              >
                View Retailer
              </a>
            </div>
          </aside>
        </div>
      </div>
    </main>
  );
}