'use client';

import { useState } from 'react';
import { useScroll, useMotionValueEvent } from 'framer-motion';
import { Wordmark } from '@/components/primitives/Wordmark';
import { CTA } from '@/components/primitives/CTA';
import { Container } from '@/components/primitives/Container';
import { ProgresoLectura } from '@/components/primitives/ProgresoLectura';
import { header } from '@/lib/content';

// The header tightens once the reader leaves the hero: less chrome, more page.
// Client component because the compaction needs scroll state on the <header>
// itself; there is no server-rendered data here to lose.
export function Header() {
  const [compacto, setCompacto] = useState(false);
  const { scrollY } = useScroll();

  useMotionValueEvent(scrollY, 'change', (y) => {
    // Hysteresis: compact past 120px, expand back below 60px, so a header
    // sitting exactly on the threshold doesn't flicker.
    setCompacto((actual) => (actual ? y > 60 : y > 120));
  });

  return (
    <header
      className={`sticky top-0 z-50 relative border-b border-azul-profundo/10 bg-white/80 backdrop-blur transition-[padding] duration-300 motion-reduce:transition-none ${
        compacto ? 'py-0' : 'py-3'
      }`}
    >
      <Container className="flex items-center justify-between">
        <a href="#top" aria-label="creeer — inicio" className="block transition-transform duration-300 origin-left motion-reduce:transition-none">
          <Wordmark size={compacto ? 'sm' : 'md'} />
        </a>
        <nav aria-label="Principal">
          <CTA href="#contacto" label={header.cta} variant="light" />
        </nav>
      </Container>
      <ProgresoLectura />
    </header>
  );
}