"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Zap, Sparkles, Crown } from "lucide-react";

export default function PricingPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "How It Works", id: "how-it-works" },
    { name: "Leagues", id: "leagues" },
    { name: "Stats", id: "stats" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Home", href: "/" },
        { label: "Leagues", href: "/leagues" },
        { label: "Pricing", href: "/pricing" },
      ],
    },
    {
      items: [
        { label: "About Us", href: "#" },
        { label: "Blog", href: "#" },
        { label: "Community", href: "#" },
        { label: "Careers", href: "#" },
      ],
    },
    {
      items: [
        { label: "Contact", href: "#" },
        { label: "Support", href: "#" },
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
      ],
    },
    {
      items: [
        { label: "Twitter", href: "https://twitter.com" },
        { label: "Facebook", href: "https://facebook.com" },
        { label: "Instagram", href: "https://instagram.com" },
        { label: "Discord", href: "https://discord.com" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="inset"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={navItems}
          brandName="FantasyRugby"
          button={{
            text: "Start Your Squad",
            href: "/",
          }}
        />
      </div>

      <div id="pricing-main" data-section="pricing-main">
        <PricingCardOne
          title="Choose Your Play Level"
          description="Whether you're a casual rugby fan or a competitive strategist, we have a plan that matches your ambitions and budget."
          tag="Transparent Pricing"
          tagAnimation="opacity"
          plans={[
            {
              id: "free",
              badge: "Free",
              badgeIcon: Zap,
              price: "£0",
              subtitle: "Perfect for casual fans",
              features: [
                "1 public league entry",
                "Basic squad drafting tools",
                "Live match scoring",
                "Weekly leaderboards",
                "Community access",
              ],
            },
            {
              id: "pro",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              price: "£4.99/month",
              subtitle: "For serious competitors",
              features: [
                "Unlimited public leagues",
                "5 private league entries",
                "Advanced player analytics",
                "Transfer recommendations",
                "Historical form data",
                "Priority match notifications",
                "Export squad & stats",
              ],
            },
            {
              id: "elite",
              badge: "Premium",
              badgeIcon: Crown,
              price: "£9.99/month",
              subtitle: "Competitive edge included",
              features: [
                "Everything in Pro",
                "Unlimited private leagues",
                "AI-powered squad optimization",
                "Real-time market alerts",
                "Advanced forecasting tools",
                "Custom league branding",
                "API access for integrations",
                "24/7 priority support",
              ],
            },
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={true}
          carouselMode="buttons"
          ariaLabel="Fantasy rugby pricing plans"
        />
      </div>

      <div id="pricing-comparison" data-section="pricing-comparison">
        <FeatureCardMedia
          title="What's Included in Each Plan"
          description="All plans give you access to core fantasy rugby features. Premium tiers unlock advanced tools, private league capacity, and competitive advantages."
          tag="Plan Breakdown"
          tagAnimation="blur-reveal"
          features={[
            {
              id: "free-tier",
              title: "Free Tier: Start Playing",
              description: "Ideal for newcomers and casual fans. Get the full fantasy rugby experience with squad drafting, live scoring, and community competition. Perfect way to test the platform before upgrading.",
              tag: "Entry Level",
              imageSrc: "http://img.b2bpic.net/free-photo/girl-texting-while-taking-break-gym-reads-message_1153-4184.jpg",
              imageAlt: "Free tier features",
              buttons: [],
            },
            {
              id: "pro-tier",
              title: "Pro Tier: Competitive Edge",
              description: "£4.99/month unlocks advanced analytics, transfer recommendations, and multi-league capacity. For players who want data-driven decisions and serious competition. Most popular choice among fantasy rugby strategists.",
              tag: "Popular Choice",
              imageSrc: "http://img.b2bpic.net/free-photo/muscular-wet-spartan-attacking-with-blade_651396-774.jpg",
              imageAlt: "Pro tier premium features",
              buttons: [],
            },
            {
              id: "elite-tier",
              title: "Elite Tier: Maximum Control",
              description: "£9.99/month includes unlimited private leagues, AI optimization, custom league branding, and API access. Built for league organizers, power users, and players who demand total control. Includes priority support.",
              tag: "Premium",
              imageSrc: "http://img.b2bpic.net/free-photo/african-american-staff-gathers-examines-monthly-revenue-balance_482257-130896.jpg",
              imageAlt: "Elite tier advanced tools",
              buttons: [],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
          ariaLabel="Detailed plan comparison"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="FantasyRugby"
          columns={footerColumns}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}