@extends('layouts.layout')

@section('title', 'Constructor de Páginas')

@section('content')


<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         <!-- Card 1 - Purple Soft -->
  <div class="bg-white shadow rounded-lg p-5 border-l-4 border-[var(--color-sora-purple)] flex justify-between items-center">
    <div>
      <p class="text-gray-500 text-sm">Ventas del Mes</p>
      <p class="text-xl font-bold text-[var(--color-sora-gray)]">$125,430</p>
      <p class="text-[var(--color-sora-green)] text-xs mt-1">↑ 12.5%</p>
    </div>
    <div class="p-3 rounded-full bg-[var(--color-sora-purple)] text-white shadow-md">
      <x-dynamic-component :component="'lucide-book-open-check'" class="w-4 h-4"/>
    </div>
  </div>

  <!-- Card 2 - Red Gradient -->
  <div class="bg-gradient-to-br from-red-50 to-white shadow rounded-lg p-5 border-l-4 border-[var(--color-sora-red)] flex justify-between items-center">
    <div>
      <p class="text-gray-500 text-sm">Cuentas por Cobrar</p>
      <p class="text-xl font-bold text-[var(--color-sora-gray)]">$45,230</p>
      <p class="text-[var(--color-sora-red)] text-xs mt-1">↓ 8.2%</p>
    </div>
    <div class="p-3 rounded-full bg-[var(--color-sora-red)] text-white shadow-md">
      <x-dynamic-component :component="'lucide-banknote'" class="w-4 h-4"/>
    </div>
  </div>

  <!-- Card 3 - Orange Soft -->
  <div class="bg-white shadow rounded-lg p-5 border-l-4 border-[var(--color-sora-orange)] flex justify-between items-center">
    <div>
      <p class="text-gray-500 text-sm">Órdenes de Compra</p>
      <p class="text-xl font-bold text-[var(--color-sora-gray)]">156</p>
      <p class="text-[var(--color-sora-orange)] text-xs mt-1">↑ 5.1%</p>
    </div>
    <div class="p-3 rounded-full bg-[var(--color-sora-orange)] text-white shadow-md">
      <x-dynamic-component :component="'lucide-file-text'" class="w-4 h-4"/>
    </div>
  </div>

  <!-- Card 4 - Green Gradient -->
  <div class="bg-gradient-to-br from-green-50 to-white shadow rounded-lg p-5 border-l-4 border-[var(--color-sora-green)] flex justify-between items-center">
    <div>
      <p class="text-gray-500 text-sm">Clientes Activos</p>
      <p class="text-xl font-bold text-[var(--color-sora-gray)]">892</p>
      <p class="text-[var(--color-sora-green)] text-xs mt-1">↑ 3.2%</p>
    </div>
    <div class="p-3 rounded-full bg-[var(--color-sora-green)] text-white shadow-md">
      <x-dynamic-component :component="'lucide-users'" class="w-3 h-3"/>
    </div>
  </div>


       
        </div>

        <!-- Alertas y Actividad -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
          <!-- Alertas -->
          <div class="bg-white shadow rounded-lg p-5">
            <h2 class="font-semibold text-gray-700 mb-3">⚠️ Alertas Pendientes</h2>
            <ul class="space-y-2 text-gray-600">
              <li class="flex justify-between p-2 rounded hover:bg-gray-50">
                <div>
                  <p class="font-medium">Facturas por Vencer</p>
                  <p class="text-sm text-gray-400">12 facturas vencen esta semana</p>
                </div>
                <span class="text-yellow-500 font-bold">12</span>
              </li>
              <li class="flex justify-between p-2 rounded hover:bg-gray-50">
                <div>
                  <p class="font-medium">Pagos Pendientes</p>
                  <p class="text-sm text-gray-400">Proveedores esperando pago</p>
                </div>
                <span class="text-red-500 font-bold">8</span>
              </li>
              <li class="flex justify-between p-2 rounded hover:bg-gray-50">
                <div>
                  <p class="font-medium">Inventario Bajo</p>
                  <p class="text-sm text-gray-400">Productos requieren reorder</p>
                </div>
                <span class="text-yellow-500 font-bold">5</span>
              </li>
            </ul>
          </div>

          <!-- Actividad -->
          <div class="bg-white shadow rounded-lg p-5">
            <h2 class="font-semibold text-gray-700 mb-3">✔️ Actividad Reciente</h2>
            <ul class="space-y-2 text-gray-600">
              <li class="p-2 rounded hover:bg-gray-50">
                <p class="text-sm">Nueva orden de compra #1234</p>
                <p class="text-xs text-gray-400">Hace 2 horas</p>
              </li>
              <li class="p-2 rounded hover:bg-gray-50">
                <p class="text-sm">Factura #5678 pagada</p>
                <p class="text-xs text-gray-400">Hace 5 horas</p>
              </li>
              <li class="p-2 rounded hover:bg-gray-50">
                <p class="text-sm">Nuevo cliente registrado</p>
                <p class="text-xs text-gray-400">Hace 1 día</p>
              </li>
            </ul>
          </div>
        </div>

        sss <div className="flex min-h-screen items-center justify-center bg-muted">
      <div className="text-center">
        <h1 className="mb-4 text-4xl font-bold">404</h1>
        <p className="mb-4 text-xl text-muted-foreground">Oops! Page not found</p>
        <a href="/" className="text-primary underline hover:text-primary/90">
          Return to Home
        </a>
      </div>
    </div>

@endsection