// sections.jsx — Nav, Servicios, Obras.  Exports → window
const GRWA_LINK = (m) => "https://wa.me/5491150522993?text=" + encodeURIComponent("Hola, ¿cómo estás? " + m + ".");
const { useState: useS } = React;
const HImg = (f, w = 1100) => `https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=${w},fit=crop/Jcf6EuSlCZ7Z3w5j/${f}`;
const WA_SVC = "https://wa.me/5491150522993?text=" + encodeURIComponent("Hola Grupo Remodelar 👷 quiero consultar por un servicio.");

// ── NAV ───────────────────────────────────────────────────────────────────
function Nav() {
  const { scrolled, progress } = window.useNavScroll();
  const links = [["#servicios", "Servicios"], ["#obras", "Obras"], ["#proceso", "Proceso"], ["#contacto", "Contacto"]];
  return (
    <>
      <div className="gr-progress" style={{ width: progress + "%" }} />
      <nav className={"gr-nav" + (scrolled ? " scrolled" : "")}>
        <a className="brand" href="#top">
          <img src="assets/logo-white.png" alt="Grupo Remodelar" />
          <span className="tag">Remodelación<br />y construcción</span>
        </a>
        <div className="links">
          {links.map(([h, t]) => <a key={h} href={h}>{t}<span /></a>)}
        </div>
        <a className="gr-cta" href={GRWA_LINK("Cotización gratis")} target="_blank" rel="noopener">Cotización gratis <span className="arrow">→</span></a>
      </nav>
    </>);

}

// ── SERVICIOS ────────────────────────────────────────────────────────────────
const SVC_OBRA = [
["01", "Remodelación y refacciones", "Actualización de espacios, mejoras funcionales, cambio de materiales y terminaciones de alta prestación para viviendas y locales."],
["02", "Construcción y ampliaciones", "Obra nueva llave en mano, ampliaciones funcionales y quinchos con planos aprobados y gestión documental."],
["03", "Venta de propiedades", "Nos ocupamos de la tasación y la comercialización de tu propiedad, con criterio profesional de punta a punta."],
["04", "Puesta en valor", "Relevamiento, propuesta de diseño, planificación, cronograma y renders para potenciar tu propiedad."]];


function SvcRow({ n, t, d, yellow }) {
  return (
    <div className={"svc-row reveal" + (yellow ? " yellow" : "")}>
      <span className="fill" />
      <span className="n">{n}</span>
      <span><span className="t" style={{ fontSize: "clamp(19px, 5.2vw, 32px)" }}>{t}</span></span>
      <span className="d" style={{ fontSize: "16px" }}>{d}</span>
    </div>);

}

function Servicios() {
  return (
    <section className="section light" id="servicios" data-screen-label="Servicios" style={{ padding: "89px 28px 120px", margin: "-1px" }}>
      <div className="wrap">
        <div className="section-head reveal" style={{ display: "block" }}>
          <div className="idx" style={{ fontSize: "15px", marginBottom: "12px", lineHeight: "1" }}>/ 01 — Servicios</div>
          <h2 style={{ fontSize: "clamp(28px, 3.8vw, 44px)", margin: 0, whiteSpace: "nowrap" }}>Lo que hacemos.</h2>
          <p className="lead" style={{ marginTop: "14px", maxWidth: "640px", fontSize: "18px" }}>Somos Grupo Remodelar, un equipo especializado en remodelación, construcción,
            refacción y venta de propiedades residenciales y comerciales en CABA y GBA.</p>
        </div>

        <div className="svc-group">
          <div className="glabel" style={{ marginTop: "52px" }}><span className="gt">Obra</span><span className="gline" /></div>
          {SVC_OBRA.map((s) => <SvcRow key={s[0]} n={s[0]} t={s[1]} d={s[2]} />)}
        </div>

        <div className="hero-actions reveal" data-d="1" style={{ marginTop: 44 }}>
          <a className="btn solid" href={GRWA_LINK("Quiero asesorarme gratis")} target="_blank" rel="noopener">Quiero asesorarme gratis <span className="arrow">→</span></a>
        </div>

      </div>
    </section>);

}

// ── OBRAS ────────────────────────────────────────────────────────────────────
const PROJECTS = [
{ id: "01", cat: "Integral", title: "Remodelación integral", place: "CABA y GBA", span: "c6", ratio: 66, img: "581839161_835579832294200_2268606676077958719_n-Ew5QgfPKGNpI1PdA.jpg" },
{ id: "02", cat: "Cocinas", title: "Cocina a nueva", place: "CABA y GBA", span: "c6", ratio: 66, local: ["assets/obras/cocina-1.jpg", "assets/obras/cocina-2.jpg"] },
{ id: "03", cat: "Baños", title: "Baño funcional", place: "CABA y GBA", span: "c6", ratio: 66, local: ["assets/obras/bano-1.jpg", "assets/obras/bano-2.jpg", "assets/obras/bano-3.jpg"] },
{ id: "04", cat: "Integral", title: "Puesta en valor", place: "CABA y GBA", span: "c6", ratio: 66, img: "whatsapp-image-2025-11-10-at-15.35.31-XLTLROYvPCenGcZG.jpeg" },
{ id: "05", cat: "Livings", title: "Living a nuevo", place: "CABA y GBA", span: "c6", ratio: 66, local: ["assets/obras/living-1.jpg", "assets/obras/living-2.jpg"] },
{ id: "06", cat: "Comercial", title: "Obra comercial", place: "CABA y GBA", span: "c6", ratio: 66, local: ["assets/obras/comercial-1.jpg"] }];

const CATS = ["Todas", "Integral", "Cocinas", "Baños", "Livings", "Comercial"];

function ObraCard({ p }) {
  const shots = p.local || [HImg(p.img, 1000)];
  const [i, setI] = useS(0);
  const go = (e, d) => { e.stopPropagation(); setI((v) => (v + d + shots.length) % shots.length); };
  return (
    <div className={"obra-card " + p.span} data-hot>
      <span className="tag-corner mono">OBRA {p.id}</span>
      {shots.map((s, k) =>
      <div className={"ph shot" + (k === i ? " on" : "")} key={s}><img src={s} alt={p.title} loading="lazy" /></div>
      )}
      <div className="sizer" style={{ paddingTop: p.ratio + "%" }} />
      <div className="ovl">
        <span className="cat">{p.cat}</span>
        <h3>{p.title}</h3>
        <span className="meta">{p.place} · Grupo Remodelar</span>
      </div>
      {shots.length > 1 &&
      <div className="carousel-ui">
        <button className="cbtn prev" aria-label="Anterior" onClick={(e) => go(e, -1)}>‹</button>
        <span className="cdots">{shots.map((s, k) => <i key={s} className={k === i ? "on" : ""} />)}</span>
        <button className="cbtn next" aria-label="Siguiente" onClick={(e) => go(e, 1)}>›</button>
      </div>}
    </div>);

}

function Obras() {
  const [cat, setCat] = useS("Todas");
  const list = cat === "Todas" ? PROJECTS : PROJECTS.filter((p) => p.cat === cat);
  return (
    <section className="section obras-section" id="obras" data-screen-label="Obras">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="idx">/ 02 — Portfolio</div>
            <h2>Obras<br />que hablan.</h2>
          </div>
          <p className="lead">Cada obra entregada es nuestra mejor carta de presentación.
            Remodelaciones, cocinas, baños y obra comercial en CABA y GBA.</p>
        </div>
        <div className="filters reveal">
          {CATS.map((c) =>
          <button key={c} className={c === cat ? "on" : ""} onClick={() => setCat(c)}>{c}</button>
          )}
        </div>
        <div className="obra-grid reveal" data-d="1">
          {list.map((p) => <ObraCard key={p.id} p={p} />)}
        </div>
      </div>
    </section>);

}

Object.assign(window, { Nav, Servicios, Obras });