relevo de glm

app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SearchBar } from "@/components/SearchBar";
 import { MovieHeader } from "@/components/MovieHeader";
 import { MovieInsightPanel } from "@/components/MovieInsightPanel";
@@ -16,6 +16,33 @@ export default function HomePage() {
   const [isLoadingMovie, setIsLoadingMovie] = useState(false);
   const [movieError, setMovieError] = useState<string | null>(null);
 
+  // Preload a random interesting movie on initial page load to demonstrate the app
+  useEffect(() => {
+    const DEMO_IDS = [27205, 157336, 155, 550, 496243, 424]; // Inception, Interstellar, Dark Knight, Fight Club, Parasite, Schindler's List
+    const loadDemo = async () => {
+      const id = DEMO_IDS[Math.floor(Math.random() * DEMO_IDS.length)];
+      try {
+        const res = await fetch(`/api/movie/${id}`);
+        if (!res.ok) return;
+        const details: TmdbMovieDetails = await res.json();
+        const minimalSearch: TmdbSearchResult = {
+          id: details.id,
+          title: details.title,
+          release_date: details.release_date || "",
+          poster_path: details.poster_path,
+          overview: details.overview || "",
+        };
+        setSelectedMovie(minimalSearch);
+        setMovieDetails(details);
+      } catch {
+        // silently fall back to empty state if demo preload fails
+      }
+    };
+    if (!selectedMovie) {
+      void loadDemo();
+    }
+  }, []);
+
   const handleSelect = async (movie: TmdbSearchResult) => {
     setSelectedMovie(movie);
     setMovieDetails(null);
@@ -38,25 +65,18 @@ export default function HomePage() {
     }
   };
 
-  const clearSelection = () => {
-    setSelectedMovie(null);
-    setMovieDetails(null);
-    setIsLoadingMovie(false);
-    setMovieError(null);
-  };
-
   const hasFullMovie = movieDetails != null;
 
   return (
     <>
       {/* Compact navbar: title + slogan on left, search on right */}
-      <nav className="sticky top-0 z-50 border-b border-white/10 bg-slate-950/95 backdrop-blur supports-[backdrop-filter]:bg-slate-950/80">
+      <nav className="sticky top-0 z-50 border-b border-stone-200 bg-white">
         <div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 px-6">
           <div className="flex min-w-0 items-center gap-3">
-            <span className="font-semibold tracking-tight text-white">
+            <span className="font-semibold tracking-tight text-stone-950">
               Film Intel
             </span>
-            <span className="hidden truncate text-xs text-slate-400 sm:inline">
+            <span className="hidden truncate text-xs text-stone-500 sm:inline">
               Movie insight you won&apos;t find in one click
             </span>
           </div>
@@ -74,7 +94,7 @@ export default function HomePage() {
       <main className="mx-auto min-h-[calc(100vh-3.5rem)] w-full max-w-6xl px-6">
         {!selectedMovie && (
           <div className="flex flex-col items-center justify-center py-16 text-center">
-            <p className="max-w-md text-sm text-slate-400">
+            <p className="max-w-md text-sm text-stone-600">
               Search for any film using the bar above. We&apos;ll generate
               ratings explained, skip guides, sensitivity warnings, production
               facts, and more.
@@ -85,30 +105,30 @@ export default function HomePage() {
         {selectedMovie && (
           <div className="space-y-8 py-8">
             {hasFullMovie ? (
-              <MovieHeader movie={movieDetails} onClear={clearSelection} />
+              <MovieHeader movie={movieDetails} showBack={false} />
             ) : (
-              <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6">
+              <div className="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
                 <div className="space-y-2">
-                  <h2 className="text-2xl font-semibold text-white">
+                  <h2 className="text-2xl font-semibold text-stone-950">
                     {selectedMovie.title}
                     {selectedMovie.release_date ? (
-                      <span className="ml-2 font-normal text-slate-400">
+                      <span className="ml-2 font-normal text-stone-500">
                         ({selectedMovie.release_date.slice(0, 4)})
                       </span>
                     ) : null}
                   </h2>
                   {selectedMovie.overview && (
-                    <p className="text-sm leading-relaxed text-slate-400">
+                    <p className="text-sm leading-relaxed text-stone-600">
                       {selectedMovie.overview}
                     </p>
                   )}
                   {isLoadingMovie && (
-                    <p className="text-sm text-amber-300/80">
+                    <p className="text-sm text-amber-600">
                       Loading extended details...
                     </p>
                   )}
                   {movieError && (
-                    <p className="text-sm text-red-400">
+                    <p className="text-sm text-red-600">
                       {movieError}. Card content will still load.
                     </p>
                   )}
@@ -124,7 +144,7 @@ export default function HomePage() {
         )}
       </main>
 
-      <footer className="border-t border-white/10 py-6 text-center text-xs text-slate-500">
+      <footer className="border-t border-stone-200 py-6 text-center text-xs text-stone-500">
         AI-generated content for informational purposes. Verify timestamps on
         your copy.
       </footer>