"use client";

import {
  Award,
  CheckCircle,
  ArrowRight,
  Calendar,
  MapPin,
  Target,
  Heart,
  Users,
  GraduationCap,
  BadgeCheck,
} from "lucide-react";
import AnimatedBackground from "../components/AnimatedBackground";
import Button from "../components/Button";

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="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">
              About Us
            </p>
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl animate-slide-up">
              Your Trusted{" "}
              <span className="text-transparent bg-gradient-to-r from-red-400 via-red-500 to-red-600 bg-clip-text">
                QuickBooks
              </span>{" "}
              Partner Since 2000
            </h1>
            <p className="mt-6 text-lg text-zinc-300 animate-slide-up animation-delay-100">
              We are a Florida-based consulting group dedicated to supporting
              small and mid-sized businesses with expert accounting and business
              solutions.
            </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>

      {/* 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-6">
                <div className="flex items-center gap-2 text-sm text-zinc-600 group">
                  <div className="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center group-hover:bg-red-600 transition-colors duration-300">
                    <MapPin className="h-4 w-4 text-red-600 group-hover:text-white transition-colors duration-300" />
                  </div>
                  <span>Florida, USA</span>
                </div>
                <div className="flex items-center gap-2 text-sm text-zinc-600 group">
                  <div className="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center group-hover:bg-red-600 transition-colors duration-300">
                    <Calendar className="h-4 w-4 text-red-600 group-hover:text-white transition-colors duration-300" />
                  </div>
                  <span>Est. 2000</span>
                </div>
              </div>
            </div>
            <div className="relative group">
              <div className="absolute -inset-4 bg-gradient-to-r from-red-500 to-red-700 rounded-3xl opacity-20 blur-xl group-hover:opacity-30 transition-opacity duration-300" />
              <div className="relative bg-gradient-to-br from-red-600 to-red-700 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 backdrop-blur-sm">
                    <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>
        </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, index) => (
              <div
                key={value.title}
                className="group bg-white rounded-xl p-8 text-center shadow-sm hover:shadow-xl hover:shadow-red-500/5 hover:-translate-y-2 transition-all duration-300"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div className="w-20 h-20 bg-gradient-to-br from-red-100 to-red-50 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-gradient-to-br group-hover:from-red-500 group-hover:to-red-700 transition-all duration-300">
                  <value.icon className="h-10 w-10 text-red-600 group-hover:text-white transition-colors duration-300" />
                </div>
                <h3 className="text-xl font-semibold text-zinc-900 group-hover:text-red-600 transition-colors duration-300">
                  {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 group">
                <div className="flex flex-col items-center">
                  <div className="w-14 h-14 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-red-500/20 group-hover:scale-110 transition-transform duration-300">
                    {item.year}
                  </div>
                  {index < timeline.length - 1 && (
                    <div className="w-0.5 h-full bg-gradient-to-b from-red-500 to-red-100 mt-2" />
                  )}
                </div>
                <div className="pb-8">
                  <h3 className="text-lg font-semibold text-zinc-900 group-hover:text-red-600 transition-colors duration-300">
                    {item.title}
                  </h3>
                  <p className="mt-1 text-zinc-600">{item.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Credentials 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">
            <div className="w-16 h-16 bg-gradient-to-br from-red-500 to-red-700 rounded-xl flex items-center justify-center mx-auto mb-4 shadow-lg shadow-red-500/20 animate-pulse-slow">
              <Award className="h-8 w-8 text-white" />
            </div>
            <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, groupIndex) => (
              <div
                key={group.category}
                className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-red-500/30 transition-all duration-300"
                style={{ animationDelay: `${groupIndex * 100}ms` }}
              >
                <h3 className="text-lg font-semibold text-transparent bg-gradient-to-r from-red-400 to-red-600 bg-clip-text mb-4 flex items-center gap-2">
                  {group.category === "Professional Degrees" && (
                    <GraduationCap className="h-5 w-5 text-red-500" />
                  )}
                  {group.category === "Intuit Certifications" && (
                    <BadgeCheck className="h-5 w-5 text-red-500" />
                  )}
                  {group.category === "Other Certifications" && (
                    <Award className="h-5 w-5 text-red-500" />
                  )}
                  {group.category}
                </h3>
                <ul className="space-y-3">
                  {group.items.map((item, idx) => (
                    <li
                      key={item}
                      className="flex items-center gap-2 group/item"
                      style={{ animationDelay: `${idx * 50}ms` }}
                    >
                      <CheckCircle className="h-4 w-4 text-red-500 flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300" />
                      <span className="text-zinc-300 group-hover/item:text-white transition-colors duration-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="relative group">
              <div className="absolute -inset-4 bg-gradient-to-r from-red-500 to-red-700 rounded-3xl 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 text-center border border-zinc-200">
                <div className="w-28 h-28 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-red-500/20 group-hover:scale-105 transition-transform duration-300">
                  <span className="text-4xl font-bold text-white">NA</span>
                </div>
                <h3 className="text-2xl font-semibold text-zinc-900">
                  Nicolle Alcazar, MSF
                </h3>
                <p className="text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text 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, index) => (
                    <span
                      key={badge}
                      className="px-3 py-1 bg-gradient-to-r from-red-100 to-red-50 text-red-700 text-sm font-medium rounded-full hover:from-red-500 hover:to-red-600 hover:text-white transition-all duration-300 cursor-default"
                      style={{ animationDelay: `${index * 50}ms` }}
                    >
                      {badge}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Se Habla Espanol */}
      <section className="bg-zinc-50 py-12 relative overflow-hidden">
        <div className="absolute inset-0 opacity-5">
          <div className="absolute top-0 left-1/4 w-64 h-64 bg-red-500 rounded-full blur-3xl" />
          <div className="absolute bottom-0 right-1/4 w-64 h-64 bg-red-500 rounded-full blur-3xl" />
        </div>
        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
          <p className="text-3xl font-semibold text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text">
            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="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 Work With Experts?
              </h2>
              <p className="mt-2 text-red-100">
                Let&apos;s discuss how we can help your business succeed.
              </p>
            </div>
            <Button
              href="/contact"
              variant="secondary"
              className="bg-white text-red-600 hover:bg-red-50 border-transparent"
            >
              Contact Us
              <ArrowRight className="ml-2 h-5 w-5" />
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}