import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Home",
  description: "Home — Kanban Board",
  openGraph: {
    title: "Home",
    description: "Home — Kanban Board",
  },
}

export default function Page() {
  return (
  <div className="min-w-0 min-h-screen bg-gray-100">
    <div className="flex flex-row flex-wrap gap-4 flex items-center justify-between px-8 py-4 bg-white border-b border-gray-200">
      <h1 className="text-4xl font-bold text-xl font-bold text-gray-900">Project Board</h1>
      <button className="inline-flex items-center justify-center font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition">Add Task</button>
    </div>
    <div className="flex flex-row flex-wrap items-start justify-start flex gap-6 p-8 overflow-x-auto">
      <div className="min-w-0 flex-shrink-0 w-80 bg-gray-50 rounded-xl p-4">
        <div className="flex flex-row flex-wrap gap-4 flex items-center justify-between mb-4">
          <h3 className="text-2xl font-semibold text-sm font-semibold text-gray-700 uppercase tracking-wide">To Do</h3>
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current bg-gray-200 text-gray-600 text-xs font-medium px-2 py-0.5 rounded-full">4</span>
        </div>
        <div className="bg-white p-4 rounded-lg border border-gray-200 mb-3 hover:shadow-md transition">
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current inline-block bg-purple-100 text-purple-700 text-xs font-medium px-2 py-0.5 rounded mb-2">Design</span>
          <p className="text-base font-medium text-gray-900 text-sm mb-1">Redesign onboarding flow</p>
          <p className="text-base text-gray-500 text-xs">Simplify the sign-up steps and reduce drop-off rate.</p>
        </div>
        <div className="bg-white p-4 rounded-lg border border-gray-200 mb-3 hover:shadow-md transition">
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current inline-block bg-green-100 text-green-700 text-xs font-medium px-2 py-0.5 rounded mb-2">Backend</span>
          <p className="text-base font-medium text-gray-900 text-sm mb-1">Add rate limiting to API</p>
          <p className="text-base text-gray-500 text-xs">Implement throttling middleware to prevent abuse.</p>
        </div>
      </div>
      <div className="min-w-0 flex-shrink-0 w-80 bg-gray-50 rounded-xl p-4">
        <div className="flex flex-row flex-wrap gap-4 flex items-center justify-between mb-4">
          <h3 className="text-2xl font-semibold text-sm font-semibold text-gray-700 uppercase tracking-wide">In Progress</h3>
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current bg-blue-100 text-blue-600 text-xs font-medium px-2 py-0.5 rounded-full">2</span>
        </div>
        <div className="bg-white p-4 rounded-lg border border-gray-200 mb-3 hover:shadow-md transition">
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current inline-block bg-blue-100 text-blue-700 text-xs font-medium px-2 py-0.5 rounded mb-2">Frontend</span>
          <p className="text-base font-medium text-gray-900 text-sm mb-1">Build dashboard components</p>
          <p className="text-base text-gray-500 text-xs">Implement stat cards, charts, and activity feed widgets.</p>
        </div>
        <div className="bg-white p-4 rounded-lg border border-gray-200 mb-3 hover:shadow-md transition">
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current inline-block bg-orange-100 text-orange-700 text-xs font-medium px-2 py-0.5 rounded mb-2">DevOps</span>
          <p className="text-base font-medium text-gray-900 text-sm mb-1">Set up CI/CD pipeline</p>
          <p className="text-base text-gray-500 text-xs">Configure GitHub Actions for automated testing and deployment.</p>
        </div>
      </div>
      <div className="min-w-0 flex-shrink-0 w-80 bg-gray-50 rounded-xl p-4">
        <div className="flex flex-row flex-wrap gap-4 flex items-center justify-between mb-4">
          <h3 className="text-2xl font-semibold text-sm font-semibold text-gray-700 uppercase tracking-wide">Done</h3>
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current bg-green-100 text-green-600 text-xs font-medium px-2 py-0.5 rounded-full">3</span>
        </div>
        <div className="bg-white p-4 rounded-lg border border-gray-200 mb-3 opacity-75">
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current inline-block bg-purple-100 text-purple-700 text-xs font-medium px-2 py-0.5 rounded mb-2">Design</span>
          <p className="text-base font-medium text-gray-900 text-sm mb-1 line-through">Create brand guidelines</p>
          <p className="text-base text-gray-500 text-xs">Define colors, typography, and logo usage rules.</p>