"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Briefcase, ShoppingCart, Award } from 'lucide-react';

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="outline"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="SmartMoney"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Team", id: "/team" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Start Investing",
            href: "/contact"
          }}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSix 
          title="Our Investment Solutions"
          description="Comprehensive strategies designed to maximize returns and minimize risk for every investor"
          tag="Services"
          tagIcon={Briefcase}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: 1,
              title: "Portfolio Management",
              description: "Expert-managed investment portfolios diversified across stocks, bonds, and alternative assets to achieve optimal growth",
              imageSrc: "https://img.b2bpic.net/free-photo/seedling-plant-are-growing-money-coin-tower-with-blurred-bokeh-background-business-finance-concept_640221-85.jpg"
            },
            {
              id: 2,
              title: "Wealth Planning",
              description: "Personalized wealth strategies aligned with your life goals, including tax optimization and estate planning",
              imageSrc: "https://img.b2bpic.net/free-photo/coin-wooden-table_1150-17725.jpg"
            },
            {
              id: 3,
              title: "Retirement Planning",
              description: "Secure your future with comprehensive retirement strategies and pension planning from industry experts",
              imageSrc: "https://img.b2bpic.net/free-photo/hand-holding-coin-stack-money-wood-table-pension-fund-concept_335224-1410.jpg"
            },
            {
              id: 4,
              title: "Tax Optimization",
              description: "Sophisticated tax-efficient strategies to help you keep more of your investment returns",
              imageSrc: "https://img.b2bpic.net/free-photo/coins-glass-with-small-tree_1150-17723.jpg"
            }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree 
          title="Investment Products"
          description="Choose from our curated selection of investment vehicles to build your perfect portfolio"
          tag="Products"
          tagIcon={ShoppingCart}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",
              name: "Mutual Funds",
              price: "Starting at $500",
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-two-stacks-coins-grass-with-jar-plants_23-2148803920.jpg",
              initialQuantity: 1
            },
            {
              id: "2",
              name: "Individual Stocks",
              price: "Starting at $100",
              imageSrc: "https://img.b2bpic.net/free-photo/plants-with-coins-stacked-dirt-banknote_23-2148803946.jpg",
              initialQuantity: 1
            },
            {
              id: "3",
              name: "Bond Portfolio",
              price: "Starting at $1,000",
              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-two-stacks-coins-with-plants-copy-space_23-2148803918.jpg",
              initialQuantity: 1
            },
            {
              id: "4",
              name: "Alternative Assets",
              price: "Starting at $5,000",
              imageSrc: "https://img.b2bpic.net/free-photo/coins-with-plant-table_23-2147931130.jpg",
              initialQuantity: 1
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen 
          title="Performance Highlights"
          description="Our investment expertise delivers measurable results across all asset classes"
          tag="Performance"
          tagIcon={Award}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              title: "5-Year Growth Rate",
              subtitle: "Consistently outperforming market benchmarks",
              category: "Returns",
              value: "14.2%"
            },
            {
              id: "2",
              title: "Risk-Adjusted Returns",
              subtitle: "Superior performance with lower volatility",
              category: "Sharpe Ratio",
              value: "1.85"
            },
            {
              id: "3",
              title: "Asset Preservation",
              subtitle: "Capital protection during market downturns",
              category: "Max Drawdown",
              value: "-8.1%"
            }
          ]}
        />
      </div>

      <FooterLogoReveal 
        logoText="SmartMoney"
        logoLineHeight={1.2}
      />
    </ThemeProvider>
  );
}