"use client";

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

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="relative min-h-[90vh] flex items-center animated-gradient-bg text-white overflow-hidden">
        <AnimatedBackground variant="dark" orbCount={6} />
        <div className="relative 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-400 font-semibold mb-4 animate-fade-in">
              Certified QuickBooks Experts
            </p>
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl animate-slide-up">
              Your Business Deserves{" "}
              <span className="text-transparent bg-gradient-to-r from-red-400 via-red-500 to-red-600 bg-clip-text animate-gradient bg-[length:200%_auto]">
                Expert
              </span>{" "}
              Financial Solutions
            </h1>
            <p className="mt-6 text-lg text-zinc-300 max-w-2xl animate-slide-up animation-delay-100">
              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 animate-slide-up animation-delay-200">
              <Button href="/contact" size="lg">
                Get a Free Consultation
                <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
              </Button>
              <Button
                href="tel:3053878582"
                variant="secondary"
                size="lg"
                className="bg-white/10 border-white/20 text-white hover:bg-white/20"
              >
                <Phone className="mr-2 h-5 w-5" />
                (305) 387-8582
              </Button>
            </div>
            <p className="mt-6 text-transparent bg-gradient-to-r from-red-400 to-red-600 bg-clip-text font-semibold animate-fade-in animation-delay-300">
              Se Habla Espanol
            </p>
          </div>
        </div>

        {/* Floating decorative elements */}
        <div className="absolute right-10 top-1/4 w-64 h-64 bg-red-500/10 rounded-full blur-3xl animate-float" />
        <div className="absolute right-1/4 bottom-1/4 w-48 h-48 bg-red-600/10 rounded-full blur-3xl animate-float-delayed" />
      </section>

      {/* Value Proposition */}
      <section className="bg-white py-16 md:py-24 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-zinc-50/50 to-transparent" />
        <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">
            <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, index) => (
              <div
                key={stat.label}
                className="text-center group"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <p className="text-5xl font-bold text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text group-hover:scale-110 transition-transform duration-300">
                  {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 relative">
        <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, 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>
              </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 group"
            >
              View All Services
              <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-2 transition-transform duration-300" />
            </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, index) => (
                  <div
                    key={credential}
                    className="flex items-center gap-2 group"
                    style={{ animationDelay: `${index * 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 group-hover:text-zinc-900 transition-colors duration-300">
                      {credential}
                    </span>
                  </div>
                ))}
              </div>
            </div>
            <div className="relative group">
              <div className="absolute -inset-4 bg-gradient-to-r from-red-500 to-red-700 rounded-2xl 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 lg:p-12 border border-zinc-200">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-14 h-14 bg-gradient-to-br from-red-500 to-red-700 rounded-xl flex items-center justify-center shadow-lg shadow-red-500/20 animate-pulse-slow">
                    <Award className="h-7 w-7 text-white" />
                  </div>
                  <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 text-lg">
                  &ldquo;Our clients need more than entry-level accounting
                  solutions. They need software with more functions, security,
                  transaction volume and system controls.&rdquo;
                </blockquote>
                <div className="mt-6 flex items-center gap-3">
                  <div className="w-10 h-10 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center">
                    <span className="text-white font-bold text-sm">NA</span>
                  </div>
                  <div>
                    <p className="font-medium text-zinc-900">
                      Nicolle Alcazar, MSF
                    </p>
                    <p className="text-sm text-zinc-600">
                      President, AB Group LLC
                    </p>
                  </div>
                </div>
              </div>
            </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">
                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">
              <Button
                href="tel:3053878582"
                variant="secondary"
                className="bg-white text-red-600 hover:bg-red-50 border-transparent"
              >
                <Phone className="mr-2 h-5 w-5" />
                Call Now
              </Button>
              <Button
                href="/contact"
                className="bg-red-700 hover:bg-red-800 from-red-700 to-red-700"
              >
                Contact Us
              </Button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}