function Hero({ variant = 'manifiesto' }) {
  const time = new Date().toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit', hour12: false });

  return (
    <section className="hero" id="top">
      <div className="hero__grid-bg" />

      <div className="hero__top">
        <div className="hero__location">
          <span><span className="hero__live-dot" />En el estudio · {time}</span>
          <strong>Studio boutique de branding y diseño de producto</strong>
        </div>
        <div className="hero__location" style={{ textAlign: 'right' }}>
          <span>EST. 2024 · Independent</span>
          <strong>♠ ♥ ♦ ♣ — Las 4 fuerzas</strong>
        </div>
      </div>

      <div className="hero__main">
        {variant === 'manifiesto' && (
          <h1 className="hero__title">
            <span className="row"><span>Diseño con</span></span>
            <span className="row"><span><em>intención.</em></span></span>
            <span className="row"><span>Sin azar.<span className="small-suit">♠ ♥ ♦ ♣</span></span></span>
          </h1>
        )}
        {variant === 'jugada' && (
          <h1 className="hero__title">
            <span className="row"><span>La jugada</span></span>
            <span className="row"><span><em>maestra</em> de</span></span>
            <span className="row"><span>tu marca.</span></span>
          </h1>
        )}
        {variant === 'imbatible' && (
          <h1 className="hero__title">
            <span className="row"><span>Una mano</span></span>
            <span className="row"><span><em>imbatible</em></span></span>
            <span className="row"><span>se construye.</span></span>
          </h1>
        )}
      </div>

      <div className="hero__bottom">
        <p className="hero__lede">
          Construimos <strong>sistemas de marca y producto</strong> para startups y pymes que quieren dejar de ser una más. Tú pones el propósito; nosotros, las otras tres cartas.
        </p>
        <a href="#contacto" className="hero__cta" data-hover>
          <span>Iniciar proyecto</span>
          <span className="hero__cta-arrow">→</span>
        </a>
      </div>

      <div className="hero__scroll">
        <span>Scroll</span>
        <span className="hero__scroll-line" />
        <span>↓</span>
      </div>
    </section>
  );
}
window.Hero = Hero;