"use client";

import Link from "next/link";
import { Zap, MessageCircle } from "lucide-react";
import { motion } from "motion/react";

const noiseStyle = {
  backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
  backgroundSize: "128px 128px",
};

export default function CtaSection() {
  return (
    <section className="w-full py-32 px-6 lg:px-12 relative overflow-hidden border-t border-border/80 font-sans">
      <div
        className="absolute bottom-[-150px] left-1/2 -translate-x-1/2 w-[600px] h-[300px] rounded-full pointer-events-none blur-[100px] z-0"
        style={{ background: "radial-gradient(ellipse, rgba(109,40,217,0.07) 0%, transparent 70%)" }}
      />
      <div className="absolute inset-0 opacity-[0.03] pointer-events-none z-0" style={noiseStyle} />

      <div className="max-w-3xl mx-auto text-center relative z-10">

        <motion.div
          initial={{ opacity: 0, y: 14 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="flex items-center justify-center gap-2 mb-8"
        >
          <span className="block h-0.5 w-6 bg-accent-hover rounded-full" />
          <p className="text-xs font-bold text-accent-text uppercase tracking-widest">Ready to Deploy</p>
        </motion.div>

        <motion.h2
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.55, delay: 0.08 }}
          className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white mb-6 tracking-tight leading-[1.1]"
        >
          Your server, <br />
          <span className="text-accent-text">online in 60s.</span>
        </motion.h2>

        <motion.p
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.55, delay: 0.16 }}
          className="text-[1rem] md:text-lg text-content-dim mb-12 max-w-xl mx-auto leading-relaxed"
        >
          Join thousands of developers and gamers who trust us with their infrastructure. Deploy your first server in seconds, no setup fees.
        </motion.p>

        <motion.div
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.55, delay: 0.24 }}
          className="flex flex-col sm:flex-row items-center justify-center gap-3"
        >
          <Link
            href="/game-host"
            className="group flex items-center gap-2.5 px-8 py-3.5 rounded-xl bg-accent hover:bg-accent-hover text-white font-semibold text-sm transition-colors duration-200 w-full sm:w-auto justify-center"
          >
            <Zap className="w-4 h-4" />
            Deploy Now
          </Link>
          <Link
            href="/support"
            className="flex items-center gap-2.5 px-8 py-3.5 rounded-xl border border-border bg-zinc-900/50 text-zinc-300 font-semibold text-sm hover:border-border-hover hover:bg-zinc-800/50 hover:text-white transition-all duration-200 w-full sm:w-auto justify-center"
          >
            <MessageCircle className="w-4 h-4" />
            Talk to Sales
          </Link>
        </motion.div>

      </div>
    </section>
  );
}