async function fetchFilms(){
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/films`, { cache:'no-store' });
  return res.json();
}
export default async function Page(){
  const films = await fetchFilms();
  return (
    <main className="space-y-6">
      <div className="card">
        <h2 className="text-xl font-semibold mb-3">Terbaru</h2>
        <div className="grid md:grid-cols-4 gap-4">
          {films.map((f:any)=>(
            <a key={f.id} className="block" href={`/film/${f.slug}`}>
              <img className="rounded-xl w-full aspect-[2/3] object-cover" src={f.posterUrl || 'https://picsum.photos/300/450'} alt={f.title} />
              <div className="mt-2 text-sm">{f.title}</div>
            </a>
          ))}
        </div>
      </div>
    </main>
  );
}