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: "SMB Website Reliability & Deliverability",
  description:
    "DMARC-aligned email, Cloudflare edge security & speed, tested backups, and uptime watch for SMB sites. Fixed-scope sprints and care plans with real SLAs and before/after proof.",
};

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 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: "Can we switch providers later?",
      a: "Yes. Everything is documented; you own the accounts and artifacts. Month-to-month plans with a 30-day cancel policy.",
    },
    {
      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 },
    })),
  };

  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">
              Fixes in days. Uptime for months.
            </span>
          </h1>
          <p className="mx-auto mt-6 max-w-3xl text-lg sm:text-xl text-neutral-700 dark:text-neutral-300">
            SMB website reliability and deliverability—implemented with the{" "}
            <span className="font-semibold">Reliability Stack™</span>: DMARC-aligned email, Cloudflare edge
            security & speed, tested backups, and uptime watch. Flat pricing. Before/after proof.
          </p>

          <div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
            <Link
              href="/free"
              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"
            >
              Start a Free Reliability Check
            </Link>
            <Link
              href="/contact"
              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"
            >
              Book a 15-min Fit Call
            </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 Cloudflare 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">in 48 hours, spoofing blocked</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>

      {/* --- RELIABILITY STACK --- */}
      <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">
            The Reliability Stack™
          </h2>
          <p className="mt-5 text-lg text-neutral-700 dark:text-neutral-300 max-w-3xl mx-auto">
            Four layers that make websites dependable. Implemented in a 1–3 day sprint, proven with before/after data.
          </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">
            {[
              {
                title: "Email Deliverability",
                body:
                  "Inbox-ready email with SPF/DKIM/DMARC alignment, monitoring, and reports. Stop spoofing and missing leads.",
                href: "/services#email-deliverability",
              },
              {
                title: "Cloudflare Edge",
                body:
                  "WAF & bot mitigation, HTTP/3, cache tuning, and origin shields for fewer attacks and faster TTFB.",
                href: "/services#cloudflare",
              },
              {
                title: "Backups & Restore",
                body:
                  "Automated backups with scheduled restore tests and a recovery runbook. Know you can recover, fast.",
                href: "/services#backups",
              },
              {
                title: "Uptime & Incidents",
                body:
                  "Monitors and SSL watch with clear incident notes and post-mortems. Reduce surprises and MTTR.",
                href: "/services#uptime",
              },
            ].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"
                >
                  Explore →
                </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 (3 STEPS) --- */}
      <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 audit to outcomes in 72 hours
            </h2>
            <p className="mt-4 text-lg text-neutral-700 dark:text-neutral-300 max-w-2xl mx-auto">
              Diagnose the risks, implement the fixes, and prove the results—then choose the right Care plan.
            </p>
          </div>

          <div className="mt-10 grid gap-6 sm:grid-cols-3">
            {[
              {
                step: "1",
                title: "Diagnose",
                body:
                  "DNS/email/edge scan, backup checks, and uptime review. Clear scope and fixed price before we start.",
              },
              {
                step: "2",
                title: "Implement",
                body:
                  "DMARC + Cloudflare + backups + monitors. Least-privilege access, change log, and rollback plan.",
              },
              {
                step: "3",
                title: "Prove",
                body:
                  "Before/after report, restore test timer, incident notes, 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?sprint=fix"
              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"
            >
              Book a Fix Sprint (€490)
            </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 DNS/email 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">
            Ready to make your website reliable and inbox-ready?
          </h2>
          <p className="mt-4 text-lg text-blue-100">
            Start with a Fix Sprint or choose a Care plan that fits your business. We’ll prove the results.
          </p>
          <div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
            <Link
              href="/free"
              className="inline-flex items-center rounded-lg bg-white text-blue-700 font-semibold px-6 py-3 hover:bg-blue-50 transition"
            >
              Start Free Check
            </Link>
            <Link
              href="/pricing"
              className="inline-flex items-center rounded-lg border border-white/70 text-white font-semibold px-6 py-3 hover:bg-white/10 transition"
            >
              See Pricing & SLA
            </Link>
          </div>
        </div>
      </section>

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