/* @component-map
 * App — Main container, layout with header, quote grid, and footer
 * QuoteGrid — Displays 15 randomly selected inspirational quote cards
 * @end-component-map */

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

function App() {
  const [refreshKey, setRefreshKey] = useState(0);

  return (
    <div className="app-wrapper">
      <div className="grain"></div>
      <div className="orb orb-1"></div>
      <div className="orb orb-2"></div>

      <header>
        <h1>Daily Spark</h1>
        <p>15 sparks of wisdom, freshly drawn</p>
        <button className="refresh-btn" onClick={() => setRefreshKey(k => k + 1)}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="23 4 23 10 17 10" />
            <polyline points="1 20 1 14 7 14" />
            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
          </svg>
          New Spark
        </button>
      </header>

      <QuoteGrid refreshKey={refreshKey} />

      <footer>Refresh the page or tap "New Spark" for a fresh set.</footer>
    </div>
  );
}

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