import Link from "next/link";
import {
  Award,
  CheckCircle,
  ArrowRight,
  Calendar,
  MapPin,
  Target,
  Heart,
  Users,
  GraduationCap,
  BadgeCheck,
} from "lucide-react";

export const metadata = {
  title: "About Us | AB Group LLC",
  description:
    "Learn about AB Group LLC, Florida's trusted QuickBooks consulting firm since 2000. Meet our team and discover our certifications.",
};

const timeline = [
  {
    year: "2000",
    title: "Company Founded",
    description:
      "AB Group LLC was established in Florida to serve small and mid-sized businesses with accounting software solutions.",
  },
  {
    year: "2008",
    title: "Intuit Solution Provider",
    description:
      "Selected as an official Intuit Solution Provider, joining an elite group of certified QuickBooks consultants.",
  },
  {
    year: "2010+",
    title: "Expanded Services",
    description:
      "Grew our service offerings to include remote access solutions, payroll services, and merchant services integration.",
  },
  {
    year: "Today",
    title: "20+ Years of Excellence",
    description:
      "Continuing to serve businesses across Florida and beyond with expert QuickBooks consulting and support.",
  },
];

const credentials = [
  {
    category: "Professional Degrees",
    items: ["Master of Science in Finance", "Master of Science in Accounting"],
  },
  {
    category: "Intuit Certifications",
    items: [
      "Intuit Solution Provider",
      "QuickBooks Advanced ProAdvisor",
      "QuickBooks Enterprise Certified",
      "Point of Sale Certified",
      "QuickBooks Certified ProAdvisor",
    ],
  },
  {
    category: "Other Certifications",
    items: ["Sage/Peachtree Certified Consultant"],
  },
];

const values = [
  {
    icon: Target,
    title: "Excellence",
    description:
      "We strive for the highest standards in everything we do, from software implementation to customer support.",
  },
  {
    icon: Heart,
    title: "Customer Focus",
    description:
      "Your satisfaction is our primary concern. We're committed to providing prompt, professional, and courteous service.",
  },
  {
    icon: Users,
    title: "Partnership",
    description:
      "We see ourselves as an extension of your team, working together to help your business succeed.",
  },
];

export default function AboutPage() {
  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">About Us</p>
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
              Your Trusted <span className="text-red-500">QuickBooks</span>{" "}
              Partner Since 2000
            </h1>
            <p className="mt-6 text-lg text-zinc-300">
              We are a Florida-based consulting group dedicated to supporting
              small and mid-sized businesses with expert accounting and business
              solutions.
            </p>
          </div>
        </div>
      </section>

      {/* Mission 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">
                Our Mission
              </h2>
              <p className="mt-6 text-lg text-zinc-600">
                Our mission is to provide all of our customers with prompt,
                professional, and courteous service. Our primary concern is your
                satisfaction with the array of services we provide.
              </p>
              <p className="mt-4 text-lg text-zinc-600">
                We are in the business of keeping you in business. As business
                consultants, our primary task is to give you an array of tools
                that will help you grow your business.
              </p>
              <div className="mt-8 flex items-center gap-4">
                <div className="flex items-center gap-2 text-sm text-zinc-600">
                  <MapPin className="h-5 w-5 text-red-600" />
                  <span>Florida, USA</span>
                </div>
                <div className="flex items-center gap-2 text-sm text-zinc-600">
                  <Calendar className="h-5 w-5 text-red-600" />
                  <span>Est. 2000</span>
                </div>
              </div>
            </div>
            <div className="bg-red-600 rounded-2xl p-8 text-white">
              <blockquote className="text-xl italic">
                &ldquo;There is a right way to do business. To succeed
                you&apos;ll need a solid idea, a great team, and ultimately the
                right execution.&rdquo;
              </blockquote>
              <div className="mt-6 flex items-center gap-4">
                <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                  <span className="text-lg font-bold">NA</span>
                </div>
                <div>
                  <p className="font-semibold">Nicolle Alcazar, MSF</p>
                  <p className="text-red-200 text-sm">President, AB Group LLC</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Values 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">
              What Drives Us
            </h2>
            <p className="mt-4 text-lg text-zinc-600">
              Our core values guide everything we do.
            </p>
          </div>

          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            {values.map((value) => (
              <div
                key={value.title}
                className="bg-white rounded-xl p-8 text-center shadow-sm"
              >
                <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <value.icon className="h-8 w-8 text-red-600" />
                </div>
                <h3 className="text-xl font-semibold text-zinc-900">
                  {value.title}
                </h3>
                <p className="mt-2 text-zinc-600">{value.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline 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="text-center max-w-3xl mx-auto mb-12">
            <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
              Our Journey
            </h2>
            <p className="mt-4 text-lg text-zinc-600">
              Over two decades of helping businesses succeed.
            </p>
          </div>

          <div className="max-w-3xl mx-auto">
            {timeline.map((item, index) => (
              <div key={item.year} className="flex gap-6 mb-8 last:mb-0">
                <div className="flex flex-col items-center">
                  <div className="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
                    {item.year}
                  </div>
                  {index < timeline.length - 1 && (
                    <div className="w-0.5 h-full bg-zinc-200 mt-2" />
                  )}
                </div>
                <div className="pb-8">
                  <h3 className="text-lg font-semibold text-zinc-900">
                    {item.title}
                  </h3>
                  <p className="mt-1 text-zinc-600">{item.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Credentials 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">
            <Award className="h-12 w-12 text-red-500 mx-auto mb-4" />
            <h2 className="text-3xl font-semibold sm:text-4xl">
              Professional Credentials
            </h2>
            <p className="mt-4 text-lg text-zinc-400">
              Our team holds the highest degrees of training, experience, and
              certifications in the industry.
            </p>
          </div>

          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            {credentials.map((group) => (
              <div key={group.category}>
                <h3 className="text-lg font-semibold text-red-500 mb-4 flex items-center gap-2">
                  {group.category === "Professional Degrees" && (
                    <GraduationCap className="h-5 w-5" />
                  )}
                  {group.category === "Intuit Certifications" && (
                    <BadgeCheck className="h-5 w-5" />
                  )}
                  {group.category === "Other Certifications" && (
                    <Award className="h-5 w-5" />
                  )}
                  {group.category}
                </h3>
                <ul className="space-y-3">
                  {group.items.map((item) => (
                    <li key={item} className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-red-500 flex-shrink-0" />
                      <span className="text-zinc-300">{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team 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="text-center max-w-3xl mx-auto mb-12">
            <h2 className="text-3xl font-semibold text-zinc-900 sm:text-4xl">
              Meet Our Leader
            </h2>
          </div>

          <div className="max-w-2xl mx-auto">
            <div className="bg-zinc-50 rounded-2xl p-8 text-center">
              <div className="w-24 h-24 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-6">
                <span className="text-3xl font-bold text-white">NA</span>
              </div>
              <h3 className="text-2xl font-semibold text-zinc-900">
                Nicolle Alcazar, MSF
              </h3>
              <p className="text-red-600 font-medium">
                President & Lead Consultant
              </p>
              <p className="mt-4 text-zinc-600 max-w-lg mx-auto">
                With a Master of Science in Finance and extensive certifications
                as an Intuit Solution Provider and Advanced ProAdvisor, Nicolle
                brings over 20 years of experience helping businesses optimize
                their accounting and financial systems.
              </p>
              <div className="mt-6 flex flex-wrap justify-center gap-2">
                {[
                  "MSF",
                  "ISP",
                  "Advanced ProAdvisor",
                  "Enterprise Certified",
                ].map((badge) => (
                  <span
                    key={badge}
                    className="px-3 py-1 bg-red-100 text-red-700 text-sm font-medium rounded-full"
                  >
                    {badge}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Se Habla Espanol */}
      <section className="bg-zinc-50 py-12">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
          <p className="text-2xl font-semibold text-red-600">
            Se Habla Espanol
          </p>
          <p className="mt-2 text-zinc-600">
            We proudly serve our Spanish-speaking clients in their preferred
            language.
          </p>
        </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 Work With Experts?
              </h2>
              <p className="mt-2 text-red-100">
                Let&apos;s discuss how we can help your business succeed.
              </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"
            >
              Contact Us
              <ArrowRight className="ml-2 h-5 w-5" />
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}