import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import { Award, Users, Shield, CheckCircle2 } from "lucide-react";

const About = () => {
  const stats = [
    { number: "20+", label: "Years Experience" },
    { number: "500+", label: "Clients Served" },
    { number: "99%", label: "Client Retention" },
    { number: "24hr", label: "Response Time" }
  ];

  const credentials = [
    "Certified Public Accountant (CPA)",
    "American Institute of CPAs (AICPA) Member",
    "IRS Enrolled Agent",
    "Texas State Board of Public Accountancy Licensed",
    "QuickBooks ProAdvisor Certified"
  ];

  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="pt-16">
        {/* Hero Banner */}
        <section 
          className="relative py-32 flex items-center justify-center text-center"
          style={{
            backgroundImage: "url('/lovable-uploads/bea5e6b1-7510-4876-955e-a265f2600ec5.png')",
            backgroundSize: "cover",
            backgroundPosition: "center"
          }}
        >
          <div className="absolute inset-0 bg-forest/60"></div>
          <div className="relative z-10 max-w-4xl mx-auto px-4">
            <h1 className="text-display-xl font-display font-bold text-cream mb-6">
              Your Financial Partner Since 2003
            </h1>
            <p className="text-body-lg text-cream/90 max-w-2xl mx-auto">
              Building lasting relationships through trusted expertise, personalized service, and unwavering commitment to your financial success.
            </p>
          </div>
        </section>

        {/* Story Section */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="grid lg:grid-cols-3 gap-12 items-start">
                <div className="lg:col-span-2">
                  <h2 className="text-display-lg font-display font-semibold text-forest mb-8">
                    About Greg Knopp, P.C.
                  </h2>
                  
                  <div className="prose prose-lg text-sage space-y-6">
                    <p className="text-body-lg leading-relaxed">
                      For over two decades, Greg Knopp has been the trusted CPA partner for Corpus Christi's families and businesses. What started as a commitment to provide honest, expert financial guidance has grown into a practice built on lasting relationships and proven results.
                    </p>
                    
                    <p className="text-body-lg leading-relaxed">
                      Our approach is simple: we believe every client deserves personalized attention, clear communication, and strategies tailored to their unique situation. Whether you're navigating complex tax issues, planning for business growth, or seeking peace of mind with your personal finances, we're here to guide you every step of the way.
                    </p>
                    
                    <p className="text-body-lg leading-relaxed">
                      Greg's expertise spans individual and business tax preparation, full-service accounting, payroll management, IRS representation, and strategic business consulting. Our commitment to staying current with ever-changing tax laws and regulations ensures you always receive the most effective and compliant solutions.
                    </p>
                  </div>
                </div>
                
                {/* Stats */}
                <div className="lg:col-span-1">
                  <div className="bg-card rounded-2xl p-8 card-elevation">
                    <h3 className="font-display font-semibold text-forest mb-6 text-center">
                      By the Numbers
                    </h3>
                    <div className="space-y-6">
                      {stats.map((stat, index) => (
                        <div key={index} className="text-center">
                          <div className="text-3xl font-display font-bold text-brass mb-1">
                            {stat.number}
                          </div>
                          <div className="text-sm text-sage">
                            {stat.label}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Credentials Section */}
        <section className="py-24 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto text-center">
              <h2 className="text-display-lg font-display font-semibold text-forest mb-8">
                Credentials & Certifications
              </h2>
              
              <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
                {credentials.map((credential, index) => (
                  <div key={index} className="flex items-center gap-3 bg-card rounded-2xl p-6 card-elevation">
                    <CheckCircle2 className="w-6 h-6 text-brass flex-shrink-0" strokeWidth={1.5} />
                    <span className="text-sage font-medium">{credential}</span>
                  </div>
                ))}
              </div>
              
              <p className="text-sage mt-8 max-w-2xl mx-auto text-body-lg">
                Continuous education and professional development ensure we stay at the forefront of tax law, accounting standards, and best practices in financial planning.
              </p>
            </div>
          </div>
        </section>

        {/* Values Section */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <h2 className="text-display-lg font-display font-semibold text-forest mb-12 text-center">
                Our Core Values
              </h2>
              
              <div className="grid md:grid-cols-3 gap-8">
                <div className="text-center">
                  <div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                    <Shield className="w-8 h-8 text-brass" strokeWidth={1.5} />
                  </div>
                  <h3 className="text-display-md font-display font-medium text-forest mb-4">
                    Integrity
                  </h3>
                  <p className="text-sage leading-relaxed">
                    Honest, transparent communication and ethical practices in every client interaction.
                  </p>
                </div>
                
                <div className="text-center">
                  <div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                    <Award className="w-8 h-8 text-brass" strokeWidth={1.5} />
                  </div>
                  <h3 className="text-display-md font-display font-medium text-forest mb-4">
                    Excellence
                  </h3>
                  <p className="text-sage leading-relaxed">
                    Meticulous attention to detail and commitment to delivering the highest quality results.
                  </p>
                </div>
                
                <div className="text-center">
                  <div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                    <Users className="w-8 h-8 text-brass" strokeWidth={1.5} />
                  </div>
                  <h3 className="text-display-md font-display font-medium text-forest mb-4">
                    Partnership
                  </h3>
                  <p className="text-sage leading-relaxed">
                    Building long-term relationships based on trust, reliability, and mutual success.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default About;