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

// Check if already logged in via cookie for customers
if (!isset($_SESSION['customer_id']) && isset($_COOKIE['customer_login'])) {
    $phone = $_COOKIE['customer_login'];
    $stmt = $conn->prepare("SELECT id FROM customers WHERE phone = ?");
    $stmt->bind_param("s", $phone);
    $stmt->execute();
    $res = $stmt->get_result();
    if ($res->num_rows > 0) {
        $customer = $res->fetch_assoc();
        $_SESSION['customer_id'] = $customer['id'];
        $_SESSION['customer_phone'] = $phone;
        $_SESSION['role'] = 'customer';
    }
    $stmt->close();
}
?>
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Work For Sri Lanka | Connecting Talent with Opportunity</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; }
        .font-heading { font-family: 'Inter', sans-serif; }
        .glass {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .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);
        }
        .text-gradient {
            background: linear-gradient(to right, #818cf8, #34d399);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        @keyframes pop {
            0% { transform: scale(0.95); opacity: 0; }
            70% { transform: scale(1.05); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        .animate-pop {
            animation: pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        .brand-pop {
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: inline-block;
        }
        .brand-pop:hover {
            transform: scale(1.15);
        }
    </style>
</head>
<body class="bg-slate-950 text-slate-200 min-h-screen flex flex-col selection:bg-indigo-500 selection:text-white">
    
    <!-- Header / Navbar -->
    <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="brand-pop block">
                            <img src="assets/images/logo_banner.png" alt="Department of Manpower and Employment" class="h-12 md:h-16 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 md:text-2xl font-bold italic tracking-tighter text-white brand-pop block origin-left">
                            Work For <span class="text-indigo-400">Sri Lanka</span>
                        </a>
                    </div>
                </div>
                <!-- Desktop Nav -->
                <div class="hidden md:flex space-x-8 items-center">
                    <a href="<?= BASE_URL ?>/index.php" class="text-white hover:text-indigo-400 font-medium transition duration-300">Home</a>
                    <?php if(isset($_SESSION['customer_id'])): ?>
                        <a href="search.php" class="text-slate-400 hover:text-white font-medium transition duration-300">Find Workers</a>
                        <div class="h-6 w-px bg-slate-700"></div>
                        <span class="text-indigo-400 font-medium text-sm"><i data-lucide="user" class="w-4 h-4 inline mr-1"></i> <?= $_SESSION['customer_phone'] ?></span>
                        <a href="logout.php" class="text-slate-400 hover:text-red-400 font-medium transition duration-300">Logout</a>
                    <?php elseif(isset($_SESSION['role']) && $_SESSION['role'] === 'employee'): ?>
                        <a href="employee/dashboard.php" class="text-indigo-400 hover:text-indigo-300 font-medium transition">Worker Portal</a>
                        <div class="h-6 w-px bg-slate-700"></div>
                        <span class="text-slate-400 text-sm"><i data-lucide="user" class="w-4 h-4 inline mr-1"></i> <?= $_SESSION['username'] ?></span>
                        <a href="logout.php" class="ml-4 text-xs text-slate-500 hover:text-red-400 transition">Logout</a>
                    <?php else: ?>


                        <a href="dme/login.php" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl font-bold transition shadow-lg shadow-indigo-500/20 text-sm">DME Login</a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="relative pt-8 pb-20 lg:pt-12 lg:pb-32 overflow-hidden">
        <!-- Background Glows -->
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] bg-indigo-600/20 rounded-full blur-[120px] -z-10"></div>
        <div class="absolute bottom-0 right-0 w-[800px] h-[600px] bg-emerald-600/10 rounded-full blur-[100px] -z-10"></div>

        <div class="relative z-10 max-w-5xl mx-auto px-4 text-center">
            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 text-indigo-400 text-sm font-medium mb-8 animate-fade-in-up">
                <span class="relative flex h-2 w-2">
                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                  <span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
                </span>
                Connecting Professionals Across Sri Lanka
            </div>
            
            <h1 class="text-5xl md:text-7xl font-bold mb-8 leading-tight tracking-tight text-white drop-shadow-2xl">
                Discover Skilled <br/>
                <span class="text-gradient">Professionals Nearby</span>
            </h1>
            
            <p class="text-slate-400 text-lg md:text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
                The modern way to connect with reliable workers. From expert construction to daily tasks, find the right talent in your district instantly.
            </p>

            <!-- Search Box -->
            <div class="glass p-2 rounded-2xl max-w-3xl mx-auto shadow-2xl relative group">
                <div class="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-emerald-500 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-1000"></div>
                <form action="search.php" method="get" class="relative flex flex-col md:flex-row gap-2">
                    <div class="flex-1 relative">
                        <i data-lucide="briefcase" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500"></i>
                        <select name="category" class="w-full bg-slate-900/50 text-white h-[60px] pl-12 pr-6 rounded-xl border border-slate-700 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition outline-none appearance-none cursor-pointer hover:bg-slate-800/50">
                            <option value="" class="bg-slate-900">What service do you need?</option>
                            <?php
                            include_once 'categories.php';
                            $cats = get_job_categories();
                            foreach($cats as $c) echo "<option value='$c' class='bg-slate-900'>$c</option>";
                            ?>
                        </select>
                    </div>
                    <div class="flex-1 relative">
                        <i data-lucide="map-pin" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500"></i>
                        <select name="district" class="w-full bg-slate-900/50 text-white h-[60px] pl-12 pr-6 rounded-xl border border-slate-700 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition outline-none appearance-none cursor-pointer hover:bg-slate-800/50">
                            <option value="" class="bg-slate-900">Select Location</option>
                            <?php
                            include_once 'districts.php';
                            $districts = get_districts();
                            foreach(array_keys($districts) as $d) {
                                echo "<option value=\"$d\" class='bg-slate-900'>$d</option>";
                            }
                            ?></select>
                    </div>
                    <button type="submit" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold h-[60px] px-8 rounded-xl shadow-lg shadow-indigo-600/20 transition transform active:scale-95 flex items-center justify-center gap-2 md:w-auto w-full">
                        <i data-lucide="search" class="w-5 h-5"></i>
                        <span>Search</span>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Roles Section -->
    <div class="max-w-7xl mx-auto px-4 pb-24 relative z-20">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            <!-- For Customers -->
            <div class="glass-card p-10 rounded-3xl relative overflow-hidden group">
                <div class="absolute top-0 right-0 w-64 h-64 bg-purple-500/10 rounded-full blur-[80px] -mr-32 -mt-32 transition group-hover:bg-purple-500/20"></div>

                <div class="w-16 h-16 bg-slate-800/50 rounded-2xl flex items-center justify-center mb-6 text-purple-400 border border-slate-700 shadow-inner group-hover:scale-110 transition duration-300">
                    <i data-lucide="users" class="w-8 h-8"></i>
                </div>
                <h2 class="text-3xl font-bold text-white mb-4 flex flex-col gap-1">
                    <span>I am a Customer</span>
                    <span class="text-xl font-normal text-slate-400">මම පාරිභෝගිකයෙකි</span>
                </h2>
                <p class="text-slate-400 mb-8 text-lg leading-relaxed">Hire skilled workers for your daily tasks or projects. Browse verified profiles and get your work done easily.</p>
                <div class="flex flex-wrap gap-4">
                    <a href="customer_login.php" class="bg-purple-600 hover:bg-purple-500 text-white px-8 py-3.5 rounded-xl font-bold transition shadow-lg shadow-purple-600/20 flex items-center gap-2">
                        Customer Login <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- For Workers -->
            <div class="glass-card p-10 rounded-3xl relative overflow-hidden group">
                <div class="absolute top-0 right-0 w-64 h-64 bg-blue-500/10 rounded-full blur-[80px] -mr-32 -mt-32 transition group-hover:bg-blue-500/20"></div>
                
                <div class="w-16 h-16 bg-slate-800/50 rounded-2xl flex items-center justify-center mb-6 text-blue-400 border border-slate-700 shadow-inner group-hover:scale-110 transition duration-300">
                    <i data-lucide="hammer" class="w-8 h-8"></i>
                </div>
                <h2 class="text-3xl font-bold text-white mb-4 flex flex-col gap-1">
                    <span>I am a Worker</span>
                    <span class="text-xl font-normal text-slate-400">මම කම්කරුවෙකි</span>
                </h2>
                <p class="text-slate-400 mb-8 text-lg leading-relaxed">Create your professional profile, showcase your skills to thousands of employers, and get hired in your local area.</p>
                <div class="flex flex-wrap gap-4">
                    <a href="employee/register.php" class="bg-blue-600 hover:bg-blue-500 text-white px-8 py-3.5 rounded-xl font-bold transition shadow-lg shadow-blue-600/20 flex items-center gap-2">
                        Register Now <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </a>
                    <a href="employee/register.php?mode=login" class="px-8 py-3.5 rounded-xl font-bold text-slate-300 hover:text-white hover:bg-slate-800/50 transition border border-slate-700">Login</a>
                </div>
            </div>

            <!-- For Employers -->
            <div class="glass-card p-10 rounded-3xl relative overflow-hidden group">
                <div class="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-[80px] -mr-32 -mt-32 transition group-hover:bg-emerald-500/20"></div>

                <div class="w-16 h-16 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="briefcase" class="w-8 h-8"></i>
                </div>
                <h2 class="text-3xl font-bold text-white mb-4 flex flex-col gap-1">
                    <span>I am an Employer</span>
                    <span class="text-xl font-normal text-slate-400">මම සේවායෝජකයෙකි</span>
                </h2>
                <p class="text-slate-400 mb-8 text-lg leading-relaxed">Post job requirements, browse verified worker profiles, and manage your workforce efficiently and securely.</p>
                <div class="flex flex-wrap gap-4">
                    <a href="employer/register.php" class="bg-emerald-600 hover:bg-emerald-500 text-white px-8 py-3.5 rounded-xl font-bold transition shadow-lg shadow-emerald-600/20 flex items-center gap-2">
                        Create Account <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </a>
                    <a href="employer/register.php?mode=login" class="px-8 py-3.5 rounded-xl font-bold text-slate-300 hover:text-white hover:bg-slate-800/50 transition border border-slate-700">Login</a>
                </div>
            </div>

        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-slate-900 border-t border-slate-800 pt-16 pb-8 mt-auto">
        <div class="max-w-7xl mx-auto px-4">
             <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-6">
                <div class="text-center md:text-left">
                    <a href="<?= BASE_URL ?>/index.php" class="text-2xl font-bold italic tracking-tighter text-white">
                        Work For <span class="text-indigo-400">Sri Lanka</span>
                    </a>
                    <p class="text-slate-500 text-sm mt-3">Empowering the workforce of the nation with technology.</p>
                </div>
                <div class="flex flex-wrap justify-center gap-8 text-sm font-medium text-slate-400">
                    <a href="#" class="hover:text-indigo-400 transition">About Us</a>
                    <a href="#" class="hover:text-indigo-400 transition">Contact</a>
                    <a href="#" class="hover:text-indigo-400 transition">Privacy Policy</a>
                </div>
                <div class="flex gap-4">
                    <a href="admin/login.php" class="text-xs text-slate-600 hover:text-slate-400 transition">Admin</a>
                    <span class="text-slate-700">|</span>
                    <a href="dme/login.php" class="text-xs text-slate-600 hover:text-slate-400 transition">DME</a>
                </div>
             </div>
             <div class="border-t border-slate-800 pt-8 text-center text-slate-600 text-sm">
                <p>&copy; <?=date('Y')?> Work For Sri Lanka. All rights reserved.</p>
             </div>
        </div>
    </footer>

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