"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Sparkles, DollarSign, Mail } from "lucide-react";

export default function PricingPage() {
  const navItems = [
    { name: "Features", id: "features" },
    { name: "Pricing", id: "pricing" },
    { name: "About", id: "about" },
    { name: "Blog", id: "blog" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Product",
      items: [
        { label: "Features", href: "#features" },
        { label: "Pricing", href: "#pricing" },
        { label: "Security", href: "#" },
        { label: "Status", href: "#" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/about" },
        { label: "Blog", href: "#" },
        { label: "Careers", href: "#" },
        { label: "Press", href: "#" },
      ],
    },
    {
      title: "Support",
      items: [
        { label: "Help Center", href: "#" },
        { label: "Contact", href: "#contact" },
        { label: "Terms", href: "#" },
        { label: "Privacy", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLarge"
      background="fluid"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="GradeOptim"
          bottomLeftText="Optimize Your Grades"
          bottomRightText="hello@gradeoptim.com"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your academic needs. Upgrade or downgrade anytime, no hidden fees."
          tag="Pricing"
          tagIcon={DollarSign}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          plans={[
            {
              id: "free",
              price: "Free",
              name: "Starter",
              buttons={[
                { text: "Get Started", href: "https://app.gradeoptim.com/signup" },
                { text: "Learn More", href: "#contact" },
              ]}
              features={[
                "Basic GPA calculator",
                "Single custom grading scale",
                "Grade tracking for 1 semester",
                "Email support",
              ]}
            },
            {
              id: "premium",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              price: "$8.99/mo",
              name: "Premium",
              buttons={[
                { text: "Start Free Trial", href: "https://app.gradeoptim.com/signup" },
                { text: "Chat to Sales", href: "#contact" },
              ]}
              features={[
                "All Starter features",
                "Unlimited custom grading scales",
                "Predictive GPA forecasting",
                "Performance trend graphs",
                "Risk scoring system",
                "AI recommendation engine",
                "Exam score predictor",
                "Priority email support",
              ]}
            },
            {
              id: "family",
              price: "$24.99/mo",
              name: "Family Plan",
              buttons={[
                { text: "Start Free Trial", href: "https://app.gradeoptim.com/signup" },
                { text: "Contact Sales", href: "#contact" },
              ]}
              features={[
                "All Premium features",
                "Up to 4 student accounts",
                "Parental monitoring dashboard",
                "Student progress reports",
                "Academic goal tracking",
                "24/7 priority support",
              ]}
            },
          ]}
          carouselMode="buttons"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Ready to Start?"
          tagIcon={Mail}
          title="Transform Your Academic Performance Today"
          description="Start your free trial and see how GradeOptim can help you achieve your academic goals. No credit card required."
          background={{ variant: "downward-rays-static" }}
          useInvertedBackground={false}
          inputPlaceholder="your.email@school.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APzrAl8FUR6Sq885GZcTzaJsFb/a-subtle-modern-educational-background-i-1772509353273-4ef8c2ce.png?_wi=2"
          imageAlt="Academic Success Background"
          logoText="GradeOptim"
          copyrightText="© 2025 GradeOptim. All rights reserved."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}