"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Gift, HelpCircle } from "lucide-react";

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

  const navLinks = [
    { href: "/", label: "Home" },
    { href: "/features", label: "Features" },
    { href: "/pricing", label: "Pricing" },
    { href: "/about", label: "About" },
    { href: "/contact", label: "Contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="large"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="OpusClip"
          navItems={navItems}
          button={{
            text: "Start Free",
            href: "#pricing",
          }}
        />
      </div>

      <div id="pricing-hero" data-section="pricing-hero" className="mx-auto px-4 md:px-6">
        <HeroLogo
          logoText="OpusClip Pricing"
          description="Simple, transparent pricing. One plan, unlimited features, forever free."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BF8nYLAeDcNMjxCzQZn47kydbi/a-modern-sleek-video-editing-dashboard-i-1774159923054-24485574.png?_wi=2"
          imageAlt="OpusClip pricing dashboard"
          buttonAnimation="slide-up"
          buttons={[
            {
              text: "Get Started Now",
              href: "/",
            },
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing" className="mx-auto px-4 md:px-6">
        <PricingCardOne
          title="Always Free. Forever."
          description="No hidden fees, no paywalls, no surprise charges. OpusClip is completely free for everyone, everywhere."
          tag="No Subscription"
          tagIcon={Gift}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          plans={[
            {
              id: "free",
              badge: "Forever Free",
              badgeIcon: Gift,
              price: "$0",
              subtitle: "Everything included",
              features: [
                "Unlimited video uploads",
                "AI-powered highlight detection",
                "Smart caption generation",
                "Multi-format export",
                "Direct YouTube posting",
                "Direct Instagram posting",
                "Schedule posts up to 30 days ahead",
                "50+ language support",
                "Premium customer support",
              ],
            },
          ]}
        />
      </div>

      <div id="pricing-faq" data-section="pricing-faq" className="mx-auto px-4 md:px-6">
        <FaqDouble
          title="Pricing Questions Answered"
          description="Everything you need to know about OpusClip's free pricing model."
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "faq-pricing-1",
              title: "Will there ever be a paid tier?",
              content: "We're committed to keeping OpusClip free for all users. Our business model is based on demonstrating value and building a large user base, not paywalls. Premium features, if ever introduced, would be optional add-ons while core functionality remains completely free.",
            },
            {
              id: "faq-pricing-2",
              title: "Are there any usage limits?",
              content: "No. You can upload unlimited videos, create unlimited clips, generate captions in any language, and post to social media as many times as you want. Everything is truly unlimited.",
            },
            {
              id: "faq-pricing-3",
              title: "Do you charge for storage?",
              content: "No storage fees. Your clips and projects are stored securely in the cloud at no cost. You maintain full access to all your content, and we never delete your work due to inactivity.",
            },
            {
              id: "faq-pricing-4",
              title: "How do you keep OpusClip free?",
              content: "We're funded by venture capital and strategic partners who believe in our mission to democratize video editing. Our long-term revenue model focuses on optional enterprise features and partnerships, not individual user fees.",
            },
            {
              id: "faq-pricing-5",
              title: "Can I use OpusClip commercially?",
              content: "Absolutely. Whether you're creating content for personal use or commercial purposes, you can use all OpusClip features at no cost. Agencies, studios, and content creators all use OpusClip for paid client work.",
            },
            {
              id: "faq-pricing-6",
              title: "What if I need custom features?",
              content: "Contact our support team about enterprise solutions. We offer custom integrations, API access, and priority support for organizations with unique requirements.",
            },
          ]}
        />
      </div>

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