"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import Link from 'next/link';
import { Award, Rocket, Star } from 'lucide-react';

export default function PortfolioPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "Portfolio", id: "portfolio" },
    { name: "About", id: "about" },
    { name: "Blog", id: "blog" },
  ];

  const footerColumns = [
    {
      title: "Services",
      items: [
        { label: "Social Strategy", href: "/#services" },
        { label: "Content Creation", href: "/#services" },
        { label: "Paid Advertising", href: "/#services" },
        { label: "Analytics", href: "/#services" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/about" },
        { label: "Portfolio", href: "/portfolio" },
        { label: "Blog", href: "/#blog" },
        { label: "Careers", href: "#" },
      ],
    },
    {
      title: "Connect",
      items: [
        { label: "Contact Us", href: "#contact" },
        { label: "Twitter", href: "https://twitter.com" },
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "Instagram", href: "https://instagram.com" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Cookie Policy", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Lumina Social"
          navItems={navItems}
          button={{
            text: "Get Started",
            href: "/contact",
          }}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardFour
          title="Complete Campaign Portfolio"
          description="Explore our comprehensive collection of client campaigns across diverse industries. Each project showcases our strategic expertise, creative excellence, and proven ability to deliver measurable business results through targeted social media strategies."
          tag="Our Work"
          tagIcon={Award}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          products={[
            {
              id: "campaign-1",
              name: "Fashion Brand Rebrand",
              price: "350% ROI",
              variant: "Influencer Collaboration",
              imageSrc: "http://img.b2bpic.net/free-psd/fall-autumn-template-design-social-media-post_23-2149062509.jpg?_wi=2",
              imageAlt: "Fashion brand social media campaign",
            },
            {
              id: "campaign-2",
              name: "Tech Startup Growth",
              price: "500K Followers",
              variant: "Organic Growth Strategy",
              imageSrc: "http://img.b2bpic.net/free-psd/architecture-project-instagram-posts-template_23-2150259229.jpg?_wi=2",
              imageAlt: "Tech startup social media growth",
            },
            {
              id: "campaign-3",
              name: "E-commerce Launch",
              price: "2.5M Impressions",
              variant: "Paid Campaign",
              imageSrc: "http://img.b2bpic.net/free-vector/mobile-phone-background-design_1343-57.jpg?_wi=2",
              imageAlt: "E-commerce product launch campaign",
            },
            {
              id: "campaign-4",
              name: "Luxury Lifestyle Brand",
              price: "8.2M Engagements",
              variant: "Premium Content Strategy",
              imageSrc: "http://img.b2bpic.net/free-photo/colorful-notepad-near-coffee-notepad_23-2147777787.jpg?_wi=2",
              imageAlt: "Luxury brand premium content",
            },
            {
              id: "campaign-5",
              name: "B2B SaaS Platform",
              price: "45% Conversion Lift",
              variant: "Lead Generation Focus",
              imageSrc: "http://img.b2bpic.net/free-photo/african-american-guy-studying-analytics-archived-data-project_482257-121442.jpg?_wi=2",
              imageAlt: "B2B SaaS marketing campaign",
            },
            {
              id: "campaign-6",
              name: "Non-profit Awareness",
              price: "2M+ Reach",
              variant: "Community Engagement",
              imageSrc: "http://img.b2bpic.net/free-photo/business-woman-hand-with-financial-charts-laptop-table_1232-4834.jpg?_wi=2",
              imageAlt: "Non-profit awareness campaign",
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Client Success Stories"
          cardTag="Trusted by leading brands across industries"
          cardTagIcon={Star}
          cardAnimation="slide-up"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-senior-expert-with-flipchart_1262-1745.jpg?_wi=2",
              imageAlt: "Sarah Johnson, CEO of TrendCo",
            },
            {
              id: "2",
              name: "Marcus Chen",
              imageSrc: "http://img.b2bpic.net/free-photo/man-listening-music-business-meeting_23-2148746263.jpg?_wi=2",
              imageAlt: "Marcus Chen, Founder of InnovateLabs",
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businesswoman-professional-intern-looking-camera-meeting_1163-4626.jpg?_wi=2",
              imageAlt: "Emily Rodriguez, Marketing Director at GrowthCo",
            },
            {
              id: "4",
              name: "David Kim",
              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-senior-businesswoman-sitting-meeting_1262-2246.jpg?_wi=2",
              imageAlt: "David Kim, CMO of BrandWorks",
            },
            {
              id: "5",
              name: "Jessica Taylor",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-red-haired-man_158595-3776.jpg?_wi=2",
              imageAlt: "Jessica Taylor, CEO of StyleUp Fashion",
            },
            {
              id: "6",
              name: "Alex Thompson",
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-ceo-speaking-ai-business-expo-front-entrepreneurs_482257-105931.jpg?_wi=2",
              imageAlt: "Alex Thompson, Founder of TechVenture",
            },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Interested in Your Next Campaign?"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Let's Discuss Your Social Media Goals"
          description="Ready to see your brand in our portfolio? Schedule a consultation with our team to explore how we can deliver exceptional results for your business."
          buttons={[
            { text: "Start Your Project", href: "mailto:hello@luminasocial.com" },
            { text: "Schedule Call", href: "tel:+1234567890" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "floatingGradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2024 Lumina Social. All rights reserved. Elevating brands through strategic social media excellence."
        />
      </div>
    </ThemeProvider>
  );
}