/* ============================================================
   AURELIA — Home Page Sections
   Signature: 3D Building Explorer with Three.js
   ============================================================ */

/* ---------- DATA ---------- */
const APARTMENTS_PER_FLOOR = {
  1: [
    { num: 'A01', type: 'Студио', area: 48, price: '€185 000', status: 'sold', bedrooms: 0 },
    { num: 'A02', type: '2-стаен', area: 78, price: '€298 000', status: 'sold', bedrooms: 1 },
    { num: 'A03', type: '2-стаен', area: 82, price: '€312 000', status: 'reserved', bedrooms: 1 },
    { num: 'A04', type: '3-стаен', area: 112, price: '€428 000', status: 'sold', bedrooms: 2 },
  ],
  2: [
    { num: 'B01', type: '2-стаен', area: 76, price: '€295 000', status: 'available', bedrooms: 1 },
    { num: 'B02', type: '2-стаен', area: 84, price: '€324 000', status: 'sold', bedrooms: 1 },
    { num: 'B03', type: '3-стаен', area: 108, price: '€418 000', status: 'reserved', bedrooms: 2 },
    { num: 'B04', type: '3-стаен', area: 116, price: '€445 000', status: 'available', bedrooms: 2 },
  ],
  3: [
    { num: 'C01', type: '2-стаен', area: 78, price: '€312 000', status: 'available', bedrooms: 1 },
    { num: 'C02', type: '3-стаен', area: 105, price: '€412 000', status: 'sold', bedrooms: 2 },
    { num: 'C03', type: '3-стаен', area: 118, price: '€465 000', status: 'available', bedrooms: 2 },
    { num: 'C04', type: '3-стаен', area: 124, price: '€485 000', status: 'available', bedrooms: 2 },
  ],
  4: [
    { num: 'D01', type: '2-стаен', area: 80, price: '€328 000', status: 'available', bedrooms: 1 },
    { num: 'D02', type: '3-стаен', area: 110, price: '€442 000', status: 'available', bedrooms: 2 },
    { num: 'D03', type: '3-стаен', area: 122, price: '€485 000', status: 'reserved', bedrooms: 2 },
    { num: 'D04', type: '3-стаен', area: 128, price: '€512 000', status: 'available', bedrooms: 2 },
  ],
  5: [
    { num: 'E01', type: '2-стаен', area: 82, price: '€340 000', status: 'available', bedrooms: 1 },
    { num: 'E02', type: '3-стаен', area: 114, price: '€465 000', status: 'available', bedrooms: 2 },
    { num: 'E03', type: '3-стаен', area: 126, price: '€512 000', status: 'available', bedrooms: 2 },
    { num: 'E04', type: '3-стаен', area: 132, price: '€545 000', status: 'available', bedrooms: 2 },
  ],
  6: [
    { num: 'F01', type: '3-стаен', area: 116, price: '€482 000', status: 'available', bedrooms: 2 },
    { num: 'F02', type: '3-стаен', area: 128, price: '€532 000', status: 'available', bedrooms: 2 },
    { num: 'F03', type: '3-стаен', area: 134, price: '€565 000', status: 'available', bedrooms: 2 },
    { num: 'F04', type: '3-стаен', area: 140, price: '€598 000', status: 'available', bedrooms: 2 },
  ],
  7: [
    { num: 'G01', type: '3-стаен', area: 120, price: '€512 000', status: 'available', bedrooms: 2 },
    { num: 'G02', type: '3-стаен', area: 132, price: '€568 000', status: 'available', bedrooms: 2 },
    { num: 'G03', type: '4-стаен', area: 148, price: '€632 000', status: 'available', bedrooms: 3 },
  ],
  8: [
    { num: 'H01', type: '3-стаен', area: 124, price: '€548 000', status: 'available', bedrooms: 2 },
    { num: 'H02', type: '4-стаен', area: 156, price: '€698 000', status: 'reserved', bedrooms: 3 },
    { num: 'H03', type: '4-стаен', area: 164, price: '€735 000', status: 'available', bedrooms: 3 },
  ],
  9: [
    { num: 'PH01', type: 'Пентхаус', area: 220, price: '€1 240 000', status: 'available', bedrooms: 4 },
    { num: 'PH02', type: 'Пентхаус', area: 248, price: '€1 380 000', status: 'available', bedrooms: 4 },
  ],
};

const FLOORS = Object.keys(APARTMENTS_PER_FLOOR).map(Number).sort((a, b) => b - a);

/* ---------- HERO ---------- */
function Hero() {
  return (
    <section className="hero grain">
      <div className="hero-content">
        <div className="hero-eyebrow eyebrow on-dark">AURELIA RESIDENCES · СОФИЯ · ИЗТОЧЕН ПАРК</div>
        <h1 data-reveal>
          Резиденции,<br/>
          <em>които живеят</em><br/>
          повече от Вас.
        </h1>
        <p className="lede" data-reveal data-reveal-delay="200">
          Нова сграда в сърцето на Лозенец. Девет етажа, двадесет и четири апартамента,
          един архитект и десет години гаранция, които надхвърлят закона.
        </p>
        <div className="hero-ctas" data-reveal data-reveal-delay="400">
          <a href="#building-explorer" className="btn" data-magnetic>
            Разгледайте сградата <ArrowRight/>
          </a>
          <a href="#" className="btn btn-on-dark" data-magnetic>
            Поискайте каталог <ArrowRight/>
          </a>
        </div>
        <div className="hero-meta">
          <span>Стартираме продажбите · Q3 2026</span>
          <span>Завършване · Q4 2027</span>
          <span>Прогрес 38%</span>
        </div>
      </div>
      <div className="hero-visual">
        <img src="https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=1200&q=80" alt="Aurelia Residences exterior at dusk" loading="eager"/>
        <div className="hero-badge">
          10
          <strong>години гаранция</strong>
        </div>
      </div>
    </section>
  );
}

/* ---------- TRUST RIBBON ---------- */
function TrustRibbon() {
  return (
    <section className="trust-ribbon">
      <div className="container-wide">
        <div className="trust-ribbon-grid">
          <div className="trust-cell" data-reveal>
            <Counter to={8} />
            <div className="label">Години в строителството</div>
          </div>
          <div className="trust-cell" data-reveal data-reveal-delay="100">
            <Counter to={14} />
            <div className="label">Завършени проекта</div>
          </div>
          <div className="trust-cell" data-reveal data-reveal-delay="200">
            <Counter to={180} prefix="€" suffix="М" />
            <div className="label">Доставени за клиенти</div>
          </div>
          <div className="trust-cell" data-reveal data-reveal-delay="300">
            <Counter to={1800} format={(v) => Math.round(v).toLocaleString('bg-BG')} />
            <div className="label">Семейства, които живеят при нас</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- INTRO ---------- */
function Intro() {
  return (
    <section className="intro">
      <div className="container-wide">
        <div className="intro-grid">
          <div className="intro-side">
            <span className="eyebrow bronze">— Философия</span>
            <p className="intro-statement" data-reveal>
              Не строим квадратни метри.<br/>
              Строим <em>места</em>, които<br/>
              отлежават красиво.
            </p>
          </div>
          <div className="intro-pillars">
            <div className="intro-pillar" data-reveal>
              <span className="num">— 01</span>
              <h3>Архитектура с автор</h3>
              <p>Всеки проект минава през ръцете на един архитект — от концепцията до последното дюбело. Без типови решения, без копия. Подписът се вижда отблизо.</p>
            </div>
            <div className="intro-pillar" data-reveal data-reveal-delay="100">
              <span className="num">— 02</span>
              <h3>47 контролни точки</h3>
              <p>Преди ключът да достигне Вас, всеки апартамент преминава през 47 проверки — от хидроизолацията на покрива до натиска на смесителите в банята.</p>
            </div>
            <div className="intro-pillar" data-reveal data-reveal-delay="200">
              <span className="num">— 03</span>
              <h3>10 години гаранция</h3>
              <p>Конструкцията — десет години. Хидроизолацията — седем. Дограмите — пет. По договор, не по обещание. Записано черно на бяло, преди да платите.</p>
            </div>
            <div className="intro-pillar" data-reveal data-reveal-delay="300">
              <span className="num">— 04</span>
              <h3>Концирж, който отговаря</h3>
              <p>Един човек, един телефон, една грижа. Концирж за живеещите — от препоръка за майстор до резервация за реставрант. До края на първата година — без допълнително заплащане.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- BUILDING EXPLORER (SIGNATURE) ---------- */
function BuildingExplorer() {
  const canvasRef = useRef(null);
  const [selectedFloor, setSelectedFloor] = useState(6);
  const [viewMode, setViewMode] = useState('exterior');
  const sceneRef = useRef({});

  // Setup Three.js
  useEffect(() => {
    if (!canvasRef.current || typeof THREE === 'undefined') return;
    const canvas = canvasRef.current;
    const w = canvas.clientWidth, h = canvas.clientHeight;

    const scene = new THREE.Scene();
    scene.fog = new THREE.Fog(0x0E0C0A, 18, 60);
    const camera = new THREE.PerspectiveCamera(35, w / h, 0.1, 100);
    camera.position.set(14, 9, 14);
    camera.lookAt(0, 4, 0);

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
    renderer.setSize(w, h, false);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.0;

    // Lighting
    const ambient = new THREE.AmbientLight(0x9090a0, 0.35);
    scene.add(ambient);
    const key = new THREE.DirectionalLight(0xfff0d0, 1.4);
    key.position.set(8, 12, 6);
    key.castShadow = true;
    key.shadow.mapSize.set(1024, 1024);
    key.shadow.camera.left = -10; key.shadow.camera.right = 10;
    key.shadow.camera.top = 14; key.shadow.camera.bottom = -2;
    scene.add(key);
    const rim = new THREE.DirectionalLight(0xB8924A, 0.6);
    rim.position.set(-6, 4, -6);
    scene.add(rim);
    const fill = new THREE.HemisphereLight(0x444466, 0x1a1612, 0.3);
    scene.add(fill);

    // Ground plane
    const ground = new THREE.Mesh(
      new THREE.PlaneGeometry(40, 40),
      new THREE.MeshStandardMaterial({ color: 0x1A1612, roughness: 0.95, metalness: 0 })
    );
    ground.rotation.x = -Math.PI / 2;
    ground.position.y = -0.01;
    ground.receiveShadow = true;
    scene.add(ground);

    // Building base material
    const buildingMat = new THREE.MeshStandardMaterial({
      color: 0xECE6DB,
      roughness: 0.55,
      metalness: 0.08,
    });
    const accentMat = new THREE.MeshStandardMaterial({
      color: 0x2C2825,
      roughness: 0.35,
      metalness: 0.15,
    });
    const windowMat = new THREE.MeshStandardMaterial({
      color: 0xB8924A,
      roughness: 0.15,
      metalness: 0.85,
      emissive: 0x2A1A08,
      emissiveIntensity: 0.5,
    });

    // Build the 9-floor building
    const buildingGroup = new THREE.Group();
    const floorMeshes = [];
    const floorHeight = 0.95;
    const W = 6, D = 4.5;

    for (let f = 1; f <= 9; f++) {
      const isPenthouse = f === 9;
      const floorWidth = isPenthouse ? W * 0.78 : W;
      const floorDepth = isPenthouse ? D * 0.82 : D;

      // Slab
      const slab = new THREE.Mesh(
        new THREE.BoxGeometry(floorWidth + 0.2, 0.12, floorDepth + 0.2),
        accentMat
      );
      slab.position.y = (f - 1) * floorHeight;
      slab.castShadow = true;
      slab.receiveShadow = true;
      buildingGroup.add(slab);

      // Floor body
      const body = new THREE.Mesh(
        new THREE.BoxGeometry(floorWidth, floorHeight - 0.16, floorDepth),
        buildingMat.clone()
      );
      body.position.y = (f - 1) * floorHeight + (floorHeight - 0.16) / 2 + 0.06;
      body.castShadow = true;
      body.receiveShadow = true;
      body.userData.floor = f;
      body.userData.isFloor = true;
      buildingGroup.add(body);
      floorMeshes.push(body);

      // Windows — row of recessed bronze panels around perimeter
      const windowCount = isPenthouse ? 4 : 5;
      for (let wi = 0; wi < windowCount; wi++) {
        // Front row
        const wF = new THREE.Mesh(
          new THREE.BoxGeometry((floorWidth / windowCount) * 0.7, (floorHeight - 0.16) * 0.65, 0.05),
          windowMat
        );
        wF.position.set(
          -floorWidth / 2 + (floorWidth / windowCount) * (wi + 0.5),
          body.position.y,
          floorDepth / 2 + 0.001
        );
        buildingGroup.add(wF);
        // Back row
        const wB = wF.clone();
        wB.position.z = -floorDepth / 2 - 0.001;
        buildingGroup.add(wB);
      }
      // Side windows
      for (let wi = 0; wi < 3; wi++) {
        const wL = new THREE.Mesh(
          new THREE.BoxGeometry(0.05, (floorHeight - 0.16) * 0.65, (floorDepth / 3) * 0.6),
          windowMat
        );
        wL.position.set(-floorWidth / 2 - 0.001, body.position.y, -floorDepth / 2 + (floorDepth / 3) * (wi + 0.5));
        buildingGroup.add(wL);
        const wR = wL.clone();
        wR.position.x = floorWidth / 2 + 0.001;
        buildingGroup.add(wR);
      }

      // Penthouse balcony rail
      if (isPenthouse) {
        const rail = new THREE.Mesh(
          new THREE.BoxGeometry(floorWidth + 0.7, 0.5, 0.04),
          accentMat
        );
        rail.position.set(0, body.position.y - 0.1, floorDepth / 2 + 0.4);
        buildingGroup.add(rail);
        const railSide1 = rail.clone();
        railSide1.geometry = new THREE.BoxGeometry(0.04, 0.5, floorDepth + 0.8);
        railSide1.position.set(floorWidth / 2 + 0.4, body.position.y - 0.1, 0);
        buildingGroup.add(railSide1);
        const railSide2 = railSide1.clone();
        railSide2.position.x = -(floorWidth / 2 + 0.4);
        buildingGroup.add(railSide2);
      }
    }

    // Ground floor entrance (bronze)
    const entrance = new THREE.Mesh(
      new THREE.BoxGeometry(2.4, 1.4, 0.08),
      new THREE.MeshStandardMaterial({ color: 0xB8924A, metalness: 0.7, roughness: 0.25, emissive: 0x301f08, emissiveIntensity: 0.4 })
    );
    entrance.position.set(0, 0.7, D / 2 + 0.04);
    buildingGroup.add(entrance);

    // Roof
    const roof = new THREE.Mesh(
      new THREE.BoxGeometry(W * 0.78 + 0.4, 0.18, D * 0.82 + 0.4),
      accentMat
    );
    roof.position.y = 9 * floorHeight + 0.08;
    roof.castShadow = true;
    buildingGroup.add(roof);

    // Center the building
    buildingGroup.position.y = 0.04;
    scene.add(buildingGroup);

    // Subtle ambient particles (warm dust)
    const particleGeo = new THREE.BufferGeometry();
    const particlePos = [];
    for (let i = 0; i < 80; i++) {
      particlePos.push((Math.random() - 0.5) * 30, Math.random() * 12, (Math.random() - 0.5) * 30);
    }
    particleGeo.setAttribute('position', new THREE.Float32BufferAttribute(particlePos, 3));
    const particles = new THREE.Points(
      particleGeo,
      new THREE.PointsMaterial({ color: 0xB8924A, size: 0.06, transparent: true, opacity: 0.4 })
    );
    scene.add(particles);

    // Mouse interaction
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
    let hoveredFloor = null;

    const onMouseMove = (e) => {
      const r = canvas.getBoundingClientRect();
      mouse.x = ((e.clientX - r.left) / r.width) * 2 - 1;
      mouse.y = -((e.clientY - r.top) / r.height) * 2 + 1;
      raycaster.setFromCamera(mouse, camera);
      const hits = raycaster.intersectObjects(floorMeshes);
      if (hits.length > 0) {
        const f = hits[0].object.userData.floor;
        if (hoveredFloor !== f) {
          hoveredFloor = f;
          floorMeshes.forEach(m => {
            const isHovered = m.userData.floor === f;
            m.material.emissive = new THREE.Color(isHovered ? 0xB8924A : 0x000000);
            m.material.emissiveIntensity = isHovered ? 0.18 : 0;
          });
        }
        canvas.style.cursor = 'pointer';
      } else {
        if (hoveredFloor !== null) {
          hoveredFloor = null;
          floorMeshes.forEach(m => {
            m.material.emissive = new THREE.Color(0x000000);
            m.material.emissiveIntensity = 0;
          });
        }
        canvas.style.cursor = 'grab';
      }
    };
    const onClick = (e) => {
      const r = canvas.getBoundingClientRect();
      mouse.x = ((e.clientX - r.left) / r.width) * 2 - 1;
      mouse.y = -((e.clientY - r.top) / r.height) * 2 + 1;
      raycaster.setFromCamera(mouse, camera);
      const hits = raycaster.intersectObjects(floorMeshes);
      if (hits.length > 0) {
        setSelectedFloor(hits[0].object.userData.floor);
      }
    };
    canvas.addEventListener('mousemove', onMouseMove);
    canvas.addEventListener('click', onClick);

    // Drag-to-orbit
    let dragging = false, lastX = 0, lastY = 0;
    let theta = Math.PI / 4, phi = 0.65, dist = 22;
    let targetTheta = theta, targetPhi = phi, targetDist = dist;

    const updateCamera = () => {
      theta += (targetTheta - theta) * 0.08;
      phi += (targetPhi - phi) * 0.08;
      dist += (targetDist - dist) * 0.08;
      camera.position.x = dist * Math.sin(phi) * Math.cos(theta);
      camera.position.z = dist * Math.sin(phi) * Math.sin(theta);
      camera.position.y = dist * Math.cos(phi) + 4;
      camera.lookAt(0, 4.5, 0);
    };

    const onDown = (e) => { dragging = true; lastX = e.clientX; lastY = e.clientY; };
    const onUp = () => { dragging = false; };
    const onDrag = (e) => {
      if (!dragging) return;
      targetTheta -= (e.clientX - lastX) * 0.008;
      targetPhi = Math.max(0.2, Math.min(1.3, targetPhi - (e.clientY - lastY) * 0.005));
      lastX = e.clientX; lastY = e.clientY;
    };
    canvas.addEventListener('mousedown', onDown);
    window.addEventListener('mouseup', onUp);
    window.addEventListener('mousemove', onDrag);

    // Auto-rotate (idle)
    let lastInteract = Date.now();
    const onInteract = () => { lastInteract = Date.now(); };
    canvas.addEventListener('mousemove', onInteract);
    canvas.addEventListener('mousedown', onInteract);

    // Scroll-driven camera (orbit + rise)
    const sectionEl = canvas.closest('.explorer');
    let scrollProgress = 0;
    const onScroll = () => {
      if (!sectionEl) return;
      const r = sectionEl.getBoundingClientRect();
      const total = r.height + window.innerHeight;
      scrollProgress = Math.max(0, Math.min(1, (-r.top + window.innerHeight * 0.3) / total));
    };
    window.addEventListener('scroll', onScroll, { passive: true });

    sceneRef.current = { scene, camera, renderer, floorMeshes, buildingGroup, getProgress: () => scrollProgress, setMode: (m) => {} };

    // Animation loop
    let raf = 0;
    const animate = () => {
      raf = requestAnimationFrame(animate);
      // Auto-rotate after 3s idle
      if (Date.now() - lastInteract > 3000 && !dragging) {
        targetTheta += 0.0015;
      }
      // Subtle scroll-driven theta + phi nudge
      const sp = scrollProgress;
      const scrollThetaOffset = sp * 0.6;
      const cameraEffectiveTheta = theta + scrollThetaOffset;
      camera.position.x = dist * Math.sin(phi) * Math.cos(cameraEffectiveTheta);
      camera.position.z = dist * Math.sin(phi) * Math.sin(cameraEffectiveTheta);
      camera.position.y = dist * Math.cos(phi) + 4 + sp * 2;
      camera.lookAt(0, 3.5 + sp * 1.5, 0);
      theta += (targetTheta - theta) * 0.06;
      phi += (targetPhi - phi) * 0.06;

      // Particles drift
      particles.rotation.y += 0.0008;

      renderer.render(scene, camera);
    };
    animate();

    // Resize
    const onResize = () => {
      const w2 = canvas.clientWidth, h2 = canvas.clientHeight;
      camera.aspect = w2 / h2;
      camera.updateProjectionMatrix();
      renderer.setSize(w2, h2, false);
    };
    window.addEventListener('resize', onResize);

    return () => {
      cancelAnimationFrame(raf);
      canvas.removeEventListener('mousemove', onMouseMove);
      canvas.removeEventListener('click', onClick);
      canvas.removeEventListener('mousedown', onDown);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('mousemove', onDrag);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
      renderer.dispose();
    };
  }, []);

  // Highlight selected floor
  useEffect(() => {
    if (!sceneRef.current.floorMeshes) return;
    sceneRef.current.floorMeshes.forEach(m => {
      const isSelected = m.userData.floor === selectedFloor;
      m.material.color = new THREE.Color(isSelected ? 0xF5F1EA : 0xECE6DB);
      m.material.emissive = new THREE.Color(isSelected ? 0xB8924A : 0x000000);
      m.material.emissiveIntensity = isSelected ? 0.12 : 0;
    });
  }, [selectedFloor]);

  const apartments = APARTMENTS_PER_FLOOR[selectedFloor] || [];
  const available = apartments.filter(a => a.status === 'available').length;
  const prices = apartments.map(a => parseInt(a.price.replace(/[^0-9]/g, '')));
  const priceRange = prices.length > 0 ? `€${Math.min(...prices).toLocaleString('bg-BG')} – €${Math.max(...prices).toLocaleString('bg-BG')}` : '—';

  const floorLabel = (f) => {
    if (f === 9) return 'Етаж 09 · Пентхаус';
    return `Етаж 0${f}`;
  };

  return (
    <section id="building-explorer" className="explorer">
      <div className="explorer-stage">
        <span className="explorer-floor-tag">{floorLabel(selectedFloor)}</span>
        <canvas ref={canvasRef} id="building-canvas"></canvas>
        <div className="explorer-overlay-controls">
          <button className={`explorer-toggle ${viewMode === 'exterior' ? 'active' : ''}`} onClick={() => setViewMode('exterior')}>Външен изглед</button>
          <button className={`explorer-toggle ${viewMode === 'context' ? 'active' : ''}`} onClick={() => setViewMode('context')}>Околна среда</button>
          <button className={`explorer-toggle ${viewMode === 'crosssection' ? 'active' : ''}`} onClick={() => setViewMode('crosssection')}>Разрез</button>
        </div>
        <div className="explorer-overlay-info">
          Кликнете върху всеки етаж на сградата, за да разгледате наличните апартаменти. Влачете, за да обърнете изгледа. Скролвайте, за да се издигнете.
        </div>
      </div>

      <div className="explorer-panel">
        <div className="explorer-panel-header">
          <span className="eyebrow on-dark">— Сграда AURELIA · София · Източен парк</span>
          <h2>
            Девет етажа.<br/>
            Двадесет и четири <em>апартамента</em>.<br/>
            Един архитект.
          </h2>
          <div className="explorer-floor-display">
            <div className="stat">
              <span className="stat-label">Селектиран етаж</span>
              <span className="stat-value">{floorLabel(selectedFloor).split('·')[0].trim()}</span>
            </div>
            <div className="stat">
              <span className="stat-label">Свободни</span>
              <span className="stat-value bronze">{available} <small style={{fontSize:'0.5em', color:'rgba(245,241,234,0.5)'}}>от {apartments.length}</small></span>
            </div>
            <div className="stat" style={{gridColumn:'span 2'}}>
              <span className="stat-label">Ценови диапазон</span>
              <span className="stat-value">{priceRange}</span>
            </div>
          </div>
        </div>

        <div className="explorer-apartments">
          {apartments.map(apt => (
            <a key={apt.num} href="../apartment/apartment.html" className="explorer-apt">
              <span className="explorer-apt-num">{apt.num}</span>
              <span className="explorer-apt-info">
                {apt.type} · {apt.area} м²
                <small>{apt.bedrooms === 0 ? 'студио' : `${apt.bedrooms} спалня${apt.bedrooms > 1 ? '/и' : ''}`} · ориентация юг/изток</small>
              </span>
              <span className="explorer-apt-price">{apt.price}</span>
              <span className={`explorer-apt-status ${apt.status}`}></span>
            </a>
          ))}
        </div>

        <div className="explorer-cta" style={{marginTop:'auto', display:'flex', flexDirection:'column', gap:24}}>
          <div style={{display:'flex', gap:18, fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'rgba(245,241,234,0.6)'}}>
            <span><span style={{display:'inline-block',width:8,height:8,borderRadius:'50%',background:'var(--success)',marginRight:8,verticalAlign:'middle'}}></span>Свободен</span>
            <span><span style={{display:'inline-block',width:8,height:8,borderRadius:'50%',background:'var(--bronze)',marginRight:8,verticalAlign:'middle'}}></span>Резервиран</span>
            <span><span style={{display:'inline-block',width:8,height:8,borderRadius:'50%',background:'var(--smoke)',marginRight:8,verticalAlign:'middle'}}></span>Продаден</span>
          </div>
          <a href="../booking/booking.html" className="btn btn-bronze-on-dark" data-magnetic>
            Резервирайте оглед на този етаж <ArrowRight/>
          </a>
        </div>
      </div>

      {/* Floor selector strip — quick jump */}
      <div style={{
        position:'absolute', left:32, top:'50%', transform:'translateY(-50%)',
        display:'flex', flexDirection:'column', gap:4, zIndex:3,
        fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'0.18em'
      }}>
        {FLOORS.map(f => (
          <button key={f}
            onClick={() => setSelectedFloor(f)}
            style={{
              padding:'8px 12px',
              background: selectedFloor === f ? 'var(--bronze)' : 'transparent',
              color: selectedFloor === f ? 'var(--obsidian)' : 'rgba(245,241,234,0.5)',
              border:'1px solid',
              borderColor: selectedFloor === f ? 'var(--bronze)' : 'rgba(245,241,234,0.1)',
              transition:'all 0.3s var(--ease-out)',
              textTransform:'uppercase', letterSpacing:'0.18em',
              cursor:'pointer'
            }}
          >
            {f === 9 ? 'PH' : `0${f}`}
          </button>
        ))}
      </div>
    </section>
  );
}

/* ---------- APARTMENTS GRID ---------- */
function ApartmentsGrid() {
  const [filter, setFilter] = useState('all');
  const filters = [
    { id: 'all', label: 'Всички' },
    { id: 'studio', label: 'Студио' },
    { id: '2bed', label: '2-стаен' },
    { id: '3bed', label: '3-стаен' },
    { id: 'penthouse', label: 'Пентхаус' },
  ];
  return (
    <section className="apartments-grid">
      <div className="container-wide">
        <div className="apartments-header">
          <h2 data-reveal>
            Изберете дома, в който<br/>
            <em>светлината ще Ви намери</em><br/>
            всяка сутрин.
          </h2>
          <div className="apartments-filters" data-reveal data-reveal-delay="200">
            {filters.map(f => (
              <button key={f.id}
                className={`apt-filter ${filter === f.id ? 'active' : ''}`}
                onClick={() => setFilter(f.id)}
              >{f.label}</button>
            ))}
          </div>
        </div>

        <div className="apartments-masonry">
          <a href="../apartment/apartment.html" className="apt-card col-5 tall" data-reveal>
            <div className="apt-card-image">
              <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=900&q=80" alt="Penthouse with floor-to-ceiling windows"/>
              <div className="apt-card-overlay">
                <span className="num">PH 02 · ЕТАЖ 09</span>
                <span className="price">€1 380 000</span>
              </div>
            </div>
            <div className="apt-card-meta">
              <span className="info">Пентхаус<strong>248 м²</strong></span>
              <span className="link-arrow">Виж <ArrowRight/></span>
            </div>
          </a>

          <a href="../apartment/apartment.html" className="apt-card col-7" data-reveal data-reveal-delay="100">
            <div className="apt-card-image">
              <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=900&q=80" alt="3-bedroom apartment with balcony"/>
              <div className="apt-card-overlay">
                <span className="num">F 04 · ЕТАЖ 06</span>
                <span className="price">€598 000</span>
              </div>
            </div>
            <div className="apt-card-meta">
              <span className="info">3-стаен<strong>140 м² + 18 м² тераса</strong></span>
              <span className="link-arrow">Виж <ArrowRight/></span>
            </div>
          </a>

          <a href="../apartment/apartment.html" className="apt-card col-4 offset" data-reveal>
            <div className="apt-card-image">
              <img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?w=900&q=80" alt="2-bedroom apartment morning light"/>
              <div className="apt-card-overlay">
                <span className="num">D 02 · ЕТАЖ 04</span>
                <span className="price">€442 000</span>
              </div>
            </div>
            <div className="apt-card-meta">
              <span className="info">3-стаен<strong>110 м²</strong></span>
              <span className="link-arrow">Виж <ArrowRight/></span>
            </div>
          </a>

          <a href="../apartment/apartment.html" className="apt-card col-4" data-reveal data-reveal-delay="100">
            <div className="apt-card-image">
              <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=900&q=80" alt="Modern kitchen detail"/>
              <div className="apt-card-overlay">
                <span className="num">E 02 · ЕТАЖ 05</span>
                <span className="price">€465 000</span>
              </div>
            </div>
            <div className="apt-card-meta">
              <span className="info">3-стаен<strong>114 м²</strong></span>
              <span className="link-arrow">Виж <ArrowRight/></span>
            </div>
          </a>

          <a href="../apartment/apartment.html" className="apt-card col-4 offset" data-reveal data-reveal-delay="200">
            <div className="apt-card-image">
              <img src="https://images.unsplash.com/photo-1567767292278-a4f21aa2d36e?w=900&q=80" alt="Balcony with park view"/>
              <div className="apt-card-overlay">
                <span className="num">G 03 · ЕТАЖ 07</span>
                <span className="price">€632 000</span>
              </div>
            </div>
            <div className="apt-card-meta">
              <span className="info">4-стаен<strong>148 м²</strong></span>
              <span className="link-arrow">Виж <ArrowRight/></span>
            </div>
          </a>

          <a href="../apartment/apartment.html" className="apt-card col-8" data-reveal>
            <div className="apt-card-image">
              <img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=900&q=80" alt="Living room with eastern light"/>
              <div className="apt-card-overlay">
                <span className="num">PH 01 · ЕТАЖ 09</span>
                <span className="price">€1 240 000</span>
              </div>
            </div>
            <div className="apt-card-meta">
              <span className="info">Пентхаус<strong>220 м² + 64 м² панорамна тераса</strong></span>
              <span className="link-arrow">Виж <ArrowRight/></span>
            </div>
          </a>
        </div>

        <div style={{textAlign:'center', marginTop:80}} data-reveal>
          <a href="../projects/projects.html" className="btn btn-ghost" data-magnetic>
            Виж всички 240+ апартамента <ArrowRight/>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- LOCATIONS MAP ---------- */
function LocationsMap() {
  const [active, setActive] = useState(0);
  const projects = [
    { name: 'Aurelia Sofia · Източен парк', city: 'СОФИЯ · ЛОЗЕНЕЦ', status: 'В строеж · Q4 2027', x: 480, y: 280 },
    { name: 'Aurelia Sofia · Витошки парк', city: 'СОФИЯ · БОЯНА', status: 'Завършен · 2024', x: 380, y: 310 },
    { name: 'Aurelia Plovdiv · Капана', city: 'ПЛОВДИВ · ЦЕНТЪР', status: 'В продажба · Q1 2027', x: 520, y: 380 },
    { name: 'Aurelia Burgas · Морска градина', city: 'БУРГАС · СЕА ГАРДЪН', status: 'В строеж · Q2 2028', x: 700, y: 360 },
    { name: 'Aurelia Sofia · Хладилника', city: 'СОФИЯ · ИЗТОК', status: 'Завършен · 2022', x: 460, y: 260 },
    { name: 'Aurelia Varna · Морска градина', city: 'ВАРНА · ЦЕНТЪР', status: 'Концепция · 2029', x: 760, y: 280 },
  ];
  return (
    <section className="locations">
      <div className="container-wide">
        <div className="locations-grid">
          <div className="locations-side">
            <span className="eyebrow on-dark">— Локации</span>
            <h2 data-reveal>
              Три града.<br/>
              Седем района.<br/>
              Един <em>стандарт</em>.
            </h2>
            <ul className="locations-list">
              {projects.map((p, i) => (
                <li key={i}
                  onMouseEnter={() => setActive(i)}
                  className={active === i ? 'active' : ''}
                >
                  <span className="num">— {String(i + 1).padStart(2, '0')}</span>
                  <span className="name">
                    {p.name}
                    <small>{p.city} · {p.status}</small>
                  </span>
                  <span className="arrow">→</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="locations-map">
            <svg viewBox="0 0 900 600" preserveAspectRatio="xMidYMid slice">
              {/* Stylized Bulgaria silhouette */}
              <defs>
                <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(184,146,74,0.06)" strokeWidth="0.5"/>
                </pattern>
                <radialGradient id="glow" cx="50%" cy="50%" r="50%">
                  <stop offset="0%" stopColor="rgba(184,146,74,0.15)"/>
                  <stop offset="100%" stopColor="rgba(184,146,74,0)"/>
                </radialGradient>
              </defs>
              <rect width="900" height="600" fill="url(#grid)"/>
              <path d="M 220 200 Q 280 180 380 200 L 480 220 Q 580 230 700 240 L 800 260 Q 820 290 800 340 L 760 400 Q 700 450 600 460 L 500 470 Q 380 470 320 440 L 240 400 Q 200 350 200 290 Q 200 240 220 200 Z"
                fill="rgba(184,146,74,0.04)"
                stroke="rgba(184,146,74,0.3)"
                strokeWidth="1"
                strokeDasharray="4 4"
              />
              {/* Country labels */}
              <text x="450" y="170" fill="rgba(245,241,234,0.4)" fontSize="11" letterSpacing="3" textAnchor="middle" fontFamily="var(--font-mono)">BULGARIA · БЪЛГАРИЯ</text>

              {/* Pins */}
              {projects.map((p, i) => (
                <g key={i}
                  className={`locations-map-pin ${active === i ? 'active' : ''}`}
                  onMouseEnter={() => setActive(i)}
                  transform={`translate(${p.x}, ${p.y})`}
                >
                  <circle className="outer" r="22"/>
                  <circle r="6" fill="#B8924A"/>
                  <circle r="3" fill="#0E0C0A"/>
                  <text y="-32" fill="var(--travertine)" fontSize="11" letterSpacing="2" textAnchor="middle" fontFamily="var(--font-mono)" opacity={active === i ? 1 : 0.5}>
                    {p.name.split('·')[0].trim()}
                  </text>
                </g>
              ))}

              {/* Decorative compass */}
              <g transform="translate(820, 80)" opacity="0.4">
                <circle r="30" fill="none" stroke="var(--bronze)" strokeWidth="0.6"/>
                <line x1="0" y1="-30" x2="0" y2="-22" stroke="var(--bronze)" strokeWidth="1"/>
                <line x1="0" y1="22" x2="0" y2="30" stroke="var(--bronze)" strokeWidth="1"/>
                <line x1="-30" y1="0" x2="-22" y2="0" stroke="var(--bronze)" strokeWidth="1"/>
                <line x1="22" y1="0" x2="30" y2="0" stroke="var(--bronze)" strokeWidth="1"/>
                <text y="-38" fill="var(--bronze)" fontSize="10" letterSpacing="2" textAnchor="middle">N</text>
              </g>
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- INVESTMENT ---------- */
function Investment() {
  const [purchase, setPurchase] = useState(450000);
  const [years, setYears] = useState(10);

  // ROI calc (simplified)
  const yieldRate = 0.084;
  const appreciation = 0.06;
  const annualRent = purchase * yieldRate;
  const totalRent = annualRent * years;
  const futureValue = purchase * Math.pow(1 + appreciation, years);
  const totalReturn = totalRent + (futureValue - purchase);
  const totalRoi = (totalReturn / purchase) * 100;

  const fmt = (v) => Math.round(v).toLocaleString('bg-BG');

  return (
    <section className="investment">
      <div className="container-wide">
        <div className="investment-header">
          <span className="eyebrow bronze">— Инвестиция</span>
          <h2 data-reveal>
            Имот, който <em>отлежава</em><br/>
            като добро вино.
          </h2>
          <p className="lede" data-reveal data-reveal-delay="200" style={{maxWidth:680, margin:'0 auto'}}>
            Българският премиум сегмент расте средно 6.4% годишно от 2018 г. насам. Когато купувате Aurelia, не купувате квадратни метри — купувате актив с програма за наемане, гарантирана от нас.
          </p>
        </div>

        <div className="investment-stats" data-reveal>
          <div className="investment-stat">
            <Counter to={8.4} format={(v) => v.toFixed(1)} suffix="%" />
            <div className="label">Средна годишна доходност</div>
            <p className="desc">от наеми, нетно след поддръжка</p>
          </div>
          <div className="investment-stat">
            <Counter to={6} suffix="%" />
            <div className="label">Годишно поскъпване</div>
            <p className="desc">средно за София и Пловдив, последните 5 години</p>
          </div>
          <div className="investment-stat">
            <Counter to={92} suffix="%" />
            <div className="label">Заетост на нашите имоти</div>
            <p className="desc">в програмата Build-to-Rent</p>
          </div>
        </div>

        <div className="roi-calculator" data-reveal>
          <div className="roi-calc-controls">
            <span className="eyebrow on-dark">— ROI Калкулатор</span>
            <h3>Изчислете възвращаемостта<br/>за <em style={{fontStyle:'italic',color:'var(--bronze-soft)'}}>Вашия</em> хоризонт.</h3>

            <div className="roi-slider-group">
              <label>
                <span>Цена на покупка</span>
                <span className="val">€{fmt(purchase)}</span>
              </label>
              <input type="range" min="180000" max="1400000" step="10000" value={purchase} onChange={e => setPurchase(+e.target.value)}/>
            </div>

            <div className="roi-slider-group">
              <label>
                <span>Период на държане</span>
                <span className="val">{years} години</span>
              </label>
              <input type="range" min="3" max="25" step="1" value={years} onChange={e => setYears(+e.target.value)}/>
            </div>

            <div style={{fontSize:13,fontFamily:'var(--font-display)',fontStyle:'italic',color:'rgba(245,241,234,0.6)',marginTop:32,lineHeight:1.6}}>
              Всички калкулации са базирани на средни показатели за нашите завършени проекти за периода 2018–2025 г. Не представляват инвестиционен съвет.
            </div>
          </div>

          <div className="roi-result">
            <span className="roi-result-label">Прогнозна обща възвращаемост</span>
            <span className="roi-result-value">€{fmt(totalReturn)}</span>
            <span className="roi-result-detail">
              След {years} години Вашата инвестиция от €{fmt(purchase)} се превръща в актив с прогнозна стойност <strong style={{color:'var(--bronze-soft)',fontFamily:'inherit'}}>€{fmt(futureValue)}</strong> плюс получени наеми.
            </span>
            <div className="roi-result-breakdown">
              <div className="row">
                <span>Очакван годишен наем</span>
                <strong>€{fmt(annualRent)}</strong>
              </div>
              <div className="row">
                <span>Общо наеми за {years} години</span>
                <strong>€{fmt(totalRent)}</strong>
              </div>
              <div className="row">
                <span>Прогнозна стойност след {years} г.</span>
                <strong>€{fmt(futureValue)}</strong>
              </div>
              <div className="row" style={{borderBottom:'none', marginTop:12}}>
                <span style={{color:'var(--bronze-soft)'}}>Общо ROI</span>
                <strong style={{color:'var(--bronze-soft)', fontSize:24}}>{totalRoi.toFixed(0)}%</strong>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- RESIDENT STORIES ---------- */
function ResidentStories() {
  const stories = [
    {
      img: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1400&q=80',
      quote: 'Купихме на план. Когато ни предадоха ключа, апартаментът беше точно като визуализацията — само че светлината беше по-мека отколкото очаквахме.',
      name: 'Виктория и Никола Тодорови',
      apt: 'Пентхаус 02 · Aurelia Витоша',
      city: 'СОФИЯ'
    },
    {
      img: 'https://images.unsplash.com/photo-1521336575822-6da63fb45455?w=1400&q=80',
      quote: 'Живея тук пет години. Гаранцията на дограмата не съм ползвал нито веднъж — но ми е спокойно, че е там. Това е разликата.',
      name: 'Михаил Стоянов',
      apt: 'Апартамент C03 · Aurelia Източен парк',
      city: 'СОФИЯ'
    },
    {
      img: 'https://images.unsplash.com/photo-1502672023488-70e25813eb80?w=1400&q=80',
      quote: 'Изкарахме две години в чужбина. Когато се върнахме, апартаментът беше абсолютно същият — концирж услугата го беше поддържала. Без молби.',
      name: 'Калина Йорданова',
      apt: 'Апартамент E04 · Aurelia Хладилника',
      city: 'СОФИЯ'
    },
    {
      img: 'https://images.unsplash.com/photo-1493809842364-78817add7ffb?w=1400&q=80',
      quote: 'Купих от Aurelia защото архитектът подписва. Всеки път, когато имах въпрос, отговорът идваше от него лично. Не от продавач.',
      name: 'Стефан Гаджев',
      apt: 'Апартамент B02 · Aurelia Витоша',
      city: 'СОФИЯ'
    },
    {
      img: 'https://images.unsplash.com/photo-1571508601891-ca5e7a713859?w=1400&q=80',
      quote: 'I bought as a foreign investor. The team handled everything in English, and the legal process was faster than I expected. The rental program delivers above 8% net.',
      name: 'David Reichmann',
      apt: 'Apartment F03 · Aurelia Burgas',
      city: 'BURGAS'
    },
  ];
  return (
    <section className="stories">
      <div className="container-wide">
        <div className="stories-header">
          <span className="eyebrow on-dark">— Истории на собственици</span>
          <h2 data-reveal>
            1 800 семейства.<br/>
            <em>Една гаранция</em>,<br/>
            обновявана всеки ден.
          </h2>
        </div>
      </div>
      <div className="stories-track">
        {stories.map((s, i) => (
          <article key={i} className="story-card" data-reveal data-reveal-delay={i * 100}>
            <img src={s.img} alt={s.name}/>
            <div className="story-card-content">
              <div className="story-quote">"{s.quote}"</div>
              <div className="story-attr">
                <strong>{s.name}</strong>
                {s.apt} · {s.city}
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ---------- PROCESS ---------- */
function Process() {
  const steps = [
    { num: '01', title: 'Запитване', desc: 'Изпращате ни проекта или апартамента, който Ви интересува. Отговаряме до 2 часа в работно време. На същия език, на който сте писали.' },
    { num: '02', title: 'Лична консултация', desc: 'Среща в нашия офис или онлайн. Архитектът присъства лично. Излизате със спецификация на разположението и материалите — не с брошура.' },
    { num: '03', title: 'Оглед на място', desc: 'На обекта или в готов апартамент от друг наш проект, за да усетите финиша. Концирж Ви води до строежа с каска и обувки — не до маркетингов павилион.' },
    { num: '04', title: 'Резервация', desc: '€5 000 капаро задържа апартамента 14 дни. Изготвяме индивидуалния договор и плана за плащане според Вашата ситуация.' },
    { num: '05', title: 'Договор и плащане', desc: 'Нотариален договор. Превод от Вашата банка към ескроу сметка. Графикът на плащане е в зависимост от етапите на строителството — никога авансово.' },
    { num: '06', title: 'Предаване на ключ', desc: '47-точкова контролна обиколка с Вас. Подписваме приемо-предавателен протокол. Концирж услугата започва от момента, в който завъртите ключа.' },
  ];
  return (
    <section className="process">
      <div className="container">
        <div className="process-header">
          <span className="eyebrow bronze">— Процес</span>
          <h2 data-reveal>
            От запитване до ключ —<br/>
            шест ясни стъпки.
          </h2>
        </div>
        <div className="process-timeline">
          {steps.map((s, i) => (
            <div key={i} className="process-step" data-reveal data-reveal-delay={i * 80}>
              <div className="process-step-content">
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
              <div className="process-step-num">{s.num}</div>
              <div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- PRESS / TESTIMONIALS ---------- */
function Press() {
  return (
    <section className="press">
      <div className="container">
        <div style={{textAlign:'center', marginBottom:100}}>
          <span className="eyebrow on-dark">— Пресата за нас</span>
        </div>
        <div className="press-quotes">
          <div className="press-quote" data-reveal>
            <div className="press-quote-text">
              Aurelia постави нов стандарт за документирано качество в българския премиум сегмент. Десет години структурна гаранция, записана в договор, не е маркетингов трик — това е финансово задължение, което други не смеят да поемат.
            </div>
            <div className="press-quote-attr">
              <strong>Капитал</strong> 03/2025 · Имотен пазар
            </div>
          </div>
          <div className="press-quote" data-reveal data-reveal-delay="200">
            <div className="press-quote-text">
              The diaspora program from Aurelia is a model the Bulgarian real estate sector should adopt. Foreign-buyer-friendly contracts in three languages, escrow protection, and a 92% occupancy program — this is European-grade execution.
            </div>
            <div className="press-quote-attr">
              <strong>Forbes Bulgaria</strong> 11/2024 · Investment
            </div>
          </div>
        </div>
        <div className="press-logos">
          <span className="press-logo">Capital</span>
          <span className="press-logo">Forbes BG</span>
          <span className="press-logo">Bloomberg TV BG</span>
          <span className="press-logo">Manager</span>
          <span className="press-logo">Economy Magazine</span>
          <span className="press-logo">Bulgaria ON AIR</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA SECTION ---------- */
function CtaSection() {
  return (
    <section className="cta-section grain">
      <div className="container">
        <span className="eyebrow on-dark" style={{display:'inline-block', marginBottom:16}}>— Финална крачка</span>
        <h2 data-reveal>
          Един разговор<br/>
          Ви разделя от<br/>
          <em>Вашия следващ дом</em>.
        </h2>
        <div className="cta-actions" data-reveal data-reveal-delay="200">
          <a href="../booking/booking.html" className="btn" data-magnetic>
            Резервирайте оглед <ArrowRight/>
          </a>
          <a href="../contact/contact.html" className="btn btn-on-dark" data-magnetic>
            Свържете се с концирж <ArrowRight/>
          </a>
        </div>
        <div data-reveal data-reveal-delay="400">
          <a href="../contact/contact.html" className="cta-concierge">
            <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200&q=80" alt="Концирж Анна Маркова"/>
            <div>
              Концирж за днес<br/>
              <strong>Анна Маркова</strong>
              <small>+359 887 12 34 56</small>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- COMPLETED ---------- */
function CompletedProjects() {
  const projects = [
    { name: 'Aurelia Витоша', city: 'СОФИЯ · БОЯНА', year: '2024', units: 18, img: 'https://images.unsplash.com/photo-1486325212027-8081e485255e?w=900&q=80', desc: 'Бутиков проект с 18 апартамента в подножието на Витоша. Завършен с 5 месеца преди срока.' },
    { name: 'Aurelia Хладилника', city: 'СОФИЯ · ИЗТОК', year: '2022', units: 32, img: 'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=900&q=80', desc: '32 апартамента в новия делови център. 96% продадени преди завършване, 100% заети.' },
    { name: 'Aurelia Парк', city: 'СОФИЯ · МЛАДОСТ 1', year: '2021', units: 24, img: 'https://images.unsplash.com/photo-1565182999561-18d7dc61c393?w=900&q=80', desc: 'Първият ни проект с панелна реконструкция и реновиране на цял квартал. Сертификат за енергийна ефективност клас А.' },
  ];
  return (
    <section className="completed">
      <div className="container-wide">
        <div className="completed-header">
          <div>
            <span className="eyebrow bronze">— Завършени проекти</span>
            <h2 data-reveal style={{marginTop:24}}>
              Проекти, при които<br/>
              хората вече <em style={{fontStyle:'italic', color:'var(--bronze)'}}>живеят</em>.
            </h2>
          </div>
          <a href="../projects/projects.html" className="link-arrow">Виж всички 14 завършени <ArrowRight/></a>
        </div>
        <div className="completed-grid">
          {projects.map((p, i) => (
            <a key={i} href="../project/project.html" className="completed-card" data-reveal data-reveal-delay={i * 100}>
              <div className="completed-card-image">
                <img src={p.img} alt={p.name}/>
              </div>
              <div className="completed-card-content">
                <div className="meta">
                  <span>{p.city}</span>
                  <span>{p.year} · {p.units} апартамента</span>
                </div>
                <div className="name">{p.name}</div>
                <div className="desc">{p.desc}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}