/* @component-map
 * App — Main container, layout with background orbs and header
 * FactGenerator — Displays animal facts, handles AI generation and fact history
 * @end-component-map */

import { FactGenerator } from './components/FactGenerator.jsx';

function App() {
  return (
    <div className="app-wrapper">
      <div className="orb orb-1"></div>
      <div className="orb orb-2"></div>
      <div className="orb orb-3"></div>

      <div className="container">
        <div className="badge">🌍 AI-Powered</div>
        <h1>Animal Facts</h1>
        <p className="subtitle">
          Discover wild, surprising, and delightful facts about creatures across the planet.
        </p>

        <FactGenerator />
      </div>
    </div>
  );
}

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