const featured = {
  title: "The Last Horizon",
  description:
    "A mysterious signal from beyond the stars sends a small crew on a journey that changes everything.",
};

const movies = [
  ["Night Shift", "Thriller", "2026"],
  ["Beyond the Sea", "Drama", "2026"],
  ["Hidden City", "Mystery", "2025"],
  ["Final Orbit", "Sci-Fi", "2025"],
  ["The Long Road", "Adventure", "2024"],
  ["After Midnight", "Crime", "2024"],
];

const series = [
  ["Northline", "Season 2"],
  ["Dark Water", "Season 1"],
  ["The Signal", "Season 3"],
  ["Crossroads", "Season 1"],
];

function Poster({ title, meta }: { title: string; meta: string }) {
  return (
    <article className="group min-w-0">
      <div className="poster relative overflow-hidden rounded-xl border border-white/8 shadow-lg transition duration-300 group-hover:-translate-y-1 group-hover:border-white/20">
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
        <div className="absolute inset-x-3 bottom-3">
          <p className="text-sm font-semibold">{title}</p>
          <p className="mt-1 text-xs text-white/60">{meta}</p>
        </div>
      </div>
    </article>
  );
}

export default function Home() {
  return (
    <main className="min-h-screen bg-[#07090d]">
      <header className="sticky top-0 z-50 border-b border-white/8 bg-[#07090d]/90 backdrop-blur-xl">
        <div className="mx-auto flex h-16 max-w-7xl items-center gap-5 px-4 sm:px-6 lg:px-8">
          <a href="/" className="text-xl font-black tracking-tight">
            <span className="text-white">STREAM</span>
          </a>

          <nav className="hidden items-center gap-6 text-sm text-white/65 md:flex">
            <a className="text-white" href="/">Home</a>
            <a href="#movies" className="hover:text-white">Movies</a>
            <a href="#series" className="hover:text-white">Series</a>
            <a href="#genres" className="hover:text-white">Genres</a>
          </nav>

          <div className="ml-auto flex items-center gap-2">
            <button aria-label="Search" className="rounded-full p-2 text-white/70 hover:bg-white/8 hover:text-white">
              ⌕
            </button>
            <button className="hidden rounded-lg border border-white/10 px-4 py-2 text-sm font-semibold sm:block">
              Sign in
            </button>
            <button className="rounded-lg bg-white px-4 py-2 text-sm font-semibold text-black">
              Get started
            </button>
          </div>
        </div>
      </header>

      <section className="relative isolate overflow-hidden">
        <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_75%_35%,rgba(229,9,20,.28),transparent_38%),linear-gradient(120deg,#07090d_25%,#111722)]" />
        <div className="mx-auto flex min-h-[520px] max-w-7xl items-end px-4 pb-16 pt-24 sm:px-6 lg:px-8">
          <div className="max-w-2xl">
            <p className="mb-4 text-xs font-bold uppercase tracking-[.3em] text-red-400">
              Featured
            </p>
            <h1 className="text-4xl font-black tracking-tight sm:text-6xl">
              {featured.title}
            </h1>
            <p className="mt-5 max-w-xl text-base leading-7 text-white/65 sm:text-lg">
              {featured.description}
            </p>
            <div className="mt-7 flex flex-wrap gap-3">
              <button className="rounded-lg bg-white px-6 py-3 font-bold text-black">
                ▶ Watch now
              </button>
              <button className="rounded-lg border border-white/15 bg-white/5 px-6 py-3 font-semibold backdrop-blur">
                + My list
              </button>
            </div>
          </div>
        </div>
      </section>

      <section id="movies" className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="mb-5 flex items-end justify-between">
          <div>
            <p className="text-xs font-bold uppercase tracking-[.25em] text-white/40">Discover</p>
            <h2 className="mt-1 text-2xl font-bold">Popular Movies</h2>
          </div>
          <a href="#" className="text-sm text-white/55 hover:text-white">View all</a>
        </div>
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
          {movies.map(([title, genre, year]) => (
            <Poster key={title} title={title} meta={`${year} • ${genre}`} />
          ))}
        </div>
      </section>

      <section id="series" className="mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
        <div className="mb-5 flex items-end justify-between">
          <div>
            <p className="text-xs font-bold uppercase tracking-[.25em] text-white/40">Binge watch</p>
            <h2 className="mt-1 text-2xl font-bold">Featured Series</h2>
          </div>
          <a href="#" className="text-sm text-white/55 hover:text-white">View all</a>
        </div>
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
          {series.map(([title, season]) => (
            <Poster key={title} title={title} meta={season} />
          ))}
        </div>
      </section>

      <section id="genres" className="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8">
        <h2 className="text-2xl font-bold">Browse by genre</h2>
        <div className="mt-5 flex flex-wrap gap-2">
          {["Action", "Drama", "Comedy", "Sci-Fi", "Thriller", "Mystery", "Adventure", "Crime"].map(
            (genre) => (
              <button
                key={genre}
                className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-white/75 hover:border-white/25 hover:text-white"
              >
                {genre}
              </button>
            )
          )}
        </div>
      </section>

      <footer className="border-t border-white/8 py-8 text-center text-sm text-white/35">
        © 2026 Stream. Built for a fast, responsive experience.
      </footer>
    </main>
  );
}