// GSP — Electrónica: componente de página de producto, data-driven, con 3 layouts de hero.
function ElReveal({ children, delay = 0, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    const ob = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }), { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    ob.observe(el);
    return () => ob.disconnect();
  }, []);
  return <div ref={ref} className="reveal" style={{ transitionDelay: delay + 's', ...style }}>{children}</div>;
}

function ElImg({ icon, label, src, alt, className = '' }) {
  const Icon = window.Icon;
  if (src) {
    return <img className={'img-real ' + className} src={src} alt={alt || label} width="1000" height="750" loading="lazy" decoding="async" />;
  }
  return (
    <div className={'img-ph ' + className}>
      <div className="img-ph-icon"><Icon name={icon} size={32} /></div>
      <span className="img-ph-label">{label}</span>
    </div>
  );
}

function HeroCTAs({ cta }) {
  return (
    <div className="hero-cta-group">
      {cta.map(([label, href, variant]) => (
        <Button key={label} as="a" href={href} variant={variant} size="lg">{label}</Button>
      ))}
    </div>
  );
}

function ProductHero({ hero }) {
  const Icon = window.Icon;
  const title = <h1 className="hero-title" dangerouslySetInnerHTML={{ __html: hero.titleHtml }} />;
  const video = hero.image ? (
    <React.Fragment>
      <img className="hero-video" src={hero.image} alt={hero.imageAlt || ''} fetchpriority="high" decoding="async" />
      <div className="hero-overlay" />
    </React.Fragment>
  ) : (
    <React.Fragment>
      <video className="hero-video" muted playsInline preload="metadata" autoPlay={!!hero.playVideo} loop={!!hero.playVideo}>
        <source src={hero.video + (hero.playVideo ? '' : '#t=0.1')} type="video/mp4" />
      </video>
      <div className="hero-overlay" />
    </React.Fragment>
  );
  // Fondo: foto/video, o hero de color con glow (hero.solid) de altura ajustada al texto.
  const bg = hero.solid ? <div className="hero-glow" /> : video;
  const diagonal = (
    <div className="hero-diagonal">
      <svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0 80L1440 0V80H0Z" fill="#fff" /></svg>
    </div>
  );

  if (hero.layout === 'split') {
    return (
      <section className={"hero hero--split" + (hero.solid ? " hero--solid" : "")}>
        {bg}
        <div className="hero-split-inner">
          <div>
            <div className="hero-eyebrow">{hero.overline}</div>
            {title}
            <p className="hero-subtitle hero-subtitle--left">{hero.subtitle}</p>
            <HeroCTAs cta={hero.cta} />
          </div>
          {hero.panel && (
            <div className="hero-split-panel">
              <h4>{hero.panel.heading}</h4>
              {hero.panel.items.map(([ic, txt]) => (
                <div className="hero-split-item" key={txt}><Icon name={ic} size={18} /><span>{txt}</span></div>
              ))}
            </div>
          )}
        </div>
        {diagonal}
      </section>
    );
  }

  if (hero.layout === 'editorial') {
    return (
      <section className={"hero hero--editorial" + (hero.solid ? " hero--solid" : "")}>
        {bg}
        <div className="hero-editorial-inner">
          <div className="hero-editorial-col">
            <div className="hero-eyebrow">{hero.overline}</div>
            {title}
            <p className="hero-subtitle hero-subtitle--left">{hero.subtitle}</p>
            {hero.stats && (
              <div className="hero-stats">
                {hero.stats.map(([num, label, accent]) => (
                  <div className="hero-stat" key={label}>
                    <div className="hero-stat-num">{accent ? <span className="hl">{num}</span> : num}</div>
                    <div className="hero-stat-label">{label}</div>
                  </div>
                ))}
              </div>
            )}
            <HeroCTAs cta={hero.cta} />
          </div>
        </div>
        {diagonal}
      </section>
    );
  }

  // centered (flagship-style)
  return (
    <section className={"hero" + (hero.solid ? " hero--solid" : "")}>
      {bg}
      <div className="hero-content">
        <div className="hero-overline">{hero.overline}</div>
        {title}
        <p className="hero-subtitle">{hero.subtitle}</p>
        {hero.stats && (
          <div className="hero-stats hero-stats--center">
            {hero.stats.map(([num, label, accent]) => (
              <div className="hero-stat" key={label}>
                <div className="hero-stat-num">{accent ? <span className="hl">{num}</span> : num}</div>
                <div className="hero-stat-label">{label}</div>
              </div>
            ))}
          </div>
        )}
        <HeroCTAs cta={hero.cta} />
      </div>
      <div className="scroll-indicator" style={{ display: (hero.stats || hero.solid) ? 'none' : undefined }}><span>Descubrí más</span><div className="scroll-mouse" /></div>
      {diagonal}
    </section>
  );
}

function ProductPage({ data }) {
  const Icon = window.Icon;
  return (
    <React.Fragment>
      {data.hero.component && window[data.hero.component]
        ? React.createElement(window[data.hero.component], { hero: data.hero })
        : <ProductHero hero={data.hero} />}

      {data.showCotizador && window.Cotizador && <window.Cotizador />}

      {data.intro && (
        <section className="section prod-intro">
          <div className="section-inner">
            <div className={'prod-intro-grid' + (data.intro.reverse ? ' reverse' : '')}>
              <ElReveal style={{ order: data.intro.reverse ? 2 : 0 }}>
                <div className="prod-intro-text">
                  <span className="prod-pill">{data.intro.pill}</span>
                  <h2>{data.intro.h2}</h2>
                  {data.intro.paragraphs.map((p, i) => <p key={i}>{p}</p>)}
                </div>
              </ElReveal>
              <ElReveal delay={0.1}>
                <div className="prod-intro-img"><ElImg icon={data.intro.imageIcon} label={data.intro.imageLabel} src={data.intro.image} alt={data.intro.imageAlt} /></div>
              </ElReveal>
            </div>
          </div>
        </section>
      )}

      <section className="section prod-features">
        <div className="section-inner">
          <ElReveal><SectionHeading overline={data.features.overline} title={data.features.title} /></ElReveal>
          <div className="prod-features-grid">
            {data.features.items.map(([ic, h, p], i) => (
              <ElReveal key={h} delay={0.08 * (i + 1)}>
                <Card hoverable style={{ height: '100%' }}>
                  <div className="prod-feature-ic"><Icon name={ic} size={26} /></div>
                  <div className="prod-feature"><h3>{h}</h3><p>{p}</p></div>
                </Card>
              </ElReveal>
            ))}
          </div>
        </div>
      </section>

      {data.sectors && (
        <section className="section prod-sectors">
          <div className="section-inner">
            <ElReveal><SectionHeading overline={data.sectors.overline} title={data.sectors.title} /></ElReveal>
            <ElReveal delay={0.1}>
              <div className="prod-sectors-row">
                {data.sectors.items.map(([ic, name]) => (
                  <div className="prod-sector" key={name}>
                    <div className="prod-sector-ic"><Icon name={ic} size={22} /></div>
                    <span>{name}</span>
                  </div>
                ))}
              </div>
            </ElReveal>
          </div>
        </section>
      )}

      {data.detail && (
        <section className="section prod-detail">
          <div className="section-inner">
            <div className={'prod-detail-grid' + (data.detail.reverse ? ' reverse' : '')}>
              <ElReveal>
                <div className="prod-detail-text">
                  <h2>{data.detail.heading}</h2>
                  <ul className="prod-detail-list">
                    {data.detail.list.map(([ic, html], i) => (
                      <li key={i}><Icon name={ic} size={18} sw={2} /><span dangerouslySetInnerHTML={{ __html: html }} /></li>
                    ))}
                  </ul>
                </div>
              </ElReveal>
              <ElReveal delay={0.1}>
                <div className="prod-detail-img"><ElImg icon={data.detail.imageIcon} label={data.detail.imageLabel} src={data.detail.image} alt={data.detail.imageAlt} /></div>
              </ElReveal>
            </div>
          </div>
        </section>
      )}

      {data.showCreds && (
        <section className="section prod-creds" style={{ paddingTop: 'var(--space-12)', paddingBottom: 'var(--space-12)' }}>
          <div className="section-inner">
            <ElReveal>
              <p className="prod-creds-label">Habilitaciones y certificaciones</p>
              <div className="prod-creds-row">
                {[
                  ['RI 9000-10334/I', 'IRAM-ISO 9001:2015', 'cred-iram.png'],
                  ['ANMAC', 'Habilitación nacional', 'cred-anmac.png'],
                  ['ASIS International', 'Estándar global de seguridad', 'cred-asis.png'],
                  ['Prefectura Naval', 'Seguridad portuaria y fluvial', 'cred-prefectura.png'],
                ].map(([h, p, logo]) => (
                  <div className="prod-cred" key={h}>
                    <div className="prod-cred-chip"><img src={'' + logo} alt={h} width="48" height="48" loading="lazy" decoding="async" /></div>
                    <h4>{h}</h4><span>{p}</span>
                  </div>
                ))}
              </div>
            </ElReveal>
          </div>
        </section>
      )}

      <section className="section prod-cta">
        <div className="prod-cta-inner">
          <ElReveal>
            <h2>{data.cta.title}</h2>
            <p>{data.cta.text}</p>
            <Button as="a" href={data.showCotizador ? '#cotizador' : '#contacto'} variant="primary" size="lg">Solicitar cotización</Button>
          </ElReveal>
        </div>
      </section>
    </React.Fragment>
  );
}
window.ProductPage = ProductPage;