// Listings.jsx — filterable property grid, two card styles

function Listings({ cardStyle, onOpen }) {
  const [active, setActive] = React.useState('Tous');
  const [sort, setSort] = React.useState('Récent');
  const filters = ['Tous', 'Maison', 'Appartement', 'Terrain', 'Autres'];
  return (
    <section className="ntr-section ntr-listings" data-screen-label="Listings">
      <div className="ntr-section-head">
        <div className="ntr-eyebrow"><span className="ntr-rule" /> Vitrine <span className="ntr-rule" /></div>
        <h2 className="ntr-h2" style={{ color: "rgb(1, 26, 8)" }}>Les <em>pépites.</em></h2>
        <p className="ntr-sub" style={{ color: "rgb(1, 26, 8)" }}>Trouvons ensemble le bien qui vous correspond.

        </p>
      </div>
      <div className="ntr-listings-toolbar">
        <div className="ntr-listings-filters">
          {filters.map((f) =>
          <button key={f}
          onClick={() => setActive(f)}
          className={'ntr-filter' + (active === f ? ' is-active' : '')}>
              {f}
            </button>
          )}
        </div>
        <div className="ntr-listings-sort">
          <span>Tri</span>
          <select value={sort} onChange={(e) => setSort(e.target.value)} className="ntr-sort-select">
            <option>Récent</option>
            <option>Prix croissant</option>
            <option>Prix décroissant</option>
            <option>Surface</option>
          </select>
        </div>
      </div>
      <div className={'ntr-listings-grid ntr-listings-grid--' + cardStyle}>
        {window.NOSTERRA_PROPS.map((p) =>
        cardStyle === 'editorial' ?
        <PropEditorial key={p.id} p={p} onOpen={onOpen} /> :
        <PropCatalog key={p.id} p={p} onOpen={onOpen} />
        )}
      </div>
      <div className="ntr-listings-foot">
        <button className="ntr-btn ntr-btn--ghost">VOIR TOUS LES BIENS →</button>
      </div>
    </section>);

}

function PropEditorial({ p, onOpen }) {
  return (
    <article className="ntr-prop ntr-prop--editorial" onClick={() => onOpen && onOpen(p)}>
      <div className="ntr-prop-media" style={{ background: p.bg }}>
        <div className="ntr-prop-ref">{p.ref}</div>
        {p.badge && <div className="ntr-prop-badge">{p.badge}</div>}
      </div>
      <div className="ntr-prop-body">
        <div className="ntr-prop-loc">{p.loc}</div>
        <h3 className="ntr-prop-title">{p.title}</h3>
        <p className="ntr-prop-blurb">{p.blurb}</p>
        <div className="ntr-prop-rule" />
        <div className="ntr-prop-meta">
          <div className="ntr-prop-specs">
            <span><b>{p.m2}</b> m²</span>
            <span><b>{p.rooms}</b> p.</span>
            <span><b>{p.land}</b></span>
          </div>
          <div className="ntr-prop-price">{p.price} €</div>
        </div>
        <div className="ntr-prop-foot">
          <span className="ntr-prop-dpe">DPE {p.dpe}</span>
          <span className="ntr-prop-cta">Découvrir →</span>
        </div>
      </div>
    </article>);

}

function PropCatalog({ p, onOpen }) {
  return (
    <article className="ntr-prop ntr-prop--catalog" onClick={() => onOpen && onOpen(p)}>
      <div className="ntr-prop-media-c" style={{ background: p.bg }}>
        {p.badge && <span className="ntr-prop-badge-c">{p.badge}</span>}
        <span className="ntr-prop-dpe-c">DPE {p.dpe}</span>
      </div>
      <div className="ntr-prop-body-c">
        <div className="ntr-prop-loc-c">{p.loc} · {p.ref}</div>
        <h3 className="ntr-prop-title-c">{p.title}</h3>
        <div className="ntr-prop-specs-c">
          <span>{p.m2} m²</span><span>·</span>
          <span>{p.rooms} pièces</span><span>·</span>
          <span>{p.land}</span>
        </div>
        <div className="ntr-prop-price-c">{p.price} €</div>
      </div>
    </article>);

}

window.Listings = Listings;