"use client";

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

export default function PurchaseSuccess() {
  return (
    <section className="min-h-screen flex items-center justify-center px-6">
      <motion.div
        className="max-w-md w-full text-center"
        initial={{ opacity: 0, y: 24 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
      >
        <div
          className="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-6"
          style={{ background: "#4ade8018", border: "1px solid #4ade8030" }}
        >
          <span style={{ color: "#4ade80", fontSize: "20px" }}>✓</span>
        </div>

        <h1 className="text-3xl font-semibold mb-3" style={{ letterSpacing: "-0.02em" }}>
          Purchase complete.
        </h1>
        <p className="text-sm mb-2" style={{ color: "#888888", lineHeight: 1.7 }}>
          Your license key is on its way. Check your email — delivery is typically within a minute.
        </p>
        <p className="text-sm mb-10" style={{ color: "#888888", lineHeight: 1.7 }}>
          If you don&apos;t see it, check your spam folder or contact{" "}
          <a
            href="mailto:support@verimundsolutions.com"
            style={{ color: "#ffffff" }}
          >
            support@verimundsolutions.com
          </a>.
        </p>

        <Link
          href="/uit"
          className="inline-block px-6 py-3 text-sm font-medium rounded-sm border transition-all duration-200"
          style={{ border: "1px solid #222222", color: "#888888" }}
          onMouseEnter={(e) => {
            e.currentTarget.style.borderColor = "#ffffff";
            e.currentTarget.style.color = "#ffffff";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.borderColor = "#222222";
            e.currentTarget.style.color = "#888888";
          }}
        >
          Back to UIT
        </Link>
      </motion.div>
    </section>
  );
}