<?php
/**
 * uLesson Theme Header Template
 */
if ( ! defined( 'ABSPATH' ) ) { exit; }
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="light">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body <?php body_class( 'text-on-background min-h-screen bg-background antialiased' ); ?>>

    <header class="fixed top-0 left-0 right-0 z-40 bg-white shadow-[0px_4px_20px_rgba(48,20,70,0.05)] flex justify-between items-center w-full px-6 md:px-12 h-16">
        <div class="flex items-center gap-4">
            <span class="text-xl font-extrabold text-primary tracking-tight"><?php bloginfo( 'name' ); ?></span>
        </div>

        <div class="flex items-center gap-6">
            <div class="hidden md:flex items-center bg-gray-100 rounded-full px-4 py-2 gap-2 w-64">
                <span class="material-symbols-outlined text-gray-500">search</span>
                <input class="bg-transparent border-none focus:ring-0 text-sm w-full placeholder:text-gray-400" placeholder="Search courses..." type="text"/>
            </div>
            <div class="flex items-center gap-4 text-primary">
                <button class="material-symbols-outlined p-2 hover:bg-gray-100 rounded-full transition-colors">notifications</button>
                <button class="material-symbols-outlined p-2 hover:bg-gray-100 rounded-full transition-colors">account_circle</button>
            </div>
        </div>
    </header>