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

export default function ExploreFeatures() {
  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-white dark:bg-navy 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">
          <div className="flex items-center justify-center gap-2 mb-4">
            <Sparkles size={24} className="text-orange" />
          </div>
          <h2 className="font-heading font-bold text-3xl lg:text-5xl text-gray-900 dark:text-white mb-6">
            Explore our features
          </h2>
          <a
            href="#features"
            className="inline-flex items-center gap-2 px-6 py-3 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white font-medium rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition-colors"
          >
            View All Features
            <ArrowRight size={18} />
          </a>
        </div>
      </div>
    </section>
  );
}