apps/web/src/components/layout/Navbar.tsx

import { Link } from 'react-router-dom';
import { BookOpen, ArrowRight } from 'lucide-react';

const WA_NUMBER = import.meta.env.VITE_WHATSAPP_NUMBER || 'VITE_WHATSAPP_NUMBER_MISSING';

export function Navbar() {
    return (
        <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between items-center h-20">
                    <Link to="/" className="flex items-center space-x-2 group">
                        <div className="bg-primary/10 p-2 rounded-xl group-hover:bg-primary/20 transition-colors">
                            <BookOpen className="h-6 w-6 text-primary" />
                        </div>
                        <span className="font-heading font-bold text-2xl text-secondary tracking-tight">Xamlé<span className="text-primary"> Studio</span></span>
                    </Link>
                    <div className="flex items-center space-x-4">
                        <Link to="/student" className="text-secondary font-medium hover:text-primary transition-colors">Mon espace</Link>
                        <a href={`https://wa.me/${WA_NUMBER}?text=INSCRIPTION`} target="_blank" rel="noreferrer"
                            className="bg-primary text-white px-5 py-2.5 rounded-full font-medium hover:bg-emerald-700 hover:shadow-lg hover:shadow-primary/30 transition-all active:scale-95 hidden sm:inline-flex items-center">
                            Commencer <ArrowRight className="ml-2 w-4 h-4" />
                        </a>
                    </div>
                </div>
            </div>
        </nav>
    );
}