/* Hero.jsx */
function Hero({ name, slogan, showStats }) {
  return (
    <section id="top" className="dark-band" style={{
      position: "relative", background: "var(--dark)", color: "var(--on-dark)",
      paddingTop: 84, overflow: "hidden",
    }}>
      {/* background image slot — RS Constructora's own New Holland W170B; user can drop another */}
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        <image-slot id="hero-bg" shape="rect" fit="cover"
          src="assets/photos/hero-loader.png"
          style={{ width: "100%", height: "100%" }}
          placeholder="Arrastrá acá una foto de obra (panorámica)"></image-slot>
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, color-mix(in srgb,var(--dark) 34%,transparent) 0%, color-mix(in srgb,var(--dark) 14%,transparent) 30%, color-mix(in srgb,var(--dark) 58%,transparent) 76%, var(--dark) 100%)",
        }} />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(90deg, color-mix(in srgb,var(--dark) 90%,transparent) 0%, color-mix(in srgb,var(--dark) 58%,transparent) 44%, transparent 82%)",
        }} />
      </div>

      <div className="wrap" style={{ position: "relative", zIndex: 1, paddingBlock: "clamp(70px,12vw,150px)" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <span className="display" style={{
            fontSize: "clamp(1.5rem,3.4vw,2.6rem)", color: "var(--on-dark)",
            lineHeight: 1, letterSpacing: "0",
          }}>
            RS <span style={{ color: "var(--accent)" }}>Vial</span> Constructora
          </span>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: "clamp(.92rem,1.5vw,1.2rem)",
            fontWeight: 500, letterSpacing: ".14em", textTransform: "uppercase",
            color: "var(--accent)", display: "inline-flex", alignItems: "center", gap: ".7em",
          }}>
            <span style={{ width: 32, height: 2, background: "var(--accent)" }} />
            Obra pública y privada
          </span>
        </div>
        <h1 className="display" style={{
          fontSize: "clamp(2.8rem,8vw,6.4rem)", marginTop: 22, maxWidth: 16 + "ch",
          color: "var(--on-dark)",
        }}>{slogan}</h1>
        <p style={{
          marginTop: 26, fontSize: "clamp(1.05rem,1.6vw,1.3rem)", maxWidth: 600,
          color: "var(--on-dark-2)", lineHeight: 1.6,
        }}>
          Movimiento de suelos, pavimentos de hormigón y asfalto, adoquinado, infraestructura,
          tendido de redes de servicios y mantenimiento. Ejecutamos cada obra con equipos propios
          y plazos que se cumplen.
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 14, marginTop: 38 }}>
          <a href="#contacto" onClick={(e) => { e.preventDefault(); scrollToId("contacto"); }} className="btn btn-accent">
            Solicitar presupuesto <Arrow />
          </a>
          <a href="#obras" onClick={(e) => { e.preventDefault(); scrollToId("obras"); }} className="btn btn-ghost on-dark">
            Ver obras realizadas
          </a>
        </div>
      </div>

      {/* stat strip */}
      {showStats && (
        <div style={{ position: "relative", zIndex: 1, borderTop: "1px solid var(--line-dark)" }}>
          <div className="wrap" style={{
            display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(150px,1fr))",
          }}>
            {[
              { n: "+25", l: "Años de trayectoria" },
              { n: "+480", l: "Obras entregadas" },
              { n: "+35", l: "Equipos propios" },
              { n: "24/7", l: "Disponibilidad en ruta" },
            ].map((s, i) => (
              <div key={i} style={{
                padding: "26px 0", paddingRight: 20,
                borderLeft: i === 0 ? "none" : "1px solid var(--line-dark)", paddingLeft: i === 0 ? 0 : 24,
              }}>
                <div className="display" style={{ fontSize: "clamp(1.8rem,3.4vw,2.6rem)", color: "var(--accent)" }}>{s.n}</div>
                <div style={{ fontSize: ".82rem", color: "var(--on-dark-2)", marginTop: 4, textTransform: "uppercase", letterSpacing: ".08em", fontFamily: "var(--font-mono)" }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      )}
      <div className="hazard" />
    </section>
  );
}
Object.assign(window, { Hero });