import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Free Tools & Audits — Van Hunen IT",
  description:
    "Run free reliability, DNS, and performance checks or request quick IT audits. Diagnose, optimize, and secure your website in minutes.",
  robots: { index: true, follow: true },
  alternates: { canonical: "/free" },
};

export default function FreeIndex() {
  const tools = [
    {
      title: "Web Reliability Check",
      excerpt:
        "Test your website’s uptime, SSL, and DNS performance — get an instant reliability grade (A–F).",
      href: "/free/web-reliability-check",
    },
    {
      title: "DNS Health Analyzer",
      excerpt:
        "Check your domain’s DNS setup for missing SPF, DMARC, or CAA records and other critical issues.",
      href: "/free/dns-health-analyzer",
    },
    {
      title: "Website Speed Test (Lite)",
      excerpt:
        "Run a Lighthouse-based performance test and see how your site scores for speed, SEO, and accessibility.",
      href: "/free/website-speed-test",
    },
    {
      title: "Server Header Inspector",
      excerpt:
        "Check your site’s security headers like HSTS, CSP, and Referrer-Policy to spot missing protections.",
      href: "/free/server-header-inspector",
    },
    {
      title: "Cloudflare Optimization Checker",
      excerpt:
        "Analyze if your Cloudflare settings are optimized for caching, SSL, and performance.",
      href: "/free/cloudflare-checker",
    },
    {
      title: "Uptime Monitor (Free Tier)",
      excerpt:
        "Set up free uptime monitoring for your website and receive downtime alerts instantly.",
      href: "/free/uptime-monitor",
    },
    {
      title: "SSL/TLS Expiry Tracker",
      excerpt:
        "Track when your SSL certificate expires and receive an automated renewal reminder.",
      href: "/free/ssl-expiry-tracker",
    },
    {
      title: "Website Backup Readiness Test",
      excerpt:
        "Check if your website is protected by regular automated backups and detect missing layers.",
      href: "/free/backup-readiness-test",
    },
    {
      title: "Email Deliverability Tester",
      excerpt:
        "Send a test email and verify SPF, DKIM, and DMARC for maximum inbox reliability.",
      href: "/free/email-deliverability-tester",
    },
    {
      title: "Docker Deployment Readiness Tool",
      excerpt:
        "Scan your public repository for Docker configuration quality and best practices.",
      href: "/free/docker-readiness",
    },
    {
      title: "Kubernetes Cost Estimator",
      excerpt:
        "Estimate infrastructure costs for your Kubernetes or k3s setup based on your resources.",
      href: "/free/kubernetes-cost-estimator",
    },
    {
      title: "Minecraft Server Performance Checker",
      excerpt:
        "Test TPS, latency, and plugin performance of your Minecraft server in seconds.",
      href: "/free/minecraft-checker",
    },
    {
      title: "Site Downtime Simulation Demo",
      excerpt:
        "Simulate downtime to visualize business impact and recovery time objectives.",
      href: "/free/downtime-simulator",
    },
    {
      title: "Automation ROI Calculator",
      excerpt:
        "See how much time and cost you could save by automating repetitive IT or admin tasks.",
      href: "/free/automation-roi-calculator",
    },
    {
      title: "VPS Performance Benchmark Tool",
      excerpt:
        "Run a quick benchmark on your VPS or server to test CPU, I/O, and disk performance.",
      href: "/free/vps-benchmark",
    },
  ];

  const services = [
    {
      title: "20-Minute Tech Health Check",
      excerpt:
        "A quick diagnostic session covering your hosting, DNS, SSL, and uptime setup.",
      href: "/free/tech-health-check",
    },
    {
      title: "DNS & Mail Deliverability Audit",
      excerpt:
        "Get a personalized DNS and email configuration audit to fix SPF, DKIM, and DMARC issues.",
      href: "/free/dns-mail-audit",
    },
    {
      title: "Website Speed & Optimization Preview",
      excerpt:
        "Receive a short performance report and improvement roadmap for your website.",
      href: "/free/website-optimization-preview",
    },
    {
      title: "Cloudflare Setup Review",
      excerpt:
        "Let us analyze your Cloudflare configuration for speed, caching, and SSL performance.",
      href: "/free/cloudflare-review",
    },
    {
      title: "Security Headers Checkup",
      excerpt:
        "We’ll scan your site headers for vulnerabilities and send a one-page hardening report.",
      href: "/free/security-checkup",
    },
    {
      title: "Backup & Recovery Simulation",
      excerpt:
        "Test your current backup setup and identify gaps in your disaster recovery plan.",
      href: "/free/backup-simulation",
    },
    {
      title: "Uptime Reliability Snapshot",
      excerpt:
        "We’ll monitor your domain for 24 hours and share an uptime report with insights.",
      href: "/free/reliability-snapshot",
    },
    {
      title: "Automation Opportunity Call",
      excerpt:
        "Tell us your weekly routines — we’ll identify tasks that could be automated instantly.",
      href: "/free/automation-call",
    },
  ];

  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">
      {/* --- Header --- */}
      <section className="relative overflow-hidden border-b border-neutral-200 dark:border-neutral-800">
        <div className="container mx-auto max-w-5xl px-6 py-20 text-center">
          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">
            Free Tools & Quick Audits
          </h1>
          <p className="mt-4 text-lg text-neutral-700 dark:text-neutral-300 max-w-2xl mx-auto">
            Diagnose, benchmark, and optimize your IT setup with a collection of
            free utilities and expert mini-audits.  
            No sign-up required, privacy-friendly, and built by{" "}
            <span className="font-semibold">Van Hunen IT</span>.
          </p>
        </div>
      </section>

      {/* --- Automated Tools --- */}
      <section className="container mx-auto max-w-6xl px-6 py-16">
        <h2 className="text-2xl font-bold mb-10 text-neutral-900 dark:text-white text-center">
          Automated Tools
        </h2>
        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {tools.map((t, i) => (
            <article
              key={t.href}
              className="group relative overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-8 shadow-sm hover:shadow-lg transition-all duration-300 backdrop-blur animate-[fadeInUp_0.6s_ease_forwards]"
              style={{ animationDelay: `${i * 60}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-lg font-semibold text-neutral-900 dark:text-white">
                {t.title}
              </h3>
              <p className="mt-3 text-sm text-neutral-700 dark:text-neutral-300">
                {t.excerpt}
              </p>
              <Link
                href={t.href}
                className="mt-6 inline-block w-full rounded-lg bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 text-white text-center py-2.5 text-sm font-medium hover:opacity-90 transition"
              >
                Open Tool
              </Link>
            </article>
          ))}
        </div>
      </section>

      {/* --- Free Audits & Services --- */}
      <section className="container mx-auto max-w-6xl px-6 py-16 border-t border-neutral-200 dark:border-neutral-800">
        <h2 className="text-2xl font-bold mb-10 text-neutral-900 dark:text-white text-center">
          Free Audits & Quick Services
        </h2>
        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {services.map((s, i) => (
            <article
              key={s.href}
              className="group relative overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-8 shadow-sm hover:shadow-lg transition-all duration-300 backdrop-blur animate-[fadeInUp_0.6s_ease_forwards]"
              style={{ 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-lg font-semibold text-neutral-900 dark:text-white">
                {s.title}
              </h3>
              <p className="mt-3 text-sm text-neutral-700 dark:text-neutral-300">
                {s.excerpt}
              </p>
              <Link
                href={s.href}
                className="mt-6 inline-block w-full rounded-lg bg-gradient-to-r from-purple-600 via-blue-600 to-purple-600 text-white text-center py-2.5 text-sm font-medium hover:opacity-90 transition"
              >
                Request
              </Link>
            </article>
          ))}
        </div>
      </section>

      {/* --- CTA Banner --- */}
      <section className="border-t border-neutral-200 dark:border-neutral-800 bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 text-white py-16 mt-12 text-center">
        <div className="container mx-auto max-w-4xl px-6">
          <h2 className="text-2xl sm:text-3xl font-bold mb-4">
            Not Sure Where to Start?
          </h2>
          <p className="text-base sm:text-lg text-white/90 mb-6">
            Book a free 15-minute consultation and we’ll help you pick the right
            checks or services for your setup.
          </p>
          <Link
            href="/contact?topic=consultation"
            className="inline-block rounded-lg bg-white text-blue-700 font-semibold py-3 px-6 shadow hover:shadow-md transition"
          >
            Book Free Call
          </Link>
        </div>
      </section>
    </main>
  );
}