function FooterLink({ label, href, onClick }) {
  const [hovered, setHovered] = React.useState(false);
  const style = {
    fontFamily: 'var(--font-primary)', fontSize: '14px', fontWeight: 400,
    color: hovered ? 'var(--color-perla)' : 'rgba(248,247,242,0.5)',
    cursor: 'pointer', marginBottom: '10px',
    transition: 'color 150ms ease', textDecoration: 'none', display: 'block',
    border: 'none', background: 'none', padding: 0, textAlign: 'left', font: 'inherit',
  };
  const ev = { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false) };
  if (href) return <a href={href} target={href.startsWith('http') ? '_blank' : undefined} rel="noreferrer" style={style} {...ev}>{label}</a>;
  return <button onClick={onClick} style={style} {...ev}>{label}</button>;
}

function Footer({ onNavigate }) {
  return (
    <footer style={{
      background: 'var(--color-negro)',
      borderTop: '1px solid rgba(248,247,242,0.08)',
      padding: '72px 0 36px',
    }}>
      <div className="calmaeta-container" style={{ maxWidth: '1100px', margin: '0 auto' }}>

        {/* Top row */}
        <div className="calmaeta-footer-top" style={{ marginBottom: '72px' }}>
          {/* Brand */}
          <div style={{ maxWidth: '240px' }}>
            <button onClick={() => onNavigate('home')} style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 0, display: 'block', marginBottom: '16px' }}>
              <img
                src="assets/logos/logo-principal-blanco.svg" alt="Calmaeta"
                style={{ height: 'clamp(64px, 14vw, 92px)', width: 'auto' }}
              />
            </button>
            <p style={{
              fontFamily: 'var(--font-primary)', fontSize: '13px', fontWeight: 400,
              color: 'rgba(248,247,242,0.45)', margin: 0, lineHeight: 1.65,
            }}>
              Café de especialidad.<br />Av. l'Horta, 27, Picanya, Valencia.
            </p>
          </div>

          {/* Links */}
          <div className="calmaeta-footer-links">
            <div>
              <div style={{ fontFamily: 'var(--font-primary)', fontSize: '10px', fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(248,247,242,0.3)', marginBottom: '18px' }}>Carta</div>
              {['Café', 'Frío', 'Para picar', 'Más'].map(l => <FooterLink key={l} label={l} onClick={() => onNavigate('carta')} />)}
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-primary)', fontSize: '10px', fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(248,247,242,0.3)', marginBottom: '18px' }}>Calmaeta</div>
              <FooterLink label="Nuestra historia" onClick={() => onNavigate('nosotros')} />
              <FooterLink label="El espacio" onClick={() => onNavigate('espacio')} />
              <FooterLink label="Horarios" onClick={() => onNavigate('contacto')} />
              <FooterLink label="Cómo llegar" href="https://www.google.com/maps/dir/?api=1&destination=Av.+l%27Horta+27%2C+46210+Picanya%2C+Valencia%2C+Spain" />
              <FooterLink label="WhatsApp" href="https://wa.me/34662332120" />
              <FooterLink label="@calmaeta.coffee" href="https://www.instagram.com/calmaeta.coffee" />
            </div>
          </div>

          {/* Hours */}
          <div>
            <div style={{ fontFamily: 'var(--font-primary)', fontSize: '10px', fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(248,247,242,0.3)', marginBottom: '18px' }}>Horario</div>
            {[
              ['Lunes', 'Cerrado'],
              ['Martes', '8:30–13:30, 16:00–20:00'],
              ['Miércoles', '8:30–13:30, 16:00–20:00'],
              ['Jueves', '8:30–13:30, 16:00–20:00'],
              ['Viernes', '8:30–13:30, 16:00–20:00'],
              ['Sábado', '9:00–13:30, 17:00–20:00'],
              ['Domingo', '9:00–14:00'],
            ].map(([day, hours]) => (
              <div key={day} style={{ display: 'flex', gap: '16px', marginBottom: '8px' }}>
                <span style={{ fontFamily: 'var(--font-primary)', fontSize: '13px', fontWeight: 400, color: 'rgba(248,247,242,0.35)', width: '90px' }}>{day}</span>
                <span style={{ fontFamily: 'var(--font-primary)', fontSize: '13px', fontWeight: 300, color: 'rgba(248,247,242,0.65)' }}>{hours}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Bottom row */}
        <div className="calmaeta-footer-bottom" style={{
          paddingTop: '24px', borderTop: '1px solid rgba(248,247,242,0.08)',
        }}>
          <span style={{ fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 400, color: 'rgba(248,247,242,0.28)', letterSpacing: '0.04em' }}>
            © 2026 Calmaeta · Picanya, Valencia
          </span>
          <span style={{ fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 400, color: 'rgba(248,247,242,0.28)', letterSpacing: '0.04em' }}>
            Diseño del espacio:{' '}
            <a href="https://nouraestudio.es/" target="_blank" rel="noreferrer" style={{ color: 'rgba(248,247,242,0.5)', textDecoration: 'none' }}>Noura Estudio</a>
            {' '}·{' '}Fotografía:{' '}
            <a href="https://www.instagram.com/maria_mira/" target="_blank" rel="noreferrer" style={{ color: 'rgba(248,247,242,0.5)', textDecoration: 'none' }}>María Mira</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });