import Link from "next/link";
import {
  Monitor,
  HeadphonesIcon,
  GraduationCap,
  Settings,
  Award,
  CheckCircle,
  ArrowRight,
  Phone,
} from "lucide-react";

const services = [
  {
    icon: Settings,
    title: "QuickBooks Setup",
    description:
      "Complete installation and configuration tailored to your business needs and industry requirements.",
  },
  {
    icon: GraduationCap,
    title: "Training & Support",
    description:
      "Comprehensive training programs and ongoing support to maximize your software investment.",
  },
  {
    icon: Monitor,
    title: "Remote Access",
    description:
      "Secure remote access solutions for QuickBooks Enterprise, Premier, and Pro editions.",
  },
  {
    icon: HeadphonesIcon,
    title: "Consulting",
    description:
      "Expert business consulting to streamline your accounting and financial processes.",
  },
];

const credentials = [
  "Intuit Solution Provider",
  "QuickBooks Advanced ProAdvisor",
  "QuickBooks Enterprise Certified",
  "Point of Sale Certified",
  "Master of Science in Finance",
  "Master of Science in Accounting",
];

const stats = [
  { value: "20+", label: "Years Experience" },
  { value: "1000+", label: "Clients Served" },
  { value: "100%", label: "Satisfaction" },
];

export default function Home() {
  return (
    <>
      {/* Hero Section */}
      <section className="bg-zinc-900 text-white">
        <div className="mx-auto max-w-7xl px-4 py-20 sm:px-6 sm:py-24 lg:px-8 lg:py-32">
          <div className="max-w-3xl">
            <p className="text-red-500 font-semibold mb-4">
              Certified QuickBooks Experts
            </p>
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
              Your Business Deserves{" "}
              <span className="text-red-500">Expert</span> Financial Solutions
            </h1>
            <p className="mt-6 text-lg text-zinc-300 max-w-2xl">
              As Intuit Solution Providers with over 20 years of experience, we
              deliver prompt, professional, and courteous service for all your
              QuickBooks and accounting needs.
            </p>
            <div className="mt-10 flex flex-col sm:flex-row gap-4">
              <Link
                href="/contact"
                className="inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors"
              >
                Get a Free Consultation
                <ArrowRight className="ml-2 h-5 w-5" />
              </Link>
              <a
                href="tel:3053878582"
                className="inline-flex items-center justify-center px-6 py-3 bg-white/10 text-white font-medium rounded-lg hover:bg-white/20 transition-colors"
              >
                <Phone className="mr-2 h-5 w-5" />
                (305) 387-8582
              </a>
            </div>
            <p className="mt-6 text-red-400 font-medium">Se Habla Espanol</p>
          </div>
        </div>
      </section>

      {/* Value Proposition */}
      <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">
            <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
              The Right Way to Do Business
            </h2>
            <p className="mt-4 text-lg text-zinc-600">
              We specialize in small and mid-size business solutions. Our team
              is highly qualified in Business Management, Accounting, and
              Finance—making us your one-stop solution for keeping your business
              running smoothly.
            </p>
          </div>

          {/* Stats */}
          <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-3">
            {stats.map((stat) => (
              <div key={stat.label} className="text-center">
                <p className="text-4xl font-bold text-red-600">{stat.value}</p>
                <p className="mt-2 text-sm font-medium text-zinc-600">
                  {stat.label}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <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">
              How We Can Help
            </h2>
            <p className="mt-4 text-lg text-zinc-600">
              We provide on-site, telephone, and remote access support for all
              our services.
            </p>
          </div>

          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {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>
              </div>
            ))}
          </div>

          <div className="mt-12 text-center">
            <Link
              href="/services"
              className="inline-flex items-center text-red-600 font-medium hover:text-red-700 transition-colors"
            >
              View All Services
              <ArrowRight className="ml-2 h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>

      {/* Credentials Section */}
      <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="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16 items-center">
            <div>
              <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
                Certified Experts You Can Trust
              </h2>
              <p className="mt-4 text-lg text-zinc-600">
                As Intuit Solution Providers, we hold the highest degree of
                training, experience, and certifications in our field. We belong
                to an elite group of consultants with extensive experience in
                QuickBooks installations, training, support, data migrations,
                and troubleshooting.
              </p>
              <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3">
                {credentials.map((credential) => (
                  <div key={credential} className="flex items-center gap-2">
                    <CheckCircle className="h-5 w-5 text-red-600 flex-shrink-0" />
                    <span className="text-sm text-zinc-700">{credential}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="bg-zinc-100 rounded-2xl p-8 lg:p-12">
              <div className="flex items-center gap-4 mb-6">
                <Award className="h-12 w-12 text-red-600" />
                <div>
                  <p className="font-semibold text-zinc-900">
                    Intuit Solution Provider
                  </p>
                  <p className="text-sm text-zinc-600">Since 2008</p>
                </div>
              </div>
              <blockquote className="text-zinc-700 italic">
                &ldquo;Our clients need more than entry-level accounting
                solutions. They need software with more functions, security,
                transaction volume and system controls.&rdquo;
              </blockquote>
              <p className="mt-4 font-medium text-zinc-900">
                Nicolle Alcazar, MSF
              </p>
              <p className="text-sm text-zinc-600">President, AB Group LLC</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">
                Got QuickBooks? We&apos;ve Got Answers.
              </h2>
              <p className="mt-2 text-red-100">
                Call us today for a free needs analysis and quote.
              </p>
            </div>
            <div className="flex flex-col sm:flex-row gap-4">
              <a
                href="tel:3053878582"
                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"
              >
                <Phone className="mr-2 h-5 w-5" />
                Call Now
              </a>
              <Link
                href="/contact"
                className="inline-flex items-center justify-center px-6 py-3 bg-red-700 text-white font-medium rounded-lg hover:bg-red-800 transition-colors"
              >
                Contact Us
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}
