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";

export const metadata = {
  title: "Services | AB Group LLC",
  description:
    "Expert QuickBooks consulting, setup, training, and support services. On-site, remote, and telephone support available.",
};

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="bg-zinc-900 text-white">
        <div className="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-500 font-semibold mb-4">Our Services</p>
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
              Expert Solutions for Your{" "}
              <span className="text-red-500">Business</span>
            </h1>
            <p className="mt-6 text-lg text-zinc-300">
              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>
      </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) => (
              <div
                key={service.title}
                className="bg-white rounded-xl p-6 shadow-sm border border-zinc-100 hover:shadow-md transition-shadow"
              >
                <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
                  <service.icon className="h-6 w-6 text-red-600" />
                </div>
                <h3 className="text-lg font-semibold text-zinc-900">
                  {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) => (
              <div key={type.title} className="text-center">
                <div className="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
                  <type.icon className="h-8 w-8 text-white" />
                </div>
                <h3 className="text-xl font-semibold text-zinc-900">
                  {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) => (
              <div
                key={industry.name}
                className="bg-zinc-50 rounded-xl p-6 text-center hover:bg-zinc-100 transition-colors"
              >
                <industry.icon className="h-8 w-8 text-red-600 mx-auto mb-3" />
                <p className="text-sm font-medium text-zinc-700">
                  {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="bg-zinc-900 text-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 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) => (
              <div key={item.step} className="text-center">
                <div className="text-4xl font-bold text-red-500 mb-4">
                  {item.step}
                </div>
                <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
                <p className="text-zinc-400">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-red-600 py-12 md:py-16">
        <div className="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>
            <Link
              href="/contact"
              className="inline-flex items-center justify-center px-6 py-3 bg-white text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors"
            >
              Get a Free Quote
              <ArrowRight className="ml-2 h-5 w-5" />
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}
