import type { Metadata } from "next";
import Link from "next/link";
import TerminalTyper from "../components/TerminalTyper";
import AnimateIn from "../components/AnimateIn";
import CountUp from "../components/CountUp";
import SpotlightCard from "../components/SpotlightCard";
import { LINKS } from "@/lib/links";
import { getLinks } from "@/lib/links-db";

export const metadata: Metadata = {
  title: "Daterup — Docker Container Updates",
  description:
    "Automated Docker container update manager. Check running containers for new image versions and update them in one click — or on a cron schedule.",
};

/* ── SVG Icons ─────────────────────────────────────────────── */
const RefreshIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
  </svg>
);
const CubeIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
  </svg>
);
const MagnifyIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
  </svg>
);
const LayersIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3" />
  </svg>
);
const ClockIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
);
const BookIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
  </svg>
);
const TerminalIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
  </svg>
);
const DownloadIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
  </svg>
);
const EyeIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
  </svg>
);
const ArrowUpIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
  </svg>
);
const LinkIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
  </svg>
);
const GitHubIcon = () => (
  <svg viewBox="0 0 24 24" className="w-4 h-4" fill="currentColor" aria-hidden="true">
    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
  </svg>
);

/* ── Data ───────────────────────────────────────────────────── */
const features = [
  {
    icon: <CubeIcon />,
    gradient: "from-violet-500/15 to-purple-600/15",
    border: "border-violet-500/20",
    iconBg: "bg-violet-500/10",
    iconColor: "text-violet-400",
    title: "Container inventory",
    body: "Lists all running (and optionally stopped) containers with their current image, tag, and digest — your live fleet at a glance.",
  },
  {
    icon: <MagnifyIcon />,
    gradient: "from-purple-500/15 to-fuchsia-600/15",
    border: "border-purple-500/20",
    iconBg: "bg-purple-500/10",
    iconColor: "text-purple-400",
    title: "Digest-based detection",
    body: "Pulls the latest image manifest and compares SHA digests — no false positives from re-tagged images. Knows exactly when a real update is available.",
  },
  {
    icon: <RefreshIcon />,
    gradient: "from-fuchsia-500/15 to-violet-600/15",
    border: "border-fuchsia-500/20",
    iconBg: "bg-fuchsia-500/10",
    iconColor: "text-fuchsia-400",
    title: "One-click update",
    body: "Stops, removes, and recreates the container with the new image — preserving all original binds, ports, env vars, restart policy, and networks.",
  },
  {
    icon: <LayersIcon />,
    gradient: "from-indigo-500/15 to-violet-600/15",
    border: "border-indigo-500/20",
    iconBg: "bg-indigo-500/10",
    iconColor: "text-indigo-400",
    title: "Batch operations",
    body: "Check or update all containers at once with a single click. Daterup handles each container sequentially to avoid Docker socket contention.",
  },
  {
    icon: <ClockIcon />,
    gradient: "from-violet-500/15 to-indigo-600/15",
    border: "border-violet-500/20",
    iconBg: "bg-violet-500/10",
    iconColor: "text-violet-400",
    title: "Cron schedules",
    body: "Create named schedules with check-only or check & auto-update modes, targeting specific containers or your entire fleet.",
  },
  {
    icon: <BookIcon />,
    gradient: "from-purple-500/15 to-violet-600/15",
    border: "border-purple-500/20",
    iconBg: "bg-purple-500/10",
    iconColor: "text-purple-400",
    title: "Audit history & live logs",
    body: "Full update audit trail with container, image, status, trigger, and digest. Plus a live ring-buffer log viewer with level and context filtering.",
  },
];

const steps = [
  {
    n: "01",
    icon: <LinkIcon />,
    color: "bg-violet-500/20 text-violet-400",
    title: "Connect",
    body: "Mount the Docker socket. Daterup auto-discovers all running containers immediately on startup.",
  },
  {
    n: "02",
    icon: <MagnifyIcon />,
    color: "bg-purple-500/20 text-purple-400",
    title: "Check",
    body: "Compare local image digests against the registry. Outdated containers are flagged instantly.",
  },
  {
    n: "03",
    icon: <EyeIcon />,
    color: "bg-fuchsia-500/20 text-fuchsia-400",
    title: "Review",
    body: "The dashboard shows all pending updates with image info and last-check timestamps.",
  },
  {
    n: "04",
    icon: <ArrowUpIcon />,
    color: "bg-indigo-500/20 text-indigo-400",
    title: "Update",
    body: "One click to update — Daterup stops, removes, and recreates the container with zero config drift.",
  },
];

const pills = [
  { label: "Open source", color: "text-violet-400 bg-violet-500/10 border-violet-500/20" },
  { label: "Zero cloud deps", color: "text-purple-400 bg-purple-500/10 border-purple-500/20" },
  { label: "Self-hosted", color: "text-fuchsia-400 bg-fuchsia-500/10 border-fuchsia-500/20" },
  { label: "Docker native", color: "text-indigo-400 bg-indigo-500/10 border-indigo-500/20" },
];

const stats = [
  { num: 100, suffix: "%", label: "Open source", sub: "source available" },
  { num: 0, suffix: "", label: "Config drift", sub: "on container update" },
  { num: 7, suffix: "", label: "UI pages", sub: "full management" },
  { num: 0, suffix: "", label: "Cloud dependencies", sub: "runs on your infra" },
];

/* ── Page ───────────────────────────────────────────────────── */
export default async function DaterupPage() {
  const links = await getLinks();
  return (
    <>
      {/* ═══ Hero ═══════════════════════════════════════════════ */}
      <section className="relative overflow-hidden px-6 pt-28 pb-20">
        {/* ── Animated aurora blobs ── */}
        <div className="pointer-events-none absolute inset-0 overflow-hidden">
          <div
            className="absolute -top-[35%] -left-[18%] w-[750px] h-[750px] rounded-full"
            style={{
              background: "radial-gradient(circle, rgba(139,92,246,0.13) 0%, transparent 60%)",
              filter: "blur(55px)",
              animation: "aurora1 18s ease-in-out infinite alternate",
            }}
          />
          <div
            className="absolute -top-[25%] right-[-5%] w-[650px] h-[650px] rounded-full"
            style={{
              background: "radial-gradient(circle, rgba(168,85,247,0.11) 0%, transparent 60%)",
              filter: "blur(55px)",
              animation: "aurora2 23s ease-in-out infinite alternate-reverse",
            }}
          />
          <div
            className="absolute top-[28%] left-[22%] w-[520px] h-[520px] rounded-full"
            style={{
              background: "radial-gradient(circle, rgba(99,102,241,0.09) 0%, transparent 60%)",
              filter: "blur(55px)",
              animation: "aurora3 15s ease-in-out infinite alternate",
            }}
          />
        </div>

        <div className="relative mx-auto max-w-4xl text-center">
          {/* Pills */}
          <div
            className="mb-8 flex flex-wrap items-center justify-center gap-2"
            style={{ animation: "slideUp 0.7s cubic-bezier(0.22,1,0.36,1) 80ms both" }}
          >
            {pills.map((p) => (
              <span
                key={p.label}
                className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold ${p.color}`}
              >
                <span className="w-1 h-1 rounded-full bg-current opacity-70" />
                {p.label}
              </span>
            ))}
          </div>

          {/* Headline */}
          <h1
            className="text-5xl font-extrabold leading-[1.1] tracking-tight text-white sm:text-7xl"
            style={{ animation: "slideUp 0.75s cubic-bezier(0.22,1,0.36,1) 220ms both" }}
          >
            Container updates,
            <br />
            <span
              className="bg-clip-text text-transparent"
              style={{ backgroundImage: "linear-gradient(135deg, #a78bfa, #7c3aed, #c026d3)" }}
            >
              automated.
            </span>
          </h1>

          {/* Subtitle */}
          <p
            className="mx-auto mt-7 max-w-2xl text-lg leading-relaxed text-slate-400"
            style={{ animation: "slideUp 0.75s cubic-bezier(0.22,1,0.36,1) 380ms both" }}
          >
            Daterup watches your running containers for new image versions and lets you update
            them with a single click — or automatically on a cron schedule. Zero config drift,
            full audit history, all from a self-hosted UI.
          </p>

          {/* CTA buttons */}
          <div
            className="mt-10 flex flex-wrap justify-center gap-4"
            style={{ animation: "slideUp 0.75s cubic-bezier(0.22,1,0.36,1) 520ms both" }}
          >
            <a
              href={links.daterupGitea}
              target="_blank"
              rel="noopener noreferrer"
              className="group flex items-center gap-2 rounded-xl px-7 py-3.5 text-sm font-bold text-white transition-all hover:brightness-110 hover:scale-105 active:scale-95 shadow-lg"
              style={{ background: "linear-gradient(135deg, #a78bfa, #7c3aed)" }}
            >
              <DownloadIcon />
              Get started
            </a>
            <Link
              href="/"
              className="flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-7 py-3.5 text-sm font-semibold text-slate-200 transition-all hover:bg-white/10 hover:border-white/20 hover:scale-105 active:scale-95"
            >
              Also see Backerup
              <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                <path d="M5 12h14M12 5l7 7-7 7" />
              </svg>
            </Link>
            <a
              href={links.daterupGitea}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 rounded-xl border border-white/8 bg-white/3 px-7 py-3.5 text-sm font-semibold text-slate-300 transition-all hover:bg-white/8 hover:text-white hover:scale-105"
            >
              <GitHubIcon />
              Gitea
            </a>
          </div>
        </div>

        {/* ── Terminal card ── */}
        <div
          className="relative mx-auto mt-20 max-w-2xl"
          style={{ animation: "slideUp 0.8s cubic-bezier(0.22,1,0.36,1) 680ms both" }}
        >
          <div
            className="absolute inset-0 rounded-2xl blur-xl opacity-40"
            style={{ background: "radial-gradient(ellipse, rgba(139,92,246,0.2) 0%, transparent 70%)" }}
          />
          <div className="relative rounded-2xl border border-white/8 glass overflow-hidden shadow-2xl terminal-scan">
            <div className="flex items-center gap-2 border-b border-white/6 px-5 py-3.5 bg-white/2">
              <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-emerald-500/70" />
              <span className="ml-3 text-xs text-slate-500 font-mono tracking-wide">daterup · quick start</span>
              <div className="ml-auto flex items-center gap-1.5">
                <span className="w-1.5 h-1.5 rounded-full bg-violet-500 animate-pulse" />
                <span className="text-xs text-slate-600 font-mono">live</span>
              </div>
            </div>
            <div className="p-6 min-h-[260px]">
              <TerminalTyper mode="daterup" links={{ daterupDockerImage: links.daterupDockerImage }} />
            </div>
          </div>
        </div>
      </section>

      {/* ═══ Stats bar ══════════════════════════════════════════ */}
      <section className="px-6 py-12">
        <div className="mx-auto max-w-4xl">
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
            {stats.map((s, i) => (
              <AnimateIn key={s.label} variant="scale-up" delay={i * 90}>
                <div className="rounded-2xl border border-white/5 glass p-5 text-center">
                  <div className="text-2xl font-extrabold text-white tracking-tight">
                    <CountUp to={s.num} suffix={s.suffix} duration={1800} />
                  </div>
                  <div className="mt-1 text-sm font-medium text-slate-300">{s.label}</div>
                  <div className="mt-0.5 text-xs text-slate-600">{s.sub}</div>
                </div>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* ═══ Features ═══════════════════════════════════════════ */}
      <section className="px-6 py-24" id="features">
        <div className="mx-auto max-w-6xl">
          <AnimateIn variant="fade-up">
            <div className="mx-auto max-w-2xl text-center">
              <span className="inline-block rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-widest text-violet-400">
                Features
              </span>
              <h2 className="mt-5 text-4xl font-bold tracking-tight text-white">
                Everything you need
              </h2>
              <p className="mt-4 text-slate-400 leading-relaxed">
                A complete Docker update lifecycle — from continuous digest monitoring to
                scheduled auto-updates and a full audit trail, all from one self-hosted UI.
              </p>
            </div>
          </AnimateIn>

          <div className="mt-16 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {features.map((f, i) => (
              <AnimateIn key={f.title} variant="fade-up" delay={i * 65}>
                <SpotlightCard
                  className={`rounded-2xl border ${f.border} bg-gradient-to-br ${f.gradient} p-6 h-full card-hover`}
                >
                  <div className={`inline-flex items-center justify-center w-11 h-11 rounded-xl ${f.iconBg} ${f.iconColor} mb-4`}>
                    {f.icon}
                  </div>
                  <h3 className="font-semibold text-white text-lg leading-snug">{f.title}</h3>
                  <p className="mt-2.5 text-sm leading-relaxed text-slate-400">{f.body}</p>
                </SpotlightCard>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* ═══ How it works ════════════════════════════════════════ */}
      <section className="px-6 py-24">
        <div className="mx-auto max-w-5xl">
          <AnimateIn variant="fade-up">
            <div className="mx-auto max-w-2xl text-center mb-16">
              <span className="inline-block rounded-full border border-purple-500/30 bg-purple-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-widest text-purple-400">
                How it works
              </span>
              <h2 className="mt-5 text-4xl font-bold tracking-tight text-white">
                Up and running in minutes
              </h2>
            </div>
          </AnimateIn>

          <div className="relative grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
            <div
              className="hidden lg:block absolute top-8 left-[12.5%] right-[12.5%] h-px"
              style={{ background: "linear-gradient(90deg, rgba(139,92,246,0.5), rgba(168,85,247,0.5))" }}
            />
            {steps.map((s, i) => (
              <AnimateIn key={s.n} variant="fade-up" delay={i * 110}>
                <div className="relative flex flex-col items-center text-center gap-4">
                  <div className="relative z-10 flex h-16 w-16 items-center justify-center rounded-2xl border border-white/10 glass">
                    <div className={`flex items-center justify-center w-10 h-10 rounded-xl ${s.color}`}>
                      {s.icon}
                    </div>
                  </div>
                  <div>
                    <div className="text-xs font-mono text-slate-600 mb-1">{s.n}</div>
                    <h3 className="font-bold text-white text-lg">{s.title}</h3>
                    <p className="mt-2 text-sm text-slate-400 leading-relaxed max-w-[200px] mx-auto">{s.body}</p>
                  </div>
                </div>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* ═══ Zero config drift callout ══════════════════════════ */}
      <section className="px-6 py-24">
        <div className="mx-auto max-w-5xl">
          <AnimateIn variant="fade-up">
            <div className="rounded-3xl border border-white/6 glass overflow-hidden">
              <div className="grid lg:grid-cols-2">
                {/* Left: text */}
                <div className="p-10 lg:p-14 flex flex-col justify-center">
                  <span className="inline-block rounded-full border border-violet-500/30 bg-violet-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-violet-400 mb-6 self-start">
                    How updates work
                  </span>
                  <h2 className="text-3xl font-bold text-white leading-snug">
                    Zero config drift, guaranteed
                  </h2>
                  <p className="mt-4 text-slate-400 leading-relaxed">
                    When Daterup recreates a container, it reads the full{" "}
                    <code className="font-mono text-violet-300 text-xs">docker inspect</code> output
                    and rebuilds the container with the exact same configuration — nothing is lost
                    or changed except the image digest.
                  </p>
                  <ul className="mt-6 space-y-3 text-sm text-slate-400">
                    {[
                      { name: "Binds & volumes", desc: "all mount points preserved" },
                      { name: "Port mappings", desc: "identical host bindings" },
                      { name: "Env vars & labels", desc: "full environment intact" },
                      { name: "Restart policy & networks", desc: "same behaviour post-update" },
                    ].map((item) => (
                      <li key={item.name} className="flex items-start gap-3">
                        <span className="mt-0.5 text-violet-500 shrink-0">
                          <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                          </svg>
                        </span>
                        <span>
                          <code className="font-mono text-slate-200 text-xs">{item.name}</code>
                          <span className="ml-2 text-slate-500">— {item.desc}</span>
                        </span>
                      </li>
                    ))}
                  </ul>
                  <div className="mt-8 flex flex-wrap gap-3">
                    <a
                      href={links.daterupGitea}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="rounded-xl px-6 py-2.5 text-sm font-bold text-white transition-all hover:brightness-110"
                      style={{ background: "linear-gradient(135deg, #a78bfa, #7c3aed)" }}
                    >
                      View source →
                    </a>
                  </div>
                </div>

                {/* Right: update flow diagram */}
                <div className="border-t border-white/5 lg:border-t-0 lg:border-l border-white/5 p-10 lg:p-14 flex items-center">
                  <div className="font-mono text-sm w-full space-y-4">
                    {[
                      { icon: "🔍", step: "inspect", desc: "docker inspect <container>", color: "text-violet-400" },
                      { icon: "⬇️", step: "pull", desc: "docker pull <image>:latest", color: "text-purple-400" },
                      { icon: "⏹", step: "stop", desc: "docker stop <container>", color: "text-amber-400" },
                      { icon: "🗑", step: "remove", desc: "docker rm <container>", color: "text-rose-400" },
                      { icon: "🚀", step: "create", desc: "docker run [original config]", color: "text-emerald-400" },
                    ].map(({ icon, step, desc, color }, i) => (
                      <div key={step} className="flex items-center gap-3">
                        <span className="text-slate-700 text-xs font-mono shrink-0">{String(i + 1).padStart(2, "0")}</span>
                        <span>{icon}</span>
                        <span className={`${color} font-semibold`}>{step}</span>
                        <span className="text-slate-600 text-xs truncate">{desc}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* ═══ Quick start ════════════════════════════════════════ */}
      <section className="px-6 py-20" id="quick-start">
        <AnimateIn variant="fade-up">
          <div className="mx-auto max-w-4xl text-center">
            <span className="inline-block rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-widest text-violet-400 mb-6">
              Quick start
            </span>
            <h2 className="text-4xl font-bold tracking-tight text-white mb-4">
              Setup with docker-compose
            </h2>
            <p className="text-slate-400 mb-10">
              The easiest way to get Daterup running is with docker-compose for declarative, reproducible deployments.
            </p>

            <div className="rounded-2xl border border-white/6 glass overflow-hidden text-left">
              <div className="flex items-center gap-2 border-b border-white/6 px-5 py-3 bg-white/2">
                <span className="h-2.5 w-2.5 rounded-full bg-red-500/70" />
                <span className="h-2.5 w-2.5 rounded-full bg-yellow-500/70" />
                <span className="h-2.5 w-2.5 rounded-full bg-emerald-500/70" />
                <span className="ml-3 text-xs font-mono text-slate-500">docker-compose setup</span>
              </div>
              <div className="p-6">
                <TerminalTyper mode="daterup-compose" links={{ daterupDockerImage: links.daterupDockerImage }} casaosMode="casaos-daterup" />
              </div>
            </div>
          </div>
        </AnimateIn>
      </section>

      {/* ═══ Final CTA ══════════════════════════════════════════ */}
      <section className="px-6 py-24">
        <div className="mx-auto max-w-4xl">
          <AnimateIn variant="scale-up">
            <div
              className="relative overflow-hidden rounded-3xl p-px"
              style={{ background: "linear-gradient(135deg, rgba(139,92,246,0.4), rgba(168,85,247,0.4), rgba(99,102,241,0.4))" }}
            >
              <div className="relative rounded-3xl px-10 py-16 text-center" style={{ background: "#060810" }}>
                <div
                  className="pointer-events-none absolute inset-0 opacity-20"
                  style={{ background: "radial-gradient(ellipse at center top, rgba(139,92,246,0.4), transparent 60%)" }}
                />
                <div className="relative">
                  <h2 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl">
                    Keep your containers current.
                  </h2>
                  <p className="mx-auto mt-5 max-w-xl text-lg text-slate-400">
                    Open source, self-hosted, and free forever. Stop manually checking for image updates
                    and let Daterup handle it automatically.
                  </p>
                  <div className="mt-10 flex flex-wrap justify-center gap-4">
                    <a
                      href={links.daterupGitea}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center gap-2 px-4 py-2 rounded-lg border border-white/10 bg-white/3 text-xs text-slate-400 hover:text-white hover:border-white/20 transition-all"
                    >
                      <GitHubIcon />
                      Star on Gitea
                    </a>
                    <a
                      href={links.daterupGitea}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="rounded-xl px-7 py-3.5 text-sm font-bold text-white transition-all hover:brightness-110 hover:scale-105 active:scale-95"
                      style={{ background: "linear-gradient(135deg, #a78bfa, #7c3aed)" }}
                    >
                      Get started →
                    </a>
                    <Link
                      href="/"
                      className="flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-7 py-3.5 text-sm font-semibold text-slate-200 transition-all hover:bg-white/10 hover:scale-105"
                    >
                      Also see Backerup
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </AnimateIn>
        </div>
      </section>
    </>
  );
}
