@extends('layouts.app')

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

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold mb-2">Analytics</h2>
        <p class="text-[#706f6c] dark:text-[#A1A09A]
            View your performance metrics and insights
        </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        @php
            $stats = [
                ['label' => 'Total Users', 'value' => '1,234', 'change' => '+12%'],
                ['label' => 'Revenue', 'value' => '$45,678', 'change' => '+8%'],
                ['label' => 'Active Projects', 'value' => '23', 'change' => '+5%'],
                ['label' => 'Completion Rate', 'value' => '94%', 'change' => '+2%'],
            ];
        @endphp

        @foreach($stats as $stat)
            <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg p-6">
                <p class="text-sm text-[#706f6c] dark:text-[#A1A09A] mb-1">{{ $stat['label'] }}</p>
                <div class="flex items-end justify-between">
                    <h3 class="text-2xl font-semibold">{{ $stat['value'] }}</h3>
                    <span class="text-sm text-green-600 $stat['change'] }}</span>
                </div>
            </div>
        @endforeach
    </div>

    <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg p-8">
        <h3 class="text-lg font-medium mb-4">Performance Overview</h3>
        <div class="text-center py-16">
            <svg class="w-16 h-16 mx-auto mb-4 text-[#706f6c] dark:text-[#A1A09A] fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
            </svg>
            <p class="text-[#706f6c] dark:text-[#A1A09A] visualization coming soon</p>
        </div>
    </div>
@endsection