// Reusable brand chrome
const Logo = ({ inverse }) => (
  <div style={{ display: 'flex', alignItems: 'baseline', gap: 0 }}>
    <span className="serif" style={{ fontSize: 22, fontWeight: 600, color: inverse ? 'var(--bone)' : 'var(--ink)', letterSpacing: '-0.02em' }}>Renta</span>
    <span className="serif" style={{ fontSize: 22, fontWeight: 600, color: inverse ? 'var(--terracotta)' : 'var(--terracotta)', letterSpacing: '-0.02em' }}>real</span>
    <span className="mono" style={{ fontSize: 11, color: inverse ? 'var(--bone)' : 'var(--ink-2)', marginLeft: 4, transform: 'translateY(-6px)', display: 'inline-block' }}>.mx</span>
  </div>
);

const Nav = () => (
  <nav style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 48px', borderBottom: '1px solid var(--line)', background: 'rgba(245,239,227,0.85)', backdropFilter: 'blur(8px)', position: 'sticky', top: 0, zIndex: 10 }}>
    <Logo />
    <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
      <a style={{ color: 'var(--ink)', textDecoration: 'none', fontSize: 14 }} href="#">Cómo funciona</a>
      <a style={{ color: 'var(--ink)', textDecoration: 'none', fontSize: 14 }} href="#">Para inquilinos</a>
      <a style={{ color: 'var(--ink)', textDecoration: 'none', fontSize: 14 }} href="#">Para arrendadores</a>
      <a style={{ color: 'var(--ink)', textDecoration: 'none', fontSize: 14 }} href="#">Verificar dirección</a>
      <a style={{ color: 'var(--ink)', textDecoration: 'none', fontSize: 14 }} href="#">Historia</a>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>ES · <span style={{ color: 'var(--ink)' }}>EN</span></span>
      <button className="btn btn-secondary" style={{ padding: '8px 18px', fontSize: 14 }}>Iniciar sesión</button>
      <button className="btn btn-cta" style={{ padding: '10px 20px', fontSize: 14 }}>Verificar ahora</button>
    </div>
  </nav>
);

const Footer = () => (
  <footer style={{ background: 'var(--ink)', color: 'var(--cream)', padding: '64px 48px 32px' }}>
    <div className="tile-divider" style={{ marginBottom: 48, marginLeft: -48, marginRight: -48, marginTop: -64 }}></div>
    <div style={{ paddingTop: 48, display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48 }}>
      <div>
        <Logo inverse />
        <p className="serif" style={{ fontSize: 18, marginTop: 18, lineHeight: 1.4, color: 'var(--cream-2)' }}>
          La renta honesta. <br/>Hecha en México.
        </p>
        <div style={{ marginTop: 24, display: 'flex', gap: 12, alignItems: 'center' }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)' }}>ALIADOS</span>
          <span className="mono" style={{ fontSize: 11, color: 'var(--cream-2)', opacity: 0.6 }}>RPP · CONDUSEF · STP · INE</span>
        </div>
      </div>
      <div>
        <div className="eyebrow" style={{ color: 'var(--ink-3)', marginBottom: 14 }}>Producto</div>
        <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <li><a style={{ color: 'var(--cream-2)', textDecoration: 'none', fontSize: 14 }}>Verificar propiedad</a></li>
          <li><a style={{ color: 'var(--cream-2)', textDecoration: 'none', fontSize: 14 }}>Custodia (escrow)</a></li>
          <li><a style={{ color: 'var(--cream-2)', textDecoration: 'none', fontSize: 14 }}>Contrato digital</a></li>
          <li><a style={{ color: 'var(--cream-2)', textDecoration: 'none', fontSize: 14 }}>Sello de confianza</a></li>
        </ul>
      </div>
      <div>
        <div className="eyebrow" style={{ color: 'var(--ink-3)', marginBottom: 14 }}>Empresa</div>
        <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <li><a style={{ color: 'var(--cream-2)', textDecoration: 'none', fontSize: 14 }}>Historia</a></li>
          <li><a style={{ color: 'var(--cream-2)', textDecoration: 'none', fontSize: 14 }}>Manifiesto</a></li>
          <li><a style={{ color: 'var(--cream-2)', textDecoration: 'none', fontSize: 14 }}>Prensa</a></li>
          <li><a style={{ color: 'var(--cream-2)', textDecoration: 'none', fontSize: 14 }}>Contacto</a></li>
        </ul>
      </div>
      <div>
        <div className="eyebrow" style={{ color: 'var(--ink-3)', marginBottom: 14 }}>Legal</div>
        <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <li><a style={{ color: 'var(--cream-2)', textDecoration: 'none', fontSize: 14 }}>Aviso de privacidad</a></li>
          <li><a style={{ color: 'var(--cream-2)', textDecoration: 'none', fontSize: 14 }}>Términos</a></li>
          <li><a style={{ color: 'var(--cream-2)', textDecoration: 'none', fontSize: 14 }}>Reportar fraude</a></li>
        </ul>
      </div>
    </div>
    <div style={{ marginTop: 56, paddingTop: 24, borderTop: '1px solid rgba(245,239,227,0.1)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>© 2026 Rentareal · CDMX, MX</span>
      <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>Hecho con calma. Verificado con rigor.</span>
    </div>
  </footer>
);

Object.assign(window, { Logo, Nav, Footer });