import { useRef } from 'react';
import { ArrowRight } from 'lucide-react';
import { useScrollReveal } from './useScrollReveal';

export default function CTA() {
  const sectionRef = useRef<HTMLElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  useScrollReveal(sectionRef, contentRef);

  return (
    <section
      ref={sectionRef}
      className="relative py-24 lg:py-32 bg-surface overflow-hidden"
    >
      {/* ASCII Grid Background */}
      <div className="absolute inset-0 ascii-grid opacity-10 dark:opacity-20" />

      <div className="relative z-10 max-w-9xl mx-auto px-6">
        <div ref={contentRef} className="text-center">
          <h2 className="font-heading font-bold text-3xl lg:text-5xl text-gray-900 dark:text-white mb-8">
            Start building your wealth today
          </h2>
          <a
            href="#contact"
            className="inline-flex items-center gap-2 px-8 py-4 bg-orange text-white font-medium rounded-lg hover:bg-orange-dark transition-colors shadow-glow text-lg"
          >
            Create Account
            <ArrowRight size={20} />
          </a>
        </div>
      </div>
    </section>
  );
}