@extends('layouts.app')

@section('title', 'Projects - ' . config('app.name'))

@section('content')
    <div class="mb-8 flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-semibold mb-2">Projects</h2>
            <p class="text-[#706f6c] dark:text-[#A1A09A]
                Manage and track your projects
            </p>
        </div>
        <button class="px-5 py-2.5 bg-white dark:bg-[#161615] text-white dark:text-[#1b1b18] border border-[#1b1b18] hover:bg-[#FDFDFC] dark:bg-[#0a0a0a] rounded-sm text-sm font-medium transition-all">
            New Project
        </button>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @for($i = 1; $i <= 6; $i++)
            <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg p-6">
                <h3 class="text-lg font-medium mb-2">Project {{ $i }}</h3>
                <p class="text-sm text-[#706f6c] dark:text-[#A1A09A] mb-4">
                    Sample project description goes here. This is a placeholder for your actual project.
                </p>
                <div class="flex items-center justify-between">
                    <span class="text-xs px-2 py-1 bg-[#e3e3e0] rounded-sm">In Progress</span>
                    <a href="#" class="text-sm text-[#1b1b18] dark:text-[#EDEDEC] hover:underline font-medium">View →</a>
                </div>
            </div>
        @endfor
    </div>
@endsection