"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { TrendingUp, BarChart3, Heart } from "lucide-react";

const navItems = [
  { name: "Services", id: "services" },
  { name: "Portfolio", id: "portfolio" },
  { name: "Insights", id: "blog" },
  { name: "Testimonials", id: "testimonials" },
  { name: "Contact", id: "contact" },
];

const footerColumns = [
  {
    title: "Services",    items: [
      { label: "Short-Form Content", href: "/services" },
      { label: "Long-Form Production", href: "/services" },
      { label: "Strategy Consulting", href: "/services" },
      { label: "Analytics & Optimization", href: "/services" },
    ],
  },
  {
    title: "Company",    items: [
      { label: "About Us", href: "/about" },
      { label: "Our Process", href: "#process" },
      { label: "Case Studies", href: "/portfolio" },
      { label: "Careers", href: "/careers" },
    ],
  },
  {
    title: "Resources",    items: [
      { label: "Content Blog", href: "/blog" },
      { label: "Trend Reports", href: "/trends" },
      { label: "Creator Community", href: "/community" },
      { label: "Contact", href: "#contact" },
    ],
  },
];

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmall"
      background="noiseDiagonalGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={{ text: "Start Growing", href: "#contact" }}
          brandName="ViralFlow"
        />
      </div>

      {/* Portfolio Showcase */}
      <div id="portfolio" data-section="portfolio">
        <BlogCardThree
          title="Recent Campaign Highlights"
          description="Explore our most successful content creations that achieved millions of views, engagement spikes, and real business results."
          tag="Case Studies"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          blogs={[
            {
              id: "1",              category: "Short-Form Campaign",              title: "From 0 to 2M Views: TikTok Campaign for Fashion Brand",              excerpt:
                "Strategic trending audio integration and trend-jacking resulted in viral momentum and 15x audience growth in 30 days.",              imageSrc:
                "http://img.b2bpic.net/free-photo/young-woman-organizing-live-shop_23-2149947506.jpg",              imageAlt: "Fashion brand TikTok campaign",              authorName: "Alex Rivera",              authorAvatar:
                "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              date: "Jan 18, 2025"},
            {
              id: "2",              category: "Long-Form Content",              title: "YouTube Series That Converted: Behind-the-Scenes Documentary Series",              excerpt:
                "A 10-part YouTube series that converted 8% of viewers into paying customers through authentic storytelling and strategic CTAs.",              imageSrc:
                "http://img.b2bpic.net/free-photo/man-filming-with-professional-camera-new-movie_23-2149066385.jpg",              imageAlt: "Documentary series thumbnail",              authorName: "Jordan Chen",              authorAvatar:
                "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              date: "Jan 12, 2025"},
            {
              id: "3",              category: "Cross-Platform",              title: "Omnichannel Content Ecosystem: From Reels to Email Conversions",              excerpt:
                "Integrated Instagram Reels, TikToks, and YouTube shorts that funneled 50K followers into an email list with 35% open rates.",              imageSrc:
                "http://img.b2bpic.net/free-vector/marketing-conversion-funnel_23-2148021286.jpg",              imageAlt: "Multi-platform content funnel",              authorName: "Sam Morgan",              authorAvatar:
                "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",              date: "Jan 5, 2025"},
            {
              id: "4",              category: "Viral Strategy",              title: "Trend Analysis & Prediction: Staying 2 Weeks Ahead",              excerpt:
                "Our proprietary trend-forecasting approach helped clients capitalize on emerging trends before saturation, achieving 10x average engagement.",              imageSrc:
                "http://img.b2bpic.net/free-photo/analyzing-business-chart_1098-19461.jpg",              imageAlt: "Trend analytics dashboard",              authorName: "Casey Phillips",              authorAvatar:
                "http://img.b2bpic.net/free-photo/close-up-executive-with-white-shirt-blue-suit_1139-135.jpg",              date: "Dec 28, 2024"},
            {
              id: "5",              category: "Community Growth",              title: "From Niche to Mainstream: Community-Driven Content Strategy",              excerpt:
                "Leveraged micro-communities and niche creators to build an authentic audience that grew from 50K to 500K in 6 months.",              imageSrc:
                "http://img.b2bpic.net/free-photo/happy-friends-looking-social-media-smartphone_53876-102034.jpg",              imageAlt: "Community growth metrics",              authorName: "Morgan West",              authorAvatar:
                "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg",              date: "Dec 20, 2024"},
          ]}
        />
      </div>

      {/* Portfolio Results */}
      <div id="portfolio-metrics" data-section="portfolio-metrics">
        <MetricCardTwo
          title="Portfolio Performance"
          description="Aggregate results from all featured campaigns and case studies."
          tag="Impact"
          tagIcon={BarChart3}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "150+",              description: "Successful Campaigns Delivered"},
            {
              id: "2",              value: "8.2%",              description: "Average Engagement Rate"},
            {
              id: "3",              value: "500M+",              description: "Total Views Generated"},
            {
              id: "4",              value: "300%",              description: "Average Audience Growth"},
          ]}
        />
      </div>

      {/* Client Testimonials from Portfolio */}
      <div id="portfolio-testimonials" data-section="portfolio-testimonials">
        <TestimonialCardOne
          title="Portfolio Client Testimonials"
          description="What our portfolio clients have to say about working with ViralFlow on their most ambitious content projects."
          tag="Client Voices"
          tagIcon={Heart}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Victoria Laurent",              role: "Marketing Director",              company: "Fashion Forward Inc",              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",              imageAlt: "Victoria Laurent"},
            {
              id: "2",              name: "Marcus Thompson",              role: "CEO",              company: "TechGrow Startups",              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Marcus Thompson"},
            {
              id: "3",              name: "Sarah Okonkwo",              role: "Content Lead",              company: "Beauty Collective",              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",              imageAlt: "Sarah Okonkwo"},
          ]}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 ViralFlow. All rights reserved. | Built for content creators, powered by data."
        />
      </div>
    </ThemeProvider>
  );
}