// Trend Home — complex browser + floor + unit selector // ───────────────────────────────────────────────────────────────── // COMPLEX BROWSER — three editorial cards, hoverable, click to focus // ───────────────────────────────────────────────────────────────── function ComplexBrowser({ activeId, onSelect }) { return (
Komplekset

Tre adresa, një filozofi.

Çdo kompleks ndërtohet me të njëjtën përkushtim ndaj cilësisë, por me një karakter që i përshtatet lagjes dhe njerëzve që do të jetojnë aty.

{TH_COMPLEXES.map((c, i) => { const active = c.id === activeId; return (
onSelect(c.id)} style={{ animationDelay: `${i * 80}ms` }} >
{c.name}
{c.status}
{c.location}

{c.name}

{c.tagline}

Banesa
{c.units}
Kate
{c.floors}
Dorëzim
{c.delivery}
{active ? 'I zgjedhur ↓' : 'Zgjidh kompleksin'}
); })}
); } // ───────────────────────────────────────────────────────────────── // BUILDING ELEVATION — interactive SVG of the building with floors // Click a floor to filter the unit grid below // ───────────────────────────────────────────────────────────────── function BuildingElevation({ floors, activeFloor, onPickFloor, hoveredFloor, setHoveredFloor }) { // floors come highest-first; reverse for drawing const drawn = [...floors].slice().reverse(); // bottom→top // Building dims const W = 320; const FLOOR_H = 38; const TOP = 80; // roof const FOUNDATION = 18; const totalH = TOP + drawn.length * FLOOR_H + FOUNDATION; const buildingX = 60; const buildingW = W - 100; return (
Kulla 2B

Zgjidh katin

Kalo me kursor mbi kulla për të parë statusin. Kliko për të filtruar njësitë.

{/* Sky gradient */} {/* Mountains silhouette */} {/* Roof */} {/* Sides shadow */} {/* Floors */} {drawn.map((f, i) => { const y = TOP + (drawn.length - 1 - i) * FLOOR_H; const available = f.units.filter((u) => u.status === 'available').length; const reserved = f.units.filter((u) => u.status === 'reserved').length; const total = f.units.length; const sold = total - available - reserved; const isActive = activeFloor === f.n; const isHover = hoveredFloor === f.n; // status color let fill = 'var(--th-floor-sold)'; if (available > 0) fill = 'var(--th-floor-available)'; else if (reserved > 0) fill = 'var(--th-floor-reserved)'; if (isActive) fill = 'var(--th-teal)'; return ( setHoveredFloor(f.n)} onMouseLeave={() => setHoveredFloor(null)} onClick={() => onPickFloor(f.n)} style={{ cursor: 'pointer' }} > {/* Windows */} {Array.from({ length: total }).map((_, wi) => { const ww = (buildingW - 18) / total; const wx = buildingX + 9 + wi * ww; const u = f.units[wi]; const wfill = u.status === 'available' ? 'var(--th-window-on)' : u.status === 'reserved' ? 'var(--th-window-warn)' : 'var(--th-window-off)'; return ( ); })} {/* Floor label outside */} {f.n === 0 ? 'PD' : f.n} {/* Availability tag right side */} 0 ? 'var(--th-teal)' : 'var(--th-ink-soft)'} fontWeight={available > 0 ? '600' : '400'} > {available > 0 ? `${available} të lira` : 'Shitur'} ); })} {/* Foundation line */}
Të lira
Të rezervuara
Shitur
); } // ───────────────────────────────────────────────────────────────── // UNIT GRID for the active floor // ───────────────────────────────────────────────────────────────── function UnitGrid({ floor, onSelectUnit, selectedUnitId }) { if (!floor) return null; return (
{floor.label}

{floor.units.length} njësi në këtë kat

{['Të gjitha', '2+1', '3+1'].map((f) => ( ))}
{floor.units.map((u, i) => ( ))}
); } Object.assign(window, { ComplexBrowser, BuildingElevation, UnitGrid });