"use client";

import Link from "next/link";
import {
  Settings,
  GraduationCap,
  HeadphonesIcon,
  CreditCard,
  Users,
  FileSpreadsheet,
  MapPin,
  Phone as PhoneIcon,
  Monitor,
  ArrowRight,
  CheckCircle,
  Building2,
  ShoppingCart,
  Briefcase,
  Hammer,
  Truck,
  UtensilsCrossed,
} from "lucide-react";
import AnimatedBackground from "../components/AnimatedBackground";
import Button from "../components/Button";

const services = [
  {
    icon: Settings,
    title: "QuickBooks Setup & Installation",
    description:
      "Complete installation and configuration of QuickBooks Pro, Premier, Enterprise, and Point of Sale. We tailor the setup to your specific business needs and industry requirements.",
    features: [
      "Chart of accounts setup",
      "User permissions configuration",
      "Data migration assistance",
      "Custom report creation",
    ],
  },
  {
    icon: GraduationCap,
    title: "Training Programs",
    description:
      "Comprehensive training sessions designed to help you and your team maximize your QuickBooks investment. From basics to advanced features.",
    features: [
      "One-on-one training",
      "Group workshops",
      "Role-specific training",
      "Ongoing refresher courses",
    ],
  },
  {
    icon: HeadphonesIcon,
    title: "Consulting & Advisory",
    description:
      "Expert business consulting to streamline your accounting and financial processes. We analyze your needs and recommend the best solutions.",
    features: [
      "Needs analysis",
      "Software selection",
      "Process optimization",
      "Best practices implementation",
    ],
  },
  {
    icon: FileSpreadsheet,
    title: "Payroll Services",
    description:
      "QuickBooks Payroll setup and support to help you manage employee compensation efficiently and stay compliant with tax requirements.",
    features: [
      "Payroll setup",
      "Tax table updates",
      "Direct deposit setup",
      "Year-end reporting",
    ],
  },
  {
    icon: CreditCard,
    title: "Merchant Services",
    description:
      "Accept credit cards and process payments seamlessly integrated with your QuickBooks system for streamlined reconciliation.",
    features: [
      "Payment processing setup",
      "QuickBooks integration",
      "Competitive rates",
      "Secure transactions",
    ],
  },
  {
    icon: Users,
    title: "Ongoing Support",
    description:
      "Monthly support contracts to ensure your QuickBooks system runs smoothly. Get help when you need it with priority access to our experts.",
    features: [
      "Priority phone support",
      "Remote troubleshooting",
      "Software updates",
      "Performance optimization",
    ],
  },
];

const supportTypes = [
  {
    icon: MapPin,
    title: "On-Site Support",
    description:
      "We come to your location for hands-on training, setup, and troubleshooting. Perfect for complex implementations and team training sessions.",
  },
  {
    icon: PhoneIcon,
    title: "Phone Support",
    description:
      "Quick answers to your questions with our telephone support. Ideal for urgent issues and quick consultations.",
  },
  {
    icon: Monitor,
    title: "Remote Access",
    description:
      "Secure remote access support for immediate assistance. We can connect to your system and resolve issues in real-time.",
  },
];

const industries = [
  { icon: Building2, name: "Professional Services" },
  { icon: ShoppingCart, name: "Retail" },
  { icon: Briefcase, name: "Consulting" },
  { icon: Hammer, name: "Construction" },
  { icon: Truck, name: "Distribution" },
  { icon: UtensilsCrossed, name: "Hospitality" },
];

export default function ServicesPage() {
  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 Services
            </p>
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl animate-slide-up">
              Expert Solutions for Your{" "}
              <span className="text-transparent bg-gradient-to-r from-red-400 via-red-500 to-red-600 bg-clip-text">
                Business
              </span>
            </h1>
            <p className="mt-6 text-lg text-zinc-300 animate-slide-up animation-delay-100">
              As Intuit Solution Providers, we offer a comprehensive range of
              services to help your business succeed. From initial setup to
              ongoing support, we&apos;re here for you every step of the way.
            </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>

      {/* Services Grid */}
      <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="text-center max-w-3xl mx-auto mb-12">
            <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
              What We Offer
            </h2>
            <p className="mt-4 text-lg text-zinc-600">
              Comprehensive QuickBooks and accounting software services tailored
              to your needs.
            </p>
          </div>

          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
            {services.map((service, index) => (
              <div
                key={service.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-2 transition-all duration-300"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 group-hover:bg-gradient-to-br group-hover:from-red-500 group-hover:to-red-700 transition-all duration-300">
                  <service.icon className="h-6 w-6 text-red-600 group-hover:text-white transition-colors duration-300" />
                </div>
                <h3 className="text-lg font-semibold text-zinc-900 group-hover:text-red-600 transition-colors duration-300">
                  {service.title}
                </h3>
                <p className="mt-2 text-sm text-zinc-600">
                  {service.description}
                </p>
                <ul className="mt-4 space-y-2">
                  {service.features.map((feature) => (
                    <li
                      key={feature}
                      className="flex items-center gap-2 text-sm text-zinc-600"
                    >
                      <CheckCircle className="h-4 w-4 text-red-600 flex-shrink-0" />
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Support Types */}
      <section className="bg-zinc-50 py-16 md:py-24">
        <div className="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 text-zinc-900 sm:text-4xl">
              Support Your Way
            </h2>
            <p className="mt-4 text-lg text-zinc-600">
              Choose the support method that works best for your business.
            </p>
          </div>

          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            {supportTypes.map((type, index) => (
              <div
                key={type.title}
                className="text-center group"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div className="w-20 h-20 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-red-500/20 group-hover:shadow-red-500/40 group-hover:scale-110 transition-all duration-300">
                  <type.icon className="h-10 w-10 text-white" />
                </div>
                <h3 className="text-xl font-semibold text-zinc-900 group-hover:text-red-600 transition-colors duration-300">
                  {type.title}
                </h3>
                <p className="mt-2 text-zinc-600">{type.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Industries */}
      <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="text-center max-w-3xl mx-auto mb-12">
            <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
              Industries We Serve
            </h2>
            <p className="mt-4 text-lg text-zinc-600">
              Our experience spans across multiple industries, allowing us to
              provide specialized solutions for your specific needs.
            </p>
          </div>

          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
            {industries.map((industry, index) => (
              <div
                key={industry.name}
                className="group bg-zinc-50 rounded-xl p-6 text-center hover:bg-gradient-to-br hover:from-red-500 hover:to-red-700 hover:shadow-lg hover:shadow-red-500/20 hover:-translate-y-1 transition-all duration-300 cursor-pointer"
                style={{ animationDelay: `${index * 50}ms` }}
              >
                <industry.icon className="h-8 w-8 text-red-600 mx-auto mb-3 group-hover:text-white transition-colors duration-300" />
                <p className="text-sm font-medium text-zinc-700 group-hover:text-white transition-colors duration-300">
                  {industry.name}
                </p>
              </div>
            ))}
          </div>

          <p className="text-center text-zinc-500 mt-8">
            And many more industries supported
          </p>
        </div>
      </section>

      {/* Process Section */}
      <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">How We Work</h2>
            <p className="mt-4 text-lg text-zinc-400">
              Our proven process ensures successful implementation and ongoing
              success.
            </p>
          </div>

          <div className="grid grid-cols-1 gap-8 md:grid-cols-4">
            {[
              {
                step: "01",
                title: "Discovery",
                description:
                  "We analyze your business needs and current processes to understand your requirements.",
              },
              {
                step: "02",
                title: "Solution Design",
                description:
                  "We recommend the right software and configuration for your specific situation.",
              },
              {
                step: "03",
                title: "Implementation",
                description:
                  "We set up your system, migrate data, and configure everything to your specifications.",
              },
              {
                step: "04",
                title: "Training & Support",
                description:
                  "We train your team and provide ongoing support to ensure long-term success.",
              },
            ].map((item, index) => (
              <div
                key={item.step}
                className="text-center group"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div className="text-5xl font-bold text-transparent bg-gradient-to-r from-red-400 to-red-600 bg-clip-text mb-4 group-hover:scale-110 transition-transform duration-300">
                  {item.step}
                </div>
                <h3 className="text-xl font-semibold mb-2 group-hover:text-red-400 transition-colors duration-300">
                  {item.title}
                </h3>
                <p className="text-zinc-400">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <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">
                Ready to Get Started?
              </h2>
              <p className="mt-2 text-red-100">
                Contact us today for a free consultation and needs analysis.
              </p>
            </div>
            <Button
              href="/contact"
              variant="secondary"
              className="bg-white text-red-600 hover:bg-red-50 border-transparent"
            >
              Get a Free Quote
              <ArrowRight className="ml-2 h-5 w-5" />
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}