// app/services/page.tsx
import type { Metadata } from "next";
import Link from "next/link";
import JsonLd from "@/components/JsonLd";
import { site } from "@/lib/site";

export const revalidate = 86400;

export const metadata: Metadata = {
  title: "Services — Managed Hosting, Websites & Minecraft | Van Hunen IT",
  description:
    "Managed or Owned VPS hosting, Managed Website hosting & care, Website development, and Minecraft hosting & plugins. Clear outcomes, flat pricing, SLAs, and before/after proof.",
  alternates: { canonical: "/services" },
};

type Card = {
  title: string;
  body: string;
  href: string;
  cta: string;
};

type Category = {
  id:
    | "web-dev"
    | "web-performance"
    | "minecraft"
    | "infrastructure-devops"
    | "migrations"
    | "dev-platforms";
  anchor: string;
  label: string;
  lead: string;
  cards: Card[];
};

const CATEGORIES: Category[] = [
  {
    id: "web-dev",
    anchor: "web-dev",
    label: "Website Development",
    lead:
      "Fast, SEO-ready websites with modern tooling and clean deployments. We build for reliability first.",
    cards: [
      {
        title: "Next.js Website Build",
        body:
          "Design system, content structure, analytics, basic SEO, and production deployment. Optimized for Core Web Vitals.",
        href: "/contact?type=development",
        cta: "Build My Website →",
      },
      {
        title: "Landing Pages & Microsites",
        body:
          "High-converting pages with performance and tracking baked in. Perfect for campaigns and product launches.",
        href: "/contact?type=development",
        cta: "Start a Landing Page →",
      },
      {
        title: "Headless CMS Setup",
        body:
          "Content modeling, editor workflows, preview, and safe publishing. Optional migration from legacy CMS.",
        href: "/contact?type=development",
        cta: "Discuss CMS →",
      },
    ],
  },
  {
    id: "web-performance",
    anchor: "web-performance",
    label: "Web Reliability & Performance (incl. Website Hosting)",
    lead:
      "We make sites dependable: faster TTFB, verified backups, uptime & SSL watch, and incident notes you can share.",
    cards: [
      {
        title: "Managed Website Hosting & Care",
        body:
          "Updates, uptime, security checks, and monthly restore-tested backups. Real SLAs and incident credits.",
        href: "/pricing#care",
        cta: "Start Website Care →",
      },
      {
        title: "Cloudflare Edge Hardening",
        body:
          "WAF & bot rules, cache & HTTP/3 tuning, origin shields, and fewer attacks for faster pages.",
        href: "/contact?type=website-care",
        cta: "Harden My Edge →",
      },
      {
        title: "Email Deliverability (SPF/DKIM/DMARC)",
        body:
          "Block spoofing, align auth, and fix lead-loss from junk folders. Monitoring and reports included.",
        href: "/contact?type=website-care",
        cta: "Fix My Email →",
      },
      {
        title: "Backups + Restore Drills",
        body:
          "Automated backups plus timed restore tests with notes. Know recovery is proven—not just configured.",
        href: "/contact?type=website-care",
        cta: "Verify My Backups →",
      },
      {
        title: "Performance & Web Vitals",
        body:
          "TTFB improvements, image/CDN strategy, and Core Web Vitals uplift with before/after proof.",
        href: "/contact?type=website-care",
        cta: "Boost My Speed →",
      },
    ],
  },
  {
    id: "minecraft",
    anchor: "minecraft",
    label: "Minecraft Services",
    lead:
      "Lag-free servers on a hardened VPS with backups, monitoring, and tuning. Need features? We build custom plugins.",
    cards: [
      {
        title: "Managed Minecraft Hosting",
        body:
          "Java (Paper/Spigot/Velocity) and Bedrock (Geyser) supported. Backups with restore tests and incident notes.",
        href: "/minecraft#deploy",
        cta: "Deploy a Server →",
      },
      {
        title: "Minecraft Plugin Development",
        body:
          "Custom plugins with tests, config, permissions, and docs. Private repo and handover on completion.",
        href: "/contact?type=plugin",
        cta: "Request Plugin Quote →",
      },
      {
        title: "Migrations & Tuning",
        body:
          "Move worlds and plugins safely, clean up timings, and stabilize TPS. Optional network (Velocity/Bungee).",
        href: "/contact?type=minecraft-hosting",
        cta: "Plan My Migration →",
      },
    ],
  },
  {
    id: "infrastructure-devops",
    anchor: "infrastructure-devops",
    label: "Infrastructure & DevOps",
    lead:
      "Managed or Owned VPS, monitoring, and incident response—plus safe automation for deploys and updates.",
    cards: [
      {
        title: "Managed VPS Hosting",
        body:
          "CIS-style hardening, updates, monitoring, and restore-tested backups. SLA-backed response.",
        href: "/vps#deploy",
        cta: "Provision (Managed) →",
      },
      {
        title: "Owned VPS (Your Account)",
        body:
          "We provision into your cloud via secure connect. You retain ownership; we still manage and monitor.",
        href: "/vps#deploy",
        cta: "Provision (Owned) →",
      },
      {
        title: "Monitoring & Incident Notes",
        body:
          "Uptime, resource alerts, clear incident write-ups, and post-mortems that drive improvements.",
        href: "/contact?type=vps",
        cta: "Set Up Monitoring →",
      },
    ],
  },
  {
    id: "migrations",
    anchor: "migrations",
    label: "Migrations & Refreshes",
    lead:
      "Safer cutovers with rollback plans. Move hosting, upgrade stacks, and modernize without downtime surprises.",
    cards: [
      {
        title: "Hosting & DNS Migration",
        body:
          "Plan, test, and cut over with a rollback path. Documented steps and after-action report.",
        href: "/contact?type=website-care",
        cta: "Migrate Hosting →",
      },
      {
        title: "WordPress → Next.js",
        body:
          "Modern rebuilds with headless options and faster delivery. SEO preservation and redirects included.",
        href: "/contact?type=development",
        cta: "Discuss Rebuild →",
      },
      {
        title: "Platform Upgrades",
        body:
          "PHP/Node/OpenSSL updates, TLS/HTTP versions, and dependency hygiene without breaking the app.",
        href: "/contact?type=vps",
        cta: "Plan My Upgrade →",
      },
    ],
  },
  {
    id: "dev-platforms",
    anchor: "dev-platforms",
    label: "Developer Platforms & Tooling",
    lead:
      "Make shipping easier: pipelines, environments, and guardrails that keep production stable.",
    cards: [
      {
        title: "CI/CD & Environments",
        body:
          "Staging, previews, and blue/green deployment workflows. Safer changes, faster feedback.",
        href: "/contact?type=development",
        cta: "Improve Deploys →",
      },
      {
        title: "Observability Basics",
        body:
          "Structured logs, metrics, and health checks that find issues before users do.",
        href: "/contact?type=vps",
        cta: "Add Observability →",
      },
      {
        title: "Runbooks & Readiness",
        body:
          "Clear runbooks and checklists for on-call, upgrades, and incident handling.",
        href: "/contact?type=website-care",
        cta: "Create Runbooks →",
      },
    ],
  },
] as const;

// JSON-LD OfferCatalog: top-level sections surfaced for SEO
const servicesLd = {
  "@context": "https://schema.org",
  "@type": "OfferCatalog",
  name: "Van Hunen IT — Service Catalog",
  url: `${site.url}/services`,
  itemListElement: CATEGORIES.map((cat) => ({
    "@type": "OfferCatalog",
    name: cat.label,
    url: `${site.url}/services#${cat.anchor}`,
    itemListElement: cat.cards.map((c) => ({
      "@type": "Offer",
      name: c.title,
      description: c.body,
      url: `${site.url}${c.href.startsWith("/") ? c.href : `/${c.href}`}`,
      priceCurrency: "EUR",
    })),
  })),
};

export default function ServicesPage() {
  const chips = CATEGORIES.map((c) => ({ id: c.id, label: c.label, anchor: c.anchor }));

  return (
    <main
      id="top"
      className="relative isolate min-h-screen bg-gradient-to-b from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950"
    >
      {/* HERO */}
      <section className="relative overflow-hidden border-b border-neutral-200 dark:border-neutral-800">
        <div className="absolute inset-0 pointer-events-none opacity-60 bg-[radial-gradient(50%_50%_at_50%_0%,rgba(99,102,241,0.20),rgba(168,85,247,0.15)_40%,transparent_70%)]" />
        <div className="container mx-auto max-w-6xl px-4 py-20 text-center">
          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">
            Services: Managed Hosting, Websites & Minecraft
          </h1>
          <p className="mt-5 text-lg text-neutral-700 dark:text-neutral-300 max-w-3xl mx-auto">
            Managed or Owned VPS, Managed Website hosting & care, Website development, and Minecraft hosting & plugins.
            Clear outcomes, flat pricing, real SLAs—and before/after proof.
          </p>

          {/* Category chips */}
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            {chips.map((c) => (
              <a
                key={c.id}
                href={`#${c.anchor}`}
                className="rounded-full border border-neutral-300 dark:border-neutral-700 px-4 py-1.5 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition"
              >
                {c.label}
              </a>
            ))}
          </div>

          {/* Quick actions */}
          <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl mx-auto">
            <Link
              href="/vps#deploy"
              className="inline-flex items-center justify-center rounded-lg bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 px-5 py-3 font-semibold hover:opacity-90 transition"
            >
              Provision a VPS
            </Link>
            <Link
              href="/minecraft#deploy"
              className="inline-flex items-center justify-center rounded-lg border border-neutral-300 dark:border-neutral-700 px-5 py-3 font-semibold text-neutral-900 dark:text-white hover:bg-neutral-50 dark:hover:bg-neutral-800 transition"
            >
              Deploy Minecraft
            </Link>
          </div>
        </div>
      </section>

      {/* FEATURED TILES */}
      <section className="container mx-auto max-w-6xl px-4 py-12">
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {[
            {
              id: "vps",
              title: "Managed VPS (Managed or Owned)",
              body: "Hardened & monitored VPS with restore-tested backups.",
              href: "/vps#deploy",
              cta: "Provision VPS →",
            },
            {
              id: "website-care",
              title: "Managed Website Hosting & Care",
              body: "Updates, uptime, security checks & monthly restore tests.",
              href: "/pricing#care",
              cta: "Start Website Care →",
            },
            {
              id: "development",
              title: "Website Development (Next.js)",
              body: "Fast, SEO-ready sites with analytics & deployment.",
              href: "/contact?type=development",
              cta: "Build My Website →",
            },
            {
              id: "minecraft",
              title: "Minecraft Hosting & Plugins",
              body: "Lag-free servers on a hardened VPS + custom plugins.",
              href: "/minecraft#deploy",
              cta: "Deploy a Server →",
            },
          ].map((card) => (
            <article
              id={card.id}
              key={card.id}
              className="group relative overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60 p-6 shadow-sm hover:shadow-lg transition-all duration-300 backdrop-blur"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-blue-50/0 via-transparent to-purple-100/0 dark:from-blue-900/10 dark:to-purple-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
              <h3 className="text-lg font-semibold tracking-tight text-neutral-900 dark:text-white">
                {card.title}
              </h3>
              <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{card.body}</p>
              <Link
                href={card.href}
                className="mt-4 inline-flex items-center text-sm font-medium text-blue-600 hover:underline"
              >
                {card.cta}
              </Link>
            </article>
          ))}
        </div>
      </section>

      {/* SECTIONS */}
      <div className="container mx-auto max-w-6xl px-4 py-8">
        {CATEGORIES.map((cat, index) => (
          <section
            key={cat.id}
            id={cat.anchor}
            className={`relative py-16 scroll-mt-24 rounded-2xl mb-12 shadow-sm ${
              index % 2 === 0
                ? "bg-white dark:bg-neutral-900/50"
                : "bg-neutral-50 dark:bg-neutral-900/30"
            }`}
            aria-labelledby={`${cat.anchor}-heading`}
          >
            <div className="absolute inset-0 -z-10 bg-gradient-to-br from-blue-50/10 via-transparent to-purple-50/10 dark:from-blue-950/10 dark:to-purple-950/10 rounded-2xl" />

            <div className="px-4 sm:px-8">
              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8">
                <h2
                  id={`${cat.anchor}-heading`}
                  className="text-2xl sm:text-3xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
                >
                  {cat.label}
                </h2>
                <Link
                  href="#top"
                  className="mt-3 sm:mt-0 inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-400"
                >
                  Jump to top ↑
                </Link>
              </div>

              <p className="max-w-3xl text-neutral-700 dark:text-neutral-300">
                {cat.lead}
              </p>

              <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {cat.cards.map((card, i) => (
                  <article
                    key={`${cat.id}-${i}`}
                    className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60 p-6 hover:shadow-md transition"
                  >
                    <h3 className="text-lg font-semibold">{card.title}</h3>
                    <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{card.body}</p>
                    <Link
                      href={card.href}
                      className="mt-4 inline-flex items-center text-sm font-medium text-blue-600 hover:underline"
                    >
                      {card.cta}
                    </Link>
                  </article>
                ))}
              </div>
            </div>
          </section>
        ))}
      </div>

      {/* CTA FOOTER */}
      <section className="relative py-24 text-center bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 text-white">
        <div className="container mx-auto max-w-4xl px-6">
          <h2 className="text-3xl sm:text-4xl font-bold tracking-tight">
            Power, Performance & Peace of Mind — Managed for You.
          </h2>
          <p className="mt-4 text-lg text-blue-100">
            Provision a VPS, manage your site, or deploy a Minecraft server—backed by real SLAs and restore-tested backups.
          </p>
          <div className="mt-8 flex items-center justify-center gap-3">
            <Link
              href="/pricing"
              className="inline-flex items-center rounded-lg bg-white text-blue-700 font-semibold px-6 py-3 hover:bg-blue-50 transition"
            >
              Compare Plans
            </Link>
            <Link
              href="/contact?plan=recommendation"
              className="inline-flex items-center rounded-lg border border-white/80 text-white font-semibold px-6 py-3 hover:bg-white/10 transition"
            >
              Get My Recommendation
            </Link>
          </div>
        </div>
      </section>

      <JsonLd data={servicesLd} />
    </main>
  );
}