"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Zap, Star, Crown, Sparkles, TrendingUp } from 'lucide-react';

export default function PricingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="blurBottom"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="UrbanStyle"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Shop", id: "/products" },
            { name: "About", id: "/about" },
            { name: "Pricing", id: "/pricing" }
          ]}
          button={{
            text: "Contact Us",
            href: "/contact"
          }}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Membership Tiers & Benefits"
          description="Choose the perfect membership plan to unlock exclusive benefits, discounts, and access to limited collections tailored to your urban fashion needs."
          tag="Membership Plans"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          carouselMode="buttons"
          plans={[
            {
              id: "basic",
              badge: "Popular",
              badgeIcon: Star,
              price: "Free",
              subtitle: "Perfect to get started with UrbanStyle",
              buttons: [
                { text: "Get Started", href: "/contact" }
              ],
              features: [
                "Access to all products",
                "Standard shipping",
                "Member-exclusive sales",
                "10% discount on first purchase",
                "Email newsletters",
                "Style inspiration blog access"
              ]
            },
            {
              id: "premium",
              badge: "Best Value",
              badgeIcon: Crown,
              price: "$4.99/mo",
              subtitle: "Premium benefits and enhanced shopping experience",
              buttons: [
                { text: "Subscribe Now", href: "/contact" }
              ],
              features: [
                "Everything in Free plan",
                "Free shipping on all orders",
                "Priority customer support",
                "15% discount on all purchases",
                "Early access to new collections",
                "Exclusive member-only items",
                "Birthday special discount",
                "Quarterly style guide"
              ]
            },
            {
              id: "elite",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              price: "$9.99/mo",
              subtitle: "Ultimate urban fashion experience with VIP treatment",
              buttons: [
                { text: "Join Elite Club", href: "/contact" }
              ],
              features: [
                "Everything in Premium plan",
                "Express shipping (1-2 days)",
                "24/7 VIP support hotline",
                "25% discount on all purchases",
                "Personal styling consultations",
                "Exclusive collaborative collections",
                "Annual gift box ($100 value)",
                "Free alterations and tailoring",
                "First access to limited drops"
              ]
            }
          ]}
        />
      </div>

      <div id="membership-value" data-section="membership-value">
        <MetricCardSeven
          title="Membership Value & Savings"
          description="Discover how much our members save and the exclusive benefits they enjoy with each membership tier"
          tag="Member Benefits"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          carouselMode="buttons"
          metrics={[
            {
              id: "1",
              value: "25%",
              title: "Maximum Discount Available",
              items: ["Elite members save up to 25%", "Applies to all purchases", "Stacks with seasonal sales"]
            },
            {
              id: "2",
              value: "$200+",
              title: "Average Annual Savings",
              items: ["Based on Elite membership", "Includes shipping + discounts", "Additional value from exclusives"]
            },
            {
              id: "3",
              value: "1-2 Days",
              title: "Express Shipping Speed",
              items: ["Premium & Elite members", "Available nationwide", "Free with membership"]
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="UrbanStyle"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Shop", href: "/products" },
                { label: "About", href: "/about" },
                { label: "Pricing", href: "/pricing" }
              ]
            },
            {
              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "FAQ", href: "#" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Accessibility", href: "#" },
                { label: "Sustainability", href: "#" }
              ]
            },
            {
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "TikTok", href: "https://tiktok.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}