"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { CheckCircle, TrendingUp, Award } from 'lucide-react';
import Link from 'next/link';

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLarge"
      background="blurBottom"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" },
          ]}
          brandName="WebVitrina"
          bottomLeftText="Strategic Web Design"
          bottomRightText="hello@webvitrina.it"
        />
      </div>

      {/* Portfolio Intro */}
      <div id="portfolio-intro" data-section="portfolio-intro" className="mx-auto px-4 md:px-6">
        <MediaAbout
          title="Our Portfolio of Successful Local Business Websites"
          description="See the websites we've built for local businesses across industries. Each project demonstrates our commitment to creating conversion-focused designs that drive calls, leads, and customers. These are real websites, built for real businesses, delivering real results."
          tag="Portfolio"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/a-professional-web-design-team-working-c-1772481393010-20c338ee.png?_wi=3"
          imageAlt="WebVitrina portfolio showcase"
          buttons={[
            { text: "Book Free Consultation", href: "/contact" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      {/* Portfolio Projects */}
      <div id="portfolio-projects" data-section="portfolio-projects" className="mx-auto px-4 md:px-6">
        <ProductCardFour
          products={[
            {
              id: "1",
              name: "Luigi's Pizzeria",
              price: "$3,000",
              variant: "Restaurant - Modern & Elegant",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/modern-restaurant-website-design-showcas-1772481396855-a20f944f.png?_wi=2",
              imageAlt: "Luigi's Pizzeria website"
            },
            {
              id: "2",
              name: "Marco Plumbing Services",
              price: "$2,500",
              variant: "Services - Emergency Focused",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/professional-plumbing-service-website-fe-1772481398203-8167a6d1.png?_wi=2",
              imageAlt: "Marco Plumbing website"
            },
            {
              id: "3",
              name: "FitZone Gym",
              price: "$3,500",
              variant: "Fitness - Membership Driven",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/modern-fitness-gym-website-design-with-c-1772481398132-f3404b9c.png?_wi=2",
              imageAlt: "FitZone Gym website"
            },
            {
              id: "4",
              name: "Dr. Rossi Dental Studio",
              price: "$2,800",
              variant: "Healthcare - Patient Focused",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/professional-dental-office-website-showc-1772481404977-6eac484e.png?_wi=2",
              imageAlt: "Dr. Rossi Dental Studio website"
            },
            {
              id: "5",
              name: "Elegance Hair Salon",
              price: "$2,200",
              variant: "Beauty - Portfolio Focused",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/beauty-salon-website-showcasing-stylists-1772481395714-ac41d4af.png?_wi=2",
              imageAlt: "Elegance Hair Salon website"
            },
            {
              id: "6",
              name: "TechRepair Pro",
              price: "$2,600",
              variant: "Services - Technical",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/a-professional-services-website-accounti-1772481393496-1f7d6de2.png?_wi=2",
              imageAlt: "TechRepair Pro website"
            }
          ]}
          title="Featured Projects Across Industries"
          description="Real websites delivering real results for local businesses"
          tag="Case Studies"
          tagIcon={Award}
          tagAnimation="slide-up"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "View More Cases", href: "/contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      {/* Portfolio Impact */}
      <div id="portfolio-impact" data-section="portfolio-impact" className="mx-auto px-4 md:px-6">
        <MetricCardEleven
          metrics={[
            {
              id: "1",
              value: "87",
              title: "Active Client Websites",
              description: "Successfully launched and growing",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/portfolio-restaurant-1772481396855-a20f944f.png",
              imageAlt: "Client websites"
            },
            {
              id: "2",
              value: "340%",
              title: "Average Traffic Increase",
              description: "Within 12 months of launch",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/comprehensive-analytics-dashboard-displa-1772481393885-8549e572.png?_wi=3",
              imageAlt: "Traffic growth"
            },
            {
              id: "3",
              value: "94%",
              title: "Client Retention Rate",
              description: "Long-term partnerships",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/client-satisfaction-and-testimonial-show-1772481396661-8966786b.png?_wi=2",
              imageAlt: "Client satisfaction"
            }
          ]}
          title="Portfolio Impact"
          description="The results speak for themselves"
          tag="Metrics"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="WebVitrina"
          leftLink={{ text: "Privacy Policy", href: "#privacy" }}
          rightLink={{ text: "Terms of Service", href: "#terms" }}
        />
      </div>
    </ThemeProvider>
  );
}