"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import Link from "next/link";

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

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="SponsorDesk"
          bottomLeftText="HR & Legal Solutions"
          bottomRightText="support@sponsordesk.com"
        />
      </div>

      <div id="pricing-hero" data-section="pricing-hero" className="mx-auto px-4 md:px-6 py-20">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-5xl md:text-6xl font-bold mb-6 text-foreground">
            Simple, Transparent Pricing
          </h1>
          <p className="text-xl text-foreground/70 mb-12">
            Choose the perfect plan for your organization. Scale as you grow with flexible pricing that matches your needs.
          </p>
        </div>
      </div>

      <div id="pricing-plans" data-section="pricing-plans" className="mx-auto px-4 md:px-6 py-20">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Starter Plan */}
            <div className="rounded-2xl bg-card border border-accent p-8 hover:shadow-lg transition-shadow">
              <h3 className="text-2xl font-bold mb-2 text-foreground">Starter</h3>
              <p className="text-foreground/60 mb-6">Perfect for small teams</p>
              <div className="mb-6">
                <span className="text-4xl font-bold text-primary-cta">$299</span>
                <span className="text-foreground/60 ml-2">/month</span>
              </div>
              <button className="w-full bg-primary-cta hover:bg-primary-cta/90 text-primary-cta-text font-semibold py-3 rounded-full mb-8 transition-colors">
                Get Started
              </button>
              <ul className="space-y-4">
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  Up to 100 employees
                </li>
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  Document storage
                </li>
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  Expiry reminders
                </li>
                <li className="flex items-center text-foreground/50">
                  <span className="text-accent mr-3">✗</span>
                  API access
                </li>
                <li className="flex items-center text-foreground/50">
                  <span className="text-accent mr-3">✗</span>
                  Priority support
                </li>
              </ul>
            </div>

            {/* Professional Plan */}
            <div className="rounded-2xl bg-primary-cta/10 border-2 border-primary-cta p-8 shadow-lg md:scale-105 relative">
              <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                <span className="bg-primary-cta text-primary-cta-text px-4 py-1 rounded-full text-sm font-semibold">
                  Most Popular
                </span>
              </div>
              <h3 className="text-2xl font-bold mb-2 text-foreground mt-4">Professional</h3>
              <p className="text-foreground/60 mb-6">For growing companies</p>
              <div className="mb-6">
                <span className="text-4xl font-bold text-primary-cta">$799</span>
                <span className="text-foreground/60 ml-2">/month</span>
              </div>
              <button className="w-full bg-primary-cta hover:bg-primary-cta/90 text-primary-cta-text font-semibold py-3 rounded-full mb-8 transition-colors">
                Start Free Trial
              </button>
              <ul className="space-y-4">
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  Up to 500 employees
                </li>
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  Advanced workflows
                </li>
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  Team collaboration
                </li>
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  API access
                </li>
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  Priority support
                </li>
              </ul>
            </div>

            {/* Enterprise Plan */}
            <div className="rounded-2xl bg-card border border-accent p-8 hover:shadow-lg transition-shadow">
              <h3 className="text-2xl font-bold mb-2 text-foreground">Enterprise</h3>
              <p className="text-foreground/60 mb-6">For large organizations</p>
              <div className="mb-6">
                <span className="text-4xl font-bold text-primary-cta">Custom</span>
                <span className="text-foreground/60 ml-2">pricing</span>
              </div>
              <button className="w-full bg-secondary-cta hover:bg-secondary-cta/90 text-secondary-cta-text font-semibold py-3 rounded-full mb-8 transition-colors border border-primary-cta">
                Contact Sales
              </button>
              <ul className="space-y-4">
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  Unlimited employees
                </li>
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  Custom integrations
                </li>
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  Dedicated account manager
                </li>
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  SLA guarantee
                </li>
                <li className="flex items-center text-foreground">
                  <span className="text-primary-cta mr-3">✓</span>
                  24/7 dedicated support
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div id="pricing-faq" data-section="pricing-faq" className="mx-auto px-4 md:px-6 py-20 bg-card">
        <div className="max-w-3xl mx-auto">
          <h2 className="text-4xl font-bold mb-12 text-center text-foreground">Pricing FAQ</h2>
          <div className="space-y-6">
            <details className="border border-accent rounded-lg p-6 cursor-pointer group">
              <summary className="flex justify-between items-center font-semibold text-foreground text-lg">
                Can I change my plan anytime?
                <span className="group-open:rotate-180 transition-transform">▼</span>
              </summary>
              <p className="mt-4 text-foreground/70">
                Yes, you can upgrade or downgrade your plan at any time. Changes take effect at the start of your next billing cycle.
              </p>
            </details>

            <details className="border border-accent rounded-lg p-6 cursor-pointer group">
              <summary className="flex justify-between items-center font-semibold text-foreground text-lg">
                Do you offer discounts for annual billing?
                <span className="group-open:rotate-180 transition-transform">▼</span>
              </summary>
              <p className="mt-4 text-foreground/70">
                Yes, we offer 20% discount when you pay annually. Contact our sales team for custom pricing options.
              </p>
            </details>

            <details className="border border-accent rounded-lg p-6 cursor-pointer group">
              <summary className="flex justify-between items-center font-semibold text-foreground text-lg">
                What payment methods do you accept?
                <span className="group-open:rotate-180 transition-transform">▼</span>
              </summary>
              <p className="mt-4 text-foreground/70">
                We accept all major credit cards, bank transfers, and wire payments for enterprise customers. All transactions are secure and encrypted.
              </p>
            </details>
          </div>
        </div>
      </div>

      <div id="pricing-cta" data-section="pricing-cta" className="mx-auto px-4 md:px-6 py-20">
        <div className="max-w-2xl mx-auto bg-primary-cta rounded-2xl p-12 text-center">
          <h2 className="text-3xl font-bold mb-4 text-primary-cta-text">
            Ready to get started?
          </h2>
          <p className="text-primary-cta-text/90 mb-8">
            Join 500+ companies managing their employee documents efficiently.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button className="bg-primary-cta-text hover:bg-primary-cta-text/90 text-primary-cta font-semibold px-8 py-3 rounded-full transition-colors">
              Start Free Trial
            </button>
            <button className="border-2 border-primary-cta-text hover:bg-primary-cta-text/10 text-primary-cta-text font-semibold px-8 py-3 rounded-full transition-colors">
              Schedule Demo
            </button>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer" className="mx-auto px-4 md:px-6 py-16 bg-card border-t border-accent">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
            <div>
              <h3 className="font-bold text-foreground mb-6">Product</h3>
              <ul className="space-y-3">
                <li>
                  <Link href="/" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Features
                  </Link>
                </li>
                <li>
                  <Link href="/pricing" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Pricing
                  </Link>
                </li>
                <li>
                  <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Security
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold text-foreground mb-6">Company</h3>
              <ul className="space-y-3">
                <li>
                  <Link href="/about" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    About
                  </Link>
                </li>
                <li>
                  <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Blog
                  </a>
                </li>
                <li>
                  <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Careers
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold text-foreground mb-6">Resources</h3>
              <ul className="space-y-3">
                <li>
                  <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Documentation
                  </a>
                </li>
                <li>
                  <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Help Center
                  </a>
                </li>
                <li>
                  <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Contact
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div className="border-t border-accent pt-8">
            <p className="text-foreground/60 text-center">
              © 2025 SponsorDesk. All rights reserved.
            </p>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}