(function() {
  function UnitPage({ propertySlug, unitSlug }) {
    const properties = (window.SITE_DATA || {properties:[]}).properties;
    const property = properties.find(p => p.slug === propertySlug);
    const unit = property && property.units.find(u => u.slug === unitSlug);

    if (!property || !unit) {
      return (
        <div className="page-container">
          <div className="empty-state" style={{paddingTop:'80px'}}>
            <h2>Unit not found</h2>
            <p>This unit doesn't exist or may have been leased.</p>
            <a href="#/" className="btn-primary" style={{marginTop:'16px'}}>← Back to Properties</a>
          </div>
        </div>
      );
    }

    const statusLabel = {available:'Available',  'coming-soon':'Coming Soon', leased:'Leased'};
    const applyUrl = window.BRAND_CONFIG.applyBasePath + '#/apply/property/' + propertySlug;

    return (
      <div className="unit-detail-page">
        <div className="page-container">

          {/* Breadcrumb */}
          <div className="breadcrumb">
            <a href="#/">Properties</a>
            <span className="sep">›</span>
            <a href={`#/property/${propertySlug}`}>{property.name}</a>
            <span className="sep">›</span>
            {unit.name}
          </div>

          {/* Back */}
          <button className="back-btn" onClick={() => window.location.hash = `#/property/${propertySlug}`}>
            ← Back to {property.name}
          </button>

          {/* Title row */}
          <div className="unit-detail-header">
            <div className="unit-detail-title-row">
              <h1 style={{margin:0}}>{unit.name}</h1>
              <span className={`unit-status-badge ${unit.status}`}>{statusLabel[unit.status] || unit.status}</span>
            </div>
            <p style={{color:'var(--nm-gray-mid)', margin:'4px 0 0'}}>{property.name} · {property.city}</p>
          </div>

          {/* Stats grid */}
          <div className="unit-stats-grid">
            <div className="info-item"><label>Square Feet</label><span>{unit.sf.toLocaleString()} SF</span></div>
            <div className="info-item"><label>Asking Rent</label><span>{unit.rentPSF}</span></div>
            <div className="info-item"><label>Use Type</label><span style={{fontSize:'var(--text-md)'}}>{unit.type}</span></div>
            <div className="info-item"><label>Condition</label><span style={{fontSize:'var(--text-md)'}}>{unit.condition}</span></div>
            <div className="info-item"><label>Frontage</label><span>{unit.frontage}</span></div>
            <div className="info-item"><label>Status</label><span style={{fontSize:'var(--text-md)'}}>{statusLabel[unit.status] || unit.status}</span></div>
          </div>

          {/* Photo gallery */}
          <div className="unit-photo-gallery">
            {unit.photos && unit.photos.length > 0
              ? unit.photos.map((src, i) => (
                  <img key={i} src={src} alt={`${unit.name} photo ${i+1}`} className={i===0 ? 'photo-placeholder main' : ''} style={{width:'100%', height: i===0?'360px':'240px', objectFit:'cover', borderRadius:'var(--radius-md)'}} />
                ))
              : [
                  <div key="main" className="photo-placeholder main">Photo coming soon</div>,
                  <div key="a" className="photo-placeholder">Photo coming soon</div>,
                  <div key="b" className="photo-placeholder">Photo coming soon</div>,
                ]
            }
          </div>

          {/* Description */}
          <div className="unit-description">
            <h3>About This Space</h3>
            <p>{unit.description}</p>
            <p style={{marginTop:'var(--space-sm)', color:'var(--nm-gray-mid)', fontSize:'var(--text-sm)'}}>
              Located at {property.name}, {property.address}. Anchor tenants include {property.anchors.join(' and ')}.
            </p>
          </div>

          {/* Floor plan */}
          <div className="unit-floorplan-section">
            <div>
              <strong>Floor Plan</strong>
              <p>{unit.floorPlanUrl ? 'Download the floor plan PDF for detailed dimensions.' : 'Floor plan will be available soon. Contact us for dimensions.'}</p>
            </div>
            <button
              className="btn-outline"
              disabled={!unit.floorPlanUrl}
              onClick={() => unit.floorPlanUrl && window.open(unit.floorPlanUrl, '_blank')}
            >
              {unit.floorPlanUrl ? '⬇ Download Floor Plan' : '⬇ Floor Plan Coming Soon'}
            </button>
          </div>

          {/* Apply CTA */}
          {unit.status !== 'leased' && (
            <div className="apply-cta-box">
              <h2>Ready to Apply?</h2>
              <p>Submit your application online — our leasing team reviews every submission within one business day.</p>
              <a href={applyUrl} className="btn-apply-large">
                Apply for This Space →
              </a>
              <p style={{marginTop:'var(--space-sm)', fontSize:'var(--text-xs)', color:'rgba(255,255,255,0.5)'}}>
                Questions first? <a href="#/contact" style={{color:'var(--brand-teal)'}}>Contact our leasing team</a>
              </p>
            </div>
          )}

        </div>
      </div>
    );
  }

  window.UnitPage = UnitPage;
})();