'use client';

import Image from 'next/image';
import Link from 'next/link';
import { AnimatedSection } from '@/components/animated-section';
import { Counter } from '@/components/counter';
import { Shield, Users, Target, TrendingUp, Award, CheckCircle, ArrowRight } from 'lucide-react';

const values = [
  {
    icon: Shield,
    title: 'Trust & Security',
    description: 'We prioritise the security of your investments and maintain the highest standards of trust.',
  },
  {
    icon: Target,
    title: 'Client-Focused',
    description: 'Every decision we make is centered around delivering value and results for our clients.',
  },
  {
    icon: TrendingUp,
    title: 'Market Expertise',
    description: 'Our deep understanding of market dynamics helps identify the best opportunities.',
  },
  {
    icon: Award,
    title: 'Excellence',
    description: 'We strive for excellence in every aspect of our investment management services.',
  },
];

const commitments = [
  'Regular portfolio updates and performance reports',
  'Clear communication about investment risks',
  'Personalised investment strategies',
  'Accessible team for questions and guidance',
  'Transparent fee structure with no hidden charges',
  'Continuous market monitoring and analysis',
];

export function AboutContent() {
  return (
    <div className="pt-20 md:pt-24">
      {/* Hero */}
      <section className="relative py-16 md:py-24 bg-navy overflow-hidden">
        <div className="absolute inset-0">
          <Image
            src="/images/about-team.jpg"
            alt="Professional financial advisory team"
            fill
            className="object-cover opacity-20"
          />
        </div>
        <div className="relative z-10 max-w-[1200px] mx-auto px-4 sm:px-6 text-center">
          <AnimatedSection>
            <h1 className="font-display text-4xl md:text-5xl font-bold text-white tracking-tight mb-4">
              About <span className="text-gold">TradeTheMarkets</span>
            </h1>
            <p className="text-white/70 text-lg max-w-2xl mx-auto">
              Building wealth through informed decisions and market opportunities since day one.
            </p>
          </AnimatedSection>
        </div>
      </section>

      {/* Mus Enver Section */}
      <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="bg-card rounded-lg p-8" style={{ boxShadow: 'var(--shadow-lg)' }}>
                <div className="flex items-center gap-3 mb-6">
                  <div className="w-12 h-12 bg-gold/20 rounded-full flex items-center justify-center">
                    <Users className="w-6 h-6 text-gold" />
                  </div>
                  <div>
                    <h2 className="font-display text-2xl font-bold tracking-tight">Mus Enver</h2>
                    <p className="text-gold text-sm font-medium">Founder & Lead Advisor</p>
                  </div>
                </div>
                <p className="text-muted-foreground leading-relaxed mb-4">
                  With over a decade of experience in financial markets, Mus Enver founded TradeTheMarkets.co.uk with a clear vision: to make professional investment accessible to everyone.
                </p>
                <p className="text-muted-foreground leading-relaxed mb-4">
                  Mus brings a wealth of market knowledge and a track record of identifying growth opportunities across multiple asset classes. His analytical approach combined with a genuine commitment to client success sets TradeTheMarkets apart.
                </p>
                <p className="text-muted-foreground leading-relaxed">
                  Whether you are a first-time investor or looking to diversify an existing portfolio, Mus and the team are here to guide you every step of the way.
                </p>
              </div>
            </AnimatedSection>

            <AnimatedSection direction="right" delay={0.2}>
              <div className="space-y-6">
                <h3 className="font-display text-xl font-bold tracking-tight">Our <span className="text-gold">Commitment</span> to You</h3>
                <div className="space-y-3">
                  {commitments?.map?.((item: string, i: number) => (
                    <div key={i} className="flex items-start gap-3">
                      <CheckCircle className="w-5 h-5 text-gold flex-shrink-0 mt-0.5" />
                      <p className="text-muted-foreground text-sm">{item ?? ''}</p>
                    </div>
                  )) ?? []}
                </div>
              </div>
            </AnimatedSection>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="py-16 md:py-24 bg-navy/5">
        <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 tracking-tight">
              Our <span className="text-gold">Values</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-4 gap-6">
            {values?.map?.((val: any, i: number) => {
              const Icon = val?.icon ?? Shield;
              return (
                <AnimatedSection key={i} delay={i * 0.1}>
                  <div className="bg-card rounded-lg p-6 h-full hover:-translate-y-1 transition-all duration-300" style={{ boxShadow: 'var(--shadow-md)' }}>
                    <div className="w-12 h-12 bg-gold/15 rounded-full flex items-center justify-center mb-4">
                      <Icon className="w-6 h-6 text-gold" />
                    </div>
                    <h3 className="font-display font-semibold mb-2">{val?.title ?? ''}</h3>
                    <p className="text-muted-foreground text-sm leading-relaxed">{val?.description ?? ''}</p>
                  </div>
                </AnimatedSection>
              );
            }) ?? []}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 md:py-24">
        <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
          <AnimatedSection>
            <div className="bg-navy rounded-xl p-8 md:p-12 text-center">
              <h2 className="font-display text-3xl font-bold text-white tracking-tight mb-4">
                Ready to <span className="text-gold">Meet the Team?</span>
              </h2>
              <p className="text-white/70 mb-8 max-w-lg mx-auto">
                Get in touch to discuss your investment goals and how we can help.
              </p>
              <Link
                href="/contact"
                className="inline-flex items-center gap-2 bg-gold hover:bg-gold-light text-navy font-semibold px-8 py-4 rounded-md transition-all duration-300 hover:shadow-lg"
              >
                Contact Us
                <ArrowRight className="w-5 h-5" />
              </Link>
            </div>
          </AnimatedSection>
        </div>
      </section>
    </div>
  );
}
