/* @component-map
 * App — Main container, phone frame layout with hero, mascot, joke card, and favorites
 * JokeCard — Displays current joke with reveal/next/save buttons, uses AI generation
 * FavoritesList — Shows saved favorite jokes with remove and clear functionality
 * @end-component-map */

import { JokeCard } from './components/JokeCard.jsx';
import { FavoritesList } from './components/FavoritesList.jsx';

function App() {
  return (
    <div className="phone">
      <div className="notch"></div>

      <section className="hero">
        <div className="eyebrow">✨ Polished daily laughs</div>
        <h1>Dad Joke Generator 😄</h1>
        <p className="subtitle">
          A cheerful pocket-sized joke app with a premium mascot, bright personality,
          and delightfully groan-worthy punchlines.
        </p>
      </section>

      <section className="card mascot-card">
        <div className="mascot-wrap">
          <img
            src="https://cdn.deplixo.com/i/rosemanmom/Dad_Joke_App_Dad_Image_v3.png"
            alt="Dad mascot"
          />
        </div>
        <div className="scene"></div>
      </section>

      <JokeCard />
      <FavoritesList />
    </div>
  );
}

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