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

export const metadata: Metadata = {
  title: 'Services - Hampton, Brown & Associates, PC',
  description: 'Comprehensive CPA services including public accounting, federal income tax, estate tax planning, financial planning, and advisory services.',
  openGraph: {
    title: 'Services - Hampton, Brown & Associates, PC',
    description: 'Comprehensive CPA services for individuals and businesses.',
    images: ['/images/service-tax-planning.jpg'],
  },
};

export default function PublicAccountingPage() {
  const service = services.find(s => s.id === 'public-accounting');
  
  if (!service) {
    return <div>Service not found</div>;
  }

  return (
    <main>
             {/* 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">
             Public Accounting Services
           </h1>
           <p className="text-xl text-cloud/90 max-w-3xl mx-auto mb-8">
             Professional assurance services providing credibility and assurance for your financial statements and business operations.
           </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">
             Schedule a Consultation
           </button>
         </div>
       </section>

      {/* Service Detail */}
      <section className="py-16 sm:py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16">
                         {/* Text column */}
             <div>
               <div className="flex items-center gap-3 mb-4">
                 <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-navy mr-4">
                   <Image
                     src="/images/service-tax-planning.jpg"
                     alt="Public Accounting"
                     width={64}
                     height={64}
                     className="h-12 w-12 object-cover rounded"
                   />
                 </div>
                 <div className="text-sm">Professional Assurance Services</div>
               </div>
              <h2 className="text-2xl font-semibold">Public Accounting</h2>
              <p className="mt-3">
                Independent assurance for credible financial statements and stronger business controls.
              </p>

              <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-8">
                <div>
                  <h3 className="font-medium mb-2">What We Do</h3>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Financial statement audits</li>
                    <li>Reviews & compilations</li>
                    <li>Internal control assessments</li>
                    <li>Fraud risk evaluation</li>
                    <li>Compliance testing</li>
                    <li>Management recommendations</li>
                  </ul>
                </div>
                <div>
                  <h3 className="font-medium mb-2">Outcomes</h3>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Enhanced financial credibility</li>
                    <li>Improved internal controls</li>
                    <li>Better access to capital</li>
                    <li>Regulatory assurance</li>
                  </ul>
                </div>
              </div>

              <div className="mt-8">
                <a href="/services" className="inline-block px-4 py-2 border rounded-md">
                  View All Services
                </a>
              </div>
            </div>

                         {/* Visual card */}
             <div className="border rounded-xl p-8 flex flex-col items-center justify-center text-center">
               <div className="mb-6 h-48 w-48 border rounded-lg overflow-hidden">
                 <Image
                   src="/images/service-tax-planning.jpg"
                   alt="Public Accounting"
                   width={192}
                   height={192}
                   className="h-full w-full object-cover"
                 />
               </div>
               <div className="text-xl font-medium">Public Accounting</div>
               <div className="text-sm text-gray-600">Professional Assurance Services</div>
             </div>
          </div>
        </div>
      </section>

      {/* Bottom CTA */}
      <section className="py-16 sm:py-24">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-2xl font-semibold">Ready to Get Started?</h2>
          <p className="mt-3">
            Contact us today to learn how our services can help you achieve your goals.
          </p>
          <div className="mt-6 flex flex-col sm:flex-row gap-3 justify-center">
            <a href="/contact" className="px-5 py-3 border rounded-md">Schedule Free Consultation</a>
            <a href="tel:+13618887711" className="px-5 py-3 border rounded-md">Call (361) 888-7711</a>
          </div>
        </div>
      </section>
    </main>
  );
}