import type { Metadata } from "next";
import Pricing from "@/components/Pricing";
import Testimonials from "@/components/Testimonials";
import FAQ from "@/components/FAQ";
import { plans } from "@/lib/pricing";
import { site } from "@/lib/site";
import JsonLd from "@/components/JsonLd";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Managed Hosting & Development — VPS, Websites & Minecraft | Van Hunen IT",
  description:
    "Managed VPS hosting (managed or owned), Managed Website hosting & care, Website development, and Managed Minecraft hosting & plugins. Self-service provisioning, SLAs, restore-tested backups, expert support.",
};

export default function HomePage() {
  const orgLd = {
    "@context": "https://schema.org",
    "@type": "Organization",
    name: site.name,
    url: site.url,
    logo: site.org.logo,
    sameAs: site.org.sameAs,
  };

  const faqItems = [
    {
      q: "How fast can you start?",
      a: "Most projects start within 2–3 business days after scope confirmation.",
    },
    {
      q: "Can I own the VPS through your platform?",
      a: "Yes. Choose Owned mode on the VPS page. We provision into your cloud account via a secure connect flow. You keep full ownership; we still manage it.",
    },
    {
      q: "Do you support self-service deploys?",
      a: "Yes. You can self-provision a VPS or deploy a Minecraft server in minutes—both include backups and monitoring by default.",
    },
    {
      q: "Do you work under NDA?",
      a: "Yes—mutual NDA available on request; we keep credentials least-privilege.",
    },
    {
      q: "What’s your guarantee?",
      a: "We show proof of outcomes. If the agreed scope isn’t met, we make it right or refund the sprint fee.",
    },
    {
      q: "Do you offer 24/7?",
      a: "Yes—Mission-Critical includes 24/7 paging with a 1-hour first response. Essential and Growth cover business hours.",
    },
  ];

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

  const heroBullets = [
    {
      title: "Managed or Owned VPS hosting",
      body: "Hardened servers, monitoring, and verified backups—hosted by us or owned in your account.",
      href: "/vps",
    },
    {
      title: "Managed Website hosting & care",
      body: "Updates, uptime, security checks, and monthly restore-tested backups.",
      href: "/services#website-care",
    },
    {
      title: "Website development",
      body: "Fast Next.js sites, SEO-ready with deployment included.",
      href: "/services#development",
    },
    {
      title: "Minecraft hosting & plugins",
      body: "Self-service deploys, tuned performance, backups, and custom features.",
      href: "/minecraft",
    },
  ];

  const services = [
    {
      title: "Managed VPS Hosting (Managed or Owned)",
      body:
        "Secure, fast VPS hosting—server management, monitoring, and restore-tested backups. Provision on our platform or own it in your cloud.",
      href: "/vps",
      cta: "Provision a VPS →",
    },
    {
      title: "Managed Website Hosting & Care",
      body:
        "Fully managed website hosting & maintenance—updates, uptime, security checks, and monthly restore tests.",
      href: "/services#website-care",
      cta: "Start Managed Website Hosting →",
    },
    {
      title: "Website Development (Next.js)",
      body:
        "Launch a fast, SEO-ready site with modern tech, analytics, and deployment to your managed hosting.",
      href: "/services#development",
      cta: "Build My Website →",
    },
    {
      title: "Managed Minecraft Server Hosting & Plugins",
      body:
        "Lag-free, stable Minecraft hosting on a hardened VPS, plus custom Paper/Spigot plugins when you need them.",
      href: "/minecraft",
      cta: "Deploy a Server →",
    },
  ];

  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-28 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 Hosting & Development — Fast, Secure, 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">
            Get reliable <strong>Managed or Owned VPS hosting</strong>,{" "}
            <strong>Managed Website hosting & care</strong>,{" "}
            <strong>Website development</strong>, and{" "}
            <strong>Minecraft server hosting & plugins</strong>. Self-service provisioning with{" "}
            restore-tested backups and real SLAs—so you can focus on creating and growing.
          </p>

          {/* Hero bullets */}
          <div className="mx-auto mt-8 grid max-w-4xl grid-cols-1 gap-4 sm:grid-cols-2">
            {heroBullets.map((b) => (
              <Link
                href={b.href}
                key={b.title}
                className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-4 text-left hover:shadow-md transition"
              >
                <div className="text-base font-semibold">{b.title}</div>
                <div className="mt-1 text-sm text-neutral-700 dark:text-neutral-300">{b.body}</div>
              </Link>
            ))}
          </div>

          {/* Primary CTAs */}
          <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 justify-center">
            <Link
              href="/vps#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"
            >
              Provision a VPS
            </Link>
            <Link
              href="/services#website-care"
              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"
            >
              Manage My Website
            </Link>
            <Link
              href="/services#development"
              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"
            >
              Build My Website
            </Link>
            <Link
              href="/minecraft#deploy"
              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"
            >
              Deploy Minecraft
            </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">+38% faster TTFB</p>
              <p className="text-sm text-neutral-600 dark:text-neutral-400">after edge & cache tuning</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">DMARC p=reject</p>
              <p className="text-sm text-neutral-600 dark:text-neutral-400">spoofing blocked in 48 hours</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">7m 12s restore</p>
              <p className="text-sm text-neutral-600 dark:text-neutral-400">backup drill to full recovery</p>
            </div>
          </div>
        </div>
      </section>

      {/* --- SERVICES --- */}
      <section className="relative overflow-hidden border-y border-neutral-200 dark:border-neutral-800">
        <div className="container mx-auto max-w-6xl px-4 py-20 text-center">
          <h2 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">
            Hosting & Development Services
          </h2>
          <p className="mt-5 text-lg text-neutral-700 dark:text-neutral-300 max-w-3xl mx-auto">
            Clear outcomes, flat pricing, and real SLAs—plus before/after proof on every engagement.
          </p>
        </div>

        <div className="container mx-auto max-w-6xl px-4 pb-20">
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {services.map((card) => (
              <article
                key={card.title}
                className="group relative overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/60 dark:bg-neutral-900/60 p-8 shadow-sm hover:shadow-lg transition-all duration-300 backdrop-blur text-left"
              >
                <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-xl font-semibold tracking-tight text-neutral-900 dark:text-white">
                  {card.title}
                </h3>
                <p className="mt-3 text-sm text-neutral-700 dark:text-neutral-300">{card.body}</p>
                <Link
                  href={card.href}
                  className="mt-5 inline-flex items-center text-sm font-medium text-blue-600 hover:underline"
                >
                  {card.cta}
                </Link>
              </article>
            ))}
          </div>

          <div className="mt-14 text-center">
            <Link
              href="/services"
              className="inline-flex items-center rounded-lg bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 text-white px-6 py-3 text-sm font-medium hover:opacity-90 transition"
            >
              View all services
            </Link>
          </div>
        </div>
      </section>

      {/* --- HOW IT WORKS --- */}
      <section className="relative py-24">
        <div className="container mx-auto max-w-6xl px-4">
          <div className="text-center">
            <h2 className="text-3xl sm:text-5xl font-bold tracking-tight">
              From plan to live in days
            </h2>
            <p className="mt-4 text-lg text-neutral-700 dark:text-neutral-300 max-w-2xl mx-auto">
              Self-service provisioning or white-glove setup. We scope, set up, and verify—then hand you clear reporting and an SLA-backed care plan.
            </p>
          </div>

          <div className="mt-10 grid gap-6 sm:grid-cols-3">
            {[
              {
                step: "1",
                title: "Plan",
                body: "Technical review and goals—or use the wizard to self-provision.",
              },
              {
                step: "2",
                title: "Set up",
                body: "Provision VPS/hosting, deploy site or server, configure monitoring and backups.",
              },
              {
                step: "3",
                title: "Verify",
                body: "Before/after metrics, restore test timer, and next-step plan you can share internally.",
              },
            ].map((s) => (
              <div
                key={s.step}
                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 text-blue-600">Step {s.step}</div>
                <h3 className="mt-2 text-xl font-semibold">{s.title}</h3>
                <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{s.body}</p>
              </div>
            ))}
          </div>

          <div className="mt-10 flex justify-center">
            <Link
              href="/contact?plan=recommendation"
              className="inline-flex items-center rounded-lg bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 px-6 py-3 font-semibold hover:opacity-90 transition"
            >
              Get My Recommendation
            </Link>
          </div>
        </div>
      </section>

      {/* --- PRICING --- */}
      <section className="relative py-24 bg-gradient-to-br from-blue-50/40 via-white to-purple-50/40 dark:from-blue-950/10 dark:to-purple-950/10">
        <div className="container mx-auto max-w-6xl px-4">
          <Pricing plans={plans} />
          <div className="mt-8 text-center">
            <p className="text-sm text-neutral-600 dark:text-neutral-400">
              Every plan includes monitoring, automated backups with restore verification, uptime & SSL
              watch, and a quarterly health summary.
            </p>
          </div>
        </div>
      </section>

      {/* --- TESTIMONIALS --- */}
      <section className="relative py-24 border-t border-neutral-200 dark:border-neutral-800">
        <div className="container mx-auto max-w-6xl px-4">
          <Testimonials />
        </div>
      </section>

      {/* --- FAQ --- */}
      <section className="relative py-24 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">
          <FAQ items={faqItems} />
        </div>
      </section>

      {/* --- CTA --- */}
      <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 flex-col sm:flex-row gap-3 justify-center">
            <Link
              href="/vps#deploy"
              className="inline-flex items-center rounded-lg bg-white text-blue-700 font-semibold px-6 py-3 hover:bg-blue-50 transition"
            >
              Provision a VPS
            </Link>
            <Link
              href="/minecraft#deploy"
              className="inline-flex items-center rounded-lg border border-white/70 text-white font-semibold px-6 py-3 hover:bg-white/10 transition"
            >
              Deploy Minecraft
            </Link>
          </div>
        </div>
      </section>

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