<?php
session_start();
include 'db_config.php';

// Check if customer is logged in
if (!isset($_SESSION['customer_id']) || $_SESSION['role'] !== 'customer') {
    header("Location: customer_login.php");
    exit();
}

$customer_name = $_SESSION['customer_name'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customer Dashboard | Work For Sri Lanka</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        body { font-family: 'Inter', sans-serif; }
        .glass-card {
            background: rgba(30, 41, 59, 0.4);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }
        .glass-card:hover {
            background: rgba(30, 41, 59, 0.6);
            border-color: rgba(99, 102, 241, 0.5);
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        }
    </style>
</head>
<body class="bg-slate-950 text-slate-200 min-h-screen flex flex-col relative overflow-hidden">
    <!-- Background elements -->
    <div class="absolute top-[-20%] right-[-10%] w-[500px] h-[500px] bg-indigo-600/10 rounded-full blur-[100px] pointer-events-none z-0"></div>
    <div class="absolute bottom-[-20%] left-[-10%] w-[500px] h-[500px] bg-emerald-600/10 rounded-full blur-[100px] pointer-events-none z-0"></div>

    <!-- Header -->
    <nav class="bg-slate-900/50 backdrop-blur-md border-b border-slate-800 sticky top-0 z-50">
        <div class="w-full px-4 sm:px-6 lg:px-12">
            <div class="flex justify-between h-20 items-center">
                <div class="flex items-center gap-6">
                    <div class="flex-shrink-0 flex items-center">
                        <a href="<?= BASE_URL ?>/index.php" class="block">
                            <img src="assets/images/logo_banner.png" alt="Department of Manpower and Employment" class="h-12 object-contain">
                        </a>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="h-8 w-px bg-slate-700 mx-2 hidden md:block"></div>
                        <a href="<?= BASE_URL ?>/index.php" class="text-xl font-bold italic tracking-tighter text-white block origin-left">
                            Work For <span class="text-indigo-400">Sri Lanka</span>
                        </a>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-slate-300 text-sm"><i data-lucide="user" class="w-4 h-4 inline mr-1"></i> <?= htmlspecialchars($customer_name) ?></span>
                    <a href="logout.php" class="text-xs px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 transition">Logout</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Content -->
    <div class="flex-1 max-w-5xl mx-auto w-full px-4 py-16 relative z-10">
        <div class="text-center mb-16">
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Welcome, <?= htmlspecialchars($customer_name) ?>!</h1>
            <p class="text-slate-400 text-lg">What would you like to do today?</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            
            <!-- Option 1: Search Workers -->
            <a href="search.php?category=&district=" class="glass-card p-10 rounded-3xl relative overflow-hidden group block text-center">
                <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-[80px] -mr-32 -mt-32 transition group-hover:bg-indigo-500/20"></div>
                
                <div class="w-20 h-20 mx-auto bg-slate-800/50 rounded-2xl flex items-center justify-center mb-6 text-indigo-400 border border-slate-700 shadow-inner group-hover:scale-110 transition duration-300">
                    <i data-lucide="search" class="w-10 h-10"></i>
                </div>
                <h2 class="text-2xl font-bold text-white mb-4">Find & Search Workers</h2>
                <p class="text-slate-400 mb-8 leading-relaxed">Browse verified worker profiles directly and contact them for your needs.</p>
                <div class="inline-flex bg-indigo-600 group-hover:bg-indigo-500 text-white px-8 py-3.5 rounded-xl font-bold transition shadow-lg shadow-indigo-600/20 items-center gap-2">
                    Search Now <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </div>
            </a>

            <!-- Option 2: Request Worker -->
            <a href="customer_post_job.php" class="glass-card p-10 rounded-3xl relative overflow-hidden group block text-center">
                <div class="absolute top-0 left-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-[80px] -ml-32 -mt-32 transition group-hover:bg-emerald-500/20"></div>
                
                <div class="w-20 h-20 mx-auto bg-slate-800/50 rounded-2xl flex items-center justify-center mb-6 text-emerald-400 border border-slate-700 shadow-inner group-hover:scale-110 transition duration-300">
                    <i data-lucide="clipboard-list" class="w-10 h-10"></i>
                </div>
                <h2 class="text-2xl font-bold text-white mb-4">Request a Worker (Post Job)</h2>
                <p class="text-slate-400 mb-8 leading-relaxed">Post your specific task requirements and let available workers contact you.</p>
                <div class="inline-flex bg-emerald-600 group-hover:bg-emerald-500 text-white px-8 py-3.5 rounded-xl font-bold transition shadow-lg shadow-emerald-600/20 items-center gap-2">
                    Post a Request <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </div>
            </a>

        </div>
    </div>

    <script>
        lucide.createIcons();
    </script>
</body>
</html>
