"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";

export default function PricingPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Features", id: "/features" },
    { name: "Pricing", id: "/pricing" },
    { name: "Solutions", id: "/solutions" },
    { name: "Testimonials", id: "/testimonials" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      {/* Navigation */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="SYS AI"
          navItems={navItems}
          button={{
            text: "Get Started",
            href: "https://demo.sys-ai.erp/signup",
          }}
          className="fixed top-4 left-4 right-4 z-50"
          buttonClassName="px-6 py-2"
        />
      </div>

      {/* Pricing Header */}
      <div id="pricing-header" data-section="pricing-header" className="pt-24 mx-auto px-4 md:px-6">
        <div className="py-12 md:py-20 text-center">
          <h1 className="text-4xl md:text-5xl font-extrabold mb-6 text-foreground">
            Flexible Enterprise Plans
          </h1>
          <p className="text-lg md:text-xl text-foreground/80 max-w-2xl mx-auto mb-8">
            Choose the perfect plan for your organization. All plans include implementation support, training, and dedicated account management.
          </p>
          <div className="flex justify-center gap-4">
            <button className="px-8 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-semibold hover:opacity-90 transition">
              Monthly Billing
            </button>
            <button className="px-8 py-3 bg-secondary-cta text-secondary-cta-text rounded-lg font-semibold border border-foreground/20 hover:bg-foreground/10 transition">
              Annual Billing (Save 20%)
            </button>
          </div>
        </div>
      </div>

      {/* Pricing Cards */}
      <div id="pricing-cards" data-section="pricing-cards" className="mx-auto px-4 md:px-6 py-12">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {/* Starter Plan */}
          <div className="rounded-lg bg-card shadow-sm border border-foreground/10 p-8 hover:shadow-md transition">
            <h3 className="text-2xl font-extrabold mb-2">Starter</h3>
            <p className="text-foreground/60 mb-6">Perfect for small teams</p>
            <div className="mb-6">
              <span className="text-4xl font-extrabold">$2,999</span>
              <span className="text-foreground/60">/month</span>
            </div>
            <button className="w-full px-6 py-3 bg-secondary-cta text-secondary-cta-text rounded-lg font-semibold hover:bg-foreground/10 transition mb-6">
              Get Started
            </button>
            <ul className="space-y-3">
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>Up to 50 users</span>
              </li>
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>Core ERP modules</span>
              </li>
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>5 GB storage</span>
              </li>
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>Email support</span>
              </li>
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>Basic reporting</span>
              </li>
            </ul>
          </div>

          {/* Professional Plan - Featured */}
          <div className="rounded-lg bg-card shadow-md border-2 border-accent p-8 md:scale-105 md:z-10">
            <div className="bg-accent text-primary-cta text-sm font-bold px-4 py-1 rounded-full inline-block mb-4">
              Most Popular
            </div>
            <h3 className="text-2xl font-extrabold mb-2">Professional</h3>
            <p className="text-foreground/60 mb-6">For growing enterprises</p>
            <div className="mb-6">
              <span className="text-4xl font-extrabold">$7,999</span>
              <span className="text-foreground/60">/month</span>
            </div>
            <button className="w-full px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-semibold hover:opacity-90 transition mb-6">
              Start Free Trial
            </button>
            <ul className="space-y-3">
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>Up to 500 users</span>
              </li>
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>All ERP modules</span>
              </li>
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>500 GB storage</span>
              </li>
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>24/7 phone support</span>
              </li>
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>Advanced analytics</span>
              </li>
            </ul>
          </div>

          {/* Enterprise Plan */}
          <div className="rounded-lg bg-card shadow-sm border border-foreground/10 p-8 hover:shadow-md transition">
            <h3 className="text-2xl font-extrabold mb-2">Enterprise</h3>
            <p className="text-foreground/60 mb-6">For large organizations</p>
            <div className="mb-6">
              <span className="text-2xl font-extrabold">Custom</span>
              <p className="text-foreground/60">Pricing</p>
            </div>
            <button className="w-full px-6 py-3 bg-secondary-cta text-secondary-cta-text rounded-lg font-semibold hover:bg-foreground/10 transition mb-6">
              Schedule Demo
            </button>
            <ul className="space-y-3">
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>Unlimited users</span>
              </li>
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>Custom modules</span>
              </li>
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>Unlimited storage</span>
              </li>
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>Dedicated support</span>
              </li>
              <li className="flex items-center gap-2">
                <span className="text-accent">✓</span>
                <span>Custom integrations</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* Pricing FAQ */}
      <div id="pricing-faq" data-section="pricing-faq" className="mx-auto px-4 md:px-6 py-12 max-w-2xl">
        <h2 className="text-3xl md:text-4xl font-extrabold mb-12 text-center">Pricing Questions?</h2>
        <div className="space-y-6">
          <div className="bg-card rounded-lg p-6 border border-foreground/10">
            <h4 className="font-bold mb-2">What's included in implementation?</h4>
            <p className="text-foreground/70">All plans include data migration, system configuration, user training, and go-live support provided by our certified implementation team.</p>
          </div>
          <div className="bg-card rounded-lg p-6 border border-foreground/10">
            <h4 className="font-bold mb-2">Can I scale up or down?</h4>
            <p className="text-foreground/70">Yes, you can change your plan at any time. Changes take effect on your next billing cycle with no penalties or fees.</p>
          </div>
          <div className="bg-card rounded-lg p-6 border border-foreground/10">
            <h4 className="font-bold mb-2">Is there a contract minimum?</h4>
            <p className="text-foreground/70">Starter and Professional plans require a 12-month commitment with flexible renewal options. Enterprise plans are customized per agreement.</p>
          </div>
        </div>
      </div>

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