const { Button, Icon, Badge } = window.VeterinariaSanPatricioDesignSystem_c9a149;

const PROPS = [
  { icon: 'shield-check', title: 'Atención integral', text: 'Clínica, cirugía, farmacia, pet-shop y peluquería en un mismo lugar.' },
  { icon: 'message-circle', title: 'Turnos por WhatsApp', text: 'Coordinás el turno en minutos y te confirmamos por el mismo chat.' },
  { icon: 'star', title: '4,8 en Google', text: 'La nota promedio de 26 opiniones de vecinos de Las Heras.' },
];

const TICKER = ['Vacunatorio', 'Cirugías', 'Estudios complementarios', 'Pet-shop', 'Farmacia', 'Peluquería'];

function Hero({ go }) {
  return (
    <>
      <section style={{ position: 'relative', minHeight: 660, display: 'grid', alignItems: 'center', background: 'var(--gray-900)', overflow: 'hidden' }}>
        <Parallax depth={38} style={{ position: 'absolute', inset: '-8% 0' }}>
          <image-slot id="vsp-hero" shape="rect" fit="cover" src="../../assets/photos/consulta-veterinaria-bulldog.jpg" placeholder="Foto de portada — consulta (1920×1080)" style={{ width: '100%', height: '100%' }}></image-slot>
          <video
            className="vsp-hero-video"
            autoPlay muted loop playsInline preload="auto"
            ref={(el) => {
              if (!el) return;
              el.muted = true; // React no siempre baja la prop muted al DOM antes del autoplay
              el.setAttribute('webkit-playsinline', '');
              const tryPlay = () => el.play().catch(() => {});
              tryPlay();
              setTimeout(tryPlay, 400);
              ['touchstart', 'click', 'scroll'].forEach((ev) =>
                window.addEventListener(ev, tryPlay, { once: true, passive: true })
              );
            }}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
          >
            <source src="../../assets/video/hero-loop.mp4" type="video/mp4" />
          </video>
        </Parallax>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(46,52,53,.90) 0%, rgba(46,52,53,.74) 46%, rgba(46,52,53,.10) 100%)', pointerEvents: 'none' }} />
        <img src="../../assets/icon-clover.png" alt="" className="vsp-drift" style={{ position: 'absolute', right: '7%', top: '14%', width: 92, opacity: .22, pointerEvents: 'none' }} />
        <img src="../../assets/icon-cat.png" alt="" className="vsp-float-slow" style={{ position: 'absolute', right: '22%', bottom: '16%', width: 64, opacity: .16, pointerEvents: 'none' }} />

        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '104px var(--space-8)', width: '100%', pointerEvents: 'none' }}>
          <div style={{ maxWidth: 640 }}>
            <Reveal mode="up" style={{ display: 'inline-flex', pointerEvents: 'auto' }}><Badge tone="green">Las Heras · Mendoza</Badge></Reveal>
            <Reveal mode="up" delay={110}>
              <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 62, lineHeight: 1.02, letterSpacing: 'var(--ls-display)', color: '#fff', margin: 'var(--space-5) 0 0' }}>
                Atención integral<br />para <span style={{ color: 'var(--green-300)' }}>mascotas.</span>
              </h1>
            </Reveal>
            <Reveal mode="up" delay={220}>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-lg)', lineHeight: 'var(--lh-lg)', color: 'var(--gray-200)', margin: 'var(--space-6) 0 0', maxWidth: 520 }}>
                Vacunatorio, cirugías, estudios complementarios, pet-shop, farmacia y peluquería. Todo lo que tu compañero necesita, en un solo lugar.
              </p>
            </Reveal>
            <Reveal mode="up" delay={330}>
              <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-8)', pointerEvents: 'auto' }}>
                <Button size="lg" iconLeft={<Icon name="calendar-days" size={20} />} onClick={() => go('turnos')}>Pedir turno</Button>
                <Button size="lg" variant="teal" iconLeft={<Icon name="whatsapp" strokeSet="simple" size={20} />} onClick={() => window.open(window.VSP_WA_URL, '_blank', 'noopener')}>0261 373-7341</Button>
              </div>
            </Reveal>
            <Reveal mode="up" delay={440}>
              <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center', marginTop: 'var(--space-8)' }}>
                <span style={{ display: 'flex', gap: 2, color: 'var(--amber-500)' }}>
                  {[0, 1, 2, 3, 4].map((i) => (
                    <span key={i} className="vsp-pop" style={{ display: 'flex', animationDelay: (700 + i * 90) + 'ms' }}><Icon name="star" size={17} /></span>
                  ))}
                </span>
                <span style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--text-sm)', fontWeight: 700, color: '#fff' }}>
                  <Counter to={4.8} decimals={1} />
                </span>
                <span style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--text-sm)', color: 'var(--gray-300)' }}>
                  · <Counter to={26} /> opiniones en Google
                </span>
              </div>
            </Reveal>
          </div>
        </div>

        <div className="vsp-bob" style={{ position: 'absolute', left: '50%', bottom: 26, color: 'rgba(255,255,255,.75)', pointerEvents: 'none' }}>
          <Icon name="chevron-down" size={26} />
        </div>
      </section>

      <div style={{ background: 'var(--brand)', color: '#fff', padding: '13px 0' }}>
        <Marquee items={TICKER} speed={30} />
      </div>

      <section style={{ background: 'var(--surface-sunken)', padding: 'var(--space-12) var(--space-8)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-8)' }}>
          {PROPS.map((p, i) => (
            <Reveal key={p.title} mode="up" delay={i * 110}>
              <div className="vsp-hoverable" style={{ display: 'flex', gap: 'var(--space-4)' }}>
                <span className="vsp-float" style={{ width: 48, height: 48, flex: '0 0 auto', borderRadius: 'var(--radius-circle)', background: '#fff', color: 'var(--green-700)', display: 'grid', placeItems: 'center', boxShadow: 'var(--shadow-xs)', animationDelay: i * 0.5 + 's' }}>
                  <Icon name={p.icon} size={22} />
                </span>
                <div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-h4)', margin: 0 }}>{p.title}</h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', color: 'var(--text-muted)', margin: '6px 0 0' }}>{p.text}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </>
  );
}
Object.assign(window, { Hero });