(function() {
  const { useState } = React;

  function PropertyCard({ property }) {
    const initials = property.name.split(' ').map(w => w[0]).join('').slice(0,3).toUpperCase();
    const availableCount = property.units.filter(u => u.status === 'available').length;

    return (
      <a className="property-card" href={`#/property/${property.slug}`}>
        {property.heroImage
          ? <img className="property-card-img" src={property.heroImage} alt={property.name} />
          : <div className="property-card-placeholder">{initials}</div>
        }
        <div className="property-card-body">
          <div className="property-card-name">{property.name}</div>
          <div className="property-card-city">{property.city}</div>
          <div className="card-tags">
            {property.anchors.slice(0,3).map(a => <span key={a} className="tag">{a}</span>)}
            {availableCount > 0 && <span className="tag available">{availableCount} Available</span>}
          </div>
          <div className="property-card-footer">
            <span className="avail-badge">{property.availableSF} SF available</span>
            <span className="card-link">View spaces →</span>
          </div>
        </div>
      </a>
    );
  }

  function HomePage() {
    const [filter, setFilter] = useState('all');
    const properties = (window.SITE_DATA || {properties:[]}).properties;

    // Compute stats dynamically
    const totalAvailSF = properties.reduce((sum, p) => {
      return sum + parseInt((p.availableSF || '0').replace(/,/g, ''));
    }, 0);
    const totalPortfolioSF = properties.reduce((sum, p) => {
      return sum + parseInt((p.totalSF || '0').replace(/,/g, ''));
    }, 0);
    const cities = [...new Set(properties.map(p => p.city.split(',')[1]?.trim() || p.city))];

    const filtered = properties.filter(p => {
      if (filter === 'all') return true;
      if (filter === 'available') return p.units.some(u => u.status === 'available');
      if (filter === 'coming-soon') return p.units.some(u => u.status === 'coming-soon');
      return true;
    });

    return (
      <div>
        {/* Hero */}
        <section className="home-hero">
          <div className="page-container">
            <h1>Colorado's Best<br />Retail Properties</h1>
            <p className="hero-sub">
              Premium shopping center space across the Front Range.
              Browse available units, download floor plans, and apply online.
            </p>
            <div className="hero-cta-group">
              <a href="#/" className="btn-primary">View Available Space</a>
              <a href="#/contact" className="btn-secondary">Contact Our Team</a>
            </div>
          </div>
        </section>

        {/* Stats bar */}
        <section className="stats-bar">
          <div className="page-container">
            <div className="stats-grid">
              <div>
                <span className="stat-number">{properties.length}</span>
                <span className="stat-label">Properties</span>
              </div>
              <div>
                <span className="stat-number">{totalAvailSF.toLocaleString()} SF</span>
                <span className="stat-label">Available Now</span>
              </div>
              <div>
                <span className="stat-number">{cities.length}</span>
                <span className="stat-label">Colorado Markets</span>
              </div>
              <div>
                <span className="stat-number">{(totalPortfolioSF/1000).toFixed(0)}K SF</span>
                <span className="stat-label">Total Portfolio</span>
              </div>
            </div>
          </div>
        </section>

        {/* Property grid */}
        <section className="properties-section">
          <div className="page-container">
            <h2>Available Properties</h2>
            <div className="filter-pills">
              {['all','available','coming-soon'].map(f => (
                <button key={f} className={`filter-pill${filter === f ? ' active' : ''}`} onClick={() => setFilter(f)}>
                  {f === 'all' ? 'All Properties' : f === 'available' ? 'Available Now' : 'Coming Soon'}
                </button>
              ))}
            </div>
            {filtered.length === 0
              ? <div className="empty-state"><p>No properties match this filter.</p></div>
              : <div className="property-grid">{filtered.map(p => <PropertyCard key={p.slug} property={p} />)}</div>
            }
          </div>
        </section>
      </div>
    );
  }

  window.HomePage = HomePage;
})();