// Settings — properties, categories, cleaner links.
// (Originally inlined in index.html; extracted as part of the refactor.)
function SettingsPage({ store }) {
  return (
    <>
      <Topbar title="Settings" subtitle="Properties, categories, cleaner links"/>
      <div className="content" style={{ display: 'grid', gap: 20 }}>
        <div className="card">
          <div className="card-header">
            <h3>Properties</h3>
            <button className="btn accent">{Icon.plus} Add property</button>
          </div>
          {store.houses.map((h, i) => (
            <div key={h.id} style={{
              display: 'grid', gridTemplateColumns: '80px 1fr 130px 100px 100px', gap: 16, alignItems: 'center',
              padding: '14px 20px', borderTop: i === 0 ? 0 : '1px solid var(--border)',
            }}>
              <div style={{ width: 64, height: 48, borderRadius: 6, overflow: 'hidden' }}>
                <HousePhoto house={h} size="sm"/>
              </div>
              <div>
                <div style={{ fontWeight: 500 }}>{h.name}</div>
                <div className="xs muted">{h.address}</div>
              </div>
              <div><div className="xs muted">Cleaning rate</div><div className="tabular" style={{ fontWeight: 500 }}>${h.cleaningRate}</div></div>
              <div><div className="xs muted">Avg nightly</div><div className="tabular" style={{ fontWeight: 500 }}>${h.nightlyRate}</div></div>
              <div className="row" style={{ gap: 6, justifyContent: 'flex-end' }}>
                <button className="btn sm">Edit</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

Object.assign(window, { SettingsPage });