// Deals overview page — filterable grid
const DealsHero = ({ counts }) => (
  <section className="v-deals-hero" data-screen-label="Deals · Overview">
    <div className="v-deals-hero-inner">
      <div className="v-eyebrow tone-navy">Exklusiv · Für Investoren der Virtorum LLC</div>
      <h1 className="v-h1" style={{marginTop:14, maxWidth:900}}>
        Aktuelle <em>Deals</em>
      </h1>
      <p className="v-section-sub" style={{maxWidth:640,marginTop:14}}>
        Jedes Objekt wurde underwritten, geprüft und nach unseren Cashflow-Kriterien kuratiert. Indikative Zahlen — finale Kalkulation im Strategiegespräch.
      </p>
      <div className="v-deals-counts">
        <div><span className="v-deals-count-n">{counts.verfuegbar}</span><span className="v-deals-count-l">Verfügbar</span></div>
        <div><span className="v-deals-count-n">{counts.reserviert}</span><span className="v-deals-count-l">Reserviert</span></div>
        <div><span className="v-deals-count-n">{counts.verkauft}</span><span className="v-deals-count-l">Verkauft · 2025/26</span></div>
      </div>
    </div>
  </section>
);

const DealsFilter = ({ active, onChange }) => {
  const filters = [
    ['alle','Alle Deals'],
    ['verfuegbar','Verfügbar'],
    ['reserviert','Reserviert'],
    ['verkauft','Verkauft · Referenz'],
  ];
  return (
    <div className="v-deals-filter">
      <div className="v-deals-filter-label">Filter</div>
      <div className="v-deals-filter-chips">
        {filters.map(([k,l])=>(
          <button key={k} className={`v-deals-chip ${active===k?'is-active':''}`} onClick={()=>onChange(k)}>{l}</button>
        ))}
      </div>
    </div>
  );
};

const DealCard = ({ d }) => (
  <a className={`v-deal-card v-deal-card-${d.status}`} href={`/deal?id=${(window.dealHref ? window.dealHref(d) : d.id)}`}>
    <PropPlaceholder t={d.typeShort} num={d.num} addr={d.neighborhood} imgSrc={d.imgPrimary}/>
    <div className="v-deal-card-body">
      <div className="v-deal-card-meta">
        <span className="v-deal-case">{d.type || 'Property'}</span>
        <StatusPill status={d.status}/>
      </div>
      <div className="v-deal-card-title">{d.city}<span>, {d.state}</span></div>
      <div className="v-deal-card-boxes">
        <div className="v-deal-box">
          <div className="v-deal-box-row">
            <span className="v-deal-box-l">Kaufpreis</span>
            <span className="v-deal-box-v">{d.kaufpreis}</span>
          </div>
          <div className="v-deal-box-row">
            <span className="v-deal-box-l">Eigenkapital</span>
            <span className="v-deal-box-v">{d.ek}</span>
          </div>
        </div>
        <div className="v-deal-box is-cf">
          <span className="v-deal-box-l">Cashflow / Monat</span>
          <span className="v-deal-box-v">{d.cfMonat}</span>
        </div>
      </div>
      <div className="v-deal-card-foot">
        <span>{d.listedSince}</span>
        <span className="v-deal-card-go">Details ansehen →</span>
      </div>
    </div>
  </a>
);

const DealsApp = () => {
  const PAGE_SIZE = 24;
  const [filter, setFilter] = React.useState('verfuegbar');
  const [page, setPage] = React.useState(1);
  const [all, setAll] = React.useState(window.DEALS && window.DEALS.length ? window.DEALS : null);
  React.useEffect(() => {
    if (all) return;
    window.DEALS_READY.then(setAll);
  }, []);
  // Reset pagination whenever the active filter changes.
  React.useEffect(() => { setPage(1); }, [filter]);
  if (!all) {
    return (
      <>
        <Nav hrefBase="/" active="deals"/>
        <section className="v-deals-body" style={{minHeight:'40vh',display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div style={{color:'var(--v-ink-soft)'}}>Deals werden geladen …</div>
        </section>
        <Footer/>
      </>
    );
  }
  const counts = all.reduce((a,d)=>{a[d.status]=(a[d.status]||0)+1;return a;},{verfuegbar:0,reserviert:0,verkauft:0});
  const filtered = filter==='alle' ? all : all.filter(d=>d.status===filter);
  const visibleCount = Math.min(filtered.length, page * PAGE_SIZE);
  const shown = filtered.slice(0, visibleCount);
  const hasMore = visibleCount < filtered.length;
  return (
    <>
      <Nav hrefBase="/" active="deals"/>
      <DealsHero counts={counts}/>
      <section className="v-deals-body">
        <DealsFilter active={filter} onChange={setFilter}/>
        <div className="v-deals-grid">
          {shown.map(d=><DealCard key={d.id} d={d}/>)}
        </div>
        {shown.length === 0 && (
          <div style={{padding:'48px 0',textAlign:'center',color:'var(--v-ink-soft)'}}>
            Aktuell keine Deals gelistet. Neue Listings folgen in Kürze.
          </div>
        )}
        {hasMore && (
          <div className="v-deals-pager">
            <button type="button" className="v-deals-pager-btn" onClick={() => setPage(p => p + 1)}>
              Mehr laden <span aria-hidden="true">↓</span>
            </button>
            <div className="v-deals-pager-meta">
              {visibleCount} von {filtered.length}
            </div>
          </div>
        )}
        <div className="v-deals-legal">
          <strong>Wichtiger Hinweis:</strong> Alle Angaben sind indikativ und basieren auf unserem Underwriting zum Zeitpunkt der Listung. Keine Anlageempfehlung. Finanzierung, Kaufpreis und Mieten können sich vor Closing ändern. Zugang zu Deals ausschließlich für eingetragene Virtorum-Investoren.
        </div>
      </section>
      <Footer/>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<DealsApp/>);