import type { Metadata } from 'next';
import { CTASection } from '@/components/cta-section';

export const metadata: Metadata = {
  title: 'About Hampton, Brown & Associates, PC',
  description: 'Learn about our team of experienced CPAs and our commitment to helping clients achieve their economic goals through federal tax services and financial planning in Corpus Christi, Texas.',
  openGraph: {
    title: 'About Hampton, Brown & Associates, PC',
    description: 'Learn about our team of experienced CPAs and our commitment to helping clients achieve their economic goals.',
    images: ['/images/about-partners.jpg'],
  },
};

export default function AboutPage() {
  return (
    <>
      {/* Hero */}
      <section className="bg-navy py-16 sm:py-24">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl font-bold tracking-tight text-cloud sm:text-5xl mb-6">
            About Hampton, Brown & Associates
          </h1>
          <p className="text-xl text-cloud/90 max-w-3xl mx-auto mb-8">
            Three decades of trusted CPA services, built on clear communication, ethical practices, and genuine commitment to our clients' financial success.
          </p>
          <button className="bg-cloud text-navy px-8 py-3 rounded-lg font-semibold hover:bg-cloud/90 transition-colors border-2 border-cloud">
            Learn More About Our Team
          </button>
        </div>
      </section>

      {/* Our Story Section */}
      <section className="bg-cloud py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 lg:px-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div>
              <h2 className="text-3xl font-bold tracking-tight text-ink sm:text-4xl mb-6">
                Our Story
              </h2>
              <div className="space-y-6 text-lg text-slate">
                <p>
                  Founded in 1992 by Jerry Hampton and Cheryl Brown, Hampton, Brown & Associates began with a simple mission: to provide Corpus Christi businesses and individuals with proactive, planning-focused accounting and financial services.
                </p>
                <p>
                  Over three decades later, we've built our reputation on clear communication, ethical practices, and a genuine commitment to our clients' financial success. We don't just prepare your taxes—we help you plan for the future.
                </p>
              </div>
            </div>
            <div className="bg-sand p-8 rounded-lg text-center">
              <div className="flex items-center justify-center mb-4">
                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-teal">
                  <svg className="h-8 w-8 text-cloud" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
              </div>
              <div className="text-4xl font-bold text-teal mb-2">32+</div>
              <div className="text-lg font-semibold text-ink">Years of Service</div>
              <div className="text-slate">Established 1992</div>
            </div>
          </div>
        </div>
      </section>

      {/* Our Values Section */}
      <section className="bg-sand py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 lg:px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold tracking-tight text-ink sm:text-4xl mb-4">
              Our Values
            </h2>
            <p className="text-lg text-slate max-w-3xl mx-auto">
              These core principles guide everything we do and every relationship we build.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-cloud p-8 rounded-lg text-center">
              <div className="flex items-center justify-center mb-4">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-teal">
                  <svg className="h-6 w-6 text-cloud" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
              </div>
              <h3 className="text-xl font-semibold text-ink mb-3">Planning-First Approach</h3>
              <p className="text-slate">
                We believe in proactive planning rather than reactive solutions. Every strategy is designed with your long-term success in mind.
              </p>
            </div>
            <div className="bg-cloud p-8 rounded-lg text-center">
              <div className="flex items-center justify-center mb-4">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-teal">
                  <svg className="h-6 w-6 text-cloud" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                  </svg>
                </div>
              </div>
              <h3 className="text-xl font-semibold text-ink mb-3">Clear Communication</h3>
              <p className="text-slate">
                No jargon, no confusion. We explain complex financial matters in plain English so you can make informed decisions.
              </p>
            </div>
            <div className="bg-cloud p-8 rounded-lg text-center">
              <div className="flex items-center justify-center mb-4">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-teal">
                  <svg className="h-6 w-6 text-cloud" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                  </svg>
                </div>
              </div>
              <h3 className="text-xl font-semibold text-ink mb-3">Ethical Standards</h3>
              <p className="text-slate">
                Our commitment to integrity and professional ethics guides every client relationship and business decision we make.
              </p>
            </div>
            <div className="bg-cloud p-8 rounded-lg text-center">
              <div className="flex items-center justify-center mb-4">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-teal">
                  <svg className="h-6 w-6 text-cloud" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
              </div>
              <h3 className="text-xl font-semibold text-ink mb-3">Responsive Service</h3>
              <p className="text-slate">
                When you need us, we're here. Quick response times and proactive communication are fundamental to our service.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Our Journey Timeline */}
      <section className="bg-cloud py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 lg:px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold tracking-tight text-ink sm:text-4xl mb-4">
              Our Journey
            </h2>
            <p className="text-lg text-slate max-w-3xl mx-auto">
              Three decades of growth, service, and commitment to our clients.
            </p>
          </div>
          <div className="space-y-8">
            <div className="flex items-start space-x-6">
              <div className="flex-shrink-0">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-teal text-cloud font-bold">
                  1992
                </div>
              </div>
              <div className="bg-sand p-6 rounded-lg flex-1">
                <h3 className="text-xl font-semibold text-ink mb-2">Firm Founded</h3>
                <p className="text-slate">
                  Jerry Hampton and Cheryl Brown established the firm with a vision to provide comprehensive CPA services to Corpus Christi.
                </p>
              </div>
            </div>
            <div className="flex items-start space-x-6">
              <div className="flex-shrink-0">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-teal text-cloud font-bold">
                  2000
                </div>
              </div>
              <div className="bg-sand p-6 rounded-lg flex-1">
                <h3 className="text-xl font-semibold text-ink mb-2">Expanded Services</h3>
                <p className="text-slate">
                  Added estate planning and financial advisory services to better serve our growing client base.
                </p>
              </div>
            </div>
            <div className="flex items-start space-x-6">
              <div className="flex-shrink-0">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-teal text-cloud font-bold">
                  2010
                </div>
              </div>
              <div className="bg-sand p-6 rounded-lg flex-1">
                <h3 className="text-xl font-semibold text-ink mb-2">500+ Clients</h3>
                <p className="text-slate">
                  Reached milestone of serving over 500 individual and business clients throughout South Texas.
                </p>
              </div>
            </div>
            <div className="flex items-start space-x-6">
              <div className="flex-shrink-0">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-teal text-cloud font-bold">
                  2024
                </div>
              </div>
              <div className="bg-sand p-6 rounded-lg flex-1">
                <h3 className="text-xl font-semibold text-ink mb-2">Continued Excellence</h3>
                <p className="text-slate">
                  Over three decades of trusted service with a commitment to innovation and client success.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Leadership Team */}
      <section className="bg-sand py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 lg:px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold tracking-tight text-ink sm:text-4xl mb-4">
              Leadership Team
            </h2>
            <p className="text-lg text-slate max-w-3xl mx-auto">
              Meet the experienced CPAs who founded and continue to lead our firm.
            </p>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div className="bg-cloud p-8 rounded-lg text-center">
              <div className="flex items-center justify-center mb-6">
                <div className="flex h-20 w-20 items-center justify-center rounded-full bg-teal text-2xl font-bold text-cloud">
                  JH
                </div>
              </div>
              <h3 className="text-2xl font-bold text-ink mb-2">Jerry Hampton, CPA</h3>
              <p className="text-teal font-semibold mb-4">Managing Partner & Founder</p>
              <p className="text-slate mb-6">
                With over 30 years of experience in public accounting, Jerry specializes in complex tax strategies and business advisory services. His expertise helps clients minimize tax liability while maximizing their economic potential.
              </p>
              <div className="space-y-2 text-sm text-slate">
                <div className="flex items-center justify-center">
                  <div className="w-2 h-2 bg-teal rounded-full mr-3"></div>
                  CPA License: Texas State Board
                </div>
                <div className="flex items-center justify-center">
                  <div className="w-2 h-2 bg-teal rounded-full mr-3"></div>
                  AICPA Member
                </div>
                <div className="flex items-center justify-center">
                  <div className="w-2 h-2 bg-teal rounded-full mr-3"></div>
                  Specializes in Business Tax Planning
                </div>
              </div>
            </div>
            <div className="bg-cloud p-8 rounded-lg text-center">
              <div className="flex items-center justify-center mb-6">
                <div className="flex h-20 w-20 items-center justify-center rounded-full bg-teal text-2xl font-bold text-cloud">
                  CB
                </div>
              </div>
              <h3 className="text-2xl font-bold text-ink mb-2">Cheryl Brown, CPA</h3>
              <p className="text-teal font-semibold mb-4">Partner & Founder</p>
              <p className="text-slate mb-6">
                Cheryl brings extensive expertise in estate planning, individual tax preparation, and financial planning. Her client-focused approach ensures personalized solutions that align with each client's unique goals and circumstances.
              </p>
              <div className="space-y-2 text-sm text-slate">
                <div className="flex items-center justify-center">
                  <div className="w-2 h-2 bg-teal rounded-full mr-3"></div>
                  CPA License: Texas State Board
                </div>
                <div className="flex items-center justify-center">
                  <div className="w-2 h-2 bg-teal rounded-full mr-3"></div>
                  Estate Planning Specialist
                </div>
                <div className="flex items-center justify-center">
                  <div className="w-2 h-2 bg-teal rounded-full mr-3"></div>
                  Personal Financial Planning
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Mission Section */}
      <section className="bg-cloud py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 lg:px-6">
          <div className="text-center">
            <h2 className="text-3xl font-bold tracking-tight text-ink sm:text-4xl mb-6">
              Our Mission
            </h2>
            <p className="text-lg text-slate max-w-4xl mx-auto mb-8">
              To provide exceptional accounting, tax, and financial planning services through proactive planning, clear communication, and unwavering commitment to our clients' long-term financial success.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button className="bg-navy text-cloud px-8 py-3 rounded-lg font-semibold hover:bg-navy/90 transition-colors">
                Experience the Difference
              </button>
              <button className="border-2 border-navy text-navy px-8 py-3 rounded-lg font-semibold hover:bg-navy hover:text-cloud transition-colors">
                Meet Our Team
              </button>
            </div>
          </div>
        </div>
      </section>

      <CTASection
        title="Ready to Work with Our Team?"
        description="Schedule a consultation with our experienced CPAs and discover how we can help you achieve your financial goals."
        primaryCta={{
          text: 'Schedule Consultation',
          href: '/contact',
          icon: 'phone',
        }}
        secondaryCta={{
          text: 'Learn About Our Services',
          href: '/services/public-accounting',
        }}
        variant="dark"
      />
    </>
  );
}