// sections.jsx — Nav, Servicios, Obras.  Exports → window
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={WA_SVC} 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", "Gestión de proyectos", "Control de obra, comunicación fluida y seguimiento. Presupuestos detallados, contratos transparentes y reglas claras."],
["04", "Puesta en valor", "Relevamiento, propuesta de diseño, planificación, cronograma y renders para potenciar tu propiedad."]];

const SVC_DIGITAL = [
["05", "Flipping inmobiliario", "Asesoramos la compra, remodelamos estratégicamente y preparamos la propiedad para una reventa rápida con mayor precio."],
["06", "Escaneo & asesoramiento", "Revisión general de tu inmueble sin costo antes de comprar, vender o invertir."],
["07", "Marketing post obra", "Plan de contenidos gratuito: filmaciones con estabilizadores y drones e imágenes de calidad para acelerar visitas y ofertas."],
["08", "Gestoría de bienes raíces", "Gestión documental y acompañamiento para comprar, vender o alquilar 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 construcción y remodelación de
            propiedades residenciales y comerciales en CABA y GBA — y también en flipping inmobiliario
            para que tu inversión rinda.</p>
        </div>

        <div className="svc-group">
          <div className="glabel"><span className="gt">A · 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="svc-group">
          <div className="glabel"><span className="gt">B · <b style={{ fontSize: "clamp(18px, 5vw, 31px)" }}>Inversión & flipping</b></span><span className="gline" /></div>
          {SVC_DIGITAL.map((s) => <SvcRow key={s[0]} n={s[0]} t={s[1]} d={s[2]} yellow />)}
        </div>
      </div>
    </section>);

}

// ── OBRAS ────────────────────────────────────────────────────────────────────
const PROJECTS = [
{ id: "01", cat: "Integral", title: "Remodelación integral", place: "CABA y GBA", span: "c8", ratio: 52, img: "0d89cbdba9ba43075063dd201be99c5f-JgEYo5aza7yJb5ll.jpg" },
{ id: "02", cat: "Cocinas", title: "Cocina a nueva", place: "CABA y GBA", span: "c4", ratio: 104, img: "490993811_1569747100388396_372947257338847253_n-otmE8hZ3L5G5ra3s.jpg" },
{ id: "03", cat: "Baños", title: "Baño funcional", place: "CABA y GBA", span: "c4", ratio: 104, img: "e501f503fb377144655553fca8cc3022-6GhyxUSo709BD6yD.jpg" },
{ id: "04", cat: "Comercial", title: "Obra comercial", place: "CABA y GBA", span: "c8", ratio: 52, img: "581839161_835579832294200_2268606676077958719_n-Ew5QgfPKGNpI1PdA.jpg" },
{ id: "05", cat: "Cocinas", title: "Cocina + living", place: "CABA y GBA", span: "c6", ratio: 60, img: "7f8ff04d13a7718712ff961e260f4f52-00aI8J8l6YfiVzYE.jpg" },
{ id: "06", cat: "Integral", title: "Puesta en valor", place: "CABA y GBA", span: "c6", ratio: 60, img: "whatsapp-image-2025-11-10-at-15.35.31-XLTLROYvPCenGcZG.jpeg" }];

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

function ObraCard({ p }) {
  return (
    <div className={"obra-card " + p.span} data-hot>
      <span className="tag-corner mono">OBRA {p.id}</span>
      <div className="ph"><img src={HImg(p.img, 1000)} alt={p.title} /></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>
    </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 });