import type { Metadata } from "next";
import Link from "next/link";
import JsonLd from "@/components/JsonLd";
import { site } from "@/lib/site";
import DeployWizard from "./DeployWizard";

export const metadata: Metadata = {
  title: "Managed Minecraft Server Hosting & Plugins | Van Hunen IT",
  description:
    "Lag-free, stable Minecraft hosting on a hardened VPS—backups, tuning, and monitoring included. Deploy a server in minutes or request custom plugin development.",
};

// Shared data (passed to the client wizard & used for SEO JSON-LD)
const plans = [
  {
    id: "starter",
    name: "Starter",
    price: "€19/mo",
    specs: "2 vCPU • 4 GB RAM • 40 GB SSD",
    typical: "Up to ~20 players (optimized)",
    features: [
      "Paper/Spigot or Bedrock",
      "Daily backups + restore test",
      "Basic tuning & monitoring",
    ],
  },
  {
    id: "pro",
    name: "Pro",
    price: "€39/mo",
    specs: "3 vCPU • 8 GB RAM • 80 GB SSD",
    typical: "Up to ~60 players (optimized)",
    features: [
      "Paper/Velocity or Bedrock + Geyser",
      "Backups (2x/day) + restore test",
      "Advanced tuning & monitoring",
    ],
  },
  {
    id: "network",
    name: "Network",
    price: "Custom",
    specs: "Dedicated VPS spec",
    typical: "Networks & modpacks",
    features: [
      "Velocity/Bungee multi-server",
      "Backups (hourly) + restore test",
      "Custom tuning & SLA",
    ],
  },
] as const;

const regions = [
  { id: "eu-nl", label: "EU — Netherlands" },
  { id: "eu-de", label: "EU — Germany" },
  { id: "us-east", label: "US — East" },
  { id: "us-west", label: "US — West" },
] as const;

const faqItems = [
  {
    q: "Do you support both Java and Bedrock?",
    a: "Yes. Java with Paper/Spigot or Velocity, and Bedrock with Geyser support. Modpacks (Forge/Fabric) are supported on resource-appropriate plans.",
  },
  {
    q: "How do backups work?",
    a: "Automated backups are included with scheduled restore tests. We keep notes and timing so you know recovery is proven.",
  },
  {
    q: "Can I migrate from another host?",
    a: "Yes. We can migrate files, plugins, and worlds. We’ll review your current setup and tune performance on the new server.",
  },
  {
    q: "Do you offer DDoS protection?",
    a: "We apply baseline hardening and provider-level network protections. For advanced scenarios, we’ll discuss options during setup.",
  },
  {
    q: "What about uptime and incidents?",
    a: "We monitor resources and uptime, document incidents with notes, and offer SLAs depending on your plan.",
  },
];

const serviceLd = {
  "@context": "https://schema.org",
  "@type": "Service",
  serviceType: "Managed Minecraft Server Hosting & Plugin Development",
  provider: {
    "@type": "Organization",
    name: site.name,
    url: site.url,
    logo: site.org.logo,
  },
  areaServed: ["EU", "US"],
  hasOfferCatalog: {
    "@type": "OfferCatalog",
    name: "Minecraft Hosting Plans",
    itemListElement: plans.map((p) => ({
      "@type": "Offer",
      name: p.name,
      price: p.price,
      description: `${p.specs} — ${p.typical}`,
      url: `${site.url}/minecraft#deploy`,
      category: "Minecraft Hosting",
    })),
  },
};

const faqLd = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: faqItems.map((i) => ({
    "@type": "Question",
    name: i.q,
    acceptedAnswer: { "@type": "Answer", text: i.a },
  })),
};

export default function MinecraftPage() {
  const hostname = new URL(site.url).hostname;

  return (
    <main 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">
        <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-24 text-center">
          <h1 className="text-4xl sm:text-6xl font-extrabold tracking-tight">
            <span className="bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">
              Managed Minecraft Server Hosting — Lag-Free & Done-for-You
            </span>
          </h1>
          <p className="mx-auto mt-6 max-w-3xl text-lg sm:text-xl text-neutral-700 dark:text-neutral-300">
            Hardened VPS, tuned performance, backups with restore tests, and monitoring. Deploy your server in minutes or let us set it up for you. Need features? We build custom <strong>Paper/Spigot</strong> plugins with tests and docs.
          </p>

          <div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
            <a
              href="#deploy"
              className="inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 px-6 py-3 text-white font-semibold hover:opacity-90 transition"
            >
              Deploy a Server
            </a>
            <Link
              href="/contact?type=minecraft-hosting"
              className="inline-flex items-center justify-center rounded-lg border border-neutral-300 dark:border-neutral-700 px-6 py-3 text-neutral-900 dark:text-white font-semibold hover:bg-neutral-50 dark:hover:bg-neutral-800 transition"
            >
              Talk to an Engineer
            </Link>
          </div>

          {/* Proof badges */}
          <div className="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-4xl mx-auto">
            <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-4">
              <p className="text-2xl font-bold">Stable TPS</p>
              <p className="text-sm text-neutral-600 dark:text-neutral-400">tuned Paper/Velocity stacks</p>
            </div>
            <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-4">
              <p className="text-2xl font-bold">Restore-Proven</p>
              <p className="text-sm text-neutral-600 dark:text-neutral-400">backups with timed drills</p>
            </div>
            <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-4">
              <p className="text-2xl font-bold">SLA-backed</p>
              <p className="text-sm text-neutral-600 dark:text-neutral-400">monitoring & incident notes</p>
            </div>
          </div>
        </div>
      </section>

      {/* BENEFITS */}
      <section className="relative border-y border-neutral-200 dark:border-neutral-800">
        <div className="container mx-auto max-w-6xl px-4 py-16">
          <h2 className="text-3xl sm:text-5xl font-bold tracking-tight text-center">
            Everything you need for smooth gameplay
          </h2>
          <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {[
              { t: "Performance Tuning", d: "Paper, Timings, async I/O, and caching where it counts." },
              { t: "Backups + Restore Tests", d: "Automated backups and scheduled restore drills with notes." },
              { t: "Monitoring & Incidents", d: "Uptime, resource alerts, clear incident notes & follow-up." },
              { t: "Security Basics", d: "Hardened OS, firewall rules, and safe update process." },
            ].map((b) => (
              <article
                key={b.t}
                className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60 p-6"
              >
                <h3 className="text-lg font-semibold">{b.t}</h3>
                <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{b.d}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* PLANS */}
      <section className="relative py-16">
        <div className="container mx-auto max-w-6xl px-4">
          <h2 className="text-3xl sm:text-5xl font-bold tracking-tight text-center">Hosting Plans</h2>
          <p className="mt-4 text-neutral-700 dark:text-neutral-300 text-center max-w-3xl mx-auto">
            Choose a plan that fits your community. Player counts are typical, not hard limits—tuning and plugins affect performance.
          </p>

          <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {plans.map((p) => (
              <div
                key={p.id}
                className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60 p-6 flex flex-col"
              >
                <div className="flex items-baseline justify-between">
                  <h3 className="text-xl font-semibold">{p.name}</h3>
                  <div className="text-lg font-bold">{p.price}</div>
                </div>
                <div className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{p.specs}</div>
                <div className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">{p.typical}</div>

                <ul className="mt-4 space-y-2 text-sm">
                  {p.features.map((f) => (
                    <li key={f} className="flex items-start gap-2">
                      <span className="mt-0.5">✅</span>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>

                <a
                  href={`#deploy?plan=${p.id}`}
                  className="mt-6 inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 px-4 py-2 text-white font-semibold hover:opacity-90 transition"
                >
                  {p.id === "network" ? "Request Custom Plan" : `Deploy ${p.name}`}
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PLUGIN DEVELOPMENT */}
      <section className="relative py-16 border-y border-neutral-200 dark:border-neutral-800">
        <div className="container mx-auto max-w-6xl px-4">
          <div className="grid gap-8 lg:grid-cols-2">
            <div>
              <h2 className="text-3xl sm:text-5xl font-bold tracking-tight">Minecraft Plugin Development</h2>
              <p className="mt-4 text-neutral-700 dark:text-neutral-300">
                Custom Paper/Spigot plugins built to spec—tests, config, permissions, and docs included.
                Ownership transferred to you after payment.
              </p>
              <ul className="mt-6 space-y-2 text-sm">
                {[
                  "Feature scoping and milestones",
                  "Automated test suite & changelog",
                  "Config, permissions, and admin docs",
                  "Private repo transfer and handover",
                ].map((li) => (
                  <li key={li} className="flex items-start gap-2">
                    <span className="mt-0.5">🔧</span>
                    <span>{li}</span>
                  </li>
                ))}
              </ul>

              <div className="mt-6 flex gap-3">
                <Link
                  href="/contact?type=plugin"
                  className="inline-flex items-center rounded-lg bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 px-5 py-2 font-semibold hover:opacity-90 transition"
                >
                  Request Plugin Quote
                </Link>
                <Link
                  href="/contact?type=minecraft-hosting"
                  className="inline-flex items-center rounded-lg border border-neutral-300 dark:border-neutral-700 px-5 py-2 font-semibold text-neutral-900 dark:text-white hover:bg-neutral-50 dark:hover:bg-neutral-800 transition"
                >
                  Talk About Your Server
                </Link>
              </div>
            </div>

            <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60 p-6">
              <div className="text-sm font-semibold">Example plugin ideas</div>
              <ul className="mt-3 space-y-2 text-sm text-neutral-700 dark:text-neutral-300">
                <li>• Economy & shops with anti-dupe checks</li>
                <li>• Claims / protection with region flags</li>
                <li>• Cross-server chat via Velocity</li>
                <li>• Mini-games scaffolding & leaderboards</li>
              </ul>
              <p className="mt-4 text-xs text-neutral-500 dark:text-neutral-400">
                (We’ll confirm feasibility and scope before building.)
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* SELF-SERVICE DEPLOYMENT */}
      <section id="deploy" className="relative py-16">
        <div className="container mx-auto max-w-3xl px-4">
          <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-center">
            Deploy a Minecraft Server (Self-Service)
          </h2>
          <p className="mt-3 text-center text-neutral-700 dark:text-neutral-300">
            Pick a plan, choose edition & version, set a region, and we’ll provision your server and email access details.
          </p>

          <DeployWizard plans={plans} regions={regions} siteHostname={hostname} />
        </div>
      </section>

      {/* FAQ */}
      <section className="relative py-16 bg-gradient-to-b from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950">
        <div className="container mx-auto max-w-4xl px-4">
          <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-center">FAQ</h2>
          <div className="mt-8 grid gap-6">
            {faqItems.map((i) => (
              <article
                key={i.q}
                className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60 p-6"
              >
                <h3 className="text-lg font-semibold">{i.q}</h3>
                <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{i.a}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <JsonLd data={serviceLd} />
      <JsonLd data={faqLd} />
    </main>
  );
}