"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Camera, TrendingUp, Instagram, Linkedin, Twitter } from 'lucide-react';
import Link from "next/link";

export default function PortfolioPage() {
  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: "Home", id: "/" },
            { 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="featured-models" data-section="featured-models">
        <ProductCardOne
          title="Our Elite Talent Roster"
          description="Meet our distinguished models who grace runways, editorial spreads, and luxury campaigns worldwide"
          tag="Featured Models"
          tagIcon={Camera}
          products={[
            {
              id: "1",              name: "Sophia Laurent",              price: "High Fashion & Runway",              imageSrc: "https://img.b2bpic.net/free-photo/young-transgender-person-looking-away_23-2148827036.jpg",              imageAlt: "Sophia Laurent - Elite high fashion model"
            },
            {
              id: "2",              name: "Marcus Sterling",              price: "Commercial & Editorial",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-brunette-woman-evening-dress-smiling_176420-3742.jpg",              imageAlt: "Marcus Sterling - Versatile commercial and editorial model"
            },
            {
              id: "3",              name: "Aria Chen",              price: "Editorial Specialist",              imageSrc: "https://img.b2bpic.net/free-photo/young-transgender-person-using-hair-net_23-2148827030.jpg",              imageAlt: "Aria Chen - Editorial and artistic photography specialist"
            },
            {
              id: "4",              name: "Elena Rodriguez",              price: "Luxury Campaigns",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-brunette-woman-evening-dress-posing_176420-3741.jpg",              imageAlt: "Elena Rodriguez - Luxury brand campaign specialist"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[{ text: "Book Talent", href: "/contact" }]}
        />
      </div>

      <div id="portfolio-metrics" data-section="portfolio-metrics">
        <MetricCardEleven
          title="Portfolio Achievements"
          description="Showcasing our models' success across prestigious platforms and campaigns"
          tag="Success Stories"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",              value: "500+",              title: "Runway Shows",              description: "Elite fashion week appearances across global fashion capitals",              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 runway show photography"
            },
            {
              id: "2",              value: "1.2K+",              title: "Editorial Features",              description: "Magazine covers and editorial spreads in top fashion publications",              imageSrc: "https://img.b2bpic.net/free-photo/happy-attractive-woman-standing-gray-looking-camera_231208-9141.jpg",              imageAlt: "Editorial magazine photography session"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="specialized-talent" data-section="specialized-talent">
        <ProductCardOne
          title="Specialized Talent Categories"
          description="Our diverse roster spans multiple modeling verticals, each with unique expertise and market positioning"
          tag="Specializations"
          tagIcon={Camera}
          products={[
            {
              id: "5",              name: "Runway Division",              price: "Fashion Week Ready",              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: "Runway specialists for fashion week events"
            },
            {
              id: "6",              name: "Commercial Stars",              price: "Brand Ambassadors",              imageSrc: "https://img.b2bpic.net/free-photo/happy-attractive-woman-standing-gray-looking-camera_231208-9141.jpg",              imageAlt: "Commercial and brand campaign specialists"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[{ text: "Explore Categories", href: "/services" }]}
        />
      </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>
  );
}