// Home page for GR Gestión Inmobiliaria

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH, useMemo: useMemoH } = React;

function HomePage({ onNavigate, onOpenProperty, tweaks }) {
  const featured = window.GR_DATA.PROPERTIES.filter((p) => p.featured);
  const [filters, setFilters] = useState({ operation: "Arriendo", type: "Todos", commune: "Todas" });

  const submitSearch = () => {
    onNavigate("listing", { initialFilters: filters });
  };

  return (
    <main className="page-home">
      <Hero filters={filters} setFilters={setFilters} onSearch={submitSearch} heroStyle={tweaks.heroStyle} />
      <TrustStrip />
      <FeaturedSection properties={featured} onOpen={onOpenProperty} onNavigate={onNavigate} cardStyle={tweaks.cardStyle} />
      <ServicesSection />
      <MapSection properties={window.GR_DATA.PROPERTIES} onOpen={onOpenProperty} />
      <AboutSection onNavigate={onNavigate} />
      <TestimonialsSection />
      <PublishCTA onNavigate={onNavigate} />
    </main>);

}

// ---------- HERO ----------
function Hero({ filters, setFilters, onSearch, heroStyle }) {
  return (
    <section className={"hero hero-style-" + heroStyle}>
      <div className="hero-bg">
        <img src="https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=2400&q=85" alt="" />
        <div className="hero-overlay" />
      </div>

      <div className="shell hero-shell">
        <div className="hero-eyebrow">
          <span className="eyebrow-dot" />
          <span>+13 años de experiencia conectando familias con su hogar</span>
        </div>
        <h1 className="hero-title">
          Encuentra el <em>hogar</em> que te merece.
          <span className="hero-title-sub">Las Condes · Santiago · Independencia · Estación Central</span>
        </h1>
        <p className="hero-lede">
          Curamos a mano cada propiedad en arriendo de nuestro portafolio. Sin filtros falsos, sin sorpresas: solo casas y departamentos listos para ser tu próximo hogar.
        </p>

        <SearchBar filters={filters} setFilters={setFilters} onSearch={onSearch} />

        <div className="hero-stats">
          <div><strong>+26</strong><span>años en el rubro</span></div>
          <div className="divider" />
          <div><strong>+1.800</strong><span>arriendos gestionados</span></div>
          <div className="divider" />
          <div><strong>98%</strong><span>renovaciones de contrato</span></div>
          <div className="divider" />
          <div><strong>4.9★</strong><span>en reseñas de clientes</span></div>
        </div>
      </div>

      <a href="#destacadas" className="hero-scroll">
        <span>Propiedades destacadas</span>
        <Icon name="chevron" size={16} stroke={2} />
      </a>
    </section>);

}

function SearchBar({ filters, setFilters, onSearch }) {
  const [tab, setTab] = useState("Arriendo");
  return (
    <div className="search-bar">
      <div className="search-tabs">
        <button className={"search-tab" + (tab === "Arriendo" ? " is-active" : "")} onClick={() => setTab("Arriendo")}>Arriendo</button>
        <button className={"search-tab"} disabled title="Próximamente">Arriendo amoblado</button>
      </div>
      <div className="search-fields">
        <div className="search-field">
          <label>Comuna</label>
          <select value={filters.commune} onChange={(e) => setFilters({ ...filters, commune: e.target.value })}>
            {window.GR_DATA.COMMUNES.map((c) => <option key={c}>{c}</option>)}
          </select>
        </div>
        <div className="search-field">
          <label>Tipo</label>
          <select value={filters.type} onChange={(e) => setFilters({ ...filters, type: e.target.value })}>
            {window.GR_DATA.TYPES.map((t) => <option key={t}>{t}</option>)}
          </select>
        </div>
        <div className="search-field">
          <label>Dormitorios</label>
          <select defaultValue="Cualquiera">
            <option>Cualquiera</option>
            <option>1+</option>
            <option>2+</option>
            <option>3+</option>
            <option>4+</option>
          </select>
        </div>
        <div className="search-field">
          <label>Precio máximo</label>
          <select defaultValue="Sin límite">
            <option>Sin límite</option>
            <option>$500.000</option>
            <option>$800.000</option>
            <option>$1.200.000</option>
            <option>$2.000.000</option>
            <option>$3.000.000+</option>
          </select>
        </div>
        <button className="search-submit" onClick={onSearch}>
          <Icon name="search" size={18} stroke={2} />
          <span>Buscar</span>
        </button>
      </div>
      <div className="search-hint">
        <Icon name="sparkle" size={14} /> Tip: usa los filtros para reducir tu búsqueda. Tenemos {window.GR_DATA.PROPERTIES.length} propiedades activas.
      </div>
    </div>);

}

// ---------- TRUST STRIP ----------
function TrustStrip() {
  const items = [
  { icon: "shield", label: "Contratos respaldados", sub: "Garantía Aval Card / GMA" },
  { icon: "handshake", label: "Trato directo", sub: "Sin call centers ni intermediarios" },
  { icon: "key", label: "Entrega impecable", sub: "Inventario certificado al firmar" },
  { icon: "sparkle", label: "Cartera curada", sub: "Cada propiedad visitada por un corredor" }];

  return (
    <section className="trust-strip">
      <div className="shell trust-grid">
        {items.map((it) =>
        <div key={it.label} className="trust-item">
            <div className="trust-icon"><Icon name={it.icon} size={22} stroke={1.6} /></div>
            <div>
              <div className="trust-label">{it.label}</div>
              <div className="trust-sub">{it.sub}</div>
            </div>
          </div>
        )}
      </div>
    </section>);

}

// ---------- FEATURED ----------
function FeaturedSection({ properties, onOpen, onNavigate, cardStyle }) {
  return (
    <section className="section featured-section" id="destacadas">
      <div className="shell">
        <header className="section-head">
          <div>
            <span className="section-eyebrow">Destacados de la semana</span>
            <h2 className="section-title">Propiedades hechas a la medida<br />de quien busca <em>algo más</em>.</h2>
          </div>
          <button className="ghost-link" onClick={() => onNavigate("listing")}>
            Ver todas las propiedades <Icon name="arrow" size={14} stroke={2} />
          </button>
        </header>

        <div className="prop-grid">
          {properties.map((p) =>
          <PropertyCard key={p.id} property={p} onOpen={onOpen} cardStyle={cardStyle} />
          )}
        </div>
      </div>
    </section>);

}

// ---------- SERVICES ----------
function ServicesSection() {
  return (
    <section className="section services-section">
      <div className="shell services-grid">
        <div>
          <span className="section-eyebrow on-dark">Lo que hacemos</span>
          <h2 className="section-title on-dark">No alquilamos propiedades.<br />Administramos tranquilidad.</h2>
          <p className="lede on-dark">
            Después de +13 años de experiencia, sabemos que un buen arriendo se mide en lo que <em style={{ color: "rgb(255, 0, 0)", fontSize: "20px" }}>No</em> pasa: noches sin llamadas, meses sin morosidad, años sin sustos. Esa es nuestra obsesión.
          </p>
        </div>
        <div className="services-cards">
          <ServiceCard
            num="01"
            title="Para arrendatarios"
            wide={true}
            bullets={[
            "Más de 60 propiedades curadas y disponibles",
            "Visitas con corredor en menos de 48 hrs",
            "Contrato digital con firma electrónica",
            "Acompañamiento durante todo el arriendo"]
            } />

          <ServiceCard
            num="03"
            title="Administración full"
            bullets={[
            "Cobranza, contabilidad y declaración SII",
            "Atención de emergencias 24 hrs",
            "Renovación y reajuste IPC automatizado",
            "Inventario fotográfico al ingreso y salida"]
            } />

          <ServiceCard
            num="02"
            title="Para propietarios"
            bullets={[
            "Estudio de mercado y precio sugerido sin costo",
            "Fotografía profesional y publicación premium",
            "Cobro mensual con depósito al día siguiente",
            "Gestión completa de mantención y reparaciones"]
            } />
        </div>
      </div>
    </section>);

}

function ServiceCard({ num, title, bullets, wide }) {
  return (
    <div className={"service-card" + (wide ? " service-card-wide" : "")}>
      <div className="service-num">{num}</div>
      <h3 className="service-title">{title}</h3>
      <ul className="service-bullets">
        {bullets.map((b) =>
        <li key={b}><Icon name="check" size={14} stroke={2} /><span>{b}</span></li>
        )}
      </ul>
    </div>);

}

// ---------- MAP ----------
function MapSection({ properties, onOpen }) {
  const [active, setActive] = useState(properties[0]);
  return (
    <section className="section map-section">
      <div className="shell">
        <header className="section-head">
          <div>
            <span className="section-eyebrow">Cobertura</span>
            <h2 className="section-title">Donde estamos, <em>estás en casa</em>.</h2>
          </div>
          <p className="section-aside">
            Concentramos nuestra cartera en el sector oriente de Santiago. Conocemos cada calle, cada edificio y cada conserje.
          </p>
        </header>

        <div className="map-wrap">
          <MapSurface properties={properties} active={active} setActive={setActive} />
          <aside className="map-side">
            <div className="map-active-card">
              <img src={active.image} alt={active.title} />
              <div className="map-active-body">
                <span className="map-active-tag">{active.commune} · {active.type}</span>
                <h4>{active.title}</h4>
                <div className="map-active-specs">
                  <span><Icon name="bed" size={14} /> {active.bedrooms}</span>
                  <span><Icon name="bath" size={14} /> {active.bathrooms}</span>
                  {active.area > 0 && <span><Icon name="area" size={14} /> {active.area} m²</span>}
                </div>
                <div className="map-active-price">{formatPrice(active)}{priceLabel(active)}</div>
                <div className="map-active-actions">
                  {active.status ? (
                    <div className="prop-status-label" style={{fontSize: 11, padding: "7px 12px"}}>{active.status}</div>
                  ) : (
                    <>
                      <button className="btn-secondary sm" onClick={() => onOpen(active)}>Ver detalle</button>
                      <a className="wa-btn sm" href={buildWaLink(`Hola, me interesa la propiedad en ${active.commune} (REF ${active.id.toUpperCase()})`)} target="_blank" rel="noopener">
                        <Icon name="wa" size={14} /> Consultar
                      </a>
                    </>
                  )}
                </div>
              </div>
            </div>

            <div className="map-legend">
              <div className="legend-item"><span className="legend-dot dep" /> Departamentos</div>
              <div className="legend-item"><span className="legend-dot casa" /> Casas</div>
              <div className="legend-item"><span className="legend-dot active" /> Seleccionada</div>
            </div>
          </aside>
        </div>
      </div>
    </section>);

}

function MapSurface({ properties, active, setActive }) {
  const mapRef = useRef(null);
  const mapInstanceRef = useRef(null);
  const markersRef = useRef([]);

  useEffect(() => {
    if (!mapRef.current || mapInstanceRef.current) return;

    // Initialize map centered on Santiago
    const map = L.map(mapRef.current, {
      scrollWheelZoom: false,
      zoomControl: true,
    }).setView([-33.4400, -70.6600], 12);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      maxZoom: 18,
    }).addTo(map);

    mapInstanceRef.current = map;

    // Add markers
    properties.forEach((p) => {
      if (!p.coords) return;
      const priceText = p.status ? p.status.toUpperCase() : (p.priceUnit === "UF" ? "UF " + p.price.toLocaleString("es-CL") : "$" + (p.price / 1000).toFixed(0) + "K");
      const statusClass = p.status ? " is-rented" : "";
      const icon = L.divIcon({
        className: "leaflet-price-marker" + (p.id === active.id ? " is-active" : "") + statusClass,
        html: '<span class="lpm-label">' + priceText + '</span>',
        iconSize: [80, 32],
        iconAnchor: [40, 32],
      });
      const marker = L.marker(p.coords, { icon }).addTo(map);
      marker.on("click", () => setActive(p));
      marker.propertyId = p.id;
      markersRef.current.push(marker);
    });

    // Fit bounds to show all markers
    const bounds = L.latLngBounds(properties.filter(p => p.coords).map(p => p.coords));
    map.fitBounds(bounds, { padding: [40, 40] });

    return () => {
      map.remove();
      mapInstanceRef.current = null;
      markersRef.current = [];
    };
  }, []);

  // Update active marker styling
  useEffect(() => {
    markersRef.current.forEach((marker) => {
      const p = properties.find(pr => pr.id === marker.propertyId);
      if (!p) return;
      const priceText = p.status ? p.status.toUpperCase() : (p.priceUnit === "UF" ? "UF " + p.price.toLocaleString("es-CL") : "$" + (p.price / 1000).toFixed(0) + "K");
      const isActive = p.id === active.id;
      const statusClass = p.status ? " is-rented" : "";
      const icon = L.divIcon({
        className: "leaflet-price-marker" + (isActive ? " is-active" : "") + statusClass,
        html: '<span class="lpm-label">' + priceText + '</span>',
        iconSize: [80, 32],
        iconAnchor: [40, 32],
      });
      marker.setIcon(icon);
    });

    // Pan to active
    if (active.coords && mapInstanceRef.current) {
      mapInstanceRef.current.panTo(active.coords, { animate: true, duration: 0.5 });
    }
  }, [active]);

  return <div ref={mapRef} className="map-surface" style={{ height: "100%", minHeight: 420, borderRadius: 16, overflow: "hidden" }} />;
}

// ---------- ABOUT ----------
function AboutSection({ onNavigate }) {
  return (
    <section className="section about-section">
      <div className="shell about-grid">
        <div className="about-media">
          <div className="about-img-1">
            <img src="https://images.unsplash.com/photo-1554469384-e58fac16e23a?w=900&q=80" alt="Oficina GR" />
          </div>
          <div className="about-img-2">
            <img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=700&q=80" alt="Equipo" />
          </div>
          <div className="about-years">
            <strong>13</strong>
            <span>años</span>
          </div>
        </div>
        <div className="about-text">
          <span className="section-eyebrow">Sobre GR</span>
          <h2 className="section-title">Asesoría integral con <em>visión multidisciplinaria</em>.</h2>
          <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, con una visión legal, estratégica y humana.</p>
          <p>Integramos Derecho, Ingeniería Comercial y Mediación Familiar para acompañar a personas, familias, inversionistas y empresas en materias patrimoniales, contractuales, inmobiliarias y corporativas.</p>

          <div className="about-stats">
            <div><strong>2012</strong><span>Año de fundación</span></div>
            <div><strong>+13</strong><span>años de experiencia</span></div>
            <div><strong>97%</strong><span>cartera recurrente</span></div>
          </div>

          <button className="btn-primary" onClick={() => onNavigate("about")}>
            Conoce al equipo <Icon name="arrow" size={14} stroke={2} />
          </button>
        </div>
      </div>
    </section>);

}

// ---------- TESTIMONIALS ----------
function TestimonialsSection() {
  const [idx, setIdx] = useState(0);
  const list = window.GR_DATA.TESTIMONIALS;
  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % list.length), 6000);
    return () => clearInterval(t);
  }, [list.length]);

  return (
    <section className="section testi-section">
      <div className="shell">
        <header className="section-head center">
          <span className="section-eyebrow">Lo que dicen nuestros clientes</span>
          <h2 className="section-title">4,9 estrellas. <em>No es casualidad.</em></h2>
        </header>

        <div className="testi-grid">
          {list.map((t, i) =>
          <article key={t.id} className={"testi-card" + (i === idx ? " is-featured" : "")} onMouseEnter={() => setIdx(i)}>
              <div className="testi-rating">
                {[1, 2, 3, 4, 5].map((s) => <Icon key={s} name="star" size={14} />)}
              </div>
              <p className="testi-text">"{t.text}"</p>
              <div className="testi-author">
                <div className="testi-avatar">{t.avatar}</div>
                <div>
                  <div className="testi-name">{t.name}</div>
                  <div className="testi-role">{t.role}</div>
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ---------- PUBLISH CTA ----------
function PublishCTA({ onNavigate }) {
  return (
    <section className="section publish-cta-section">
      <div className="shell publish-cta">
        <div>
          <span className="section-eyebrow on-red">¿Eres propietario?</span>
          <h2 className="section-title on-red">Pon tu propiedad en manos<br />que la cuidan como propia.</h2>
          <p className="on-red">Estudio de mercado, fotografía profesional y publicación premium sin costo. Solo pagas cuando arrendamos.</p>
          <div className="publish-cta-actions">
            <button className="btn-white" onClick={() => onNavigate("publish")}>
              Publicar mi propiedad <Icon name="arrow" size={14} stroke={2} />
            </button>
            <a className="ghost-link on-red" href={buildWaLink("Hola, soy propietario y me interesa publicar mi propiedad con GR.")} target="_blank" rel="noopener">
              <Icon name="wa" size={14} /> Hablar por WhatsApp
            </a>
          </div>
        </div>
        <div className="publish-cta-stat">
          <div><strong>21</strong> días promedio de arriendo</div>
          <div><strong>98%</strong> de cartera ocupada</div>
          <div><strong>0%</strong> comisión si no arrendamos</div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { HomePage });