"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Team", id: "/team" },
            { name: "Insights", id: "/insights" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="Next Year"
        />
      </div>

      <div id="services-hero" data-section="services-hero">
        <HeroLogoBillboardSplit
          logoText="OUR SERVICES"
          description="Comprehensive investment solutions designed to grow and protect your wealth through every market cycle."
          buttons={[
            { text: "Schedule Consultation", href: "/contact" },
            { text: "Back to Home", href: "/" }
          ]}
          layoutOrder="default"
          background={{ variant: "radial-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-employees-looking-business-document_1098-1850.jpg"
          imageAlt="Investment services overview"
          frameStyle="card"
        />
      </div>

      <div id="services-detailed" data-section="services-detailed">
        <FeatureCardEight
          title="Comprehensive Wealth Management Solutions"
          description="Each service is designed with your unique financial goals and circumstances in mind"
          features={[
            {
              id: 1,
              title: "Personalized Portfolio Management",              description: "Custom-built investment portfolios aligned with your risk tolerance, time horizon, and financial objectives, with continuous monitoring and rebalancing.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-employees-looking-business-document_1098-1850.jpg",              imageAlt: "Portfolio management services"
            },
            {
              id: 2,
              title: "Wealth Advisory & Planning",              description: "Strategic guidance on overall wealth management, including investment strategy, tax efficiency, and multi-generational planning.",              imageSrc: "https://img.b2bpic.net/free-photo/businesswomen-doing-interview_1098-663.jpg",              imageAlt: "Wealth advisory services"
            },
            {
              id: 3,
              title: "Retirement Income Planning",              description: "Comprehensive retirement strategies ensuring adequate income, tax optimization, and sustainable drawdown rates throughout retirement.",              imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-pointing-increase-sales_1098-1851.jpg",              imageAlt: "Retirement planning services"
            },
            {
              id: 4,
              title: "Estate & Succession Planning",              description: "Multi-jurisdictional estate planning, trust structuring, and succession strategies to preserve wealth for future generations efficiently.",              imageSrc: "https://img.b2bpic.net/free-photo/businesswomen-doing-interview_1098-663.jpg",              imageAlt: "Estate planning services"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="services-pricing" data-section="services-pricing">
        <PricingCardFive
          title="Service Packages"
          description="Flexible pricing structures tailored to your portfolio size and service requirements"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "essential",              tag: "Essential Package",              price: "1.25%",              period: "/year",              description: "Complete portfolio management for assets up to $2 million with quarterly reviews and ongoing advisory support.",              button: { text: "Learn More", href: "/contact" },
              featuresTitle: "Included Features:",              features: [
                "Portfolio management & monitoring",                "Quarterly performance reports",                "Annual strategy review",                "Tax loss harvesting",                "Investment rebalancing"
              ]
            },
            {
              id: "premier",              tag: "Premier Package",              price: "0.85%",              period: "/year",              description: "Enhanced wealth management for $2-5 million portfolios with premium advisory services and wealth planning.",              button: { text: "Learn More", href: "/contact" },
              featuresTitle: "Included Features:",              features: [
                "All Essential features",                "Comprehensive wealth planning",                "Semi-annual strategy reviews",                "Tax optimization strategies",                "Estate planning consultation",                "Dedicated relationship manager"
              ]
            },
            {
              id: "elite",              tag: "Elite Package",              price: "0.55%",              period: "/year",              description: "Premier wealth management for portfolios exceeding $5 million with personalized service and multi-generational planning.",              button: { text: "Learn More", href: "/contact" },
              featuresTitle: "Included Features:",              features: [
                "All Premier features",                "Multi-generational planning",                "Alternative investment access",                "Private investment opportunities",                "Quarterly advisor meetings",                "24/7 priority access",                "Customized reporting"
              ]
            }
          ]}
        />
      </div>

      <footer className="bg-foreground text-background py-12">
        <div className="mx-auto px-4 md:px-6 max-w-7xl">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="md:col-span-2">
              <h3 className="text-xl font-semibold mb-4">Next Year</h3>
              <p className="text-background/80 mb-4">
                Transforming wealth through intelligent investment strategies and expert guidance.
              </p>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Navigation</h4>
              <nav className="space-y-2">
                <Link href="/" className="block text-background/80 hover:text-background transition-colors">
                  Home
                </Link>
                <Link href="/services" className="block text-background/80 hover:text-background transition-colors">
                  Services
                </Link>
                <Link href="/team" className="block text-background/80 hover:text-background transition-colors">
                  Team
                </Link>
                <Link href="/insights" className="block text-background/80 hover:text-background transition-colors">
                  Insights
                </Link>
                <Link href="/contact" className="block text-background/80 hover:text-background transition-colors">
                  Contact
                </Link>
              </nav>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Contact</h4>
              <div className="text-background/80">
                <p>Schedule a consultation to discuss your investment goals.</p>
              </div>
            </div>
          </div>
          <div className="border-t border-background/20 mt-8 pt-8 text-center text-background/60">
            <p>&copy; 2025 Next Year Investment Agency. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </ThemeProvider>
  );
}