/* Reyes Montero — Stats band, Equipo, Contacto, Footer, FAB */

function useInView(threshold = 0.4) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((es) => {
      es.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
    }, { threshold });
    io.observe(el);
    return () => io.disconnect();
  }, [threshold]);
  return [ref, seen];
}

function CountUp({ target, suffix = '', duration = 1600 }) {
  const [val, setVal] = useState(0);
  const [ref, seen] = useInView(0.5);
  useEffect(() => {
    if (!seen) return;
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setVal(target); return; }
    let raf, start;
    const step = (t) => {
      if (!start) start = t;
      const p = Math.min((t - start) / duration, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(eased * target));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [seen, target, duration]);
  return <span ref={ref}>{val}{suffix}</span>;
}

function Band() {
  return (
    <section className="band" id="experiencia">
      <img className="band-wmark" src={resolveAsset(ASSETS + '/logo-grm-white.png', 'logo_white')} alt="" />
      <div className="wrap band-grid">
        <div className="stat"><div className="num"><CountUp target={42} suffix="" /></div><div className="lab">años protegiendo a Veracruz, desde 1984</div></div>
        <div className="stat"><div className="num"><CountUp target={500} suffix="+" /></div><div className="lab">familias y empresas aseguradas</div></div>
        <div className="stat"><div className="num"><CountUp target={100} suffix="%" /></div><div className="lab">asesoría profesional y cercana</div></div>
      </div>
    </section>
  );
}

function Equipo() {
  return (
    <section className="section equipo" id="equipo">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Nuestro equipo</span>
          <h2>Quienes te van a acompañar</h2>
          <p>Detrás de cada póliza hay un equipo directivo con más de 60 años de experiencia combinada, especializado en cada línea de seguro. No te atiende un vendedor: te asesora un profesional que conoce el mercado, defiende tus intereses y responde cuando más lo necesitas. Esa es la diferencia de estar con <strong>Reyes Montero</strong>.</p>
        </div>
        <div className="team">
          {TEAM.map((m, i) => (
            <article className={'member reveal reveal-d' + (i + 1)} key={m.n}>
              <div className="member-top">
                <div className="avatar">{m.i}</div>
                <div>
                  <h3>{m.n}</h3>
                  <div className="role">{m.r}</div>
                </div>
              </div>
              <div className="exp"><Icon name="award" />{m.exp}</div>
              <p className="bio">{m.bio}</p>
              <div className="specs">
                {m.specs.map(s => <span className="spec" key={s}>{s}</span>)}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contacto() {
  const [f, setF] = useState({ nombre: '', tel: '', linea: 'Seguro de Auto', msg: '' });
  const upd = k => e => setF({ ...f, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    const text = `Hola, soy ${f.nombre || '(sin nombre)'}.` +
      ` Me interesa: ${f.linea}.` +
      (f.tel ? ` Mi teléfono: ${f.tel}.` : '') +
      (f.msg ? ` ${f.msg}` : '') +
      ' ¿Me pueden asesorar?';
    window.open(waLink(text), '_blank');
  };
  return (
    <section className="section contact-sec" id="contacto" style={{ paddingTop: '20px' }}>
      <div className="wrap">
        <div className="contact reveal">
          <div className="contact-bg"></div>
          <div className="contact-info">
            <span className="eyebrow">Hablemos</span>
            <h2>Asesoría sin compromiso</h2>
            <p>Cuéntanos qué quieres proteger y un asesor te contactará en menos de 24 horas. Estamos para acompañarte.</p>
            <a className="contact-row" href={waLink('Hola, quiero asesoría sobre un seguro.')} target="_blank" rel="noopener">
              <span className="ci"><Icon name="message-circle" /></span>
              <span><span className="clab">WhatsApp</span><br /><span className="val">{WA_DISPLAY}</span></span>
            </a>
            <a className="contact-row" href={'mailto:' + EMAIL}>
              <span className="ci"><Icon name="mail" /></span>
              <span><span className="clab">Correo</span><br /><span className="val">{EMAIL}</span></span>
            </a>
            <div className="contact-row">
              <span className="ci"><Icon name="map-pin" /></span>
              <span><span className="clab">Ubicación</span><br /><span className="val">Xalapa, Veracruz · Clientes en todo México</span></span>
            </div>
            <div className="contact-row">
              <span className="ci"><Icon name="clock" /></span>
              <span><span className="clab">Horario</span><br /><span className="val">Lun – Vie · 9:00 a 18:00 h</span></span>
            </div>
          </div>
          <div className="contact-form">
            <h3>Solicita tu cotización</h3>
            <p className="cf-sub">Al enviar, abriremos WhatsApp con tu mensaje listo.</p>
            <form onSubmit={submit}>
              <div className="fld"><label>Nombre completo</label><input required value={f.nombre} onChange={upd('nombre')} placeholder="Tu nombre" /></div>
              <div className="fld"><label>Teléfono</label><input required value={f.tel} onChange={upd('tel')} placeholder="10 dígitos" inputMode="tel" /></div>
              <div className="fld"><label>¿Qué quieres proteger?</label>
                <select value={f.linea} onChange={upd('linea')}>
                  {PRODUCTS.map(p => <option key={p.t}>{p.t}</option>)}
                </select>
              </div>
              <div className="fld"><label>Mensaje (opcional)</label><textarea value={f.msg} onChange={upd('msg')} placeholder="Cuéntanos un poco más…"></textarea></div>
              <button className="btn btn-wa" type="submit" style={{ width: '100%', justifyContent: 'center' }}>
                <Icon name="message-circle" />Enviar por WhatsApp
              </button>
              <p className="form-note"><Icon name="lock" />Tus datos solo se usan para contactarte. No compartimos tu información.</p>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="footer-logo">
              <img src={resolveAsset(ASSETS + '/logo-grm-tile.png', 'logo_tile')} alt="Reyes Montero" />
              <div><div className="wordmark">Reyes Montero</div><div className="sub">Agencia de Seguros</div></div>
            </div>
            <p>Más de 42 años protegiendo el patrimonio de las familias y empresas de Veracruz y de todo México. Asesoría profesional y cercana.</p>
          </div>
          <div>
            <h5>Seguros</h5>
            <ul>{PRODUCTS.map(p => <li key={p.t}><a href="#productos">{p.t}</a></li>)}</ul>
          </div>
          <div>
            <h5>Agencia</h5>
            <ul>
              <li><a href="#nosotros-intro">Nosotros</a></li>
              <li><a href="#proceso">Cómo funciona</a></li>
              <li><a href="#equipo">Equipo</a></li>
              <li><a href="#contacto">Contacto</a></li>
            </ul>
          </div>
          <div>
            <h5>Contacto</h5>
            <ul>
              <li><a href={waLink('Hola, quiero información.')} target="_blank" rel="noopener">{WA_DISPLAY}</a></li>
              <li><a href={'mailto:' + EMAIL}>Correo</a></li>
              <li><span>Xalapa, Veracruz</span></li>
              <li><span>Lun–Vie 9:00–18:00</span></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Reyes Montero · Agencia de Seguros. Todos los derechos reservados.</span>
          <span><a href="#">Aviso de privacidad</a> · <a href="#">Términos y condiciones</a></span>
        </div>
      </div>
    </footer>
  );
}

function FabWA() {
  return (
    <a className="fab-wa" href={waLink('Hola, me gustaría recibir asesoría sobre un seguro.')} target="_blank" rel="noopener" aria-label="WhatsApp">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.946C.157 5.335 5.493 0 12.05 0a11.817 11.817 0 018.413 3.488 11.824 11.824 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.51 5.26l-.999 3.648 3.978-1.207zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.247-.694.247-1.289.173-1.413z" /></svg>
    </a>
  );
}

Object.assign(window, { Band, Equipo, Contacto, Footer, FabWA });