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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>SMM Compact Dashboard</title>

  <!-- Tailwind -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Remix Icons -->
  <link
    href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css"
    rel="stylesheet"
  />

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

    *{
      font-family: 'Inter', sans-serif;
    }

    body{
      background:#f4f7fb;
    }

    .card{
      background:#fff;
      border:1px solid #edf1f7;
      border-radius:18px;
      transition:0.25s;
    }

    .card:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 25px rgba(15,23,42,0.05);
    }

    .progress-bar{
      height:8px;
      background:#e9eef5;
      border-radius:999px;
      overflow:hidden;
    }

    .progress-fill{
      height:100%;
      border-radius:999px;
    }
  </style>
</head>

<body class="p-3 md:p-5">

<div class="max-w-7xl mx-auto  px-0 py-4 md:p-2 lg:p-4">

  <!-- HEADER -->
  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5">

    <div>
      <h1 class="text-2xl font-bold text-gray-900">
        SMM Report
      </h1>

      <p class="text-sm text-gray-500 mt-1">
        Social Media Performance Overview
      </p>
    </div>

    <button class="h-10 px-4 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition flex items-center gap-2 w-fit">
      <i class="ri-download-2-line"></i>
      Export Report
    </button>

  </div>

  <!-- TOP STATS -->
  <div class="grid grid-cols-2 xl:grid-cols-4 gap-4 mb-5">

    <!-- CARD -->
    <div class="card p-4">

      <div class="flex items-center justify-between mb-4">

        <div class="w-11 h-11 rounded-xl bg-blue-50 flex items-center justify-center">
          <i class="ri-image-line text-blue-600 text-xl"></i>
        </div>

        <span class="text-xs font-semibold text-green-600 bg-green-50 px-2 py-1 rounded-full">
          +15%
        </span>

      </div>

      <p class="text-sm text-gray-500">
        Total Posts
      </p>

      <h2 class="text-3xl font-bold text-gray-900 mt-1">
        128
      </h2>

    </div>

    <!-- CARD -->
    <div class="card p-4">

      <div class="flex items-center justify-between mb-4">

        <div class="w-11 h-11 rounded-xl bg-pink-50 flex items-center justify-center">
          <i class="ri-video-line text-pink-600 text-xl"></i>
        </div>

        <span class="text-xs font-semibold text-green-600 bg-green-50 px-2 py-1 rounded-full">
          +8%
        </span>

      </div>

      <p class="text-sm text-gray-500">
        Reels
      </p>

      <h2 class="text-3xl font-bold text-gray-900 mt-1">
        48
      </h2>

    </div>

    <!-- CARD -->
    <div class="card p-4">

      <div class="flex items-center justify-between mb-4">

        <div class="w-11 h-11 rounded-xl bg-violet-50 flex items-center justify-center">
          <i class="ri-palette-line text-violet-600 text-xl"></i>
        </div>

        <span class="text-xs font-semibold text-green-600 bg-green-50 px-2 py-1 rounded-full">
          +18%
        </span>

      </div>

      <p class="text-sm text-gray-500">
        Graphics
      </p>

      <h2 class="text-3xl font-bold text-gray-900 mt-1">
        76
      </h2>

    </div>

    <!-- CARD -->
    <div class="card p-4">

      <div class="flex items-center justify-between mb-4">

        <div class="w-11 h-11 rounded-xl bg-orange-50 flex items-center justify-center">
          <i class="ri-megaphone-line text-orange-500 text-xl"></i>
        </div>

        <span class="text-xs font-semibold text-green-600 bg-green-50 px-2 py-1 rounded-full">
          +30%
        </span>

      </div>

      <p class="text-sm text-gray-500">
        Ads Run
      </p>

      <h2 class="text-3xl font-bold text-gray-900 mt-1">
        24
      </h2>

    </div>

  </div>

  <!-- PERFORMANCE -->
  <div class="card p-5 mb-5">

    <div class="flex items-center justify-between mb-5">

      <div>
        <h2 class="text-lg font-bold text-gray-900">
          Campaign Performance
        </h2>

        <p class="text-sm text-gray-500 mt-1">
          Monthly analytics overview
        </p>
      </div>

      <button class="w-9 h-9 rounded-xl bg-gray-100 hover:bg-gray-200 transition text-gray-500">
        <i class="ri-more-2-fill"></i>
      </button>

    </div>

    <div class="space-y-5">

      <!-- ROW -->
      <div>

        <div class="flex items-center justify-between mb-2">

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

            <div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center">
              <i class="ri-eye-line text-blue-600"></i>
            </div>

            <div>
              <h3 class="text-sm font-semibold text-gray-900">
                Total Reach
              </h3>

              <p class="text-xs text-gray-500">
                2,45,000 Users
              </p>
            </div>

          </div>

          <span class="text-sm font-bold text-green-600">
            +18%
          </span>

        </div>

        <div class="progress-bar">
          <div class="progress-fill bg-gradient-to-r from-blue-600 to-cyan-400 w-[70%]"></div>
        </div>

      </div>

      <!-- ROW -->
      <div>

        <div class="flex items-center justify-between mb-2">

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

            <div class="w-9 h-9 rounded-lg bg-green-50 flex items-center justify-center">
              <i class="ri-heart-pulse-line text-green-600"></i>
            </div>

            <div>
              <h3 class="text-sm font-semibold text-gray-900">
                Engagement
              </h3>

              <p class="text-xs text-gray-500">
                165,000 Interactions
              </p>
            </div>

          </div>

          <span class="text-sm font-bold text-green-600">
            +22%
          </span>

        </div>

        <div class="progress-bar">
          <div class="progress-fill bg-gradient-to-r from-emerald-500 to-green-300 w-[85%]"></div>
        </div>

      </div>

      <!-- ROW -->
      <div>

        <div class="flex items-center justify-between mb-2">

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

            <div class="w-9 h-9 rounded-lg bg-violet-50 flex items-center justify-center">
              <i class="ri-user-search-line text-violet-600"></i>
            </div>

            <div>
              <h3 class="text-sm font-semibold text-gray-900">
                Profile Visits
              </h3>

              <p class="text-xs text-gray-500">
                32,450 Visitors
              </p>
            </div>

          </div>

          <span class="text-sm font-bold text-green-600">
            +17%
          </span>

        </div>

        <div class="progress-bar">
          <div class="progress-fill bg-gradient-to-r from-violet-600 to-fuchsia-400 w-[55%]"></div>
        </div>

      </div>

      <!-- ROW -->
      <div>

        <div class="flex items-center justify-between mb-2">

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

            <div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center">
              <i class="ri-user-add-line text-orange-500"></i>
            </div>

            <div>
              <h3 class="text-sm font-semibold text-gray-900">
                Followers
              </h3>

              <p class="text-xs text-gray-500">
                8,250 New Followers
              </p>
            </div>

          </div>

          <span class="text-sm font-bold text-green-600">
            +11%
          </span>

        </div>

        <div class="progress-bar">
          <div class="progress-fill bg-gradient-to-r from-orange-500 to-amber-300 w-[42%]"></div>
        </div>

      </div>

    </div>

  </div>

  <!-- PLATFORM CARDS -->
  <div>

    <div class="flex items-center justify-between mb-4">

      <div>
        <h2 class="text-lg font-bold text-gray-900">
          Top Platforms
        </h2>

        <p class="text-sm text-gray-500">
          Best performing social media
        </p>
      </div>

    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">

      <!-- INSTAGRAM -->
      <div class="card p-4">

        <div class="flex items-center justify-between mb-5">

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

            <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-pink-500 via-red-500 to-yellow-400 flex items-center justify-center text-white text-xl">
              <i class="ri-instagram-line"></i>
            </div>

            <div>
              <h3 class="font-semibold text-gray-900">
                Instagram
              </h3>

              <p class="text-xs text-gray-500">
                +25% Growth
              </p>
            </div>

          </div>

        </div>

        <div class="space-y-3 text-sm">

          <div class="flex items-center justify-between">
            <span class="text-gray-500">Reach</span>
            <span class="font-bold text-gray-900">1.2M</span>
          </div>

          <div class="flex items-center justify-between">
            <span class="text-gray-500">Engagement</span>
            <span class="font-bold text-gray-900">95K</span>
          </div>

        </div>

      </div>

      <!-- FACEBOOK -->
      <div class="card p-4">

        <div class="flex items-center gap-3 mb-5">

          <div class="w-11 h-11 rounded-xl bg-blue-600 flex items-center justify-center text-white text-xl">
            <i class="ri-facebook-fill"></i>
          </div>

          <div>
            <h3 class="font-semibold text-gray-900">
              Facebook
            </h3>

            <p class="text-xs text-gray-500">
              +12% Growth
            </p>
          </div>

        </div>

        <div class="space-y-3 text-sm">

          <div class="flex items-center justify-between">
            <span class="text-gray-500">Reach</span>
            <span class="font-bold text-gray-900">850K</span>
          </div>

          <div class="flex items-center justify-between">
            <span class="text-gray-500">Engagement</span>
            <span class="font-bold text-gray-900">65K</span>
          </div>

        </div>

      </div>

      <!-- LINKEDIN -->
      <div class="card p-4">

        <div class="flex items-center gap-3 mb-5">

          <div class="w-11 h-11 rounded-xl bg-sky-700 flex items-center justify-center text-white text-xl">
            <i class="ri-linkedin-fill"></i>
          </div>

          <div>
            <h3 class="font-semibold text-gray-900">
              LinkedIn
            </h3>

            <p class="text-xs text-gray-500">
              +8% Growth
            </p>
          </div>

        </div>

        <div class="space-y-3 text-sm">

          <div class="flex items-center justify-between">
            <span class="text-gray-500">Reach</span>
            <span class="font-bold text-gray-900">150K</span>
          </div>

          <div class="flex items-center justify-between">
            <span class="text-gray-500">Engagement</span>
            <span class="font-bold text-gray-900">15K</span>
          </div>

        </div>

      </div>

      <!-- YOUTUBE -->
      <div class="card p-4">

        <div class="flex items-center gap-3 mb-5">

          <div class="w-11 h-11 rounded-xl bg-red-600 flex items-center justify-center text-white text-xl">
            <i class="ri-youtube-fill"></i>
          </div>

          <div>
            <h3 class="font-semibold text-gray-900">
              YouTube
            </h3>

            <p class="text-xs text-gray-500">
              +14% Growth
            </p>
          </div>

        </div>

        <div class="space-y-3 text-sm">

          <div class="flex items-center justify-between">
            <span class="text-gray-500">Reach</span>
            <span class="font-bold text-gray-900">100K</span>
          </div>

          <div class="flex items-center justify-between">
            <span class="text-gray-500">Engagement</span>
            <span class="font-bold text-gray-900">10K</span>
          </div>

        </div>

      </div>

    </div>

  </div>

</div>

</body>
</html>

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