1import { useState } from 'react';
 2
 3export default function App() {
 4  const [open, setOpen] = useState(false);
 5
 6  return (
 7    <main className="page">
 8      <button data-testid="open-modal" type="button" onClick={() => setOpen(true)}>
 9        Open Modal
10      </button>
11      {open && (
12        <div className="modal-backdrop">
13          <div className="modal" role="dialog" aria-modal="true">
14            <h1 className="hero-title">Modal Heading</h1>
15            <p className="hero-hook">Conditionally rendered — only mounts on click.</p>
16            <button data-testid="close-modal" type="button" onClick={() => setOpen(false)}>
17              Close
18            </button>
19          </div>
20        </div>
21      )}
22    </main>
23  );
24}