'use client';

import Image from 'next/image';
import Link from 'next/link';
import { AnimatedSection } from '@/components/animated-section';
import {
  TrendingUp, BarChart3, ShieldCheck, Eye, Briefcase,
  ArrowRight, CheckCircle, PoundSterling
} from 'lucide-react';
import dynamic from 'next/dynamic';

const GrowthChart = dynamic(() => import('./growth-chart').then(m => m.GrowthChart), {
  ssr: false,
  loading: () => (
    <div className="w-full h-[350px] bg-card rounded-lg flex items-center justify-center">
      <p className="text-muted-foreground">Loading chart...</p>
    </div>
  ),
});

const services = [
  {
    icon: BarChart3,
    title: 'Portfolio Management',
    description: 'Strategic portfolio construction and active management designed to maximise returns while managing risk effectively.',
    features: ['Diversified asset allocation', 'Active market monitoring', 'Regular rebalancing'],
  },
  {
    icon: TrendingUp,
    title: 'Growth Investing',
    description: 'Focused approach on identifying high-growth opportunities in emerging and established markets.',
    features: ['Market trend analysis', 'Sector-specific strategies', 'Long-term wealth building'],
  },
  {
    icon: ShieldCheck,
    title: 'Risk Management',
    description: 'Comprehensive risk assessment and mitigation strategies to protect your capital.',
    features: ['Portfolio stress testing', 'Hedging strategies', 'Capital preservation focus'],
  },
  {
    icon: Eye,
    title: 'Market Research',
    description: 'In-depth market analysis and research reports to keep you informed about opportunities.',
    features: ['Daily market insights', 'Quarterly performance reports', 'Economic outlook updates'],
  },
];

const processSteps = [
  { step: '01', title: 'Initial Consultation', description: 'We discuss your financial goals, risk tolerance, and investment timeline.' },
  { step: '02', title: 'Strategy Development', description: 'We create a tailored investment strategy aligned with your objectives.' },
  { step: '03', title: 'Investment Execution', description: 'Your portfolio is constructed with carefully selected investments.' },
  { step: '04', title: 'Ongoing Management', description: 'Continuous monitoring, rebalancing, and regular performance updates.' },
];

export function ServicesContent() {
  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/services-market.jpg"
            alt="Financial market data and trading charts"
            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">
              Investment <span className="text-gold">Services</span>
            </h1>
            <p className="text-white/70 text-lg max-w-2xl mx-auto">
              Professional investment solutions designed to help grow your wealth with transparency and expertise.
            </p>
          </AnimatedSection>
        </div>
      </section>

      {/* Min Investment Banner */}
      <section className="py-8">
        <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
          <AnimatedSection>
            <div className="bg-gradient-to-r from-gold/10 to-gold/5 border border-gold/20 rounded-lg p-6 md:p-8 flex flex-col md:flex-row items-center gap-6">
              <div className="w-16 h-16 bg-gold/20 rounded-full flex items-center justify-center flex-shrink-0">
                <PoundSterling className="w-8 h-8 text-gold" />
              </div>
              <div className="text-center md:text-left">
                <h3 className="font-display text-xl font-bold">Minimum Investment: <span className="text-gold">£3,500</span></h3>
                <p className="text-muted-foreground text-sm mt-1">
                  Start your investment journey with an accessible entry point. Our minimum investment of £3,500 opens the door to professional portfolio management.
                </p>
              </div>
              <Link
                href="/contact"
                className="flex-shrink-0 bg-gold hover:bg-gold-light text-navy font-semibold px-6 py-3 rounded-md transition-all duration-300 text-sm"
              >
                Get Started
              </Link>
            </div>
          </AnimatedSection>
        </div>
      </section>

      {/* Services Grid */}
      <section className="py-16 md:py-24">
        <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">
              What We <span className="text-gold">Offer</span>
            </h2>
            <div className="w-20 h-1 bg-gold mx-auto mt-4 rounded-full" />
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {services?.map?.((service: any, i: number) => {
              const Icon = service?.icon ?? Briefcase;
              return (
                <AnimatedSection key={i} delay={i * 0.1}>
                  <div className="bg-card rounded-lg p-6 md:p-8 h-full hover:-translate-y-1 transition-all duration-300" style={{ boxShadow: 'var(--shadow-md)' }}>
                    <div className="flex items-start gap-4">
                      <div className="w-12 h-12 bg-gold/15 rounded-full flex items-center justify-center flex-shrink-0">
                        <Icon className="w-6 h-6 text-gold" />
                      </div>
                      <div>
                        <h3 className="font-display text-lg font-bold mb-2">{service?.title ?? ''}</h3>
                        <p className="text-muted-foreground text-sm leading-relaxed mb-4">{service?.description ?? ''}</p>
                        <div className="space-y-2">
                          {(service?.features ?? [])?.map?.((f: string, j: number) => (
                            <div key={j} className="flex items-center gap-2">
                              <CheckCircle className="w-4 h-4 text-gold flex-shrink-0" />
                              <span className="text-sm text-muted-foreground">{f ?? ''}</span>
                            </div>
                          )) ?? []}
                        </div>
                      </div>
                    </div>
                  </div>
                </AnimatedSection>
              );
            }) ?? []}
          </div>
        </div>
      </section>

      {/* Growth Chart */}
      <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-10">
            <h2 className="font-display text-3xl md:text-4xl font-bold tracking-tight">
              Investment <span className="text-gold">Growth Scenarios</span>
            </h2>
            <p className="text-muted-foreground mt-3 max-w-xl mx-auto text-sm">
              Hypothetical growth of a £3,500 investment over 10 years at different annual return rates. For illustration purposes only.
            </p>
          </AnimatedSection>
          <AnimatedSection>
            <div className="bg-card rounded-lg p-4 md:p-6" style={{ boxShadow: 'var(--shadow-md)' }}>
              <GrowthChart />
            </div>
          </AnimatedSection>
        </div>
      </section>

      {/* Process */}
      <section className="py-16 md:py-24">
        <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">Process</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">
            {processSteps?.map?.((step: any, i: number) => (
              <AnimatedSection key={i} delay={i * 0.15}>
                <div className="relative bg-card rounded-lg p-6 h-full" style={{ boxShadow: 'var(--shadow-md)' }}>
                  <span className="font-display text-4xl font-bold text-gold/20">{step?.step ?? ''}</span>
                  <h3 className="font-display font-semibold mt-2 mb-2">{step?.title ?? ''}</h3>
                  <p className="text-muted-foreground text-sm leading-relaxed">{step?.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">
                Start Your <span className="text-gold">Investment Journey</span>
              </h2>
              <p className="text-white/70 mb-8 max-w-lg mx-auto">
                Take the first step. Contact us to discuss how our services align with your financial goals.
              </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"
              >
                Get Started Today
                <ArrowRight className="w-5 h-5" />
              </Link>
            </div>
          </AnimatedSection>
        </div>
      </section>
    </div>
  );
}
