/* @component-map
 * App — Main container, phone layout with hero, mascot, joke card, and favorites
 * HeroSection — Top branding area with eyebrow, title, subtitle
 * MascotCard — Mascot image display card
 * JokeCard — Main joke display with reveal, next, save buttons and AI generation
 * FavoritesCard — Saved favorites list with remove and clear functionality
 * @end-component-map */

import { HeroSection } from './components/HeroSection.jsx';
import { MascotCard } from './components/MascotCard.jsx';
import { JokeCard } from './components/JokeCard.jsx';
import { FavoritesCard } from './components/FavoritesCard.jsx';

function App() {
  return (
    <div className="phone">
      <div className="notch"></div>
      <HeroSection />
      <MascotCard />
      <JokeCard />
      <FavoritesCard />
    </div>
  );
}

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