'use client';

import { useEffect, useState } from 'react';
import { Wordmark } from '@/components/primitives/Wordmark';
import { CTA } from '@/components/primitives/CTA';
import { Container } from '@/components/primitives/Container';
import { header } from '@/lib/content';

export function Header() {
  // Sombra sutil cuando la página deja de estar arriba (concepto BenditaRed)
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header
      className={`sticky top-0 z-50 border-b bg-base/80 backdrop-blur transition-shadow duration-300 ${
        scrolled ? 'border-ink/10 shadow-[0_6px_24px_-18px_rgba(10,31,68,0.5)]' : 'border-ink/5'
      }`}
    >
      <Container className="flex items-center justify-between py-3">
        {/* #top: fragmento especial del navegador — scrollea al inicio sin necesitar un id */}
        <a href="#top" aria-label="creeer — inicio">
          <Wordmark size="md" />
        </a>
        <nav aria-label="Principal" className="flex items-center gap-8">
          {/* Anchors solo en desktop; en mobile el CTA basta (sin hamburguesa) */}
          <div className="hidden md:flex items-center gap-8">
            {header.nav.map((link) => (
              <a
                key={link.href}
                href={link.href}
                className="text-xs tracking-[0.2em] uppercase font-semibold text-muted transition-colors hover:text-gold-deep"
              >
                {link.label}
              </a>
            ))}
          </div>
          <CTA href="#contacto" label={header.cta} variant="light" />
        </nav>
      </Container>
    </header>
  );
}