Render the Movie Detail Hero

Build the first visible section of the movie page from the detail object. The goal is to let the user immediately identify the movie and see its main metadata.

Step 1 — Add the page header

Use the same page and header classes as the browse page so the detail route belongs to the same visual system. Render the movie title and optional tagline from the fetched data.

Step 2 — Add the backdrop and poster

Use the backdropUrl when it exists for the large visual area, and the posterUrl for the poster card. Keep the fallback layout when one of those URLs is missing instead of assuming every TMDB record has both images.

Step 3 — Render the metadata

Display release year, runtime, rating, genres, and director from MovieDetail. Keep the metadata close to the title so the page answers the basic question — “what is this movie?” — before the synopsis begins.

Step 4 — Add the existing wishlist action placeholder

Import WatchlistButton and render it with the current movie id. The component will become functional in the next module.

<WatchlistButton movieId={movie.id} />

Checkpoint

Open a known movie route. The page should show the movie identity, visual hero, primary metadata, and the wishlist action in the correct part of the layout.