/* Rotunda — Hero (imagen única: PORTADA-2) */

function HeroSlideshow({ onProductClick, onNavigate }) {
  return (
    <section className="hero-ss" id="inicio">
      <div className="hero-slide active">
        <div className="hero-slide-bg">
          <image-slot id="hero-1" src="uploads/PORTADA-2.jpg" shape="rect"
            placeholder="HERO · Imagen principal"
            style={{ position: "absolute", inset: "0", width: "100%", height: "100%", "--slot-bg": "#8a8070", "--slot-color": "rgba(241,238,232,0.7)", "--slot-border": "rgba(241,238,232,0.3)" }}
          ></image-slot>
        </div>
        <div className="hero-slide-overlay"></div>
        <div className="hero-slide-content">
          <h1 className="hero-slide-title">
            <span className="hs-line">Lo rotundo</span>
            <span className="hs-line hs-it">permanece.</span>
          </h1>
          <p className="hero-slide-sub">Objetos para tu espacio.</p>
          <button className="hero-slide-cta" onClick={() => (onNavigate ? onNavigate("catalog", "todas") : onProductClick && onProductClick("siena"))}>
            Explorar catálogo <span className="cta-arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

window.HeroSlideshow = HeroSlideshow;