// MapPage.jsx — Map view with pins, search, alert, and swipe-up overview sheet

function MapPage({ alertVisible, onDismissAlert }) {
  const [sheetExpanded, setSheetExpanded] = React.useState(false);

  const PINS = [
    {x: 12, y: 38, kind: 'green'},  {x: 18, y: 36, kind: 'yellow'},
    {x: 32, y: 32, kind: 'red'},    {x: 44, y: 38, kind: 'red'},
    {x: 60, y: 35, kind: 'red'},    {x: 75, y: 40, kind: 'yellow'},
    {x: 22, y: 50, kind: 'yellow'}, {x: 12, y: 56, kind: 'red'},
    {x: 38, y: 56, kind: 'green'},  {x: 50, y: 60, kind: 'green'},
    {x: 62, y: 58, kind: 'red'},    {x: 78, y: 56, kind: 'yellow'},
    {x: 28, y: 68, kind: 'green'},  {x: 48, y: 70, kind: 'green'},
    {x: 70, y: 70, kind: 'yellow'}, {x: 35, y: 82, kind: 'green'},
  ];

  return (
    <div className="map-page">
      <SearchBar/>
      <div className="map-wrap">
        <MapBackdrop pins={PINS}/>
        {alertVisible && (
          <div style={{position:'absolute', top: 10, left: 10, right: 10, zIndex: 10}}>
            <AlertBanner onDismiss={onDismissAlert}/>
          </div>
        )}
        <MapSheet
          open={true}
          expanded={sheetExpanded}
          onSetExpanded={setSheetExpanded}
          onClose={() => setSheetExpanded(false)}
        />
      </div>
    </div>
  );
}

window.MapPage = MapPage;