import type { Metadata } from "next";
import Hero from "@/components/Hero";
import Process from "@/components/Process";
import Pricing from "@/components/Pricing";
import Testimonials from "@/components/Testimonials";
import FAQ from "@/components/FAQ";
import CTA from "@/components/CTA";
import { SERVICE_CATEGORIES } from "@/lib/services";
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: "Productized IT for SMBs",
  description: site.description,
};

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 faqLd = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: [
      {
        "@type": "Question",
        name: "How fast can you start?",
        acceptedAnswer: {
          "@type": "Answer",
          text: "Most sprints start within 2–3 business days after scope confirmation.",
        },
      },
      {
        "@type": "Question",
        name: "Do you work under NDA?",
        acceptedAnswer: {
          "@type": "Answer",
          text: "Yes—mutual NDA available on request; we keep credentials least-privilege.",
        },
      },
      {
        "@type": "Question",
        name: "Can we switch providers later?",
        acceptedAnswer: {
          "@type": "Answer",
          text: "Yes. Everything is documented; you own the accounts and artifacts.",
        },
      },
    ],
  };

  // Service category summaries
  const categoryDescriptions: Record<string, string> = {
    "infrastructure-devops":
      "Reliable servers, containers, and automation—Docker, Kubernetes, Cloudflare, and backups that just work.",
    "web-performance":
      "Make your website fast, secure, and consistently available. Core Web Vitals, deliverability, and uptime care.",
    "dev-platforms":
      "Private Git hosting, CI/CD, staging environments, and secrets management—developer efficiency built in.",
    "migrations":
      "Move from legacy hosting or apps to modern, containerized infrastructure with zero-to-minimal downtime.",
    "minecraft":
      "Managed Minecraft servers, plugin development, and performance tuning for creators and communities.",
    "web-dev":
      "Modern websites and headless CMS setups designed for speed, SEO, and maintainability.",
  };

  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 />

      {/* --- Service Areas --- */}
      <section className="relative overflow-hidden border-b 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">
            Service Areas
          </h2>
          <p className="mt-5 text-lg text-neutral-700 dark:text-neutral-300 max-w-2xl mx-auto">
            Fixed-scope sprints and managed plans for infrastructure, performance, and development.
            Each category leads to specialized services tailored to small and mid-sized teams.
          </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-3">
            {Object.entries(SERVICE_CATEGORIES).map(([id, cat], i) => (
              <article
                key={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-8 shadow-sm hover:shadow-lg transition-all duration-300 backdrop-blur"
                style={{ animation: `fadeInUp 0.6s ease forwards`, animationDelay: `${i * 80}ms` }}
              >
                <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">
                  {cat.label}
                </h3>
                <p className="mt-3 text-sm text-neutral-700 dark:text-neutral-300">
                  {categoryDescriptions[id] ?? ""}
                </p>
                <Link
                  href={`/services#${cat.anchor}`}
                  className="mt-5 inline-flex items-center text-sm font-medium text-blue-600 hover:underline"
                >
                  Explore services →
                </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>

      {/* --- Process --- */}
      <Process />

      {/* --- 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>
      </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={[
              {
                q: "How fast can you start?",
                a: "Most sprints start within 2–3 business days after scope confirmation.",
              },
              {
                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 scope isn’t met, we make it right or refund the sprint fee.",
              },
            ]}
          />
        </div>
      </section>

      {/* --- Call to Action --- */}
      <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">
            Ready to make your IT infrastructure reliable and scalable?
          </h2>
          <p className="mt-4 text-lg text-blue-100">
            Talk with Van Hunen IT — get a fixed-scope sprint or managed plan that fits your business.
          </p>
          <Link
            href="/contact"
            className="mt-8 inline-flex items-center rounded-lg bg-white text-blue-700 font-semibold px-6 py-3 hover:bg-blue-50 transition"
          >
            Contact Us
          </Link>
        </div>
      </section>

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