/* Residences.jsx — grid of villas + filter */

function SectionOpener({ overline, title, intro }) {
  return (
    <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 36px', padding: '0 8px' }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
        <span className="sun-bullet" />
        <div className="overline">{overline}</div>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 'clamp(28px, 4vw, 52px)',
          color: 'var(--navy-900)', margin: 0,
          letterSpacing: '-0.01em', lineHeight: 1.1, textWrap: 'balance',
        }}>{title}</h2>
        {intro && (
          <p style={{ color: 'var(--ink-500)', fontSize: 'clamp(14px, 1.6vw, 17px)', lineHeight: 1.6, margin: 0, textWrap: 'pretty' }}>
            {intro}
          </p>
        )}
      </div>
    </div>
  );
}

function Residences({ properties, onSelect }) {
  const [filter, setFilter] = React.useState('all');

  const filtered = filter === 'all'
    ? properties
    : properties.filter(p => p.kind === filter);

  const filters = [
    { id: 'all', label: 'All residences' },
    { id: 'villa', label: 'Villas' },
    { id: 'luxury-rental', label: 'Luxury rentals' },
  ];

  return (
    <section id="villas" className="section" style={{ background: 'var(--sand-50)' }}>
      <div className="container">
        <SectionOpener
          overline="The Residences"
          title="Our homes, one Miami"
          intro="From waterfront villas in North Bay Village to a beachfront estate in Bimini — each held to a single standard of refined hospitality."
        />

        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28, padding: '0 16px' }}>
          <div role="tablist" style={{
            display: 'inline-flex', padding: 4, background: 'var(--sand-100)',
            borderRadius: 999, gap: 2, maxWidth: '100%', overflowX: 'auto',
          }}>
            {filters.map(f => (
              <button key={f.id} onClick={() => setFilter(f.id)}
                style={{
                  fontFamily: 'var(--font-text)', fontSize: 12, fontWeight: 500,
                  padding: '10px 14px', borderRadius: 999, border: 0,
                  background: filter === f.id ? '#fff' : 'transparent',
                  color: filter === f.id ? 'var(--navy-900)' : 'var(--ink-500)',
                  boxShadow: filter === f.id ? '0 1px 2px rgba(15,42,66,0.08)' : 'none',
                  cursor: 'pointer', transition: 'all 160ms var(--ease-novus)',
                  whiteSpace: 'nowrap', minHeight: 36,
                }}>{f.label}</button>
            ))}
          </div>
        </div>

        <div style={{
          display: 'grid', gap: 16,
          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
        }}>
          {filtered.map(p => (
            <PropertyCard key={p.id} p={p} onSelect={onSelect} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.Residences = Residences;
window.SectionOpener = SectionOpener;