/* hero.jsx — Hero with 2 variants */

const scrollToContacto = () => {
  const el = document.getElementById('contacto');
  if (el) {
    const top = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top, behavior: 'smooth' });
  }
};

const Hero = ({ variant = 'lifestyle', accent }) => {
  if (variant === 'split') return <HeroSplit accent={accent} />;
  return <HeroLifestyle accent={accent} />;
};

/* Variant A: Lifestyle — full-bleed background video with overlaid copy */
const HeroLifestyle = () => {
  const vidRef = React.useRef(null);
  React.useEffect(() => {
    // React doesn't reliably set `muted` as a prop — force it so autoplay works.
    if (vidRef.current) {
      vidRef.current.muted = true;
      const p = vidRef.current.play();
      if (p && p.catch) p.catch(() => {});
    }
  }, []);
  return (
    <section className="hero hero-video" data-screen-label="Hero">
      <video
        ref={vidRef}
        className="hero-video-bg"
        autoPlay
        muted
        loop
        playsInline
        poster="photos/hero-poster.jpg">
        <source src="photos/hero-video.mp4" type="video/mp4" />
      </video>
      <div className="hero-video-scrim"></div>
      <div className="container-wide">
        <div className="hero-video-copy">
          <span className="eyebrow eyebrow-light">Ingeniería termomecánica · 35 años</span>
          <h1>
            Tecnología y confort<br/>
            <span className="hl">para hogares y empresas.</span>
          </h1>
          <p className="lede">
            Ingeniería termomecánica de alta precisión, instalada con el cuidado
            que tu casa, tu obra o tu oficina merecen. Diseñamos, proveemos y
            mantenemos sistemas de climatización pensados para durar.
          </p>
          <div className="hero-cta">
            <button className="btn btn-primary btn-lg" onClick={scrollToContacto}>
              Cotizar proyecto
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

/* Variant B: Split — large heading + product image card + tech detail */
const HeroSplit = () => {
  return (
    <section className="hero hero-split">
      <div className="container-wide">
        <div className="hero-split-top">
          <span className="eyebrow">Ingeniería termomecánica · Hogar · Empresa</span>
          <h1 className="hero-split-h">
            Climatizamos<br/>
            <em className="ital">lo que importa.</em>
          </h1>
          <div className="hero-split-meta">
            <p className="lede">
              35 años diseñando confort. Desde tu living hasta una planta industrial,
              integramos ingeniería, equipos premium y servicio continuo.
            </p>
            <div className="hero-cta">
              <button className="btn btn-primary btn-lg" onClick={scrollToContacto}>Cotizar proyecto</button>
              <button className="btn btn-ghost btn-lg">
                Ver showroom
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </button>
            </div>
          </div>
        </div>
        <div className="hero-split-stage">
          <div className="ph ph-blue hero-image-wide">
            <span className="ph-label">cocina premium · split + cocina empotrada</span>
          </div>
          <div className="hero-split-stats">
            <div>
              <div className="num">35</div>
              <div className="lbl">años</div>
            </div>
            <div className="hairline-v" />
            <div>
              <div className="num">+250</div>
              <div className="lbl">obras</div>
            </div>
            <div className="hairline-v" />
            <div>
              <div className="num">24/7</div>
              <div className="lbl">soporte</div>
            </div>
          </div>
        </div>
      </div>
      <BrandStrip />
    </section>
  );
};

const BrandStrip = () => {
  const brands = ['Carrier', 'Schneider Electric', 'Honeywell', 'AmCham Argentina', 'Toshiba', 'Daikin', 'Midea'];
  const all = [...brands, ...brands];
  return (
    <div className="brand-strip">
      <div className="container">
        <div className="brand-strip-label">Trabajamos con marcas líderes mundiales</div>
        <div className="marquee">
          <div className="marquee-track">
            {all.map((b, i) => (
              <div key={i} className="brand-strip-item">{b}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

window.Hero = Hero;
window.BrandStrip = BrandStrip;