<?php include 'header.php'; ?>

<div class="min-h-screen bg-gray-100 p-6">
    
    <!-- Main Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">

        <!-- Header -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 p-6 border-b border-gray-200">
            
            <div>
                <h1 class="text-2xl font-bold text-gray-800">
                    Posts & Reels
                </h1>

                <!-- Tabs -->
                <div class="flex gap-6 mt-4 text-sm font-medium">
                    <button class="text-blue-600 border-b-2 border-blue-600 pb-2">
                        All
                    </button>

                    <button class="text-gray-500 hover:text-gray-700 pb-2">
                        Published
                    </button>

                    <button class="text-gray-500 hover:text-gray-700 pb-2">
                        Scheduled
                    </button>

                    <button class="text-gray-500 hover:text-gray-700 pb-2">
                        Pending
                    </button>

                    <button class="text-gray-500 hover:text-gray-700 pb-2">
                        Rejected
                    </button>
                </div>
            </div>

            <!-- Right Buttons -->
            <div class="flex items-center gap-3">

                <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 text-sm font-medium hover:bg-gray-100 transition">
                    Filter
                </button>

                <button class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-semibold transition">
                    + Create Reel
                </button>

            </div>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">

            <table class="w-full">

                <tbody class="divide-y divide-gray-200">

                    <!-- Row 1 -->
                    <tr class="hover:bg-gray-50 transition">

                        <td class="px-6 py-5">
                            <div class="flex items-center gap-4">

                                <img 
                                    src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=300&auto=format&fit=crop"
                                    class="w-16 h-16 rounded-xl object-cover"
                                    alt=""
                                >

                                <div>
                                    <h2 class="font-semibold text-gray-800 text-sm">
                                        5 Ways to Improve Your Business Growth
                                    </h2>

                                    <p class="text-gray-500 text-sm mt-1">
                                        Instagram Reel
                                    </p>
                                </div>

                            </div>
                        </td>

                        <td class="px-6 py-5">
                            <span class="px-3 py-1 text-xs font-semibold bg-green-100 text-green-700 rounded-full">
                                Published
                            </span>
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-600 whitespace-nowrap">
                            12 May 2025
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-800 font-semibold">
                            12.5K
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-800 font-semibold">
                            1.2K
                        </td>

                        <td class="px-6 py-5 text-right">
                            <button class="text-gray-400 hover:text-gray-700 text-xl">
                                ⋮
                            </button>
                        </td>

                    </tr>

                    <!-- Row 2 -->
                    <tr class="hover:bg-gray-50 transition">

                        <td class="px-6 py-5">
                            <div class="flex items-center gap-4">

                                <img 
                                    src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=300&auto=format&fit=crop"
                                    class="w-16 h-16 rounded-xl object-cover"
                                    alt=""
                                >

                                <div>
                                    <h2 class="font-semibold text-gray-800 text-sm">
                                        New Product Launch - Stay Tuned!
                                    </h2>

                                    <p class="text-gray-500 text-sm mt-1">
                                        Facebook Post
                                    </p>
                                </div>

                            </div>
                        </td>

                        <td class="px-6 py-5">
                            <span class="px-3 py-1 text-xs font-semibold bg-blue-100 text-blue-700 rounded-full">
                                Scheduled
                            </span>
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-600 whitespace-nowrap">
                            16 May 2025
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-400">
                            -
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-400">
                            -
                        </td>

                        <td class="px-6 py-5 text-right">
                            <button class="text-gray-400 hover:text-gray-700 text-xl">
                                ⋮
                            </button>
                        </td>

                    </tr>

                    <!-- Row 3 -->
                    <tr class="hover:bg-gray-50 transition">

                        <td class="px-6 py-5">
                            <div class="flex items-center gap-4">

                                <img 
                                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=300&auto=format&fit=crop"
                                    class="w-16 h-16 rounded-xl object-cover"
                                    alt=""
                                >

                                <div>
                                    <h2 class="font-semibold text-gray-800 text-sm">
                                        Behind The Scenes
                                    </h2>

                                    <p class="text-gray-500 text-sm mt-1">
                                        Instagram Reel
                                    </p>
                                </div>

                            </div>
                        </td>

                        <td class="px-6 py-5">
                            <span class="px-3 py-1 text-xs font-semibold bg-yellow-100 text-yellow-700 rounded-full">
                                Pending
                            </span>
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-600 whitespace-nowrap">
                            16 May 2025
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-400">
                            -
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-400">
                            -
                        </td>

                        <td class="px-6 py-5 text-right">
                            <button class="text-gray-400 hover:text-gray-700 text-xl">
                                ⋮
                            </button>
                        </td>

                    </tr>

                    <!-- Row 4 -->
                    <tr class="hover:bg-gray-50 transition">

                        <td class="px-6 py-5">
                            <div class="flex items-center gap-4">

                                <img 
                                    src="https://images.unsplash.com/photo-1556740749-887f6717d7e4?q=80&w=300&auto=format&fit=crop"
                                    class="w-16 h-16 rounded-xl object-cover"
                                    alt=""
                                >

                                <div>
                                    <h2 class="font-semibold text-gray-800 text-sm">
                                        Big Announcement Coming Soon
                                    </h2>

                                    <p class="text-gray-500 text-sm mt-1">
                                        LinkedIn Post
                                    </p>
                                </div>

                            </div>
                        </td>

                        <td class="px-6 py-5">
                            <span class="px-3 py-1 text-xs font-semibold bg-green-100 text-green-700 rounded-full">
                                Published
                            </span>
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-600 whitespace-nowrap">
                            10 May 2025
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-800 font-semibold">
                            8.3K
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-800 font-semibold">
                            990
                        </td>

                        <td class="px-6 py-5 text-right">
                            <button class="text-gray-400 hover:text-gray-700 text-xl">
                                ⋮
                            </button>
                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>

<?php include 'footer.php'; ?>