import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { 
  BarChart3, 
  TrendingUp, 
  Settings, 
  Zap,
  CheckCircle2,
  ArrowRight
} from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const features = [
  {
    icon: BarChart3,
    title: '17 Different Transactions',
    description: 'Oxyfinz supports 17 different transactions and automatically calculates fund performance metrics, within one fund or across different funds.',
  },
  {
    icon: Zap,
    title: 'Real-Time Dashboards',
    description: 'Oxyfinz dashboards are constantly updated and provide you with a comprehensive snapshot of your fund investments in real-time.',
  },
  {
    icon: Settings,
    title: 'Customize Metrics & KPIs',
    description: 'Choose from the extensive list of metrics or create your own! Be it financials, balance sheet items, marketing metrics or ESG metrics, Oxyfinz has you covered.',
  },
  {
    icon: TrendingUp,
    title: 'Predict Growth Patterns',
    description: 'Plus, you\'re able to predict growth patterns of your portfolio companies with the forecasted and actual value of any KPIs that matter to you.',
  },
];

const metrics = [
  'Financials',
  'Balance Sheet Items',
  'Marketing Metrics',
  'ESG Metrics',
  'Custom KPIs',
  'Forecasted Values',
];

export default function InvestmentManagement() {
  const sectionRef = useRef<HTMLElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const imageRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo(
        contentRef.current,
        { y: 40, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.8,
          ease: 'power2.out',
          scrollTrigger: {
            trigger: sectionRef.current,
            start: 'top 80%',
          },
        }
      );

      if (imageRef.current) {
        gsap.fromTo(
          imageRef.current,
          { scale: 0.95, opacity: 0 },
          {
            scale: 1,
            opacity: 1,
            duration: 1,
            ease: 'power2.out',
            scrollTrigger: {
              trigger: imageRef.current,
              start: 'top 85%',
            },
          }
        );
      }

      // Animate feature cards
      gsap.utils.toArray('.feature-card').forEach((card: any, i: number) => {
        gsap.fromTo(
          card,
          { y: 30, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.6,
            ease: 'power2.out',
            scrollTrigger: {
              trigger: card,
              start: 'top 85%',
            },
            delay: i * 0.1,
          }
        );
      });
    }, sectionRef);

    return () => ctx.revert();
  }, []);

  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">
        {/* Header Section */}
        <div ref={contentRef} className="text-center mb-16">
          <div className="flex items-center justify-center gap-2 mb-4">
            <BarChart3 size={24} className="text-orange" />
            <span className="font-mono text-xs text-orange">[ Investment Management ]</span>
          </div>
          
          <h2 className="font-heading font-bold text-3xl lg:text-5xl text-[#000] mb-6">
            Manage your investment with ease
          </h2>
          
          <p className="text-lg lg:text-xl text-text-secondary max-w-3xl mx-auto mb-8">
            Oxyfinz supports 17 different transactions and automatically calculates fund performance metrics, within one fund or across different funds.
          </p>
        </div>

        {/* Dashboard Image Section */}
        <div ref={imageRef} className="mb-16">
          <div className="relative bg-gradient-to-br from-gray-50 to-gray-100 dark:from-surface dark:to-surface-elevated rounded-2xl p-8 lg:p-12 border border-gray-200 dark:border-white/10">
            {/* Placeholder for dashboard image */}
            <div className="relative aspect-video bg-white dark:bg-navy rounded-xl border border-gray-200 dark:border-white/10 overflow-hidden">
              {/* Simulated dashboard UI */}
              <div className="absolute inset-0 p-6">
                <div className="grid grid-cols-3 gap-4 h-full">
                  {/* Chart areas */}
                  <div className="bg-gradient-to-br from-orange/10 to-orange/5 rounded-lg border border-orange/20 p-4">
                    <div className="h-full flex items-center justify-center">
                      <BarChart3 size={40} className="text-orange opacity-50" />
                    </div>
                  </div>
                  <div className="bg-gradient-to-br from-orange/10 to-orange/5 rounded-lg border border-orange/20 p-4">
                    <div className="h-full flex items-center justify-center">
                      <TrendingUp size={40} className="text-orange opacity-50" />
                    </div>
                  </div>
                  <div className="bg-gradient-to-br from-orange/10 to-orange/5 rounded-lg border border-orange/20 p-4">
                    <div className="h-full flex items-center justify-center">
                      <Zap size={40} className="text-orange opacity-50" />
                    </div>
                  </div>
                </div>
                {/* Dashboard text overlay */}
                <div className="absolute bottom-6 left-6 right-6">
                  <div className="bg-white/80 dark:bg-navy/80 backdrop-blur-sm rounded-lg p-4 border border-gray-200 dark:border-white/10">
                    <p className="text-sm text-text-secondary text-center">
                      Real-time fund performance dashboard
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <p className="text-center text-text-secondary mt-6 text-sm">
              Oxyfinz dashboards are constantly updated and provide you with a comprehensive snapshot of your fund investments in real-time.
            </p>
          </div>
        </div>

        {/* Fund Performance Section */}
        <div className="mb-16">
          <div className="text-center mb-12">
            <h3 className="font-heading font-bold text-2xl lg:text-4xl text-gray-900 dark:text-white mb-4">
              See how Oxyfinz assists you in{' '}
              <span className="text-gradient-orange">measuring fund performance</span>
            </h3>
          </div>

          {/* Metrics Grid */}
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
            {metrics.map((metric, index) => (
              <div
                key={index}
                className="flex items-center gap-3 p-4 bg-white dark:bg-surface border border-gray-200 dark:border-white/10 rounded-lg"
              >
                <CheckCircle2 size={20} className="text-orange flex-shrink-0" />
                <span className="text-text-secondary">{metric}</span>
              </div>
            ))}
          </div>

          <div className="bg-white dark:bg-surface border border-gray-200 dark:border-white/10 rounded-xl p-6 lg:p-8">
            <h4 className="font-heading font-semibold text-xl text-gray-900 dark:text-white mb-4">
              Customize Metrics and KPIs template for each Portfolio Company
            </h4>
            <p className="text-text-secondary leading-relaxed mb-4">
              Choose from the extensive list of metrics or create your own! Be it financials, balance sheet items, marketing metrics or ESG metrics, Oxyfinz has you covered.
            </p>
            <p className="text-text-secondary leading-relaxed">
              Plus, you're able to predict growth patterns of your portfolio companies with the forecasted and actual value of any KPIs that matter to you.
            </p>
          </div>
        </div>

        {/* Features Grid */}
        <div className="mb-12">
          <div className="text-center mb-8">
            <h3 className="font-heading font-bold text-2xl lg:text-4xl text-gray-900 dark:text-white">
              Explore our features
            </h3>
          </div>

          <div className="grid md:grid-cols-2 gap-6 lg:gap-8">
            {features.map((feature, index) => {
              const Icon = feature.icon;
              return (
                <div
                  key={index}
                  className="feature-card p-6 lg:p-8 bg-white dark:bg-surface border border-gray-200 dark:border-white/10 rounded-xl hover:border-orange/30 transition-all hover:shadow-lg"
                >
                  <div className="w-12 h-12 rounded-lg bg-orange/10 flex items-center justify-center mb-4">
                    <Icon size={24} className="text-orange" />
                  </div>
                  <h4 className="font-heading font-semibold text-xl text-gray-900 dark:text-white mb-3">
                    {feature.title}
                  </h4>
                  <p className="text-text-secondary leading-relaxed">
                    {feature.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>

        {/* CTA */}
        <div className="text-center">
          <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"
          >
            Get Started
            <ArrowRight size={18} />
          </a>
        </div>
      </div>
    </section>
  );
}