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

export default function FundPerformance() {
  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">
          <div className="flex items-center justify-center gap-2 mb-4">
            <BarChart3 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">
            See how Oxyfinz assists you in
            <br />
            <span className="text-gradient-orange">measuring fund performance</span>
          </h2>
          <a
            href="#contact"
            className="inline-flex items-center gap-2 px-6 py-3 bg-orange text-white font-medium rounded-lg hover:bg-orange-dark transition-colors shadow-glow"
          >
            Learn More
            <ArrowRight size={18} />
          </a>
        </div>
      </div>
    </section>
  );
}