"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Award } from "lucide-react";

const navItems = [
  { name: "Home", id: "/" },
  { name: "About", id: "/about" },
  { name: "Services", id: "/services" },
  { name: "Portfolio", id: "/portfolio" },
  { name: "Pricing", id: "/pricing" },
];

export default function PortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="large"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="MDX" navItems={navItems} />
      </div>

      {/* Featured Projects Section */}
      <div id="featured-projects" data-section="featured-projects">
        <FeatureCardThree
          title="Featured Projects"
          description="A selection of our most successful transformations—local businesses that went from invisible to industry leaders."
          features={[
            {
              id: "01",
              title: "Local Gym Fitness",
              description:
                "Redesigned their entire digital presence with a modern booking system. Result: 150% increase in membership sign-ups within 6 months.",
              imageSrc:
                "http://img.b2bpic.net/free-vector/sport-landing-page-with-photo_23-2148372646.jpg",
              imageAlt: "Gym website redesign",
            },
            {
              id: "02",
              title: "Rodriguez Landscaping",
              description:
                "Built a portfolio-showcase website that positioned them as the premium landscaping service. Result: $200K+ in additional annual contracts.",
              imageSrc:
                "http://img.b2bpic.net/free-psd/flat-design-landscaping-service-landing-page_23-2151058618.jpg",
              imageAlt: "Landscaping business website",
            },
            {
              id: "03",
              title: "Morning Brew Coffee",
              description:
                "Created a beautiful e-commerce site with online ordering. Result: 40% of revenue now from web orders within 3 months.",
              imageSrc:
                "http://img.b2bpic.net/free-vector/flat-design-coffee-landing-page_23-2149190883.jpg",
              imageAlt: "Coffee shop website",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Case Studies Section */}
      <div id="case-studies" data-section="case-studies">
        <FeatureCardThree
          title="Why Our Portfolio Matters"
          description="These aren't just websites—they're proven business tools that deliver measurable, sustainable growth."
          features={[
            {
              id: "01",
              title: "Real Revenue Impact",
              description:
                "Every project in our portfolio was chosen because it generated tangible business results: more leads, higher conversions, and increased revenue.",
              imageSrc:
                "http://img.b2bpic.net/free-vector/marketing-conversion-flat-background_23-2148000676.jpg?_wi=3",
              imageAlt: "Revenue growth metrics",
            },
            {
              id: "02",
              title: "Strategic Excellence",
              description:
                "Our work showcases depth of strategy, not just superficial design. Each site solves specific business challenges and opportunities.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/business-scene-top-view_23-2147626514.jpg?_wi=4",
              imageAlt: "Strategic web design",
            },
            {
              id: "03",
              title: "Diverse Industries",
              description:
                "From fitness and landscaping to hospitality and services, we've helped businesses across industries establish digital dominance.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/focus-concentrate-clarity-determine-inspiration-concept_53876-133862.jpg?_wi=4",
              imageAlt: "Multi-industry expertise",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Portfolio CTA */}
      <div id="portfolio-cta" data-section="portfolio-cta">
        <ContactCTA
          tag="Ready to Be Next?"
          tagIcon={Award}
          title="Let's Build Your Success Story"
          description="Your industry-leading website is just one strategic conversation away. Let's discuss how we can transform your business."
          buttons={[
            { text: "Schedule a Consultation", href: "/booking" },
            { text: "Discuss Your Project", href: "/contact" },
          ]}
          background={{ variant: "circleGradient" }}
          useInvertedBackground={false}
        />
      </div>

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