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

  function UnitRow({ unit, propertySlug }) {
    const [open, setOpen] = useState(false);
    const statusLabel = {available:'Available', 'coming-soon':'Coming Soon', leased:'Leased'};

    return (
      <div className="unit-row">
        <div className="unit-row-header" onClick={() => setOpen(o => !o)}>
          <span className="unit-name">{unit.name}</span>
          <span className="unit-sf">{unit.sf.toLocaleString()} SF</span>
          <span className="unit-rent">{unit.rentPSF}</span>
          <span className={`unit-status-badge ${unit.status}`}>{statusLabel[unit.status] || unit.status}</span>
          <span className={`chevron${open ? ' open' : ''}`}>▾</span>
        </div>
        <div className={`unit-row-body${open ? ' open' : ''}`}>
          <div className="unit-body-grid">
            <div>
              <span className="detail-label">Type</span>
              <p>{unit.type}</p>
            </div>
            <div>
              <span className="detail-label">Condition</span>
              <p>{unit.condition}</p>
            </div>
            <div>
              <span className="detail-label">Frontage</span>
              <p>{unit.frontage}</p>
            </div>
            <div>
              <span className="detail-label">Description</span>
              <p>{unit.description}</p>
            </div>
          </div>
          <div className="unit-actions">
            <button
              className="btn-outline"
              disabled={!unit.floorPlanUrl}
              title={unit.floorPlanUrl ? 'Download floor plan' : 'Floor plan coming soon'}
              onClick={() => unit.floorPlanUrl && window.open(unit.floorPlanUrl, '_blank')}
            >
              {unit.floorPlanUrl ? '⬇ Download Floor Plan' : '⬇ Floor Plan Coming Soon'}
            </button>
            {unit.status !== 'leased' && (
              <a
                className="btn-apply"
                href={`#/property/${propertySlug}/unit/${unit.slug}`}
              >
                View & Apply →
              </a>
            )}
          </div>
        </div>
      </div>
    );
  }

  function PropertyPage({ propertySlug }) {
    const properties = (window.SITE_DATA || {properties:[]}).properties;
    const property = properties.find(p => p.slug === propertySlug);

    if (!property) {
      return (
        <div className="page-container">
          <div className="empty-state" style={{paddingTop: '80px'}}>
            <h2>Property not found</h2>
            <p>The property you're looking for doesn't exist or has been removed.</p>
            <a href="#/" className="btn-primary" style={{marginTop: '16px'}}>← Back to Properties</a>
          </div>
        </div>
      );
    }

    const initials = property.name.split(' ').map(w => w[0]).join('').slice(0,3).toUpperCase();
    const availableUnits = property.units.filter(u => u.status === 'available');
    const comingSoonUnits = property.units.filter(u => u.status === 'coming-soon');
    const leasedUnits = property.units.filter(u => u.status === 'leased');

    return (
      <div>
        {/* Hero */}
        <div className="property-hero">
          {property.heroImage
            ? <img src={property.heroImage} alt={property.name} />
            : <div className="property-hero-placeholder">{initials}</div>
          }
          <div className="property-hero-overlay">
            <h1>{property.name}</h1>
            <div className="property-city">{property.address}</div>
          </div>
        </div>

        {/* Info bar */}
        <div className="property-info-bar">
          <div className="page-container">
            <div className="property-info-grid">
              <div className="info-item"><label>Total SF</label><span>{property.totalSF}</span></div>
              <div className="info-item"><label>Available SF</label><span>{property.availableSF}</span></div>
              <div className="info-item"><label>Year Built</label><span>{property.yearBuilt}</span></div>
              <div className="info-item">
                <label>Anchor Tenants</label>
                <span style={{fontSize: 'var(--text-sm)', fontWeight: 600}}>{property.anchors.join(' · ')}</span>
              </div>
            </div>
          </div>
        </div>

        <div className="page-container">
          {/* Breadcrumb */}
          <div className="breadcrumb">
            <a href="#/">Properties</a>
            <span className="sep">›</span>
            {property.name}
          </div>

          {/* Description */}
          <div style={{maxWidth: '720px', marginBottom: 'var(--space-xl)', marginTop: 'var(--space-md)'}}>
            <p>{property.description}</p>
          </div>

          {/* Units */}
          <section className="units-section">
            <h2>Available Units</h2>
            {property.units.length === 0
              ? <p className="empty-state">No units currently listed. <a href="#/contact">Contact us</a> for availability.</p>
              : (
                <div className="unit-accordion">
                  {availableUnits.map(u => <UnitRow key={u.slug} unit={u} propertySlug={propertySlug} />)}
                  {comingSoonUnits.map(u => <UnitRow key={u.slug} unit={u} propertySlug={propertySlug} />)}
                  {leasedUnits.map(u => <UnitRow key={u.slug} unit={u} propertySlug={propertySlug} />)}
                </div>
              )
            }
          </section>

          {/* Contact CTA */}
          <div style={{background: 'var(--nm-gray-light)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-lg)', marginBottom: 'var(--space-2xl)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 'var(--space-md)'}}>
            <div>
              <strong>Questions about {property.name}?</strong>
              <p style={{margin: '4px 0 0', fontSize: 'var(--text-sm)', color: 'var(--nm-gray-mid)'}}>
                Our leasing team responds within one business day.
              </p>
            </div>
            <a href="#/contact" className="btn-outline">Contact Leasing Team</a>
          </div>
        </div>
      </div>
    );
  }

  window.PropertyPage = PropertyPage;
})();