);
}
// ============================================================
// HERO
// ============================================================
function Hero({ t, onSearch, allProps = [] }) {
const bgRef = useRef(null);
const [searchState, setSearchState] = useState({ op: "any", type: "any", province: "any", city: "any", zone: "any", budget: "any" });
// Dynamic counts → hide filter options with zero properties
const heroCounts = useMemo(() => {
const c = { op: {}, type: {}, province: {}, city: {}, zone: {}, budget: {} };
for (const p of allProps) {
if (p.operation) c.op[p.operation] = (c.op[p.operation] || 0) + 1;
if (p.type) c.type[p.type] = (c.type[p.type] || 0) + 1;
if (p.province) c.province[p.province] = (c.province[p.province] || 0) + 1;
if (p.city) c.city[p.city] = (c.city[p.city] || 0) + 1;
if (p.zone) c.zone[p.zone] = (c.zone[p.zone] || 0) + 1;
const price = p.price || (p.rent ? p.rent * 100 : 0);
for (const [k, [min, max]] of Object.entries(BUDGET_RANGES)) {
if (k === "any") continue;
// Inclusive min, exclusive max; final bucket (Infinity) catches everything >= min.
const inRange = max === Infinity ? price >= min : price >= min && price < max;
if (inRange) c.budget[k] = (c.budget[k] || 0) + 1;
}
}
return c;
}, [allProps]);
// Índice de ubicaciones derivado de propiedades reales
const heroLocIndex = useMemo(() => {
const provMap = {}; // province → Set
const cityMap = {}; // city → Set
for (const p of allProps) {
if (p.province) {
(provMap[p.province] = provMap[p.province] || new Set());
if (p.city) provMap[p.province].add(p.city);
}
if (p.city) {
(cityMap[p.city] = cityMap[p.city] || new Set());
if (p.zone) cityMap[p.city].add(p.zone);
}
}
return { provMap, cityMap };
}, [allProps]);
const heroOpOptions = [
{ value: "any", label: t.ops.any },
...[
{ value: "sale", label: t.ops.sale },
{ value: "rent", label: t.ops.rent },
{ value: "vacation", label: t.ops.vacation },
].filter(o => (heroCounts.op[o.value] || 0) > 0),
];
const heroTypeOptions = [
{ value: "any", label: t.types.any },
...[
{ value: "villa", label: t.types.villa },
{ value: "apartment", label: t.types.apartment },
{ value: "penthouse", label: t.types.penthouse },
{ value: "house", label: t.types.house },
{ value: "land", label: t.types.land },
{ value: "commercial", label: t.types.commercial },
].filter(o => (heroCounts.type[o.value] || 0) > 0),
];
const heroBudgetOptions = [
{ value: "any", label: t.budget.any },
...[
{ value: "b1", label: t.budget.b1 },
{ value: "b2", label: t.budget.b2 },
{ value: "b3", label: t.budget.b3 },
{ value: "b4", label: t.budget.b4 },
{ value: "b5", label: t.budget.b5 },
].filter(o => (heroCounts.budget[o.value] || 0) > 0),
];
useEffect(() => {
const onScroll = () => {
if (!bgRef.current) return;
const y = window.scrollY;
if (y < 1000) bgRef.current.style.transform = `translateY(${y * 0.25}px) scale(1.08)`;
};
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
// Provincias con props
const heroProvinces = Object.keys(heroLocIndex.provMap).sort((a, b) => a.localeCompare(b));
// Ciudades: si provincia seleccionada → solo cities de esa provincia con props; si no → todas las cities con props
const heroCities = (() => {
if (searchState.province !== "any") {
const set = heroLocIndex.provMap[searchState.province];
return set ? Array.from(set).sort((a, b) => a.localeCompare(b)) : [];
}
return Object.keys(heroCounts.city).sort((a, b) => a.localeCompare(b));
})();
// Zonas: filtradas por city → province → any
const heroZones = (() => {
if (searchState.city !== "any") {
const set = heroLocIndex.cityMap[searchState.city];
return set ? Array.from(set).sort((a, b) => a.localeCompare(b)) : [];
}
if (searchState.province !== "any") {
const citySet = heroLocIndex.provMap[searchState.province];
if (!citySet) return [];
const zoneSet = new Set();
citySet.forEach(c => {
const zs = heroLocIndex.cityMap[c];
if (zs) zs.forEach(z => zoneSet.add(z));
});
return Array.from(zoneSet).sort((a, b) => a.localeCompare(b));
}
return Object.keys(heroCounts.zone).sort((a, b) => a.localeCompare(b));
})();
return (
{
e.currentTarget.src = "https://images.pexels.com/photos/258154/pexels-photo-258154.jpeg?auto=compress&cs=tinysrgb&w=2400";
}}
/>
{t.hero.eyebrow}
{t.hero.titleA}
{t.hero.titleB}
{t.hero.titleC}
{t.hero.sub}
{t.hero.scrollHint}
{heroOpOptions.length > 1 && (
{t.hero.searchOp}
setSearchState(s => ({ ...s, op: e.target.value }))}
options={heroOpOptions} />
)}
{heroTypeOptions.length > 1 && (
{t.hero.searchType}
setSearchState(s => ({ ...s, type: e.target.value }))}
options={heroTypeOptions} />
)}
{heroProvinces.length > 0 && (
{t.hero.searchProvince || "Provincia"}
setSearchState(s => ({ ...s, province: e.target.value, city: "any", zone: "any" }))}
options={[
{ value: "any", label: t.types.any },
...heroProvinces.map(p => ({ value: p, label: p })),
]} />
)}
{heroCities.length > 0 && (
{t.hero.searchCity || "Ciudad"}
setSearchState(s => ({ ...s, city: e.target.value, zone: "any" }))}
options={[
{ value: "any", label: t.types.any },
...heroCities.map(c => ({ value: c, label: c })),
]} />
)}
{heroBudgetOptions.length > 1 && (
{t.hero.searchBudget}
setSearchState(s => ({ ...s, budget: e.target.value }))}
options={heroBudgetOptions} />
)}
{content.map((item, i) => (
{item}
))}
);
}
// ============================================================
// DROPDOWN — custom