import Image from 'next/image';

export default function AboutPage() {
  return (
    <div className="bg-white">
      <div className="max-w-7xl mx-auto px-6 py-24 lg:px-8">
        {/* Company Section */}
        <div className="mb-24">
          <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl text-center mb-16">
            About FINLION
          </h1>
          <div className="max-w-3xl mx-auto text-center">
            <p className="text-lg leading-8 text-gray-600 mb-8">
              A business & financial consulting firm since 1978
            </p>
            <div className="text-base leading-7 text-gray-600">
              <p className="mb-6">
                FINLION, which is short for Finance Lion, was originally established in 1978 as MDA Tax Service. When FINLION was incorporated in 1999, accounting, bookkeeping and financial management were added.
              </p>
            </div>
          </div>
        </div>

        {/* Divider */}
        <div className="relative my-16">
          <div className="absolute inset-0 flex items-center" aria-hidden="true">
            <div className="w-full border-t border-gray-200" />
          </div>
          <div className="relative flex justify-center">
            <span className="bg-white px-6 text-sm text-gray-500">Our Leadership</span>
          </div>
        </div>

        {/* Leadership Section */}
        <div className="grid grid-cols-1 gap-x-12 gap-y-16 lg:grid-cols-2 items-start">
          <div className="relative lg:order-2">
            <Image
              src="/images/mark.jpg"
              alt="Mark Apodaca standing indoors in front of green plants and a window with wooden blinds, wearing a brown checked blazer, a white shirt, and a patterned tie. He is smiling confidently, and a small lapel pin is visible on his blazer."
              width={1365}
              height={2048}
              className="rounded-2xl object-cover shadow-xl aspect-[2/3] w-full"
              priority
            />
          </div>
          <div className="flex flex-col justify-start space-y-6 lg:order-1">
            <div className="space-y-6 text-base leading-7 text-gray-600">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">Mark Apodaca, MBA</h2>
              <p>
                With over 45 years of distinguished experience in Accounting and Finance, Mark Apodaca has established a remarkable career across corporate, educational, and nonprofit sectors. His executive tenure includes 16 years as Head of Finance at Hughes Aircraft Company's Radar System Group, where he demonstrated exceptional financial leadership. Subsequently, he served as Director of Finance for a combined 13 years at the Greater Los Angeles Agency on Deafness and Communication Service for the Deaf. Mark culminated his public service career after 18 years as Director of Finance and Chief Procurement Officer at the New Mexico School for the Deaf. Currently, he serves as Chief Financial Officer for both Global Technical Communications LLC and TDIforAccess, Inc., while also drawing from his experience as a former financial accounting instructor at UCLA.
              </p>
              <p>
                A native Californian, Mark holds an impressive academic portfolio: an Associate in Arts from Golden West College, a Bachelor of Science in Business Administration and MBA from Pepperdine University, complemented by a graduate Certificate in Accounting from UCLA and a Certificate in Government Contract Management. His expertise extends to finance and nonprofit organization management. He maintains professional affiliations with the Institute of Management Accountants and National Association of Tax Professionals.
              </p>
              <p>
                When not engaged in professional activities, Mark pursues his passion for chess, maintains an active reading schedule across various subjects, and dedicates time to serving on nonprofit boards and committees.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
