'use client';

import { AnimatedSection } from '@/components/animated-section';
import { GraduationCap, BarChart3, Star, Search, Handshake } from 'lucide-react';

const features = [
  {
    icon: GraduationCap,
    title: 'Learn',
    description: 'Learn about our investment offering and how we can help grow your portfolio.',
  },
  {
    icon: BarChart3,
    title: 'Minimum Investment',
    description: 'Start with a minimum investment of £3,500 and begin your journey to financial growth.',
  },
  {
    icon: Star,
    title: 'Professional Approach',
    description: 'Our professional investment approach is backed by years of market experience.',
  },
  {
    icon: Search,
    title: 'Transparent Information',
    description: 'Transparent information about risks and objectives — no hidden surprises.',
  },
  {
    icon: Handshake,
    title: 'Contact Us',
    description: 'Contact us for full details and start a conversation about your investment goals.',
  },
];

export function WhyInvestSection() {
  return (
    <section className="py-16 md:py-24 bg-navy">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
        <AnimatedSection className="text-center mb-12">
          <h2 className="font-display text-3xl md:text-4xl font-bold text-white tracking-tight">
            Why Invest <span className="text-gold">With Us?</span>
          </h2>
          <div className="w-20 h-1 bg-gold mx-auto mt-4 rounded-full" />
        </AnimatedSection>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
          {features?.map?.((feature: any, i: number) => {
            const Icon = feature?.icon ?? Star;
            return (
              <AnimatedSection key={i} delay={i * 0.1}>
                <div className="group bg-navy-light/60 hover:bg-navy-light rounded-lg p-6 text-center transition-all duration-300 hover:-translate-y-1 h-full" style={{ boxShadow: 'var(--shadow-md)' }}>
                  <div className="w-14 h-14 bg-gold/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-gold/30 transition-colors">
                    <Icon className="w-7 h-7 text-gold" />
                  </div>
                  <h3 className="font-display font-semibold text-gold text-sm mb-2">{feature?.title ?? ''}</h3>
                  <p className="text-white/60 text-xs leading-relaxed">{feature?.description ?? ''}</p>
                </div>
              </AnimatedSection>
            );
          }) ?? []}
        </div>
      </div>
    </section>
  );
}