// sections2.jsx — Proceso, Contacto, Footer.  Exports → window
const { useState: useS2, useEffect: useE2, useRef: useR2 } = React;

const WA_NUM = "5491150522993";
const IG_URL = "https://www.instagram.com/grupo_remodelar/";
const FB_URL = "https://www.facebook.com/profile.php?id=61579792974689";
const TT_URL = "https://www.tiktok.com/@grupo_remodelar";
const MAIL = "contacto@gruporemodelar.com.ar";

// ── PROCESO — scroll-linked build timeline ───────────────────────────────────
const STEPS = [
{ n: "01", t: "Relevamiento & idea", d: "Visitamos la obra, medimos y entendemos qué querés lograr.",
  tasks: ["Visita técnica", "Medición", "Objetivos"] },
{ n: "02", t: "Proyecto & presupuesto", d: "Diseño, render 3D y un presupuesto claro y cerrado.",
  tasks: ["Ediciones", "Render 3D", "Presupuesto real"] },
{ n: "03", t: "Remodelación / Obra", d: "Ejecutamos con equipo propio y seguimiento diario del avance.",
  tasks: ["Remodelación", "Ejecución", "Control"] },
{ n: "04", t: "Entrega & posventa", d: "Entrega prolija con limpieza final de obra siempre incluida y plan de mantenimiento.",
  tasks: ["Limpieza final", "Retiro de escombros", "Posventa"] }];


// ── PROCESO INTRO — timeline de fases (solo títulos) + CTA, va antes de Servicios ──
function ProcesoIntro() {
  const ref = useR2(null);
  const [fill, setFill] = useS2(0);
  useE2(() => {
    const el = ref.current;if (!el) return;
    let ticking = false;
    const run = () => {
      ticking = false;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const p = (vh * 0.72 - r.top) / (r.height * 0.82);
      setFill(Math.max(0, Math.min(1, p)));
    };
    const onScroll = () => {if (!ticking) {ticking = true;requestAnimationFrame(run);}};
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    run();
    return () => {window.removeEventListener("scroll", onScroll);window.removeEventListener("resize", onScroll);};
  }, []);
  const n = STEPS.length;
  const WA_REMODELAR = "https://wa.me/" + WA_NUM + "?text=" +
  encodeURIComponent("Quiero remodelar mi casa, ¿podrían asesorarme?");
  return (
    <section className="section" data-screen-label="Cómo remodelar tu casa">
      <div className="wrap">
        <div className="section-head reveal" style={{ display: "block", marginBottom: 8 }}>
          <h2 style={{ margin: 0, fontSize: "clamp(30px, 4.4vw, 52px)", lineHeight: "0.98" }}>¿Cómo <span className="yb">remodelar tu casa?</span></h2>
        </div>
        <div className="proceso-steps" ref={ref} style={{ marginTop: 44 }}>
          <div className="proceso-line"><span className="fill" style={{ "--fill": (fill * 100).toFixed(1) + "%" }} /></div>
          {STEPS.map((s, i) =>
          <div key={s.n} className={"pstep reveal" + (fill * n >= i + 0.25 ? " lit" : "")} data-d={i + 1}>
              <div className="node" />
              <div className="pn">FASE {s.n}</div>
              <h3>{s.t}</h3>
            </div>
          )}
        </div>
        <div className="reveal" style={{ marginTop: 52, display: "flex", justifyContent: "center" }}>
          <a className="btn solid" href={WA_REMODELAR} target="_blank" rel="noopener">Asesorate sin costo <span className="arrow">→</span></a>
        </div>
      </div>
    </section>);
}

function Proceso() {
  const ref = useR2(null);
  const [fill, setFill] = useS2(0);
  useE2(() => {
    const el = ref.current;if (!el) return;
    let ticking = false;
    const run = () => {
      ticking = false;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const p = (vh * 0.72 - r.top) / (r.height * 0.82);
      setFill(Math.max(0, Math.min(1, p)));
    };
    const onScroll = () => {if (!ticking) {ticking = true;requestAnimationFrame(run);}};
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    run();
    return () => {window.removeEventListener("scroll", onScroll);window.removeEventListener("resize", onScroll);};
  }, []);
  const n = STEPS.length;
  return (
    <section className="section" id="proceso" data-screen-label="Proceso">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="idx">/ 03 — Proceso</div>
            <h2>Cómo se<br />remodela.</h2>
          </div>
          <p className="lead" style={{ fontSize: "17px", color: "var(--gr-gray-300)" }}>Trabajamos con gestión controlada y te acompañamos de punta a punta: desde el
            asesoramiento hasta la entrega final. Sabés en todo momento en qué fase está tu obra.</p>
        </div>
        <div className="proceso-steps" ref={ref}>
          <div className="proceso-line"><span className="fill" style={{ "--fill": (fill * 100).toFixed(1) + "%" }} /></div>
          {STEPS.map((s, i) =>
          <div key={s.n} className={"pstep reveal" + (fill * n >= i + 0.25 ? " lit" : "")} data-d={i + 1}>
              <div className="node" />
              <div className="pn">FASE {s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <ul className="tasks">{s.tasks.map((tk) => <li key={tk}>{tk}</li>)}</ul>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── CONTACTO — presupuesto → WhatsApp ────────────────────────────────────────
const TIPOS = ["Remodelación y refacciones", "Construcción y ampliaciones", "Flipping inmobiliario",
"Revisión / escaneo de inmueble", "Local comercial", "Otro"];

function Contacto() {
  const [f, setF] = useS2({ nombre: "", contacto: "", tipo: TIPOS[0], msg: "" });
  const up = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));
  const send = (e) => {
    e.preventDefault();
    const text =
    `Hola Grupo Remodelar 👷\n\n` +
    `Soy ${f.nombre || "—"} y quiero un presupuesto.\n` +
    `Tipo de obra: ${f.tipo}\n` + (
    f.msg ? `Detalle: ${f.msg}\n` : "") + (
    f.contacto ? `Mi contacto: ${f.contacto}` : "");
    window.open(`https://wa.me/${WA_NUM}?text=` + encodeURIComponent(text), "_blank");
  };
  const lines = [
  ["WhatsApp", "+54 9 11 5052-2993", `https://wa.me/${WA_NUM}`],
  ["Email", MAIL, `mailto:${MAIL}`],
  ["Instagram", "@grupo_remodelar", IG_URL],
  ["Dirección", "Juan B. Justo 8921 · Versailles, CABA", null],
  ["Zona", "CABA y GBA", null]];

  return (
    <section className="section contacto-section" id="contacto" data-screen-label="Contacto">
      <div className="hazard thin" style={{ position: "absolute", top: 0, left: 0 }} />
      <div className="wrap">
        <div className="contacto-grid">
          <div className="reveal">
            <div className="idx" style={{ color: "var(--gr-accent)", fontFamily: "var(--gr-mono)", fontSize: 12, letterSpacing: ".1em" }}>/ 04 — Contacto</div>
            <h2 style={{ fontSize: "clamp(40px, 5.5vw, 62px)", lineHeight: "0.95", margin: "18px 0 0" }}>Pedí tu<br /><span className="yb">presupuesto.</span></h2>
            <p className="lead" style={{ maxWidth: "42ch", marginTop: 16 }}>Si estás por comprar una propiedad en CABA o GBA, remodelar una casa, refaccionar
              un local comercial o necesitás una revisión de tu inmueble, dejanos tus datos y te asesoramos sin costo.</p>
            <div className="contact-lines">
              {lines.map(([k, v, href]) =>
              href ?
              <a className="contact-line" key={k} href={href} target="_blank" rel="noopener" data-hot><span className="k">{k}</span><span className="v">{v}</span></a> :
              <div className="contact-line" key={k}><span className="k">{k}</span><span className="v">{v}</span></div>
              )}
            </div>
          </div>

          <form className="gr-form reveal" data-d="1" onSubmit={send}>
            <div className="field"><label>Nombre</label>
              <input type="text" placeholder="Tu nombre" value={f.nombre} onChange={up("nombre")} required /></div>
            <div className="two">
              <div className="field"><label>Teléfono / WhatsApp</label>
                <input type="text" placeholder="11 ..." value={f.contacto} onChange={up("contacto")} /></div>
              <div className="field"><label>Tipo de obra</label>
                <select value={f.tipo} onChange={up("tipo")}>{TIPOS.map((t) => <option key={t}>{t}</option>)}</select></div>
            </div>
            <div className="field"><label>Contanos tu proyecto</label>
              <textarea placeholder="Qué querés hacer, metros, zona, plazos..." value={f.msg} onChange={up("msg")} /></div>
            <button className="submit" type="submit">Enviar consulta gratis <span>→</span></button>
            <div className="note">Se abre WhatsApp con tu mensaje listo para enviar.</div>
          </form>
        </div>
      </div>
    </section>);

}

// ── FOOTER ───────────────────────────────────────────────────────────────────
function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="gr-foot">
      <div className="wrap">
        <div className="row">
          <div className="brand">
            <img src="assets/logo-white.png" alt="Grupo Remodelar" />
            <p>Construcción, remodelación integral y flipping inmobiliario en CABA y GBA. Tu inversión inteligente comienza acá.</p>
          </div>
          <div>
            <h4>Servicios</h4>
            <a className="flink" href="#servicios">Remodelación y refacciones</a>
            <a className="flink" href="#servicios">Construcción y ampliaciones</a>
            <a className="flink" href="#servicios">Flipping inmobiliario</a>
            <a className="flink" href="#servicios">Gestoría de bienes raíces</a>
          </div>
          <div>
            <h4>Navegación</h4>
            <a className="flink" href="#obras">Obras</a>
            <a className="flink" href="#proceso">Proceso</a>
            <a className="flink" href="#contacto">Cotización gratis</a>
          </div>
          <div>
            <h4>Contacto</h4>
            <a className="flink" href={`https://wa.me/${WA_NUM}`} target="_blank" rel="noopener">WhatsApp · 11 5052-2993</a>
            <a className="flink" href={`mailto:${MAIL}`}>{MAIL}</a>
            <a className="flink" href={IG_URL} target="_blank" rel="noopener">Instagram · @grupo_remodelar</a>
            <a className="flink" href={TT_URL} target="_blank" rel="noopener">TikTok · @grupo_remodelar</a>
            <a className="flink" href={FB_URL} target="_blank" rel="noopener">Facebook</a>
            <span className="flink" style={{ color: "var(--gr-gray-500)" }}>Juan B. Justo 8921 · Versailles, CABA</span>
          </div>
        </div>
        <div className="legal">
          <span>© Grupo Remodelar 2015 - 2025 · Todos los derechos reservados</span>
          <span>Grupo Doblezzeta</span>
          <span>gruporemodelar · CABA · GBA</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { ProcesoIntro, Proceso, Contacto, Footer });