const NAV = [
  { key: 'home', label: 'El proyecto' },
  { key: 'plan', label: 'Master plan' },
  { key: 'productos', label: 'Lotes' },
  { key: 'contacto', label: 'Contacto' },
];

function SiteHeader({ route, go }) {
  const { Button } = NS;
  const [scrolled, setScrolled] = React.useState(false);
  const bare = route === 'home' && !scrolled;
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: bare ? 'transparent' : 'rgba(18,38,37,0.94)',
      backdropFilter: bare ? 'none' : 'blur(8px)',
      borderBottom: '1px solid ' + (bare ? 'transparent' : 'var(--line-inverse)'),
      transition: 'background var(--dur-base) var(--ease-brand)',
    }}>
      <div className="shell" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-5)', minHeight: 96 }}>
        <button onClick={() => go('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', gap: 14, flex: '0 0 auto' }}>
          <img src="../../assets/mark-beige-alpha.webp" alt="" style={{ height: 44, width: 'auto' }} />
          <img src="../../assets/wordmark-solo-pearl-alpha.webp" alt="Country Lakes" style={{ height: 15, width: 'auto' }} />
        </button>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-5)', flex: '1 1 auto', minWidth: 0, justifyContent: 'flex-end', flexWrap: 'wrap', rowGap: 'var(--space-2)' }}>
          {NAV.map((n) => (
            <button key={n.key} onClick={() => go(n.key)} style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0',
              fontFamily: 'var(--font-text)', fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-caps)',
              textTransform: 'uppercase', whiteSpace: 'nowrap',
              color: route === n.key ? 'var(--cl-beige-oscuro)' : 'var(--cl-blanco-perla)',
              borderBottom: '1px solid ' + (route === n.key ? 'var(--cl-beige-oscuro)' : 'transparent'),
            }}>{n.label}</button>
          ))}
          <Button variant="inverse" size="sm" onClick={() => go('contacto')}>Agendar visita</Button>
        </nav>
      </div>
    </header>
  );
}

function SiteFooter({ go }) {
  const { Divider } = NS;
  return (
    <footer style={{ background: 'var(--cl-dark-green)', color: 'var(--text-on-inverse-muted)', paddingTop: 'var(--space-9)' }}>
      <div className="shell">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 'var(--space-8)', paddingBottom: 'var(--space-8)' }}>
          <div>
            <img src="../../assets/logo-lockup-pearl-alpha.webp" alt="Country Lakes" style={{ width: 260, marginBottom: 'var(--space-5)' }} />
            <p style={{ margin: 0, fontSize: 'var(--fs-body-sm)', maxWidth: '34ch' }}>
              Más de 1,100 hectáreas de vida residencial, amenidades de lujo y golf en Mérida, Yucatán.
              Un desarrollo de Boma Desarrollos.
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ color: 'var(--cl-beige-oscuro)', marginBottom: 'var(--space-4)' }}>Explorar</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              {NAV.map((n) => (
                <button key={n.key} onClick={() => go(n.key)} style={{ background: 'none', border: 'none', padding: 0, textAlign: 'left', cursor: 'pointer', color: 'var(--text-on-inverse-muted)', fontFamily: 'var(--font-text)', fontSize: 'var(--fs-body-sm)' }}>{n.label}</button>
              ))}
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ color: 'var(--cl-beige-oscuro)', marginBottom: 'var(--space-4)' }}>Ventas</div>
            <div style={{ fontSize: 'var(--fs-body-sm)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <span>+52 999 000 0000</span>
              <span>ventas@countrylakes.mx</span>
              <span>Mérida · Yucatán · México</span>
            </div>
          </div>
        </div>
        <Divider tone="inverse" />
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 'var(--space-5) 0 var(--space-6)' }}>
          <span style={{ fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--cl-beige-oscuro)' }}>Boma Desarrollos</span>
          <img src="../../assets/mark-beige-alpha.webp" alt="" style={{ height: 36, width: 'auto', opacity: 0.9 }} />
          <span style={{ fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--cl-beige-oscuro)' }}>Country Lakes</span>
        </div>
      </div>
    </footer>
  );
}