<script>
    import './Header.css'
    import Button from '../Button/Button.svelte'

    let activeNav = 'home'

    function navigate(section) {
        activeNav = section
    }
</script>

<header class="header" id="home">
    <div class="header-container">
        <div class="logo">
            <a href="/" aria-label="CIMA PROGETTI home">
                <span class="logo-img logo-mask" aria-hidden="true"></span>
            </a>
        </div>
        <nav class="nav">
            <a
                href="#services"
                class:active={activeNav === 'services'}
                on:click|preventDefault={() => navigate('services')}
                aria-current={activeNav === 'services' ? 'page' : undefined}
            >
                Servizi
            </a>
            <a
                href="#method"
                class:active={activeNav === 'method'}
                on:click|preventDefault={() => navigate('method')}
                aria-current={activeNav === 'method' ? 'page' : undefined}
            >
                Il metodo
            </a>
            <a
                href="#projects"
                class:active={activeNav === 'projects'}
                on:click|preventDefault={() => navigate('projects')}
                aria-current={activeNav === 'projects' ? 'page' : undefined}
            >
                Progetti
            </a>
            <a
                href="#us"
                class:active={activeNav === 'us'}
                on:click|preventDefault={() => navigate('us')}
                aria-current={activeNav === 'us' ? 'page' : undefined}
            >
                Chi Siamo
            </a>
        </nav>
        <div class="header-actions">
            <Button text="Contattaci" href="#contact" />
        </div>
    </div>
</header>