import Link from "next/link";

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100">
      {/* Header */}
      <header className="flex items-center justify-between px-6 py-4 border-b border-zinc-800">
        <span className="text-lg font-bold tracking-tight text-zinc-100">
          K-TV
        </span>
        <nav className="flex items-center gap-6 text-sm text-zinc-400">
          <Link href="/tv" className="hover:text-zinc-100 transition-colors">
            TV
          </Link>
          <Link href="/docs" className="hover:text-zinc-100 transition-colors">
            Docs
          </Link>
          <Link
            href="/login"
            className="rounded-md border border-zinc-700 px-3 py-1.5 text-zinc-300 hover:border-zinc-500 hover:text-zinc-100 transition-colors"
          >
            Login
          </Link>
        </nav>
      </header>

      {/* Hero */}
      <section className="mx-auto max-w-4xl px-6 py-24 text-center">
        <h1 className="mb-4 text-5xl font-bold tracking-tight text-zinc-100 leading-tight">
          Your media library,
          <br />
          broadcast as linear TV
        </h1>
        <p className="mb-10 text-lg text-zinc-400 max-w-2xl mx-auto leading-relaxed">
          K-TV turns your self-hosted media collection into algorithmic TV
          channels. Define programming blocks, set filters, and let the
          scheduler fill them. Viewers tune in mid-show — no seeking, just TV.
        </p>
        <div className="flex items-center justify-center gap-4">
          <Link
            href="/tv"
            className="rounded-lg bg-zinc-100 px-6 py-2.5 text-sm font-semibold text-zinc-900 hover:bg-white transition-colors"
          >
            Watch TV
          </Link>
          <Link
            href="/docs"
            className="rounded-lg border border-zinc-700 px-6 py-2.5 text-sm font-semibold text-zinc-300 hover:border-zinc-500 hover:text-zinc-100 transition-colors"
          >
            Read the docs
          </Link>
        </div>
      </section>

      {/* Feature cards */}
      <section className="mx-auto max-w-5xl px-6 pb-20">
        <div className="grid gap-4 sm:grid-cols-2">
          <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-6">
            <h3 className="mb-2 font-semibold text-zinc-100">
              Linear scheduling
            </h3>
            <p className="text-sm leading-relaxed text-zinc-400">
              Draw time blocks on a 24-hour timeline. Each block has its own
              filters, fill strategy, and recycle policy. Schedules are
              generated on demand and valid for 48 hours.
            </p>
          </div>
          <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-6">
            <h3 className="mb-2 font-semibold text-zinc-100">
              Jellyfin &amp; local files
            </h3>
            <p className="text-sm leading-relaxed text-zinc-400">
              Connect your Jellyfin server or point K-TV at a local directory.
              Filter by genre, decade, tags, series, or collection. All
              providers share the same scheduling engine.
            </p>
          </div>
          <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-6">
            <h3 className="mb-2 font-semibold text-zinc-100">
              EPG &amp; live program guide
            </h3>
            <p className="text-sm leading-relaxed text-zinc-400">
              A full electronic program guide shows what is on now and what is
              coming up. Keyboard shortcuts, channel numbers, subtitles, and an
              &quot;Up next&quot; banner are all built in.
            </p>
          </div>
          <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-6">
            <h3 className="mb-2 font-semibold text-zinc-100">
              Import, export &amp; IPTV
            </h3>
            <p className="text-sm leading-relaxed text-zinc-400">
              Channels are plain JSON — paste one from an LLM, share it with a
              friend, or import it across instances. Export an M3U playlist and
              XMLTV EPG to watch in TiviMate, VLC, or Infuse.
            </p>
          </div>
        </div>
      </section>

      {/* Quick-start */}
      <section className="mx-auto max-w-3xl px-6 pb-24">
        <h2 className="mb-4 text-xl font-semibold text-zinc-100">
          Quick start
        </h2>
        <pre className="overflow-x-auto rounded-lg border border-zinc-800 bg-zinc-900 p-5 font-mono text-[13px] leading-relaxed text-zinc-300">{`# Docker (recommended)
git clone <repo-url> k-tv && cd k-tv
cp .env.example .env   # fill in JWT_SECRET, COOKIE_SECRET, JELLYFIN_*
docker compose up -d

# Or run from source
cd k-tv-backend && cargo run
cd k-tv-frontend && npm install && npm run dev`}</pre>
        <p className="mt-3 text-sm text-zinc-500">
          See the{" "}
          <Link
            href="/docs"
            className="text-zinc-400 underline underline-offset-2 hover:text-zinc-200"
          >
            docs
          </Link>{" "}
          for full environment variable reference and Docker deployment
          instructions.
        </p>
      </section>

      {/* Footer */}
      <footer className="border-t border-zinc-800 px-6 py-6">
        <div className="mx-auto flex max-w-5xl items-center justify-between text-sm text-zinc-500">
          <span>K-TV</span>
          <nav className="flex gap-5">
            <Link href="/tv" className="hover:text-zinc-300 transition-colors">
              TV
            </Link>
            <Link
              href="/docs"
              className="hover:text-zinc-300 transition-colors"
            >
              Docs
            </Link>
            <Link
              href="/dashboard"
              className="hover:text-zinc-300 transition-colors"
            >
              Dashboard
            </Link>
          </nav>
        </div>
      </footer>
    </div>
  );
}