// Hero.jsx — Landing-Banner
function Hero({ onNav, hasGallery }) {
  const socials = ['instagram', 'linkedin', 'whatsapp', 'mail'];
  const socialHref = {
    instagram: 'https://www.instagram.com/alfabeth_agencia/',
    linkedin: 'https://www.linkedin.com/company/alfabeth-agencia-de-diseno/about/?viewAsMember=true',
    whatsapp: `https://api.whatsapp.com/send?phone=5491124072455&text=${encodeURIComponent('Quiero realizarte una consulta desde la web... ')}`,
    mail: 'mailto:empresaalfabeth@gmail.com',
  };
  const socialTarget = (s) => (s === 'mail' ? undefined : '_blank');
  const socialRel = (s) => (s === 'mail' ? undefined : 'noopener noreferrer');

  return (
    <section data-screen-label="Hero / Banner" className="hero-section" style={{
      position: 'relative', background: 'var(--purple)',
      minHeight: 1080, overflow: 'hidden', paddingTop: 160,
    }}>
      <Navbar onNav={onNav} hasGallery={hasGallery} />
      <div className="hero-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'center',
        padding: '0 160px', minHeight: 920,
      }}>
        {/* Left — headline */}
        <div style={{ maxWidth: 520 }}>
          <h1 className="t-display" style={{ color: 'var(--white)', margin: 0 }}>
            Agencia de<br />Diseño Visual<br />y Estratégico
          </h1>
          <p className="t-subtitle" style={{ margin: '36px 0 40px', whiteSpace: 'pre-line', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
            Construcción de marcas{'\n'}creación de contenido
          </p>
          <div style={{ display: 'flex', gap: 20 }}>
            {socials.map(s => (
              <a key={s} href={socialHref[s]} target={socialTarget(s)} rel={socialRel(s)} title={s}
                style={{ display: 'block', transition: 'transform .15s ease' }}
                onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-3px)'}
                onMouseLeave={e => e.currentTarget.style.transform = 'none'}>
                <DottedRing size={50} color="var(--peach)" sw={3} fill="rgba(245,218,170,0.12)">
                  <Icon name={s} size={22} stroke="var(--peach)" sw={1.8} />
                </DottedRing>
              </a>
            ))}
          </div>
        </div>

        {/* Right — affiche coverflow carousel (brand conceptual pieces) */}
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <HeroCarousel />
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;