import Link from "next/link";

const features = [
  {
    icon: "📦",
    title: "Full container backups",
    body: "Archive volumes, bind mounts, and Docker inspect metadata into a single .backerup bundle — everything needed to fully restore or clone a container.",
  },
  {
    icon: "🗂",
    title: "Config-only export",
    body: "Export a lightweight .config.json (raw docker inspect output) to recreate a container on any host without moving volume data.",
  },
  {
    icon: "🔄",
    title: "One-click restore",
    body: "Restore a container's volumes and config in-place, rebuild its config without touching data, or spin up a brand-new container from any backup.",
  },
  {
    icon: "📅",
    title: "Scheduled backups",
    body: "Define cron-based backup jobs per container with configurable retention strategies: keep latest N, keep every N-th, or purge older than N days.",
  },
  {
    icon: "🌐",
    title: "Community sharing",
    body: "Publish your container configs so others can spin up the same setup in seconds. Browse configs shared by the community right here.",
  },
  {
    icon: "🔒",
    title: "Self-hosted & private",
    body: "Runs entirely inside your Docker environment. No cloud dependencies, no data leaves your server unless you choose to share.",
  },
];

const steps = [
  { n: "1", title: "Install", body: "Run Backerup as a Docker container with access to your Docker socket." },
  { n: "2", title: "Configure", body: "Add containers, choose a backup strategy, and set a cron schedule." },
  { n: "3", title: "Backup", body: "Backerup archives your volumes and metadata into a portable .backerup file." },
  { n: "4", title: "Restore", body: "One click to restore in-place, rebuild config, or create a new container." },
];

export default function LandingPage() {
  return (
    <>
      {/* Hero */}
      <section className="relative overflow-hidden px-6 py-28 text-center">
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-[500px] w-[900px] rounded-full bg-cyan-500/10 blur-3xl" />
        </div>
        <div className="relative mx-auto max-w-3xl">
          <span className="inline-block rounded-full border border-cyan-500/30 bg-cyan-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-widest text-cyan-400">
            Open Source · Self-Hosted
          </span>
          <h1 className="mt-6 text-5xl font-bold leading-tight tracking-tight text-white sm:text-6xl">
            Docker backups,{" "}
            <span className="text-cyan-400">done right.</span>
          </h1>
          <p className="mt-6 text-lg text-slate-400">
            Backerup bundles your container volumes, bind mounts, and config into
            a single portable file. Restore in seconds, share configs with your
            team, or migrate containers between hosts.
          </p>
          <div className="mt-10 flex flex-wrap justify-center gap-4">
            <Link
              href="/share"
              className="rounded-xl bg-cyan-500 px-8 py-3 text-sm font-bold text-slate-900 hover:bg-cyan-400 transition-colors"
            >
              Share a config
            </Link>
            <Link
              href="/browse"
              className="rounded-xl border border-slate-700 bg-slate-800/50 px-8 py-3 text-sm font-semibold text-slate-200 hover:bg-slate-700 transition-colors"
            >
              Browse configs
            </Link>
          </div>
        </div>

        {/* Terminal preview */}
        <div className="relative mx-auto mt-16 max-w-2xl rounded-2xl border border-slate-700 bg-slate-900 text-left shadow-2xl">
          <div className="flex items-center gap-2 border-b border-slate-700 px-4 py-3">
            <span className="h-3 w-3 rounded-full bg-red-500/70" />
            <span className="h-3 w-3 rounded-full bg-yellow-500/70" />
            <span className="h-3 w-3 rounded-full bg-green-500/70" />
            <span className="ml-4 text-xs text-slate-500 font-mono">backerup api</span>
          </div>
          <pre className="overflow-x-auto p-6 text-xs leading-6 font-mono text-slate-300">
            {`
            # Download the App 
            docker pull ghcr.io/evan-buss/backerup:latest
            `}
          </pre>
        </div>
      </section>

      {/* Features */}
      <section className="px-6 py-20">
        <div className="mx-auto max-w-6xl">
          <h2 className="text-center text-3xl font-bold text-white">Everything you need</h2>
          <p className="mt-3 text-center text-slate-400">
            A complete backup lifecycle — all from a single self-hosted UI.
          </p>
          <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {features.map((f) => (
              <div
                key={f.title}
                className="rounded-2xl border border-slate-800 bg-slate-900/60 p-6 transition hover:border-slate-700"
              >
                <div className="text-3xl">{f.icon}</div>
                <h3 className="mt-4 font-semibold text-white">{f.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-400">{f.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="bg-slate-900/40 px-6 py-20">
        <div className="mx-auto max-w-4xl">
          <h2 className="text-center text-3xl font-bold text-white">How it works</h2>
          <div className="mt-14 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
            {steps.map((s) => (
              <div key={s.n} className="flex flex-col items-start gap-3">
                <span className="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-500/15 text-lg font-bold text-cyan-400">
                  {s.n}
                </span>
                <h3 className="font-semibold text-white">{s.title}</h3>
                <p className="text-sm text-slate-400">{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Format callout */}
      <section className="px-6 py-20">
        <div className="mx-auto max-w-4xl">
          <div className="rounded-2xl border border-cyan-500/20 bg-cyan-500/5 p-10 text-center">
            <h2 className="text-2xl font-bold text-white">
              The <span className="font-mono text-cyan-400">.backerup</span> format
            </h2>
            <p className="mt-4 text-slate-400 max-w-xl mx-auto">
              A single gzipped-tar file containing{" "}
              <span className="font-mono text-slate-300">config.json</span>,{" "}
              <span className="font-mono text-slate-300">manifest.json</span>, and{" "}
              <span className="font-mono text-slate-300">volumes/*.tar.gz</span>.
              Portable, transparent, and restorable without Backerup itself.
            </p>
            <div className="mt-8 flex flex-wrap justify-center gap-4">
              <Link
                href="/share"
                className="rounded-xl bg-cyan-500 px-8 py-3 text-sm font-bold text-slate-900 hover:bg-cyan-400 transition-colors"
              >
                Upload a backup or config →
              </Link>
              <Link
                href="/browse"
                className="rounded-xl border border-slate-700 px-8 py-3 text-sm font-semibold text-slate-300 hover:text-white hover:border-slate-500 transition-colors"
              >
                Browse shared files
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}