/* @component-map
 * App — Main container, layout and view orchestration
 * SearchSection — City input and explore button, triggers AI generation
 * ResultsSection — Displays AI-generated places for a city
 * HistorySection — Shows recent city searches and allows re-exploring or clearing
 * @end-component-map */

import { SearchSection } from './components/SearchSection.jsx';
import { ResultsSection } from './components/ResultsSection.jsx';
import { HistorySection } from './components/HistorySection.jsx';

function App() {
  const [currentCity, setCurrentCity] = useState(null);
  const [places, setPlaces] = useState([]);
  const [aiLoading, setAiLoading] = useState(false);

  return (
    <div className="app-wrapper">
      <header className="hero">
        <div className="hero-bg"></div>
        <div className="hero-content">
          <div className="hero-icon">🗺️</div>
          <h1 className="hero-title">City Wanderer</h1>
          <p className="hero-sub">Discover 5 cool places in any city — powered by AI ✨</p>
        </div>
      </header>
      <main className="main-content">
        <SearchSection
          onResults={(city, results) => {
            setCurrentCity(city);
            setPlaces(results);
          }}
          aiLoading={aiLoading}
          setAiLoading={setAiLoading}
        />
        <ResultsSection
          city={currentCity}
          places={places}
          loading={aiLoading}
        />
        <HistorySection
          onSelectCity={(city) => {
            document.querySelector('.city-input')?.focus();
            setCurrentCity(city);
          }}
        />
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);