// GSP Hero — full-bleed video, navy gradient overlay, credential badges, diagonal cut.
function Hero() {
  const Icon = window.Icon;
  const badges = [
    ['shield', 'ISO 9001'], ['shield-check', 'ANMAC'], ['globe', "ASIS Int'l"], ['bell', 'Prefectura'],
  ];
  return (
    <section className="hero">
      <video className="hero-video" autoPlay muted loop playsInline>
        <source src="hero-home.mp4" type="video/mp4" />
      </video>
      <div className="hero-overlay" />
      <div className="hero-content">
        <div className="hero-overline">GSP Seguridad y Tecnología</div>
        <h1 className="hero-title">Seguridad basada en la<br />gestión del <span className="hero-accent">riesgo</span></h1>
        <p className="hero-subtitle">+20 años protegiendo empresas, barrios y hogares en Argentina con soluciones integrales de vigilancia y tecnología.</p>
        <div className="hero-badges">
          {badges.map(([icon, label]) => (
            <div className="hero-badge-item" key={label}>
              <div className="hero-badge-icon"><Icon name={icon} size={20} /></div>
              <span className="hero-badge-label">{label}</span>
            </div>
          ))}
        </div>
        <div className="hero-cta-group">
          <Button as="a" href="#contacto" variant="primary" size="lg">Solicitar cotización</Button>
          <Button as="a" href="#servicios" variant="outline" size="lg">Explorar servicios</Button>
        </div>
      </div>
      <div className="scroll-indicator"><span>Descubrí más</span><div className="scroll-mouse" /></div>
      <div className="hero-diagonal">
        <svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0 80L1440 0V80H0Z" fill="#fff" /></svg>
      </div>
    </section>
  );
}
window.Hero = Hero;