"use client";

import { caseData } from "@/services/caseData";
import { useParams } from "next/navigation";
import Link from "next/link";

export default function CaseDetails() {
  const { id } = useParams(); 

  const caseItem = caseData.find((c) => c.id === id); 

  if (!caseItem) {
    return (
      <div className="text-center py-16">
        <h1 className="text-2xl font-bold text-gray-600">Case Not Found</h1>
        <p className="text-gray-500">Please check the URL and try again.</p>
        <Link href="/case" className="text-blue-600 hover:underline">
          ← Back to Cases
        </Link>
      </div>
    );
  }

  return (
    <section className="py-16 bg-gray-50">
      <div className="container mx-auto px-6 lg:px-12">
        <div className="bg-white p-8 rounded-lg shadow-lg max-w-3xl mx-auto">
          {/* Header */}
          <div className="flex items-center space-x-3 mb-4">
            <span className="bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full">
              {caseItem.category}
            </span>
            <span className="text-gray-400 text-sm">{caseItem.date}</span>
          </div>
          <h1 className="text-3xl font-bold mb-4 text-black">{caseItem.title}</h1>
          <hr className="border-gray-200 mb-6" />

      
          <img
            src={caseItem.image}
            alt={caseItem.title}
            className="w-full rounded-lg mb-6 object-cover"
          />

        
          {caseItem.sections.map((section, index) => (
            <div key={index} className="mb-8">
              <h2 className="text-xl font-bold mb-2">{section.heading}</h2>
              <p className="text-gray-700">{section.content}</p>
            </div>
          ))}

      
          <h2 className="text-xl font-bold mb-2">太字のテキストが入ります。</h2>
          <ul className="list-disc list-inside mb-4 text-gray-700">
            {caseItem.list.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>

   
          <table className="table-auto w-full border-collapse border border-gray-200 mb-4">
            <tbody>
              {caseItem.table.map((row, rowIndex) => (
                <tr key={rowIndex}>
                  {row.map((cell, cellIndex) => (
                    <td
                      key={cellIndex}
                      className="border border-gray-200 px-4 py-2 text-center text-gray-700"
                    >
                      {cell}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>

     
          <blockquote className="border-l-4 border-gray-400 pl-4 italic text-gray-600">
            {caseItem.quote}
          </blockquote>
        </div>
      </div>
    </section>
  );
}