/* SISMO one-page — Proceso, Contacto, Footer, App */
const { useEffect: useEffectBot, useRef: useRefBot, useState: useStateBot } = React;

const PASOS = [
  { n: "01", t: "Escuchamos", d: "Conocemos el proyecto, los objetivos y lo que hoy necesita la marca." },
  { n: "02", t: "Investigamos", d: "Analizamos el contexto, la audiencia, la competencia y las oportunidades." },
  { n: "03", t: "Definimos una dirección", d: "Construimos la estrategia, el concepto y el sistema visual o comunicacional." },
  { n: "04", t: "Producimos", d: "Diseñamos, grabamos, fotografiamos, desarrollamos y editamos." },
  { n: "05", t: "Activamos", d: "Publicamos, implementamos o lanzamos cada pieza en los canales adecuados." },
  { n: "06", t: "Analizamos", d: "Revisamos el rendimiento, aprendemos y hacemos ajustes." },
];

function Proceso() {
  const wrapRef = useRefBot(null);
  const lineRef = useRefBot(null);
  useEffectBot(() => {
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const steps = wrapRef.current.querySelectorAll(".pstep");
    const io = new IntersectionObserver(es => es.forEach(e => e.target.classList.toggle("active", e.isIntersecting)), { rootMargin: "-30% 0px -30% 0px" });
    steps.forEach(s => io.observe(s));
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const r = wrapRef.current.getBoundingClientRect();
        const vh = window.innerHeight;
        const p = Math.min(1, Math.max(0, (vh * .65 - r.top) / r.height));
        if (lineRef.current) lineRef.current.style.height = (p * 100) + "%";
      });
    };
    if (!reduced) { window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); }
    else if (lineRef.current) lineRef.current.style.height = "100%";
    return () => { io.disconnect(); window.removeEventListener("scroll", onScroll); };
  }, []);
  return (
    <section className="proceso" id="proceso">
      <div className="proceso__head">
        <span className="eyebrow eyebrow--pink">Nuestro proceso</span>
        <h2 className="black-title rv">Primero entendemos.<br/>Después hacemos que pase.</h2>
      </div>
      <div className="proceso__steps" ref={wrapRef}>
        <div className="proceso__line"><i ref={lineRef}></i></div>
        {PASOS.map(p => (
          <div className="pstep rv" key={p.n}>
            <span className="pstep__dot"></span>
            <div className="pstep__num">{p.n}</div>
            <h3 className="pstep__title">{p.t}</h3>
            <p className="pstep__desc">{p.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

const WA_URL = "https://wa.me/5492964525368";
const IconWa = () => (
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.4-.1-.6.1-.2.3-.7.9-.8 1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.6-1.5-.9-2-.2-.5-.5-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.5 3.4 1.3 4.8L2 22l5.4-1.4c1.4.7 3 1.1 4.6 1.1 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.5 0-2.9-.4-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3C4.4 15.2 4 13.6 4 12c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8z"/></svg>
);

function Contacto() {
  const [sent, setSent] = useStateBot(false);
  const [sending, setSending] = useStateBot(false);
  const [err, setErr] = useStateBot(false);
  const submit = async e => {
    e.preventDefault();
    setSending(true); setErr(false);
    try {
      const res = await fetch("https://formspree.io/f/mnjenvwq", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(e.target),
      });
      if (!res.ok) throw new Error();
      setSent(true);
    } catch {
      setErr(true);
    }
    setSending(false);
  };
  return (
    <section className="contacto" id="contacto">
      <div className="contacto__inner">
        <div>
          <span className="eyebrow" style={{ color: "#0D0D0D", opacity: .65 }}>Hablemos</span>
          <h2 className="rv">¿Movemos<br/>tu marca?</h2>
          <p className="contacto__text rv rv-d1">Contanos qué querés construir. Nosotras te ayudamos a darle dirección, forma y presencia.</p>
          <div className="contacto__ctas rv rv-d2">
            <a className="btn btn-outline-dark" href={WA_URL} target="_blank" rel="noopener" style={{ gap: 12 }}>
              <span style={{ width: 20, height: 20, display: "inline-flex" }}><IconWa/></span>
              Hablemos por WhatsApp
            </a>
            <div className="contacto__social">
              <a href="https://www.instagram.com/agenciasismo/" target="_blank" rel="noopener" aria-label="Instagram">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="2.5" y="2.5" width="19" height="19" rx="5.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="17.6" cy="6.4" r="1.3" fill="currentColor" stroke="none"/></svg>
              </a>
              <a href="https://www.facebook.com/SismoMarketingDigital" target="_blank" rel="noopener" aria-label="Facebook">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M14 8.5V7c0-1 .5-1.5 1.5-1.5H17V2.5h-2.5C12 2.5 10.5 4.2 10.5 6.8v1.7H8v3.3h2.5v9.7H14v-9.7h2.5l.5-3.3H14z"/></svg>
              </a>
            </div>
          </div>
          <img className="contacto__gif" src="assets/gif-target.gif" alt="" style={{ filter: "invert(1)" }}/>
        </div>
        <form className="form rv rv-d2" onSubmit={submit}>
          <h3>Enviar una consulta</h3>
          {sent ? (
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "#ABFF1A", fontWeight: 700 }}>
              ¡Gracias! Recibimos tu consulta.<br/>
              <span style={{ color: "rgba(255,255,255,.7)", fontWeight: 400 }}>Te respondemos a la brevedad — o escribinos directo por WhatsApp.</span>
            </p>
          ) : (
            <>
              <div className="form__row">
                <div>
                  <label htmlFor="f-nombre">Nombre</label>
                  <input id="f-nombre" name="nombre" required placeholder="Tu nombre"/>
                </div>
                <div>
                  <label htmlFor="f-marca">Marca o proyecto</label>
                  <input id="f-marca" name="marca" placeholder="Tu marca"/>
                </div>
              </div>
              <label htmlFor="f-contacto">Correo o WhatsApp</label>
              <input id="f-contacto" name="contacto" required placeholder="Cómo te contactamos"/>
              <label htmlFor="f-servicio">Servicio de interés</label>
              <select id="f-servicio" name="servicio" defaultValue="">
                <option value="" disabled>Elegí una opción</option>
                <option>Redes sociales</option><option>Branding</option><option>Producción audiovisual</option>
                <option>Fotografía</option><option>Edición de video</option><option>Diseño web</option>
                <option>Campañas</option><option>Asesoría</option><option>Otro</option>
              </select>
              <label htmlFor="f-msj">Mensaje</label>
              <textarea id="f-msj" name="mensaje" placeholder="Contanos brevemente qué necesitás"></textarea>
              <input type="text" name="_gotcha" tabIndex="-1" autoComplete="off" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} aria-hidden="true"/>
              <label className="form__robot" htmlFor="f-robot">
                <input id="f-robot" type="checkbox" required/>
                <span>No soy un robot</span>
              </label>
              {err && <p style={{ color: "#F680FF", fontSize: 14, margin: "4px 0 0" }}>No se pudo enviar. Probá de nuevo o escribinos por WhatsApp.</p>}
              <button className="btn btn-grad" type="submit" disabled={sending} style={sending ? { opacity: .6, pointerEvents: "none" } : null}>
                {sending ? "Enviando…" : "Enviar consulta"}
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
              </button>
            </>
          )}
        </form>
      </div>
      <div className="calendly rv">
        <div>
          <h3>¿Preferís una llamada?</h3>
          <p>Agendá una videollamada de 30 minutos para contarnos tu proyecto en detalle.</p>
        </div>
        <a className="btn btn-grad" href="https://calendly.com/agenciasismo-mkt/30min" target="_blank" rel="noopener">
          Agendar llamada gratuita
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="17" rx="3"/><path d="M3 10h18M8 2.5V6M16 2.5V6"/></svg>
        </a>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__brand">
          <img src="assets/logo-sismo-nuevo.png" alt="Agencia SISMO"/>
          <div className="footer__tag">#ContenidoConImpacto</div>
        </div>
        <div className="footer__info">
          Río Grande, Tierra del Fuego · Argentina<br/>
          <a href="mailto:agenciasismi.mkt@gmail.com">agenciasismi.mkt@gmail.com</a><br/>
          <a href={WA_URL} target="_blank" rel="noopener">+54 9 2964 52-5368</a>
        </div>
        <div className="footer__social">
          <a href="https://www.instagram.com/agenciasismo/" target="_blank" rel="noopener" aria-label="Instagram">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="2.5" y="2.5" width="19" height="19" rx="5.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="17.6" cy="6.4" r="1.3" fill="currentColor" stroke="none"/></svg>
          </a>
          <a href="https://www.facebook.com/SismoMarketingDigital" target="_blank" rel="noopener" aria-label="Facebook">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 8.5V6.8c0-.8.2-1.3 1.4-1.3H17V2.2h-2.6C11.2 2.2 10 3.9 10 6.5v2H8v3.3h2V22h4v-10.2h2.7l.4-3.3H14z"/></svg>
          </a>
          <a href={WA_URL} target="_blank" rel="noopener" aria-label="WhatsApp"><IconWa/></a>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© {new Date().getFullYear()} Agencia SISMO. Todos los derechos reservados.</span>
        <span>Contenido con impacto.</span>
      </div>
    </footer>
  );
}

function App() {
  useReveal();
  return (
    <>
      <Nav/>
      <main>
        <Hero/>
        <Manifiesto/>
        <Nosotras/>
        <Servicios/>
        <Trabajos/>
        <Proceso/>
        <Contacto/>
      </main>
      <Footer/>
      <a className="wa-float" href={WA_URL} target="_blank" rel="noopener" aria-label="Escribinos por WhatsApp"><IconWa/></a>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
