/* Footer.jsx — bilingual closer with newsletter + social */

function Footer() {
  return (
    <footer style={{ background: 'var(--navy-900)', color: 'var(--sand-50)', paddingTop: 56 }}>
      <style>{`
        .footer-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 32px;
          padding-bottom: 36px;
        }
        @media (min-width: 640px) {
          .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
        }
        @media (min-width: 1024px) {
          .footer-grid { grid-template-columns: 1.4fr repeat(4, 1fr) 1.2fr; gap: 32px; padding-bottom: 56px; }
        }
        @media (min-width: 1024px) {
          .footer-brand-col { grid-column: span 1; }
        }
      `}</style>
      <div className="container">
        <div className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <img src="../../assets/novus-logo-mark.jpg" style={{ height: 40, width: 'auto', borderRadius: 6 }} alt="Novus" />
              <span style={{
                fontWeight: 600, letterSpacing: '0.24em', fontSize: 14, color: '#fff',
              }}>NOVUS RESIDENTIALS</span>
            </div>
            <p style={{
              color: 'rgba(255,255,255,0.62)', fontSize: 14, lineHeight: 1.6,
              maxWidth: 320, marginTop: 16,
            }}>
              The art of refined hospitality. A curated collection across Miami, held to a single standard.
            </p>
          </div>

          <FooterColumn title="Stay with us" links={[
            { label: 'Villas', href: 'index.html#villas' },
            { label: 'Luxury Rentals', href: 'luxury-rentals.html' },
            { label: 'Experiences', href: 'experiences.html' },
            { label: 'Long stays', href: 'contact.html' },
          ]} />
          <FooterColumn title="Guests" links={[
            { label: 'Log in / Sign up', href: 'login.html' },
            { label: 'My Stay', href: '../guest-portal/index.html' },
            { label: 'Concierge', href: 'experiences.html' },
            { label: 'Check-in', href: 'check-in.html' },
            { label: 'House rules', href: 'legal.html#rules' },
            { label: 'Contact', href: 'contact.html' },
          ]} />
          <FooterColumn title="Neighborhoods" links={[
            { label: 'North Bay Village', href: 'north-bay-village.html' },
            { label: 'Miami Beach', href: 'miami-beach.html' },
            { label: 'Biscayne Bay', href: 'biscayne-bay.html' },
            { label: 'Brickell & Downtown', href: 'brickell-downtown.html' },
          ]} />
          <FooterColumn title="Work with us" links={[
            { label: 'Host Portal', href: '../admin/host-portal.html' },
            { label: 'Co-host', href: 'cohost.html' },
            { label: 'Negocio local', href: 'local-business.html' },
            { label: 'Proveedor de servicio', href: 'vendor.html' },
          ]} />

          <div>
            <div className="overline" style={{ color: 'var(--horizon-200)', marginBottom: 12 }}>Stay connected</div>
            <p style={{ color: 'rgba(255,255,255,0.62)', fontSize: 13, lineHeight: 1.55, marginTop: 0, marginBottom: 16 }}>
              <strong style={{ color: '#fff', fontWeight: 500 }}>Exclusive offers.</strong> Special discounts available only to subscribers.
            </p>
            <form onSubmit={e => e.preventDefault()} style={{
              display: 'flex', gap: 4,
              background: 'rgba(255,255,255,0.06)',
              borderRadius: 999, padding: 4,
              border: '1px solid rgba(165,207,230,0.2)',
              minWidth: 0,
              transition: 'border-color 240ms var(--ease-novus)',
            }}
              onFocus={e => e.currentTarget.style.borderColor = 'rgba(165,207,230,0.5)'}
              onBlur={e => e.currentTarget.style.borderColor = 'rgba(165,207,230,0.2)'}>
              <input
                type="email"
                placeholder="you@email.com"
                aria-label="Email address"
                style={{
                  flex: 1, minWidth: 0,
                  background: 'transparent', border: 0, outline: 'none',
                  color: '#fff',
                  padding: '10px 14px',
                  fontSize: 13,
                  fontFamily: 'var(--font-text)',
                }} />
              <button type="submit" className="btn btn-on-dark" style={{
                padding: '8px 16px', fontSize: 12,
                minHeight: 38,
                flexShrink: 0,
              }}>Subscribe</button>
            </form>

            <div style={{ display: 'flex', gap: 14, marginTop: 22, flexWrap: 'wrap' }}>
              {['Instagram', 'TikTok', 'YouTube', 'Facebook'].map(s => (
                <a key={s} href="#" style={{
                  fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: 'var(--horizon-200)', fontWeight: 600,
                  transition: 'color 200ms var(--ease-novus)',
                }}
                  onMouseEnter={e => e.target.style.color = '#fff'}
                  onMouseLeave={e => e.target.style.color = 'var(--horizon-200)'}>{s}</a>
              ))}
            </div>
          </div>
        </div>

        <div style={{ height: 1, background: 'rgba(165,207,230,0.18)' }} />

        <div style={{
          padding: '20px 0 32px', display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', flexWrap: 'wrap', gap: 16,
        }}>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', flexBasis: '100%', textAlign: 'center' }} className="footer-copy">
            © 2026 Novus Residentials · Miami, FL · <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>Nos vemos pronto.</em>
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', display: 'flex', gap: 20, flexWrap: 'wrap', justifyContent: 'center', flexBasis: '100%' }} className="footer-legal">
            <a href="legal.html#privacy">Privacy</a>
            <a href="legal.html#terms">Terms</a>
            <a href="legal.html#rules">House rules</a>
          </div>
        </div>
        <style>{`
          @media (min-width: 768px) {
            .footer-copy, .footer-legal { flex-basis: auto !important; text-align: left !important; }
          }
        `}</style>
      </div>
    </footer>
  );
}

function FooterColumn({ title, links }) {
  return (
    <div>
      <div className="overline" style={{ color: 'var(--horizon-200)', marginBottom: 16 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map(l => (
          <li key={l.label}><a href={l.href} style={{ fontSize: 14, color: 'rgba(255,255,255,0.78)' }}>{l.label}</a></li>
        ))}
      </ul>
    </div>
  );
}

const fStyle = {
  padding: '10px 14px', borderRadius: 10,
  border: '1px solid rgba(165,207,230,0.24)',
  background: 'rgba(255,255,255,0.06)',
  color: '#fff', fontSize: 13, outline: 'none',
  fontFamily: 'inherit',
};

window.Footer = Footer;