/* ===== Troyamarin — Listings (3D cards) + Regions Map ===== */
const { useRef: useRef2, useState: useState2 } = React;

function Card3D({ item, fav, onFav }) {
  const ref = useRef2(null);
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = `rotateY(${px * 9}deg) rotateX(${-py * 9}deg) translateY(-6px)`;
  };
  const reset = () => { if (ref.current) ref.current.style.transform = ''; };

  return (
    <div className="card3d" onMouseMove={onMove} onMouseLeave={reset}>
      <a className="card-inner" ref={ref} href={item.link || '#'}>
        <div className="card-media">
          <img src={item.img} alt={item.title} loading="lazy" />
          <div className="card-glow" />
          <div className="badge">{item.badge}</div>
          <button className={'fav' + (fav ? ' on' : '')}
            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onFav(); }}
            aria-label="Favori">
            {fav ? '♥' : '♡'}
          </button>
        </div>
        <div className="card-body">
          <div className="ctag">{item.type}</div>
          <h3>{item.title}</h3>
          <div className="card-loc">◍ {item.loc}</div>
          <div className="card-specs">
            <div className="sp"><b>{item.area}</b><small>ALAN</small></div>
            <div className="sp"><b>{item.zoning}</b><small>İMAR</small></div>
            <div className="sp"><b>{item.deed}</b><small>TAPU</small></div>
          </div>
          <div className="card-foot">
            <div className="card-price">{item.price}<small>{item.unit}</small></div>
          </div>
        </div>
      </a>
    </div>
  );
}

function FeaturedListings({ items }) {
  const [favs, setFavs] = useState2({});
  const toggle = (id) => setFavs((f) => ({ ...f, [id]: !f[id] }));
  return (
    <section className="sec" id="ilanlar">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <span className="eyebrow reveal">Portföy</span>
            <h2 className="section-title reveal d1" style={{ marginTop: '16px' }}>
              Öne çıkan <em>arazi & arsalar</em>
            </h2>
          </div>
          <p className="lead reveal d2">
            Çanakkale ve Muğla'nın binlerce yıllık tarihi ve Ege'nin eşsiz mavisiyle en seçkin konumlarından biri.
             Troya Marin olarak bu kadim topraklardaki en değerli mülkleri; doğrulanmış tapu, şeffaf fiyatlandırma ve uçtan uca destekle sunuyoruz.
          </p>
        </div>
        <div className="cards">
          {items.map((it, i) => (
            <div className={`reveal d${(i % 3) + 1}`} key={it.id}>
              <Card3D item={it} fav={!!favs[it.id]} onFav={() => toggle(it.id)} />
            </div>
          ))}
        </div>
        <div className="reveal" style={{ marginTop: '50px', textAlign: 'center' }}>
          <a className="btn btn-ghost" href="#">Tüm portföyü görüntüle <span className="ar">→</span></a>
        </div>
      </div>
    </section>
  );
}

/* ===== Regions Map ===== */
function RegionsMap({ regions }) {
  const [on, setOn] = useState2(regions[0].id);
  const cur = regions.find((r) => r.id === on) || regions[0];
  return (
    <section className="sec alt-bg" id="bolgeler">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <span className="eyebrow reveal">Bölgeler</span>
            <h2 className="section-title reveal d1" style={{ marginTop: '16px' }}>
              İki kıyı, <em>sayısız fırsat</em>
            </h2>
          </div>
          <p className="lead reveal d2">
            Antik Troya'nın topraklarından Ege'nin turkuaz koylarına — değer
            kazanan bölgelerde uzmanlaşmış bir portföy.
          </p>
        </div>

        <div className="map-grid">
          <div className="region-list reveal">
            {regions.map((r, i) => (
              <div key={r.id} className={'region' + (on === r.id ? ' on' : '')}
                onMouseEnter={() => setOn(r.id)} onClick={() => setOn(r.id)}>
                <div className="rn">{String(i + 1).padStart(2, '0')}</div>
                <div className="rh">
                  <h4>{r.name}</h4>
                  <p>{r.sub}</p>
                </div>
                <div className="rc">{r.count} ilan →</div>
              </div>
            ))}
          </div>

          <div className="mapbox reveal d2">
            <iframe key={cur.id} className="mapbox-frame" src={cur.map} title={cur.name}
              loading="lazy" allowFullScreen referrerPolicy="no-referrer-when-downgrade" />
            <div className="mapbox-overlay" />
            {cur.pins.map((p, i) => (
              <div key={i} className="map-pin on" style={{ left: p.x + '%', top: p.y + '%' }}>
                <div className="mp-lab">{p.label}</div>
                <div className="mp-dot" />
              </div>
            ))}
            <div className="map-tag"><b>{cur.name}</b> · {cur.region}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FeaturedListings, RegionsMap });