'use client';

import { AnimatedSection } from '@/components/animated-section';
import { Counter } from '@/components/counter';
import { Target, Users, TrendingUp, Award } from 'lucide-react';

const stats = [
  { icon: Users, label: 'Active Investors', value: 250, suffix: '+' },
  { icon: TrendingUp, label: 'Growth Rate', value: 12, suffix: '%' },
  { icon: Award, label: 'Years Experience', value: 10, suffix: '+' },
];

export function MissionSection() {
  return (
    <section className="py-16 md:py-24">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <AnimatedSection direction="left">
            <div className="inline-flex items-center gap-2 mb-4">
              <Target className="w-6 h-6 text-gold" />
              <h2 className="font-display text-2xl md:text-3xl font-bold tracking-tight">
                Our <span className="text-gold">Mission</span>
              </h2>
            </div>
            <p className="text-muted-foreground text-lg leading-relaxed mb-6">
              To help our clients build wealth through informed decisions and market opportunities.
            </p>
            <p className="text-muted-foreground leading-relaxed">
              Led by Mus Enver, our team brings years of market expertise and a dedication to making professional investment accessible. We believe everyone deserves transparent, well-informed investment guidance.
            </p>
          </AnimatedSection>

          <AnimatedSection direction="right" delay={0.2}>
            <div className="grid grid-cols-3 gap-4">
              {stats?.map?.((stat: any, i: number) => {
                const Icon = stat?.icon ?? Users;
                return (
                  <div
                    key={i}
                    className="bg-card rounded-lg p-5 text-center shadow-md hover:shadow-lg transition-shadow"
                    style={{ boxShadow: 'var(--shadow-md)' }}
                  >
                    <Icon className="w-8 h-8 text-gold mx-auto mb-3" />
                    <div className="font-display text-2xl md:text-3xl font-bold text-gold">
                      <Counter end={stat?.value ?? 0} suffix={stat?.suffix ?? ''} />
                    </div>
                    <p className="text-muted-foreground text-xs mt-1">{stat?.label ?? ''}</p>
                  </div>
                );
              }) ?? []}
            </div>
          </AnimatedSection>
        </div>
      </div>
    </section>
  );
}