const { useState, useEffect, useRef } = React;

const NAVY   = "#0F2A52";
const ICE    = "#7FC8E8";
const FORMSPREE_ID = "xojbylgg";

// ─────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <a href="#top" className="nav-logo">
        <img src="assets/acquamex-logo.png" alt="Acquamex" />
      </a>
      <div className="nav-links">
        <a href="#producto">Producto</a>
        <a href="#proceso">Proceso</a>
        <a href="#distribucion">Distribución</a>
        <a href="#contacto">Contacto</a>
      </div>
      <a href="#contacto" className="nav-cta">
        Pedir ahora
        <span className="arrow">→</span>
      </a>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="hero" id="top" data-layout="split">
      <div className="hero-grid">
        <div className="hero-copy">
          <div className="hero-eyebrow">
            <span className="dot" />
            Hielo di Acqua · Calidad superior
          </div>
          <h1 className="hero-title">
            Pureza<br />
            <span className="hero-italic">hecha</span><br />
            todos los días.
          </h1>
          <p className="hero-sub">
            Agua purificada por 7 procesos. Empacada limpia.
            Entregada fría.
          </p>
          <div className="hero-actions">
            <a href="#contacto" className="btn-primary">
              Hacer pedido
              <span className="arrow">→</span>
            </a>
            <a href="#proceso" className="btn-ghost">
              Ver los 7 procesos
            </a>
          </div>
          <div className="hero-meta">
            <div>
              <div className="meta-num">5kg</div>
              <div className="meta-label">presentación estándar</div>
            </div>
            <div>
              <div className="meta-num">7</div>
              <div className="meta-label">etapas de purificación</div>
            </div>
            <div>
              <div className="meta-num">24/7</div>
              <div className="meta-label">pedidos en Ciudad Valles</div>
            </div>
          </div>
        </div>

        <div className="hero-visual">
          <div className="hero-visual-bg" />
          <img
            src="assets/hielo-bag-dual.png"
            alt="Hielo di Acqua 5kg"
            className="hero-product"
            style={{ objectFit: "cover", width: "562px", height: "500px" }}
          />
          <img
            src="assets/freddo-face.png"
            alt=""
            className="hero-freddo-peek"
            aria-hidden="true"
          />
          <div className="hero-stamp" style={{ backgroundColor: ICE, color: "#fff" }}>
            <div className="stamp-inner">
              <span>HIELO</span>
              <span className="stamp-big">5KG</span>
              <span>PURIFICADO</span>
            </div>
          </div>
        </div>
      </div>
      <Marquee />
    </section>
  );
}

function Marquee() {
  const items = [
    "Hielo Purificado","Calidad Superior","Ciudad Valles, S.L.P.",
    "Pedidos 481·126·9035","7 Procesos de Purificación","Acquamex®",
  ];
  const loop = [...items, ...items, ...items];
  return (
    <div className="marquee" style={{ "--speed": "28s" }}>
      <div className="marquee-track">
        {loop.map((it, i) => (
          <span key={i} className="marquee-item">
            <span className="marquee-text">{it}</span>
            <span className="marquee-dot">✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// BRAND + PRODUCT
// ─────────────────────────────────────────────────────────────
function BrandProduct() {
  return (
    <section className="brand-product" id="producto">
      <div className="bp-header">
        <div className="bp-eyebrow">02 — Marca + Producto</div>
        <h2 className="bp-title">
          Una casa de agua,<br />
          un producto de hielo.
        </h2>
      </div>

      <div className="bp-grid">
        <div className="bp-card bp-card-parent">
          <div className="bp-card-tag">Marca madre</div>
          <img src="assets/acquamex-logo.png" alt="Acquamex" className="bp-logo-acquamex" />
          <p className="bp-text">
            Acquamex nace con la visión de desarrollar soluciones confiables
            en agua potable y sus derivados, con enfoque en calidad, procesos
            y servicio. Desde Ciudad Valles, inicia operaciones con productos
            pensados para el consumo diario y las necesidades reales del
            mercado local.
          </p>
          <div className="bp-stats">
            <div>
              <div className="bp-stat-num">+15</div>
              <div className="bp-stat-lbl">años de operación</div>
            </div>
            <div>
              <div className="bp-stat-num">100%</div>
              <div className="bp-stat-lbl">agua purificada</div>
            </div>
          </div>
        </div>

        <div className="bp-card bp-card-product">
          <div className="bp-card-tag bp-card-tag-light">Producto protagonista</div>
          <img src="assets/hielo-di-acqua-logo.png" alt="Hielo di Acqua" className="bp-logo-hielo" />
          <div className="bp-product-row">
            <img src="assets/hielo-bag-editorial.jpg" alt="Bolsa Hielo di Acqua" className="bp-product-img" />
            <div className="bp-product-meta">
              <div className="bp-pm-row"><span>Presentación</span><strong>5 kg</strong></div>
              <div className="bp-pm-row"><span>Tipo</span><strong>Cubo purificado</strong></div>
              <div className="bp-pm-row"><span>Calidad</span><strong>Superior</strong></div>
              <div className="bp-pm-row"><span>Elaboración</span><strong>7 procesos</strong></div>
            </div>
          </div>
        </div>

        <div className="bp-card bp-card-freddo">
          <img src="assets/freddo-full.png" alt="Freddo" className="bp-freddo" />
          <div className="bp-freddo-text">
            <div className="bp-freddo-name">Freddo</div>
            <div className="bp-freddo-role">Embajador oficial del frío</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// PROCESS
// ─────────────────────────────────────────────────────────────
const STEPS = [
  { n: "01", title: "Filtro de arena",            caption: "Retiene partículas grandes y sedimento." },
  { n: "02", title: "Filtro de carbón activado",  caption: "Elimina cloro, olores y sabores." },
  { n: "03", title: "Suavizado",                  caption: "Reduce dureza del agua y sales minerales." },
  { n: "04", title: "Filtración multimedia",      caption: "Capas filtrantes para máxima claridad." },
  { n: "05", title: "Filtración pulidora",        caption: "Acabado fino, agua transparente." },
  { n: "06", title: "Membranas de purificación",  caption: "Barrera molecular contra impurezas." },
  { n: "07", title: "Desinfección UV",            caption: "Luz ultravioleta. Sin químicos. Pura." },
];

function Process() {
  const [active, setActive] = useState(0);
  const trackRef = useRef(null);

  useEffect(() => {
    const els = trackRef.current?.querySelectorAll(".step-row");
    if (!els) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) setActive(Number(e.target.getAttribute("data-idx")));
        });
      },
      { rootMargin: "-45% 0px -45% 0px", threshold: 0 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <section className="process" id="proceso">
      <div className="process-header">
        <div className="bp-eyebrow bp-eyebrow-light">03 — Proceso</div>
        <h2 className="process-title">
          De agua al hielo:<br />
          <span className="process-italic">7 pasos</span> sin atajos.
        </h2>
      </div>
      <div className="process-body">
        <div className="process-sticky">
          <div className="process-counter">
            <span className="counter-now">{STEPS[active].n}</span>
            <span className="counter-of">/ 07</span>
          </div>
          <div className="process-active-title">{STEPS[active].title}</div>
          <div className="process-rail">
            {STEPS.map((s, i) => (
              <div key={i} className={"rail-tick " + (i <= active ? "on" : "")} />
            ))}
          </div>
          <img src="assets/freddo-alt.png" alt="" className="process-freddo" aria-hidden="true" />
        </div>
        <div className="process-track" ref={trackRef}>
          {STEPS.map((s, i) => (
            <div key={i} className={"step-row " + (i === active ? "active" : "")} data-idx={i}>
              <div className="step-num">{s.n}</div>
              <div className="step-content">
                <div className="step-title">{s.title}</div>
                <div className="step-caption">{s.caption}</div>
              </div>
              <div className="step-bar" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// DISTRIBUTION
// ─────────────────────────────────────────────────────────────
function Distribution() {
  const channels = [
    { tag: "B2C", title: "Hogar",               desc: "Entrega a domicilio. Pedido por teléfono o WhatsApp." },
    { tag: "B2B", title: "Restaurantes & bares", desc: "Suministro recurrente con tarifas por volumen." },
    { tag: "B2B", title: "Eventos",              desc: "Logística para fiestas, bodas y producciones." },
    { tag: "B2B", title: "Tiendas y abarrotes",  desc: "Reposición programada, exhibidor incluido." },
  ];
  return (
    <section className="distribution" id="distribucion">
      <div className="dist-header">
        <div className="bp-eyebrow">04 — Distribución</div>
        <h2 className="dist-title">Hielo confiable,<br />todos los días.</h2>
        <p className="dist-lead">Cobertura completa.<br />Pedidos por volumen para negocios.</p>
      </div>
      <div className="dist-grid">
        {channels.map((c, i) => (
          <div className="dist-card" key={i}>
            <div className="dist-tag">{c.tag}</div>
            <div className="dist-card-title">{c.title}</div>
            <div className="dist-card-desc">{c.desc}</div>
            <div className="dist-card-arrow">→</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// CONTACT
// ─────────────────────────────────────────────────────────────
function Contact() {
  const [form, setForm] = useState({ name: "", phone: "", note: "" });
  const [status, setStatus] = useState("idle");
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    setStatus("sending");
    try {
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({ nombre: form.name, telefono: form.phone, mensaje: form.note }),
      });
      if (res.ok) { setStatus("sent"); setForm({ name: "", phone: "", note: "" }); }
      else setStatus("error");
    } catch { setStatus("error"); }
  };

  const btnLabel =
    status === "sending" ? "Enviando…" :
    status === "sent"    ? "¡Pedido enviado! Te contactamos pronto." :
    status === "error"   ? "Error. Llámanos al 481 126 9035" :
    "Solicitar pedido";

  return (
    <section className="contact" id="contacto">
      <div className="contact-grid">
        <div className="contact-left">
          <div className="bp-eyebrow bp-eyebrow-light">05 — Contacto</div>
          <h2 className="contact-title">Hagamos<br />tu pedido.</h2>
          <div className="contact-channels">
            <a className="cc-row" href="tel:4811269035">
              <div className="cc-key">Teléfono</div>
              <div className="cc-val">481 · 126 · 9035</div>
            </a>
            <a className="cc-row" href="mailto:pedidos@acquamex.com">
              <div className="cc-key">Pedidos</div>
              <div className="cc-val">pedidos@acquamex.com</div>
            </a>
            <div className="cc-row">
              <div className="cc-key">Planta</div>
              <div className="cc-val">Ciudad Valles, S.L.P.</div>
            </div>
            <div className="cc-row">
              <div className="cc-key">Horario</div>
              <div className="cc-val">Lun–Sáb · 8:00 – 19:00</div>
            </div>
          </div>
        </div>
        <form className="contact-form" onSubmit={submit}>
          <label className="cf-field">
            <span>Nombre</span>
            <input type="text" required value={form.name} onChange={set("name")}
              placeholder="Tu nombre o negocio" disabled={status === "sending" || status === "sent"} />
          </label>
          <label className="cf-field">
            <span>Teléfono</span>
            <input type="tel" required value={form.phone} onChange={set("phone")}
              placeholder="481 ..." disabled={status === "sending" || status === "sent"} />
          </label>
          <label className="cf-field">
            <span>¿Cuántas bolsas?</span>
            <textarea rows="3" value={form.note} onChange={set("note")}
              placeholder="Ej. 20 bolsas semanales para restaurante"
              disabled={status === "sending" || status === "sent"} />
          </label>
          <button className="btn-primary cf-submit" type="submit"
            disabled={status === "sending" || status === "sent"}>
            {btnLabel}
            {status === "idle" && <span className="arrow">→</span>}
          </button>
        </form>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-brand">
          <img src="assets/acquamex-logo.png" alt="Acquamex" />
          <p>Agua purificada y hielo de calidad.</p>
        </div>
        <div className="footer-cols">
          <div>
            <div className="fc-title">Sitio</div>
            <a href="#producto">Producto</a>
            <a href="#proceso">Proceso</a>
            <a href="#distribucion">Distribución</a>
            <a href="#contacto">Contacto</a>
          </div>
          <div>
            <div className="fc-title">Marca</div>
            <a href="#">Acquamex®</a>
            <a href="#">Hielo di Acqua®</a>
            <a href="#">Freddo</a>
          </div>
          <div>
            <div className="fc-title">Legal</div>
            <a href="/aviso-de-privacidad.html">Aviso de privacidad</a>
            <a href="/terminos.html">Términos</a>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Acquamex® · Todos los derechos reservados.</span>
        <span>Ciudad Valles, S.L.P. · México</span>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────────
function App() {
  return (
    <div className="site">
      <Nav />
      <Hero />
      <BrandProduct />
      <Process />
      <Distribution />
      <Contact />
      <Footer />
    </div>
  );
}

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