"use client";

import { motion } from "framer-motion";
import Link from "next/link";

export default function ContactSuccessPage() {
  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 flex items-center justify-center px-6">
      <motion.section
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="w-full max-w-lg text-center bg-white/70 dark:bg-neutral-900/70 backdrop-blur border border-neutral-200 dark:border-neutral-800 rounded-2xl shadow-sm p-10"
      >
        <motion.div
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ delay: 0.1, duration: 0.4 }}
          className="text-5xl mb-4"
        >
          🎉
        </motion.div>

        <h1 className="text-3xl sm:text-4xl font-bold tracking-tight text-neutral-900 dark:text-white">
          Request Received
        </h1>

        <p className="mt-4 text-lg text-neutral-700 dark:text-neutral-300 leading-relaxed">
          Thanks for reaching out! Your request has been received successfully.
          We’ll review it and get back to you within <strong>one business day</strong>.
        </p>

        <div className="mt-10 flex flex-col sm:flex-row justify-center gap-4">
          <Link
            href="/"
            className="rounded-lg bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 text-white font-medium px-6 py-2.5 hover:opacity-90 transition"
          >
            Back to Home
          </Link>

          <Link
            href="/free"
            className="rounded-lg border border-neutral-300 dark:border-neutral-700 bg-white/80 dark:bg-neutral-950/80 text-neutral-900 dark:text-white font-medium px-6 py-2.5 hover:bg-neutral-50 dark:hover:bg-neutral-900 transition"
          >
            Explore Free Tools
          </Link>
        </div>
      </motion.section>
    </main>
  );
}