/* =========================================================
   Página: Quiero Comprar
   - Page header con breadcrumb + título
   - Filter bar
   - Listado de propiedades (grid completo)
   ========================================================= */

/* ---------- Page header / sub-hero ---------- */
function ComprarHero() {
  return (
    <section className="page-hero" aria-label="Cabecera Quiero Comprar">
      <div className="page-hero__bg">
        <img
          src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1800&q=80"
          alt="Viviendas en Torrevieja" />
        
        <div className="page-hero__overlay" />
      </div>
      <div className="container">
        <div className="page-hero__content">
          <h1 className="page-hero__title">
            Encuentra tu casa en <span className="hl">Torrevieja y Orihuela Costa</span>.<br />
            Cartera verificada, atención en 5 idiomas.
          </h1>
          <p className="page-hero__sub">
            Cada vivienda con control documental, fotografía profesional y descripción en tu idioma. Filtra por zona, tipo y precio para encontrar la vivienda que estás buscando.
          </p>
        </div>
      </div>
    </section>);

}

/* ---------- Filter bar ---------- */
function FilterBar({ filters, onChange }) {
  const [advOpen, setAdvOpen] = useState(false);
  const set = (k, v) => onChange({ ...filters, [k]: v });
  const toggleAmenity = (a) => {
    const cur = filters.amenities || [];
    const next = cur.includes(a) ? cur.filter((x) => x !== a) : [...cur, a];
    set("amenities", next);
  };
  const AMENITIES = [
    "Aire acondicionado", "Balcón", "Chimenea", "Suelos hidráulicos",
    "Garaje", "Suelos de madera", "Techos altos", "Internet / Wi-Fi",
    "Lavadero", "Sala multimedia", "Piscina", "Vestidor"
  ];

  // Zonas por ciudad — solo se muestran cuando se selecciona una ciudad
  const ZONES_BY_CITY = {
    "torrevieja": [
      { value: "playa-cura", label: "Playa del Cura" },
      { value: "punta-prima", label: "Punta Prima" },
      { value: "playa-mata", label: "Playa de la Mata" },
      { value: "torrevieja-centro", label: "Torrevieja Centro" },
      { value: "los-balcones", label: "Los Balcones" }
    ],
    "orihuela-costa": [
      { value: "la-zenia", label: "La Zenia" },
      { value: "cabo-roig", label: "Cabo Roig" },
      { value: "playa-flamenca", label: "Playa Flamenca" },
      { value: "villamartin", label: "Villamartín" },
      { value: "campoamor", label: "Campoamor" }
    ],
    "guardamar": [
      { value: "guardamar-centro", label: "Guardamar Centro" },
      { value: "moncayo", label: "Moncayo" },
      { value: "el-raso", label: "El Raso" }
    ],
    "pilar-horadada": [
      { value: "torre-horadada", label: "Torre de la Horadada" },
      { value: "mil-palmeras", label: "Mil Palmeras" },
      { value: "pilar-centro", label: "Pilar Centro" }
    ],
    "san-miguel": [
      { value: "san-miguel-centro", label: "San Miguel Centro" },
      { value: "las-filipinas", label: "Las Filipinas" }
    ]
  };

  const cityZones = filters.city ? ZONES_BY_CITY[filters.city] || [] : [];
  const handleCityChange = (newCity) => {
    // Al cambiar de ciudad, limpiamos la zona seleccionada
    onChange({ ...filters, city: newCity, zone: "" });
  };
  return (
    <section className="filterbar" aria-label="Filtros de búsqueda">
      <div className="container">
        <div className="filterbar__inner">
          <div className="filterbar__field">
            <span className="filterbar__label">Referencia</span>
            <input
              type="text"
              value={filters.ref || ""}
              onChange={(e) => set("ref", e.target.value)}
              className="filterbar__input" />

          </div>
          <div className="filterbar__field">
            <span className="filterbar__label">Ciudad</span>
            <select value={filters.city || ""} onChange={(e) => handleCityChange(e.target.value)}>
              <option value="">Todas</option>
              <option value="torrevieja">Torrevieja</option>
              <option value="orihuela-costa">Orihuela Costa</option>
              <option value="guardamar">Guardamar del Segura</option>
              <option value="pilar-horadada">Pilar de la Horadada</option>
              <option value="san-miguel">San Miguel de Salinas</option>
            </select>
          </div>
          <div className={"filterbar__field" + (!filters.city ? " is-disabled" : "")}>
            <span className="filterbar__label">Zona</span>
            <select
              value={filters.zone || ""}
              onChange={(e) => set("zone", e.target.value)}
              disabled={!filters.city}>
              {!filters.city ? (
                <option value="">Selecciona una ciudad</option>
              ) : (
                <>
                  <option value="">Todas las zonas</option>
                  {cityZones.map((z) => (
                    <option key={z.value} value={z.value}>{z.label}</option>
                  ))}
                </>
              )}
            </select>
          </div>
          <div className="filterbar__field">
            <span className="filterbar__label">Tipo</span>
            <select value={filters.type} onChange={(e) => set("type", e.target.value)}>
              <option value="">Cualquier tipo</option>
              <option value="villa">Villa</option>
              <option value="piso">Piso</option>
              <option value="atico">Ático</option>
              <option value="bungalow">Bungalow</option>
              <option value="adosado">Adosado</option>
              <option value="chalet">Chalet</option>
            </select>
          </div>
          <button
            type="button"
            className={"filterbar__adv-toggle" + (advOpen ? " is-open" : "")}
            onClick={() => setAdvOpen((v) => !v)}
            aria-label="Búsqueda avanzada"
            aria-expanded={advOpen}>
            <Icon name="sliders-horizontal" size={18} />
          </button>
          <button className="filterbar__cta" type="button" style={{ width: "244px", fontSize: "15px", height: "54px", gap: "12px" }}>
            <Icon name="search" size={16} />
            Buscar
          </button>

          {advOpen && (
            <div className="filterbar__advanced">
              <div className="filterbar__advanced-row">
                <div className="filterbar__field filterbar__field--adv">
                  <span className="filterbar__label">Habitaciones</span>
                  <select value={filters.beds || ""} onChange={(e) => set("beds", e.target.value)}>
                    <option value="">Indiferente</option>
                    <option value="1">1+</option>
                    <option value="2">2+</option>
                    <option value="3">3+</option>
                    <option value="4">4+</option>
                    <option value="5">5+</option>
                  </select>
                </div>
                <div className="filterbar__field filterbar__field--adv">
                  <span className="filterbar__label">Baños</span>
                  <select value={filters.baths || ""} onChange={(e) => set("baths", e.target.value)}>
                    <option value="">Indiferente</option>
                    <option value="1">1+</option>
                    <option value="2">2+</option>
                    <option value="3">3+</option>
                    <option value="4">4+</option>
                  </select>
                </div>
                <div className="filterbar__field filterbar__field--adv">
                  <span className="filterbar__label">Precio máximo</span>
                  <select value={filters.maxPrice || ""} onChange={(e) => set("maxPrice", e.target.value)}>
                    <option value="">Sin límite</option>
                    <option value="150000">Hasta 150.000 €</option>
                    <option value="250000">Hasta 250.000 €</option>
                    <option value="400000">Hasta 400.000 €</option>
                    <option value="600000">Hasta 600.000 €</option>
                    <option value="1000000">Hasta 1.000.000 €</option>
                  </select>
                </div>
                <div className="filterbar__field filterbar__field--adv">
                  <span className="filterbar__label">Superficie (m²)</span>
                  <select value={filters.minArea || ""} onChange={(e) => set("minArea", e.target.value)}>
                    <option value="">Indiferente</option>
                    <option value="60">Desde 60 m²</option>
                    <option value="90">Desde 90 m²</option>
                    <option value="120">Desde 120 m²</option>
                    <option value="180">Desde 180 m²</option>
                    <option value="250">Desde 250 m²</option>
                  </select>
                </div>
              </div>
              <div className="filterbar__advanced-amenities">
                <span className="filterbar__amenities-label">Características</span>
                <div className="filterbar__amenities-grid">
                  {AMENITIES.map((a) => (
                    <label key={a} className="filterbar__amenity">
                      <input
                        type="checkbox"
                        checked={(filters.amenities || []).includes(a)}
                        onChange={() => toggleAmenity(a)} />
                      <span>{a}</span>
                    </label>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Catálogo: todas las propiedades disponibles ---------- */
const CATALOG = [
{ title: "Villa con vistas al mar en Cabo Roig", location: "Cabo Roig, Orihuela Costa",
  img: "https://images.unsplash.com/photo-1613490493576-7fde63acd811?auto=format&fit=crop&w=900&q=80",
  tag: "Destacado", price: "895.000 €", beds: 4, baths: 3, area: 280, type: "villa", zone: "cabo-roig" },
{ title: "Bungalow reformado a 200 m de la playa", location: "La Zenia, Orihuela Costa",
  img: "https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?auto=format&fit=crop&w=900&q=80",
  tag: "Nuevo", price: "265.000 €", beds: 3, baths: 2, area: 95, type: "bungalow", zone: "la-zenia" },
{ title: "Ático con terraza panorámica en Torrevieja", location: "Torrevieja Centro",
  img: "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=900&q=80",
  tag: "IA optimizado", price: "320.000 €", beds: 2, baths: 2, area: 110, type: "atico", zone: "torrevieja" },
{ title: "Villa moderna en Los Balcones", location: "Los Balcones, Torrevieja",
  img: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?auto=format&fit=crop&w=900&q=80",
  tag: "Destacado", price: "560.000 €", beds: 4, baths: 3, area: 220, type: "villa", zone: "los-balcones" },
{ title: "Apartamento luminoso en Punta Prima", location: "Punta Prima, Orihuela Costa",
  img: "https://images.unsplash.com/photo-1502672023488-70e25813eb80?auto=format&fit=crop&w=900&q=80",
  tag: "Nuevo", price: "189.000 €", beds: 2, baths: 1, area: 78, type: "piso", zone: "punta-prima" },
{ title: "Adosado con jardín en Villamartín", location: "Villamartín, Orihuela Costa",
  img: "https://images.unsplash.com/photo-1568605114967-8130f3a36994?auto=format&fit=crop&w=900&q=80",
  tag: "IA optimizado", price: "298.000 €", beds: 3, baths: 2, area: 130, type: "adosado", zone: "villamartin" },
{ title: "Chalet con piscina en Playa Flamenca", location: "Playa Flamenca, Orihuela Costa",
  img: "https://images.unsplash.com/photo-1583608205776-bfd35f0d9f83?auto=format&fit=crop&w=900&q=80",
  tag: "Destacado", price: "725.000 €", beds: 5, baths: 4, area: 310, type: "chalet", zone: "playa-flamenca" },
{ title: "Ático con vistas al mar en La Zenia", location: "La Zenia, Orihuela Costa",
  img: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=900&q=80",
  tag: "Nuevo", price: "395.000 €", beds: 3, baths: 2, area: 125, type: "atico", zone: "la-zenia" },
{ title: "Bungalow planta baja en Torrevieja", location: "Torrevieja",
  img: "https://images.unsplash.com/photo-1600585154363-67eb9e2e2099?auto=format&fit=crop&w=900&q=80",
  tag: "IA optimizado", price: "165.000 €", beds: 2, baths: 1, area: 70, type: "bungalow", zone: "torrevieja" },
{ title: "Piso reformado en Playa del Cura", location: "Playa del Cura, Torrevieja",
  img: "https://images.unsplash.com/photo-1493809842364-78817add7ffb?auto=format&fit=crop&w=900&q=80",
  tag: "Nuevo", price: "215.000 €", beds: 2, baths: 1, area: 82, type: "piso", zone: "torrevieja" },
{ title: "Villa familiar con piscina privada", location: "Playa de la Mata, Torrevieja",
  img: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=900&q=80",
  tag: "IA optimizado", price: "535.000 €", beds: 5, baths: 3, area: 245, type: "villa", zone: "torrevieja" },
{ title: "Chalet de obra nueva en Punta Prima", location: "Punta Prima, Torrevieja",
  img: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=900&q=80",
  tag: "Destacado", price: "650.000 €", beds: 4, baths: 3, area: 210, type: "chalet", zone: "punta-prima" }];


/* ---------- Catalogue grid + sorting + count ---------- */
function CatalogueGrid({ filters }) {
  const [sort, setSort] = useState("featured");
  // Apply filters
  const filtered = CATALOG.filter((p) => {
    if (filters.zone && p.zone !== filters.zone) return false;
    if (filters.type && p.type !== filters.type) return false;
    if (filters.beds && p.beds < Number(filters.beds)) return false;
    if (filters.maxPrice) {
      const priceNum = Number(p.price.replace(/[^\d]/g, ""));
      if (priceNum > Number(filters.maxPrice)) return false;
    }
    return true;
  });

  // Apply sorting
  const sorted = [...filtered].sort((a, b) => {
    const ap = Number(a.price.replace(/[^\d]/g, ""));
    const bp = Number(b.price.replace(/[^\d]/g, ""));
    if (sort === "price-asc") return ap - bp;
    if (sort === "price-desc") return bp - ap;
    if (sort === "area-desc") return b.area - a.area;
    return 0;
  });

  return (
    <section className="section section--w1400" aria-label="Catálogo de propiedades">
      <div className="container">
        <div className="catalogue-head">
          <div className="catalogue-head__count">
            <strong>{sorted.length}</strong> viviendas encontradas
          </div>
          <div className="catalogue-head__sort">
            <span>Ordenar por</span>
            <select value={sort} onChange={(e) => setSort(e.target.value)}>
              <option value="featured">Destacadas</option>
              <option value="price-asc">Precio: menor a mayor</option>
              <option value="price-desc">Precio: mayor a menor</option>
              <option value="area-desc">Tamaño: mayor primero</option>
            </select>
          </div>
        </div>

        {sorted.length === 0 ?
        <div className="catalogue-empty">
            <Icon name="search-x" size={32} />
            <h3>No hay viviendas con esos filtros</h3>
            <p>Prueba a ampliar el rango de precio o cambiar la zona.</p>
          </div> :

        <div className="listings">
            {sorted.map((p, i) => <PropCard key={i} p={p} />)}
          </div>
        }

        {sorted.length > 0 &&
        <div className="catalogue-pager">
            <button className="pager-btn" aria-label="Anterior">
              <Icon name="arrow-left" size={16} />
            </button>
            <button className="pager-btn is-active">1</button>
            <button className="pager-btn">2</button>
            <button className="pager-btn">3</button>
            <button className="pager-btn" aria-label="Siguiente">
              <Icon name="arrow-right" size={16} />
            </button>
          </div>
        }
      </div>
    </section>);

}

/* ---------- Final CTA: cómo trabajamos con compradores ---------- */
function ComprarCTA() {
  return (
    <section className="section section--tight" aria-label="Cómo trabajamos con compradores">
      <div className="container">
        <div className="handhouse" style={{ width: "1700px", maxWidth: "100%", minHeight: "420px", margin: "0 auto" }}>
          <div className="handhouse__content" style={{ maxWidth: "920px" }}>
            <span className="handhouse__eyebrow">Acompañamiento</span>
            <h2>
              ¿No encuentras lo que buscas? Te <span className="hl">acompañamos</span>.
            </h2>
            <p>
              Dinos qué casa imaginas y te avisamos en cuanto llegue a nuestra cartera. Búsqueda personalizada con IA, alertas en tu idioma y visitas guiadas con un agente especializado.
            </p>
            <div className="handhouse__ctas">
              <Button variant="light" iconRight="arrow-right" as="a" href="#contacto">
                Pedir búsqueda personalizada
              </Button>
              <Button variant="ghost-light" icon="phone" as="a" href="tel:+34604494089">
                604 49 40 89
              </Button>
            </div>
          </div>
          <img
            className="handhouse__img"
            src="assets/hand-house.png"
            alt="Mano sosteniendo una casa en miniatura" />
          
        </div>
      </div>
    </section>);

}

/* ---------- FAQ específico para compradores ---------- */
const FAQS_BUYER = [
  {
    q: "¿Cuánto tarda el proceso de compra de una vivienda en Torrevieja?",
    a: "Desde la oferta aceptada hasta la firma en notaría suele llevar entre 30 y 60 días. Si pides hipoteca, calcula 60-90 días. En Innovaria coordinamos con tasador, notario y gestoría para que no haya esperas innecesarias.",
  },
  {
    q: "¿Qué impuestos y gastos paga el comprador?",
    a: "En obra nueva: IVA (10%) + AJD (1,5%). En segunda mano: ITP (10% en la Comunidad Valenciana). A esto se suman notaría, registro y gestoría (~1-2% del precio). Te entregamos un cálculo personalizado antes de firmar.",
  },
  {
    q: "¿Puedo comprar una vivienda si no soy residente en España?",
    a: "Sí. Necesitas un NIE (Número de Identificación de Extranjero) y una cuenta bancaria española. Nosotros te acompañamos en todo el proceso, incluyendo poder notarial si no puedes estar presente en la firma.",
  },
  {
    q: "¿Pagáis vosotros la comisión o se añade al precio?",
    a: "Nuestra comisión la paga el vendedor. Al comprador no se le añade ningún coste extra sobre el precio publicado. Lo que ves en el anuncio es exactamente lo que pagas por la vivienda.",
  },
  {
    q: "¿Qué documentación necesito antes de hacer una oferta?",
    a: "DNI/NIE, prueba de fondos (extractos bancarios) y, si pides hipoteca, las últimas 3 nóminas y declaración de IRPF. Nosotros revisamos toda la documentación de la vivienda (nota simple, cédula, certificados) antes de que firmes nada.",
  },
  {
    q: "¿Puedo visitar las viviendas con un agente que hable mi idioma?",
    a: "Sí. Atendemos en español, inglés, alemán, francés y ruso. Indícanos tu idioma al pedir la visita y asignamos un agente que pueda explicarte cada detalle sin barreras.",
  },
  {
    q: "¿Las viviendas anunciadas están verificadas?",
    a: "Sí. Cada vivienda pasa por nuestro control: nota simple actualizada, cédula de habitabilidad, certificado energético y fotografías reales. Si una propiedad no cumple, no entra en nuestra cartera.",
  },
];

function FAQBuyer() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" aria-label="Preguntas frecuentes para compradores">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--center">Preguntas y respuestas</span>
          <h2>Resolvemos tus dudas para <span className="hl">comprar</span></h2>
          <p>Respuestas claras y autocontenidas para compradores en Torrevieja, Orihuela Costa y Costa Blanca Sur.</p>
        </div>

        <div className="faq">
          {FAQS_BUYER.map((f, i) => (
            <FAQItem
              key={i}
              q={f.q}
              a={f.a}
              open={open === i}
              onClick={() => setOpen(open === i ? -1 : i)}
            />
          ))}
        </div>

        <div className="center-cta">
          <Button variant="primary" iconRight="arrow-right" as="a" href="#contacto">
            ¿Tienes otra pregunta? Habla con un agente
          </Button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ComprarHero, FilterBar, CatalogueGrid, ComprarCTA, FAQBuyer, CATALOG });