/* Reyes Montero — Intro, Productos, Compañías, Cómo funciona */

function Intro() {
  return (
    <section className="section intro" id="nosotros-intro">
      <div className="wrap intro-grid">
        <div className="intro-copy reveal">
          <span className="eyebrow">Nuestra agencia</span>
          <h2>Asesoría que se siente cercana, con la solidez de toda una vida.</h2>
          <p>En <strong>Reyes Montero · Agencia de Seguros</strong> somos una de las agencias con mayor renombre del estado de Veracruz y una de las más importantes a nivel nacional. Desde 1984 acompañamos a familias y empresas a proteger lo que más quieren.</p>
          <p>Conocemos el valor de proteger tu patrimonio, tu salud y el futuro de los tuyos. Por eso trabajamos cada día con asesoría profesional, ética y resultados comprobados.</p>
          <p className="mission">«Construir historias de éxito brindando asesoría profesional, cercana y confiable a cada cliente.»</p>
        </div>
        <div className="intro-pillars reveal reveal-d2">
          <div className="pillar"><div className="pic"><Icon name="award" /></div><h4>Experiencia</h4><p>Más de 42 años en la industria aseguradora respaldan cada consejo.</p></div>
          <div className="pillar"><div className="pic"><Icon name="scale" /></div><h4>Ética</h4><p>Te recomendamos la cobertura correcta, ni de más ni de menos.</p></div>
          <div className="pillar"><div className="pic"><Icon name="heart-handshake" /></div><h4>Cercanía</h4><p>Un trato humano de principio a fin: clientes que se vuelven amigos.</p></div>
          <div className="pillar"><div className="pic"><Icon name="trophy" /></div><h4>Resultados</h4><p>Atención rápida de siniestros y soluciones que de verdad protegen.</p></div>
        </div>
      </div>
    </section>
  );
}

function Productos() {
  return (
    <section className="section prods" id="productos">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Seguros que ofrecemos</span>
          <h2>Un seguro para cada cosa que te importa</h2>
          <p>Te asesoramos para elegir la cobertura correcta y cotizamos con las mejores aseguradoras del país. Escríbenos por WhatsApp y un asesor te atiende al instante.</p>
        </div>
        <div className="prod-grid">
          {PRODUCTS.map((p, i) => (
            <article className={'prod reveal reveal-d' + ((i % 4) + 1)} key={p.t}>
              <div className="prod-img-wrap">
                <img
                  src={resolveAsset(p.img, p.imgId)}
                  alt={p.t}
                  className="prod-img"
                  loading="lazy"
                />
              </div>
              <div className="prod-body">
                <div className="prod-ic"><Icon name={p.ic} /></div>
                <h3>{p.t}</h3>
                <p>{p.d}</p>
                <a className="prod-cta" href={waLink(p.wa)} target="_blank" rel="noopener">
                  <Icon name="message-circle" />Quiero saber más
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Carriers() {
  const loop = [...CARRIERS, ...CARRIERS];
  return (
    <section className="carriers" id="companias">
      <div className="carriers-head reveal">
        <span className="eyebrow">Cotizamos con las mejores</span>
        <p>Trabajamos con las principales aseguradoras de México para encontrarte la mejor opción.</p>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          {loop.map((c, i) => (
            <div className="carrier" key={i}>
              <img src={resolveAsset(ASSETS + '/carriers/' + c.f + '.png', 'carrier_' + c.f.replace(/-/g, '_'))} alt={c.n} loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Proceso() {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setInView(true); io.disconnect(); } });
    }, { threshold: 0.35 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <section className="section proceso" id="proceso">
      <img className="proceso-wmark" src={resolveAsset(ASSETS + '/logo-grm-white.png', 'logo_white')} alt="" />
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Cómo funciona</span>
          <h2>Estar protegido es más fácil de lo que crees</h2>
          <p>Cinco pasos sencillos y nosotros te acompañamos en cada uno.</p>
        </div>
        <div ref={ref} className={'steps' + (inView ? ' in' : '')}>
          <div className="steps-line"><div className="fill"></div></div>
          {STEPS.map((s, i) => (
            <div className="step" key={s.t}>
              <div className="step-node">
                <Icon name={s.ic} />
                <span className="step-no">{i + 1}</span>
              </div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: '48px' }} className="reveal">
          <a className="btn btn-gold" href={waLink('Hola, quiero empezar mi cotización gratis.')} target="_blank" rel="noopener">
            <Icon name="message-circle" />Empezar mi cotización gratis
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Intro, Productos, Carriers, Proceso });