'use client';

import { ArrowRight } from 'lucide-react';

export function FinalCtaSection() {
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    setTimeout(() => {
      const input = document.querySelector('input[type="email"]') as HTMLInputElement;
      input?.focus();
    }, 500);
  };

  return (
    <section
      id="join"
      className="relative py-24 px-6 overflow-hidden"
      style={{
        background: 'linear-gradient(180deg, #1a2744 0%, #122035 50%, #0c1628 100%)',
      }}
    >
      <div
        className="absolute top-0 left-0 right-0 h-0.5 pointer-events-none"
        style={{
          background:
            'linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, 0.3) 25%, rgba(34, 211, 238, 0.6) 50%, rgba(34, 211, 238, 0.3) 75%, transparent 100%)',
        }}
      />

      <div
        className="absolute inset-0 opacity-50 pointer-events-none"
        style={{
          backgroundImage:
            'radial-gradient(circle at 20% 50%, rgba(34, 211, 238, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 35%)',
        }}
      />

      <div className="relative z-10 max-w-3xl mx-auto text-center">
        <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white">
          Ready to build?
        </h2>
        <p className="text-cyan-100/70 text-lg md:text-xl mb-10 max-w-2xl mx-auto">
          Join developers waiting for early access. We&apos;ll notify you when your spot is ready.
        </p>

        <button
          onClick={scrollToTop}
          className="inline-flex items-center gap-3 px-10 py-4 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 border-none rounded-xl text-white font-semibold text-lg cursor-pointer transition-all shadow-[0_8px_30px_rgba(99,102,241,0.35)] hover:shadow-[0_14px_40px_rgba(99,102,241,0.45)] hover:-translate-y-[3px]"
        >
          Get Early Access
          <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-[5px]" />
        </button>

        <p className="text-cyan-200/50 text-sm mt-8">
          No credit card required • Free to start • Cancel anytime
        </p>
      </div>
    </section>
  );
}