"use client";

export function GradientCtaFooter() {
  return (
    <footer className="bg-[#0B0B0F] px-8 py-16 text-[#FAFAF8]">
      <div className="mx-auto max-w-4xl">
        <div
          className="relative overflow-hidden rounded-3xl p-10 md:p-14"
          style={{
            background:
              "radial-gradient(120% 140% at 15% 10%, #6366f1 0%, #8b5cf6 32%, #d946ef 60%, #f43f5e 100%)",
          }}
        >
          {/* glow blobs */}
          <span className="pointer-events-none absolute -right-10 -top-12 h-44 w-44 rounded-full bg-white/25 blur-3xl" />
          <span className="pointer-events-none absolute -bottom-16 left-10 h-40 w-40 rounded-full bg-[#06b6d4]/40 blur-3xl" />

          <div className="relative">
            <h3
              className="max-w-[18ch] text-[34px] leading-[1.02] tracking-[-0.02em] text-white md:text-[44px]"
              style={{ fontFamily: "'Instrument Serif', Georgia, serif" }}
            >
              Build something people actually <em>remember</em>.
            </h3>
            <p className="mt-4 max-w-md text-[14px] leading-[1.6] text-white/85">
              Join 12,400 builders shipping interfaces that don&apos;t look
              AI-generated. One email a month, zero noise.
            </p>

            <form
              className="mt-7 flex max-w-md flex-col gap-2.5 sm:flex-row"
              onSubmit={(e) => e.preventDefault()}
            >
              <input
                type="email"
                placeholder="you@studio.com"
                className="w-full rounded-full border border-white/30 bg-white/15 px-5 py-3 text-[14px] text-white outline-none backdrop-blur placeholder:text-white/60 focus:border-white/70"
              />
              <button
                type="submit"
                className="shrink-0 rounded-full bg-white px-6 py-3 text-[14px] font-semibold text-[#111111] transition-transform hover:-translate-y-0.5"
              >
                Subscribe
              </button>
            </form>
          </div>
        </div>

        <div className="mt-8 flex flex-wrap items-center justify-between gap-3 font-mono text-[11px] text-[#FAFAF8]/50">
          <span>© 2026 Velynkit Studios</span>
          <div className="flex gap-5">
            <a href="#" className="hover:text-white">Twitter</a>
            <a href="#" className="hover:text-white">GitHub</a>
            <a href="#" className="hover:text-white">Discord</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
Gradient CTA Footer
