"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Check, DollarSign, Star, Zap } 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 PricingPage() {
  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>

      {/* Pricing Overview Section */}
      <div id="pricing-overview" data-section="pricing-overview">
        <MetricCardThree
          title="Transparent Pricing"
          description="Investment packages designed for local businesses at every stage of growth."
          metrics={[
            {
              id: "1",
              icon: DollarSign,
              title: "Starter",
              value: "$2,999",
            },
            {
              id: "2",
              icon: Star,
              title: "Professional",
              value: "$5,999",
            },
            {
              id: "3",
              icon: Zap,
              title: "Enterprise",
              value: "Custom",
            },
            {
              id: "4",
              icon: Check,
              title: "Support",
              value: "Included",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Package Details Section */}
      <div id="package-details" data-section="package-details">
        <FeatureCardThree
          title="What's Included"
          description="Every package includes strategic consultation, custom design, development, and launch support."
          features={[
            {
              id: "01",
              title: "Starter Package",
              description:
                "Perfect for establishing your online presence. Includes 5-page website, mobile optimization, contact form, and basic SEO setup.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/focus-concentrate-clarity-determine-inspiration-concept_53876-133862.jpg",
              imageAlt: "Starter package features",
            },
            {
              id: "02",
              title: "Professional Package",
              description:
                "Our most popular option. 8-page website, advanced SEO, booking system integration, analytics setup, and 3 months of support.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/business-scene-top-view_23-2147626514.jpg",
              imageAlt: "Professional package features",
            },
            {
              id: "03",
              title: "Enterprise Package",
              description:
                "Fully custom solutions for complex businesses. Unlimited pages, e-commerce, CRM integration, custom features, and ongoing optimization.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/unrecognizable-colleagues-standing-table-looking-design-projects_1098-20475.jpg",
              imageAlt: "Enterprise package features",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Pricing CTA */}
      <div id="pricing-cta" data-section="pricing-cta">
        <ContactCTA
          tag="Start Your Project"
          title="Choose Your Perfect Package"
          description="Ready to invest in your digital future? Let's find the package that's right for your business and get started today."
          buttons={[
            { text: "Book a Consultation", href: "/booking" },
            { text: "Get a Custom Quote", 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>
  );
}