"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Briefcase, TrendingUp, Instagram, Linkedin, Twitter } from 'lucide-react';

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="large"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Alesha"
          navItems={[
            { name: "About", id: "/about" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "Services", id: "/services" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get in Touch",
            href: "/contact"
          }}
        />
      </div>

      <div id="core-services" data-section="core-services">
        <FeatureCardNineteen
          title="Comprehensive Talent Services"
          description="Strategic solutions tailored to model career development and client requirements"
          tag="Our Services"
          tagIcon={Briefcase}
          features={[
            {
              id: 1,
              tag: "Talent Management",
              title: "Career Development",
              subtitle: "Strategic guidance for sustainable growth",
              description: "We provide personalized career strategies, contract negotiation, portfolio development, and long-term planning to ensure our models achieve lasting success in the competitive fashion industry. Our experienced team works closely with each talent to identify opportunities and maximize potential.",
              imageSrc: "https://img.b2bpic.net/free-photo/seductive-close-up-photo-beautiful-blonde-girl-cocktail-silk-dress-seduces-someone-touching-her-lips-by-her-finger_639032-835.jpg",
              imageAlt: "Professional career development and guidance session",
              buttons: [{ text: "Learn More", href: "/contact" }]
            },
            {
              id: 2,
              tag: "Casting & Booking",
              title: "Premium Opportunities",
              subtitle: "Access to exclusive high-profile projects",
              description: "Leverage our extensive network with top brands, designers, production companies, and publications to secure premium casting opportunities, lucrative bookings, and career-defining collaborations with industry leaders worldwide.",
              imageSrc: "https://img.b2bpic.net/free-photo/happy-attractive-woman-standing-gray-looking-camera_231208-9141.jpg",
              imageAlt: "Professional casting and booking coordination",
              buttons: [{ text: "View Opportunities", href: "/portfolio" }]
            },
            {
              id: 3,
              tag: "Brand Partnerships",
              title: "Strategic Collaborations",
              subtitle: "Long-term brand ambassador programs",
              description: "We facilitate strategic partnerships between our talent and luxury brands, creating meaningful collaborations that extend beyond single campaigns. Our approach focuses on brand alignment and authentic representation that resonates with target audiences.",
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-women-testing-colours_23-2150538663.jpg",
              imageAlt: "Brand partnership strategy and collaboration",
              buttons: [{ text: "Partner With Us", href: "/contact" }]
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="service-impact" data-section="service-impact">
        <MetricCardEleven
          title="Service Excellence Metrics"
          description="Quantifiable results from our comprehensive talent management approach"
          tag="Performance"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",
              value: "2.5K+",
              title: "Annual Successful Bookings",
              description: "Client placements and project completions across all verticals",
              imageSrc: "https://img.b2bpic.net/free-photo/seductive-close-up-photo-beautiful-blonde-girl-cocktail-silk-dress-seduces-someone-touching-her-lips-by-her-finger_639032-835.jpg",
              imageAlt: "Successful booking and placement coordination"
            },
            {
              id: "2",
              value: "95%+",
              title: "Client Retention Rate",
              description: "Long-term partnerships with leading brands and agencies",
              imageSrc: "https://img.b2bpic.net/free-photo/happy-attractive-woman-standing-gray-looking-camera_231208-9141.jpg",
              imageAlt: "Long-term client relationship management"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="specialized-services" data-section="specialized-services">
        <FeatureCardNineteen
          title="Specialized Service Offerings"
          description="Advanced solutions for specific industry needs and niche markets"
          tag="Premium Services"
          tagIcon={Briefcase}
          features={[
            {
              id: 4,
              tag: "International Expansion",
              title: "Global Market Entry",
              subtitle: "Worldwide career opportunities",
              description: "Our international division facilitates global career expansion with comprehensive support including visa assistance, cultural adaptation coaching, and market-specific strategic planning for models entering new territories.",
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-women-testing-colours_23-2150538663.jpg",
              imageAlt: "International market expansion and global opportunities"
            },
            {
              id: 5,
              tag: "Digital & Social",
              title: "Digital Presence Management",
              subtitle: "Modern brand building strategies",
              description: "Comprehensive digital strategy including social media management, content creation, influencer partnerships, and online brand development to maximize visibility and engagement in today's digital-first landscape.",
              imageSrc: "https://img.b2bpic.net/free-photo/seductive-close-up-photo-beautiful-blonde-girl-cocktail-silk-dress-seduces-someone-touching-her-lips-by-her-finger_639032-835.jpg",
              imageAlt: "Digital brand management and social media strategy"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterCard
        logoText="Alesha"
        copyrightText="© 2025 Alesha Model Agency. All rights reserved."
        socialLinks={[
          { icon: Instagram, href: "https://instagram.com/alesha-models", ariaLabel: "Instagram" },
          { icon: Linkedin, href: "https://linkedin.com/company/alesha-models", ariaLabel: "LinkedIn" },
          { icon: Twitter, href: "https://twitter.com/alesha-models", ariaLabel: "Twitter" }
        ]}
      />
    </ThemeProvider>
  );
}