"use client";

import {
  Building2,
  Users,
  ShieldCheck,
  BarChart3,
  Package,
  CreditCard,
  Layers,
  ArrowRight,
  CheckCircle,
  Star,
  Zap,
  Globe,
  Phone,
} from "lucide-react";
import AnimatedBackground from "../components/AnimatedBackground";
import Button from "../components/Button";

const solutions = [
  {
    id: "enterprise",
    featured: true,
    name: "QuickBooks Enterprise",
    tagline: "For Growing Businesses",
    description:
      "The most powerful QuickBooks product, designed for larger, growing businesses that need advanced features, greater capacity, and robust controls.",
    features: [
      "Up to 30 simultaneous users",
      "Advanced inventory management",
      "Over 200 integrations available",
      "115+ role-based permissions",
      "Always-on audit trail",
      "Priority Circle support",
    ],
    highlights: [
      {
        icon: Users,
        title: "Scale to 30 Users",
        description: "Grow your team without switching systems",
      },
      {
        icon: Package,
        title: "Advanced Inventory",
        description: "Track hundreds of thousands of items",
      },
      {
        icon: ShieldCheck,
        title: "Enhanced Security",
        description: "Granular user permissions and audit trails",
      },
    ],
  },
  {
    id: "pro-premier",
    featured: false,
    name: "QuickBooks Pro & Premier",
    tagline: "For Small Businesses",
    description:
      "Powerful accounting solutions for small businesses. Pro handles the basics while Premier adds industry-specific features and reporting.",
    features: [
      "Easy invoicing and billing",
      "Expense tracking",
      "Financial reporting",
      "Multi-user support (up to 5)",
      "Industry-specific editions (Premier)",
      "Inventory tracking",
    ],
    highlights: [
      {
        icon: Zap,
        title: "Quick Setup",
        description: "Get started in minutes, not days",
      },
      {
        icon: BarChart3,
        title: "Smart Reports",
        description: "120+ built-in reports for insights",
      },
      {
        icon: Globe,
        title: "Anywhere Access",
        description: "Remote access solutions available",
      },
    ],
  },
  {
    id: "pos",
    featured: false,
    name: "QuickBooks Point of Sale",
    tagline: "For Retail Businesses",
    description:
      "Complete retail management solution that replaces your cash register and integrates seamlessly with QuickBooks for automatic reconciliation.",
    features: [
      "Integrated payment processing",
      "Real-time inventory tracking",
      "Customer management",
      "Employee management",
      "Multi-store support",
      "Hardware bundles available",
    ],
    highlights: [
      {
        icon: CreditCard,
        title: "Accept All Payments",
        description: "Cards, cash, checks, and gift cards",
      },
      {
        icon: Package,
        title: "Inventory Control",
        description: "Know what's in stock in real-time",
      },
      {
        icon: Layers,
        title: "QuickBooks Sync",
        description: "Automatic data sync, no double entry",
      },
    ],
  },
];

const integrations = [
  "Salesforce CRM",
  "Microsoft Excel",
  "TrueCommerce EDI",
  "E-commerce Platforms",
  "Payroll Services",
  "Time Tracking",
  "Inventory Management",
  "Custom Solutions",
];

export default function SolutionsPage() {
  return (
    <>
      {/* Hero Section */}
      <section className="relative animated-gradient-bg text-white overflow-hidden">
        <AnimatedBackground variant="dark" orbCount={5} />
        <div className="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
          <div className="max-w-3xl">
            <p className="text-red-400 font-semibold mb-4 animate-fade-in">
              Our Solutions
            </p>
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl animate-slide-up">
              Find the Right{" "}
              <span className="text-transparent bg-gradient-to-r from-red-400 via-red-500 to-red-600 bg-clip-text">
                QuickBooks
              </span>{" "}
              for Your Business
            </h1>
            <p className="mt-6 text-lg text-zinc-300 animate-slide-up animation-delay-100">
              From small startups to growing enterprises, we help you choose and
              implement the perfect QuickBooks solution. Save thousands compared
              to enterprise alternatives.
            </p>
          </div>
        </div>
        <div className="absolute right-10 top-1/4 w-64 h-64 bg-red-500/10 rounded-full blur-3xl animate-float" />
      </section>

      {/* Solutions */}
      {solutions.map((solution, index) => (
        <section
          key={solution.id}
          className={`relative ${index % 2 === 0 ? "bg-white" : "bg-zinc-50"}`}
        >
          <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 md:py-24 lg:px-8">
            {solution.featured && (
              <div className="flex items-center gap-2 mb-4">
                <div className="flex items-center gap-1 px-3 py-1 bg-gradient-to-r from-red-500 to-red-600 rounded-full">
                  <Star className="h-4 w-4 text-white fill-white" />
                  <span className="text-xs font-semibold text-white uppercase tracking-wide">
                    Most Popular
                  </span>
                </div>
              </div>
            )}

            <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
              <div>
                <p className="text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text font-medium mb-2">
                  {solution.tagline}
                </p>
                <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
                  {solution.name}
                </h2>
                <p className="mt-4 text-lg text-zinc-600">
                  {solution.description}
                </p>

                <ul className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3">
                  {solution.features.map((feature, idx) => (
                    <li
                      key={feature}
                      className="flex items-center gap-2 group"
                      style={{ animationDelay: `${idx * 50}ms` }}
                    >
                      <CheckCircle className="h-5 w-5 text-red-600 flex-shrink-0 group-hover:scale-110 transition-transform duration-300" />
                      <span className="text-sm text-zinc-700">{feature}</span>
                    </li>
                  ))}
                </ul>

                <div className="mt-8">
                  <Button href="/contact">
                    Get a Quote
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </Button>
                </div>
              </div>

              <div className="grid grid-cols-1 gap-6">
                {solution.highlights.map((highlight, idx) => (
                  <div
                    key={highlight.title}
                    className="group bg-white rounded-xl p-6 shadow-sm border border-zinc-100 hover:shadow-xl hover:shadow-red-500/5 hover:-translate-y-1 transition-all duration-300"
                    style={{ animationDelay: `${idx * 100}ms` }}
                  >
                    <div className="flex items-start gap-4">
                      <div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-gradient-to-br group-hover:from-red-500 group-hover:to-red-700 transition-all duration-300">
                        <highlight.icon className="h-6 w-6 text-red-600 group-hover:text-white transition-colors duration-300" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-zinc-900 group-hover:text-red-600 transition-colors duration-300">
                          {highlight.title}
                        </h3>
                        <p className="mt-1 text-sm text-zinc-600">
                          {highlight.description}
                        </p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      ))}

      {/* Integrations */}
      <section className="relative animated-gradient-bg text-white py-16 md:py-24 overflow-hidden">
        <AnimatedBackground variant="dark" orbCount={4} />
        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-12">
            <h2 className="text-3xl font-semibold sm:text-4xl">
              Integrations & Add-ons
            </h2>
            <p className="mt-4 text-lg text-zinc-400">
              QuickBooks works with over 200 compatible business applications.
              We can help you integrate the tools you need.
            </p>
          </div>

          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
            {integrations.map((integration, index) => (
              <div
                key={integration}
                className="group bg-white/5 backdrop-blur-sm rounded-lg p-4 text-center hover:bg-gradient-to-br hover:from-red-500/20 hover:to-red-700/20 border border-white/10 hover:border-red-500/30 transition-all duration-300 cursor-pointer"
                style={{ animationDelay: `${index * 50}ms` }}
              >
                <p className="text-sm font-medium text-zinc-300 group-hover:text-white transition-colors duration-300">
                  {integration}
                </p>
              </div>
            ))}
          </div>

          <p className="text-center text-zinc-500 mt-8">
            And 200+ more integrations available
          </p>
        </div>
      </section>

      {/* Comparison CTA */}
      <section className="bg-white py-16 md:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="relative group">
            <div className="absolute -inset-4 bg-gradient-to-r from-red-500 to-red-700 rounded-3xl opacity-10 blur-xl group-hover:opacity-20 transition-opacity duration-300" />
            <div className="relative bg-gradient-to-br from-zinc-100 to-zinc-50 rounded-2xl p-8 md:p-12 text-center border border-zinc-200">
              <div className="w-16 h-16 bg-gradient-to-br from-red-500 to-red-700 rounded-xl flex items-center justify-center mx-auto mb-4 shadow-lg shadow-red-500/20">
                <Building2 className="h-8 w-8 text-white" />
              </div>
              <h2 className="text-2xl font-semibold text-zinc-900 sm:text-3xl">
                Not Sure Which Solution is Right for You?
              </h2>
              <p className="mt-4 text-zinc-600 max-w-2xl mx-auto">
                Let our experts analyze your business needs and recommend the
                perfect QuickBooks solution. We&apos;ll help you choose the
                right edition and configure it for your specific requirements.
              </p>
              <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
                <Button href="/contact">
                  Schedule a Free Consultation
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
                <Button href="tel:3053878582" variant="secondary">
                  <Phone className="mr-2 h-5 w-5" />
                  Call (305) 387-8582
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Banner */}
      <section className="relative overflow-hidden animated-gradient-bg-red py-12 md:py-16">
        <AnimatedBackground variant="red" orbCount={4} />
        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
            <div className="text-center md:text-left">
              <h2 className="text-2xl font-semibold text-white sm:text-3xl">
                Save Thousands vs. Other Systems
              </h2>
              <p className="mt-2 text-red-100">
                QuickBooks Enterprise starts at $3,000 vs. $20,000-$40,000 for
                alternatives.
              </p>
            </div>
            <Button
              href="/contact"
              variant="secondary"
              className="bg-white text-red-600 hover:bg-red-50 border-transparent"
            >
              Get Your Quote
              <ArrowRight className="ml-2 h-5 w-5" />
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}