// Listing, Detail, About, Publish pages

// ========== LISTING PAGE ==========
function ListingPage({ onOpenProperty, initialFilters, tweaks }) {
  const [filters, setFilters] = useState({
    operation: "Arriendo",
    type: "Todos",
    commune: "Todas",
    minPrice: 0,
    maxPrice: 5000000,
    bedrooms: "any",
    ...(initialFilters || {}),
  });
  const [view, setView] = useState("grid"); // grid | map
  const [sortBy, setSortBy] = useState("featured");

  const filtered = useMemo(() => {
    let list = window.GR_DATA.PROPERTIES.filter((p) => {
      if (filters.type !== "Todos" && p.type !== filters.type) return false;
      if (filters.commune !== "Todas" && p.commune !== filters.commune) return false;
      if (p.price < filters.minPrice || p.price > filters.maxPrice) return false;
      if (filters.bedrooms !== "any" && p.bedrooms < parseInt(filters.bedrooms)) return false;
      return true;
    });
    if (sortBy === "price-asc") list = [...list].sort((a, b) => a.price - b.price);
    if (sortBy === "price-desc") list = [...list].sort((a, b) => b.price - a.price);
    if (sortBy === "area-desc") list = [...list].sort((a, b) => b.area - a.area);
    if (sortBy === "featured") list = [...list].sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0));
    return list;
  }, [filters, sortBy]);

  return (
    <main className="page-listing">
      <div className="listing-head">
        <div className="shell">
          <div className="breadcrumb">
            <span>Inicio</span> <Icon name="chevron" size={12} stroke={2} /> <span>Propiedades en arriendo</span>
          </div>
          <h1 className="listing-title">
            Propiedades en <em>arriendo</em>
            <span className="listing-count">{filtered.length} resultados</span>
          </h1>
        </div>
      </div>

      <div className="shell listing-shell">
        <aside className="filter-side">
          <h3>Filtros</h3>
          <FilterGroup label="Tipo de propiedad">
            <ChipGroup options={window.GR_DATA.TYPES} value={filters.type} onChange={(v) => setFilters({...filters, type: v})} />
          </FilterGroup>
          <FilterGroup label="Comuna">
            <div className="checklist">
              {window.GR_DATA.COMMUNES.map((c) => (
                <label key={c} className="check">
                  <input type="radio" name="commune" checked={filters.commune === c} onChange={() => setFilters({...filters, commune: c})} />
                  <span>{c}</span>
                </label>
              ))}
            </div>
          </FilterGroup>
          <FilterGroup label="Dormitorios">
            <ChipGroup
              options={["any","1","2","3","4"]}
              labels={{any: "Cualquiera", "1": "1+", "2": "2+", "3": "3+", "4": "4+"}}
              value={filters.bedrooms}
              onChange={(v) => setFilters({...filters, bedrooms: v})}
            />
          </FilterGroup>
          <FilterGroup label={`Precio máximo: ${formatCLP(filters.maxPrice)}`}>
            <input
              type="range"
              min={400000}
              max={4000000}
              step={50000}
              value={filters.maxPrice}
              onChange={(e) => setFilters({...filters, maxPrice: parseInt(e.target.value)})}
              className="range"
            />
            <div className="range-labels">
              <span>$400K</span><span>$4M+</span>
            </div>
          </FilterGroup>
          <button
            className="btn-link"
            onClick={() => setFilters({operation: "Arriendo", type: "Todos", commune: "Todas", minPrice: 0, maxPrice: 5000000, bedrooms: "any"})}
          >
            Limpiar filtros
          </button>
        </aside>

        <section className="listing-main">
          <div className="listing-toolbar">
            <div className="view-switch">
              <button className={view === "grid" ? "is-active" : ""} onClick={() => setView("grid")}>
                <Icon name="grid" size={14} stroke={2} /> Grilla
              </button>
              <button className={view === "map" ? "is-active" : ""} onClick={() => setView("map")}>
                <Icon name="map" size={14} stroke={2} /> Mapa
              </button>
            </div>
            <div className="sort">
              <span>Ordenar:</span>
              <select value={sortBy} onChange={(e) => setSortBy(e.target.value)}>
                <option value="featured">Destacados primero</option>
                <option value="price-asc">Menor precio</option>
                <option value="price-desc">Mayor precio</option>
                <option value="area-desc">Mayor superficie</option>
              </select>
            </div>
          </div>

          {view === "grid" ? (
            filtered.length > 0 ? (
              <div className="prop-grid prop-grid-3">
                {filtered.map((p) => (
                  <PropertyCard key={p.id} property={p} onOpen={onOpenProperty} cardStyle={tweaks.cardStyle} />
                ))}
              </div>
            ) : (
              <div className="empty-state">
                <h3>No encontramos propiedades con esos filtros.</h3>
                <p>Prueba ajustar la comuna o el precio máximo.</p>
              </div>
            )
          ) : (
            <ListingMapView properties={filtered} onOpen={onOpenProperty} cardStyle={tweaks.cardStyle} />
          )}
        </section>
      </div>
    </main>
  );
}

function FilterGroup({ label, children }) {
  return (
    <div className="filter-group">
      <h4>{label}</h4>
      {children}
    </div>
  );
}

function ChipGroup({ options, value, onChange, labels }) {
  return (
    <div className="chip-group">
      {options.map((o) => (
        <button key={o} className={"chip" + (value === o ? " is-active" : "")} onClick={() => onChange(o)}>
          {labels?.[o] || o}
        </button>
      ))}
    </div>
  );
}

function ListingMapView({ properties, onOpen, cardStyle }) {
  const [active, setActive] = useState(properties[0]);
  useEffect(() => {
    if (properties.length > 0 && !properties.find(p => p.id === active?.id)) {
      setActive(properties[0]);
    }
  }, [properties]);
  if (properties.length === 0) return <div className="empty-state"><h3>Sin resultados</h3></div>;
  return (
    <div className="listing-map">
      <div className="listing-map-canvas">
        <MapSurface properties={properties} active={active} setActive={setActive} />
      </div>
      <div className="listing-map-list">
        {properties.map((p) => (
          <button
            key={p.id}
            className={"map-list-card" + (active?.id === p.id ? " is-active" : "")}
            onClick={() => setActive(p)}
            onDoubleClick={() => onOpen(p)}
          >
            <img src={p.image} alt="" />
            <div>
              <div className="map-list-tag">{p.commune}</div>
              <div className="map-list-title">{p.title}</div>
              <div className="map-list-specs">{p.bedrooms}d · {p.bathrooms}b{p.area > 0 ? ` · ${p.area}m²` : ""}</div>
              <div className="map-list-price">{formatPrice(p)}</div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

// ========== DETAIL PAGE ==========
function DetailPage({ property, onBack, onOpenProperty }) {
  const [activeImg, setActiveImg] = useState(0);
  const [tab, setTab] = useState("desc");
  if (!property) return null;
  const wa = buildWaLink(`Hola, me interesa la propiedad "${property.title}" en ${property.commune} (REF ${property.id.toUpperCase()}). ¿Podemos coordinar una visita?`);
  const otherProps = window.GR_DATA.PROPERTIES.filter(p => p.id !== property.id && p.type === property.type).slice(0, 3);

  return (
    <main className="page-detail">
      <div className="shell detail-head">
        <button className="back-link" onClick={onBack}>
          <Icon name="chevron" size={14} stroke={2} style={{transform: "rotate(180deg)"}} /> Volver al listado
        </button>
        <div className="detail-meta">
          <span className="detail-ref">REF {property.id.toUpperCase()}</span>
        </div>
      </div>

      <div className="shell detail-shell">
        <header className="detail-title-block">
          <div>
            <div className="detail-tags">
              <span className="badge badge-operation">{property.operation}</span>
              <span className="badge badge-type">{property.type}</span>
              {property.new && <span className="badge badge-new">Nuevo</span>}
            </div>
            <h1>{property.title}</h1>
            <div className="detail-address"><Icon name="pin" size={16} /> {property.address}</div>
          </div>
          <div className="detail-price-block">
            {property.promoPrice && <div className="detail-promo">{property.promoLabel}</div>}
            <div className="detail-price">{formatPrice(property)} <span>{priceLabel(property)}</span></div>
            {property.expenses > 0 && <div className="detail-expenses">+ {formatCLP(property.expenses)} gastos comunes</div>}
          </div>
        </header>

        <div className="detail-gallery">
          <div className="gallery-main">
            <img src={property.gallery[activeImg]} alt={property.title} />
            <button className="gallery-nav prev" onClick={() => setActiveImg((activeImg - 1 + property.gallery.length) % property.gallery.length)}>
              <Icon name="chevron" size={20} stroke={2} style={{transform: "rotate(180deg)"}}/>
            </button>
            <button className="gallery-nav next" onClick={() => setActiveImg((activeImg + 1) % property.gallery.length)}>
              <Icon name="chevron" size={20} stroke={2} />
            </button>
            <div className="gallery-count">{activeImg + 1} / {property.gallery.length}</div>
          </div>
          <div className="gallery-thumbs">
            {property.gallery.map((g, i) => (
              <button key={i} className={"thumb" + (i === activeImg ? " is-active" : "")} onClick={() => setActiveImg(i)}>
                <img src={g} alt="" />
              </button>
            ))}
          </div>
        </div>

        <div className="detail-body">
          <div className="detail-main">
            <div className="detail-specs-row">
              <div className="spec-tile"><Icon name="bed" size={20} /><strong>{property.bedrooms}</strong><span>Dormitorios</span></div>
              <div className="spec-tile"><Icon name="bath" size={20} /><strong>{property.bathrooms}</strong><span>Baños</span></div>
              {property.area > 0 && <div className="spec-tile"><Icon name="area" size={20} /><strong>{property.area}</strong><span>m² útiles</span></div>}
              {property.parking > 0 && <div className="spec-tile"><Icon name="car" size={20} /><strong>{property.parking}</strong><span>Estac.</span></div>}
              {property.storage > 0 && <div className="spec-tile"><Icon name="grid" size={20} /><strong>{property.storage}</strong><span>Bodega</span></div>}
            </div>

            <nav className="detail-tabs">
              <button className={tab === "desc" ? "is-active" : ""} onClick={() => setTab("desc")}>Descripción</button>
              <button className={tab === "features" ? "is-active" : ""} onClick={() => setTab("features")}>Características</button>
              <button className={tab === "location" ? "is-active" : ""} onClick={() => setTab("location")}>Ubicación</button>
            </nav>

            {tab === "desc" && (
              <div className="detail-section">
                <h3>Sobre esta propiedad</h3>
                <p className="lede">{property.description}</p>
              </div>
            )}
            {tab === "features" && (
              <div className="detail-section">
                <h3>Equipamiento y servicios</h3>
                <ul className="features-list">
                  {property.features.map((f) => (
                    <li key={f}><Icon name="check" size={14} stroke={2.4} /> {f}</li>
                  ))}
                </ul>
              </div>
            )}
            {tab === "location" && (
              <div className="detail-section">
                <h3>Ubicación</h3>
                <p>{property.address}. Sector consolidado con accesos a vías principales, comercio y transporte público.</p>
                <div className="detail-mini-map">
                  <MapSurface properties={[property]} active={property} setActive={() => {}} />
                </div>
              </div>
            )}
          </div>

          <aside className="detail-side">
            <div className="agent-card">
              <div className="agent-avatar">LC</div>
              <div className="agent-info">
                <div className="agent-name">Leonardo Carrasco</div>
                <div className="agent-role">COO · +10 años de experiencia</div>
                <div className="agent-rating">
                  {[1,2,3,4,5].map((s) => <Icon key={s} name="star" size={12} />)}
                  <span>4,9 (218 reseñas)</span>
                </div>
              </div>
            </div>
            {property.status ? (
              <div className="detail-status-banner">
                <strong>Esta propiedad ya fue {property.status.toLowerCase()}</strong>
                <p>Revisa nuestras otras propiedades disponibles o contáctanos para encontrar lo que buscas.</p>
                <a className="wa-btn wa-btn-lg" href={buildWaLink("Hola, busco una propiedad similar a " + property.title + ". ¿Tienen algo disponible?")} target="_blank" rel="noopener">
                  <Icon name="wa" size={20} />
                  <span>
                    <strong>Buscar similar</strong>
                    <em>Te ayudamos a encontrar otra opción</em>
                  </span>
                </a>
              </div>
            ) : (
              <>
            <a className="wa-btn wa-btn-lg" href={wa} target="_blank" rel="noopener">
              <Icon name="wa" size={20} />
              <span>
                <strong>Consultar por WhatsApp</strong>
                <em>Respondemos en menos de 30 min</em>
              </span>
            </a>
            <a className="btn-secondary lg" href={`tel:${window.GR_DATA.WHATSAPP_NUMBER}`}>
              <Icon name="phone" size={16} /> Llamar al corredor
            </a>

            <div className="visit-form">
              <h4>Agendar visita</h4>
              <input type="text" placeholder="Tu nombre" />
              <input type="tel" placeholder="Teléfono" />
              <select defaultValue="">
                <option value="" disabled>Día preferido</option>
                <option>Esta semana</option>
                <option>Próxima semana</option>
                <option>Este fin de semana</option>
              </select>
              <button className="btn-primary full" onClick={(e) => { e.preventDefault(); alert("¡Recibimos tu solicitud! Te contactaremos pronto."); }}>
                Solicitar visita
              </button>
              <div className="visit-disclaimer">
                <Icon name="shield" size={12} /> Sin compromiso · Te contactamos en menos de 1 hora hábil
              </div>
            </div>
              </>
            )}
          </aside>
        </div>

        {otherProps.length > 0 && (
          <section className="detail-similar">
            <h2 className="section-title small">Otras propiedades que te pueden interesar</h2>
            <div className="prop-grid prop-grid-3">
              {otherProps.map((p) => (
                <PropertyCard key={p.id} property={p} onOpen={onOpenProperty} cardStyle="rounded" />
              ))}
            </div>
          </section>
        )}
      </div>
    </main>
  );
}

// ========== ABOUT PAGE ==========
function AboutPage({ onNavigate }) {
  return (
    <main className="page-about">
      <section className="about-hero">
        <div className="shell">
          <span className="section-eyebrow">Sobre nosotros</span>
          <h1 className="about-hero-title">Asesoría integral con visión<br/><em>legal, estratégica y humana.</em></h1>
          <p className="lede">
            GR Gestión Inmobiliaria y Asesorías Jurídicas SpA nace en el año 2012 como una firma orientada a entregar soluciones integrales en el ámbito jurídico, inmobiliario y corporativo.
          </p>
        </div>
      </section>

      <section className="section history-section">
        <div className="shell history-grid">
          <aside className="history-aside">
            <h3>Nuestros pilares</h3>
            <div className="history-pillars">
              <div className="pillar"><strong>Derecho</strong><p>Respaldo técnico y normativo para la protección de los intereses de cada cliente.</p></div>
              <div className="pillar"><strong>Ingeniería Comercial</strong><p>Visión estratégica, financiera y de gestión empresarial.</p></div>
              <div className="pillar"><strong>Mediación Familiar</strong><p>Perspectiva conciliadora, humana y orientada a soluciones sostenibles.</p></div>
            </div>
          </aside>
          <div className="history-body">
            <h2 className="section-title">Nuestra Historia</h2>
            <p>GR Gestión Inmobiliaria y Asesorías Jurídicas SpA nace en el año 2012 como una firma orientada a entregar soluciones integrales en el ámbito jurídico, inmobiliario y corporativo, desarrollando un modelo de asesoría que combina una visión legal, estratégica y humana.</p>
            <p>La trayectoria de la empresa se ha construido sobre una formación multidisciplinaria que integra el ejercicio del Derecho, la Ingeniería Comercial y la Mediación Familiar, permitiendo abordar cada situación desde una perspectiva técnica, financiera y de resolución de conflictos.</p>
            <p>Esta integración profesional ha permitido que GR evolucione más allá de una asesoría tradicional, consolidándose como una empresa capaz de acompañar a personas, familias, inversionistas y empresas en materias patrimoniales, contractuales, inmobiliarias y corporativas, considerando no solo los aspectos legales, sino también la gestión estratégica y el impacto humano de cada decisión.</p>

            <div className="history-expertise">
              <h4>Desde sus inicios, la firma ha desarrollado experiencia en:</h4>
              <ul>
                <li>Gestión y administración inmobiliaria</li>
                <li>Corretaje y estructuración de negocios inmobiliarios</li>
                <li>Derecho Civil e Inmobiliario</li>
                <li>Redacción y negociación contractual</li>
                <li>Asesoría corporativa y comercial</li>
                <li>Gestión patrimonial y administrativa</li>
                <li>Mediación y resolución estratégica de conflictos</li>
                <li>Regularización documental y análisis legal preventivo</li>
              </ul>
            </div>

            <p>La formación jurídica aporta el respaldo técnico y normativo necesario para la protección de los intereses de cada cliente; la Ingeniería Comercial incorpora una visión estratégica, financiera y de gestión empresarial; mientras que la Mediación Familiar permite abordar conflictos desde una perspectiva conciliadora, humana y orientada a soluciones sostenibles.</p>
            <p>A lo largo de los años, GR Gestión Inmobiliaria y Asesorías Jurídicas SpA ha consolidado una forma de trabajo basada en la cercanía, la confianza y la excelencia profesional, entendiendo que cada cliente requiere soluciones integrales y personalizadas, adaptadas a la complejidad de sus necesidades jurídicas, patrimoniales y comerciales.</p>
            <p>Actualmente, la empresa continúa proyectándose como una firma multidisciplinaria comprometida con la innovación, la ética profesional y el acompañamiento estratégico de sus clientes, integrando experiencia legal, gestión corporativa y habilidades de negociación y mediación en cada uno de sus servicios.</p>
          </div>
        </div>

        <div className="shell mvv-grid">
          <div className="mvv-card">
            <span className="mvv-num">01</span>
            <h3>Nuestra Misión</h3>
            <p>Brindar asesoría jurídica, inmobiliaria y corporativa con un enfoque estratégico, humano y multidisciplinario, integrando Derecho, Ingeniería Comercial y Mediación para entregar soluciones eficientes, preventivas y personalizadas.</p>
          </div>
          <div className="mvv-card" style={{ background: "var(--accent, #e63027)", color: "white" }}>
            <span className="mvv-num" style={{ color: "rgba(255,255,255,0.4)" }}>02</span>
            <h3 style={{ color: "white" }}>Nuestra Visión</h3>
            <p>Ser una empresa referente en Chile en asesoría jurídica e inmobiliaria integral, destacando por su visión multidisciplinaria, excelencia profesional y capacidad de generar soluciones estratégicas y sostenibles para personas y empresas.</p>
          </div>
          <div className="mvv-card mvv-card-values">
            <span className="mvv-num">03</span>
            <h3>Nuestros Valores</h3>
            <ul>
              <li>Excelencia profesional</li>
              <li>Ética y responsabilidad</li>
              <li>Cercanía y confianza</li>
              <li>Visión estratégica y multidisciplinaria</li>
              <li>Resolución eficiente de conflictos</li>
              <li>Compromiso con la protección patrimonial y jurídica</li>
            </ul>
          </div>
        </div>
      </section>

      <section className="section milestones-section">
        <div className="shell timeline">
          <h2 className="section-title">Nuestra historia, en hitos.</h2>
          <ol className="timeline-list">
            <li><span className="t-year">2012</span><div><h4>Fundación de la empresa</h4><p>GR Gestión Inmobiliaria y Asesorías Jurídicas SpA inicia sus actividades con el propósito de entregar asesoría integral en materias jurídicas, inmobiliarias y contractuales, desarrollando desde sus inicios un enfoque orientado a la gestión estratégica y la protección patrimonial de sus clientes.</p></div></li>
            <li><span className="t-year">2013 – 2015</span><div><h4>Consolidación en gestión inmobiliaria</h4><p>La empresa fortalece sus servicios de administración y corretaje de propiedades, adquiriendo experiencia en contratos de arriendo, gestión de arrendatarios, cobranza, regularización documental y administración patrimonial.</p></div></li>
            <li><span className="t-year">2016</span><div><h4>Desarrollo de enfoque corporativo y comercial</h4><p>GR incorpora una visión estratégica y de gestión empresarial, integrando herramientas de Ingeniería Comercial para potenciar la asesoría corporativa, la planificación financiera y la toma de decisiones en negocios e inversiones.</p></div></li>
            <li><span className="t-year">2017 – 2018</span><div><h4>Expansión de asesoría jurídica y contractual</h4><p>La firma amplía sus servicios en Derecho Civil e Inmobiliario, fortaleciendo la redacción, revisión y negociación de contratos, así como la asesoría preventiva para personas y empresas.</p></div></li>
            <li><span className="t-year">2019</span><div><h4>Integración de mediación y resolución de conflictos</h4><p>Se incorpora un enfoque basado en mediación y negociación estratégica, integrando herramientas de resolución colaborativa de conflictos y acompañamiento humano en procesos complejos.</p></div></li>
            <li><span className="t-year">2020 – 2021</span><div><h4>Consolidación multidisciplinaria</h4><p>GR fortalece un modelo de trabajo que integra Derecho, Ingeniería Comercial y Mediación Familiar, permitiendo entregar soluciones más completas, estratégicas y personalizadas.</p></div></li>
            <li><span className="t-year">2022</span><div><h4>Expansión de servicios integrales</h4><p>La empresa amplía su participación en gestión patrimonial, asesoría corporativa, administración inmobiliaria y regularización legal, consolidando relaciones de largo plazo con clientes particulares y empresas.</p></div></li>
            <li><span className="t-year">2023 – 2024</span><div><h4>Fortalecimiento de asesoría preventiva y estratégica</h4><p>GR desarrolla un enfoque orientado a la prevención de conflictos, protección patrimonial y estructuración jurídica y comercial de negocios e inversiones.</p></div></li>
            <li><span className="t-year">2025 – Actualidad</span><div><h4>Proyección y crecimiento</h4><p>Actualmente, GR Gestión Inmobiliaria y Asesorías Jurídicas SpA continúa proyectándose como una firma multidisciplinaria comprometida con la excelencia profesional, integrando experiencia jurídica, gestión estratégica y resolución eficiente de conflictos para entregar soluciones integrales y de alto valor a sus clientes.</p></div></li>
          </ol>
        </div>
      </section>

      <section className="section team-section">
        <div className="shell">
          <header className="section-head center">
            <span className="section-eyebrow">Nuestro equipo</span>
            <h2 className="section-title">Las personas detrás de <em>cada decisión</em>.</h2>
          </header>
          <div className="team-grid">
            {window.GR_DATA.TEAM.map((t) => (
              <article key={t.name} className="team-card">
                <div className="team-avatar">{t.avatar}</div>
                <h3>{t.name}</h3>
                <p>{t.role}</p>
                <a className="wa-btn-tiny" href={buildWaLink(`Hola ${t.name.split(" ")[0]}, te escribo desde la web de GR.`)} target="_blank" rel="noopener">
                  <Icon name="wa" size={12} /> Escribir
                </a>
              </article>
            ))}
          </div>
        </div>
      </section>

      <PublishCTA onNavigate={onNavigate} />
    </main>
  );
}

// ========== PUBLISH PAGE ==========
function PublishPage({ onNavigate }) {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    type: "Departamento",
    commune: "",
    address: "",
    bedrooms: 2,
    bathrooms: 1,
    area: 60,
    expectedPrice: 800000,
    name: "",
    phone: "",
    email: "",
  });
  const [submitted, setSubmitted] = useState(false);

  if (submitted) {
    return (
      <main className="page-publish">
        <div className="shell publish-success">
          <div className="success-icon"><Icon name="check" size={48} stroke={2.5} /></div>
          <h1>¡Recibimos tu propiedad!</h1>
          <p>Te llamaremos antes de las próximas 4 horas hábiles para coordinar la visita de tasación. Si lo prefieres, escríbenos directo:</p>
          <a className="wa-btn wa-btn-lg" href={buildWaLink(`Hola, acabo de registrar mi ${data.type} en ${data.commune} en la web.`)} target="_blank" rel="noopener">
            <Icon name="wa" size={20} />
            <span><strong>Continuar por WhatsApp</strong><em>{window.GR_DATA.WHATSAPP_DISPLAY}</em></span>
          </a>
          <button className="btn-link" onClick={() => onNavigate("home")}>Volver al inicio</button>
        </div>
      </main>
    );
  }

  return (
    <main className="page-publish">
      <section className="publish-hero">
        <div className="shell">
          <span className="section-eyebrow">Para propietarios</span>
          <h1>Publica tu propiedad con GR.<br/><em>Tasación sin costo, arriendo en 21 días.</em></h1>
          <ul className="publish-benefits">
            <li><Icon name="check" size={14} stroke={2.4} /> Estudio de mercado y precio sugerido sin costo</li>
            <li><Icon name="check" size={14} stroke={2.4} /> Fotografía profesional + tour virtual incluido</li>
            <li><Icon name="check" size={14} stroke={2.4} /> Solo cobramos cuando arrendamos</li>
          </ul>
        </div>
      </section>

      <section className="shell publish-form-shell">
        <div className="form-progress">
          {[1,2,3].map((s) => (
            <div key={s} className={"progress-step" + (step >= s ? " is-done" : "")}>
              <span>{s}</span>
              <em>{s === 1 ? "Propiedad" : s === 2 ? "Detalles" : "Contacto"}</em>
            </div>
          ))}
        </div>

        <form className="publish-form" onSubmit={(e) => { e.preventDefault(); if (step < 3) setStep(step + 1); else setSubmitted(true); }}>
          {step === 1 && (
            <div className="form-step">
              <h2>¿Qué tipo de propiedad nos quieres mostrar?</h2>
              <div className="form-radio-grid">
                {["Departamento", "Casa"].map((t) => (
                  <label key={t} className={"radio-card" + (data.type === t ? " is-active" : "")}>
                    <input type="radio" name="type" checked={data.type === t} onChange={() => setData({...data, type: t})} />
                    <span>{t}</span>
                  </label>
                ))}
              </div>
              <div className="form-row">
                <div className="form-field">
                  <label>Comuna</label>
                  <select value={data.commune} onChange={(e) => setData({...data, commune: e.target.value})} required>
                    <option value="">Selecciona...</option>
                    {window.GR_DATA.COMMUNES.filter(c => c !== "Todas").map((c) => <option key={c}>{c}</option>)}
                  </select>
                </div>
                <div className="form-field">
                  <label>Dirección</label>
                  <input type="text" value={data.address} onChange={(e) => setData({...data, address: e.target.value})} placeholder="Huérfanos 1117" required />
                </div>
              </div>
            </div>
          )}
          {step === 2 && (
            <div className="form-step">
              <h2>Cuéntanos un poco más</h2>
              <div className="form-row">
                <div className="form-field">
                  <label>Dormitorios</label>
                  <input type="number" min="1" value={data.bedrooms} onChange={(e) => setData({...data, bedrooms: e.target.value})} />
                </div>
                <div className="form-field">
                  <label>Baños</label>
                  <input type="number" min="1" value={data.bathrooms} onChange={(e) => setData({...data, bathrooms: e.target.value})} />
                </div>
                <div className="form-field">
                  <label>Superficie (m²)</label>
                  <input type="number" min="20" value={data.area} onChange={(e) => setData({...data, area: e.target.value})} />
                </div>
              </div>
              <div className="form-field">
                <label>Precio que esperas (CLP/mes): <strong>{formatCLP(data.expectedPrice)}</strong></label>
                <input
                  type="range" min={300000} max={5000000} step={50000}
                  value={data.expectedPrice}
                  onChange={(e) => setData({...data, expectedPrice: parseInt(e.target.value)})}
                  className="range"
                />
                <div className="range-labels"><span>$300K</span><span>$5M+</span></div>
              </div>
              <div className="form-hint">
                <Icon name="sparkle" size={14} /> Te enviaremos un análisis comparativo con propiedades similares antes de la visita.
              </div>
            </div>
          )}
          {step === 3 && (
            <div className="form-step">
              <h2>¿Cómo te contactamos?</h2>
              <div className="form-field">
                <label>Nombre completo</label>
                <input type="text" value={data.name} onChange={(e) => setData({...data, name: e.target.value})} required />
              </div>
              <div className="form-row">
                <div className="form-field">
                  <label>Teléfono / WhatsApp</label>
                  <input type="tel" value={data.phone} onChange={(e) => setData({...data, phone: e.target.value})} placeholder="+56 9 ..." required />
                </div>
                <div className="form-field">
                  <label>Email</label>
                  <input type="email" value={data.email} onChange={(e) => setData({...data, email: e.target.value})} required />
                </div>
              </div>
              <div className="form-summary">
                <h4>Resumen</h4>
                <ul>
                  <li>{data.type} en <strong>{data.commune}</strong></li>
                  <li>{data.bedrooms} dorm · {data.bathrooms} baños · {data.area} m²</li>
                  <li>Precio esperado: <strong>{formatCLP(data.expectedPrice)}</strong>/mes</li>
                </ul>
              </div>
            </div>
          )}

          <div className="form-actions">
            {step > 1 && <button type="button" className="btn-secondary" onClick={() => setStep(step - 1)}>Atrás</button>}
            <button type="submit" className="btn-primary">
              {step < 3 ? "Continuar" : "Enviar y tasar mi propiedad"} <Icon name="arrow" size={14} stroke={2} />
            </button>
          </div>
        </form>
      </section>
    </main>
  );
}

// ========== CONTACT PAGE (lightweight, redirects to footer effectively) ==========
function ContactPage({ onNavigate }) {
  return (
    <main className="page-contact">
      <div className="shell contact-shell">
        <span className="section-eyebrow">Hablemos</span>
        <h1>Estamos a una conversación de distancia.</h1>
        <p className="lede">Respondemos por WhatsApp todos los días entre las 9:00 y las 22:00 hrs. En menos de 30 minutos en horario hábil.</p>
        <div className="contact-grid">
          <a className="contact-card wa" href={buildWaLink()} target="_blank" rel="noopener">
            <Icon name="wa" size={32} />
            <h3>WhatsApp directo</h3>
            <p>{window.GR_DATA.WHATSAPP_DISPLAY}</p>
            <span className="contact-link">Iniciar chat <Icon name="arrow" size={14} stroke={2}/></span>
          </a>
          <a className="contact-card" href={`tel:${window.GR_DATA.WHATSAPP_NUMBER}`}>
            <Icon name="phone" size={32} />
            <h3>Llamar a la oficina</h3>
            <p>{window.GR_DATA.WHATSAPP_DISPLAY}</p>
            <span className="contact-link">Marcar <Icon name="arrow" size={14} stroke={2}/></span>
          </a>
          <a className="contact-card" href="mailto:contacto@grgestion.cl">
            <Icon name="mail" size={32} />
            <h3>Escribir un email</h3>
            <p>contacto@grgestion.cl</p>
            <span className="contact-link">Enviar correo <Icon name="arrow" size={14} stroke={2}/></span>
          </a>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { ListingPage, DetailPage, AboutPage, PublishPage, ContactPage });