import type { Metadata } from 'next';
import { Hero } from '@/components/hero';
import { ProcessSteps } from '@/components/process-steps';
import { ServiceCard } from '@/components/service-card';
import { Testimonial } from '@/components/testimonial';
import { TrustPanel } from '@/components/trust-panel';
import { CTASection } from '@/components/cta-section';
import { getAllServices } from '@/data/services';
import testimonialsData from '@/data/testimonials.json';

export const metadata: Metadata = {
  title: 'Professional Tax Planning & Preparation Services',
  description: 'Strategic year-round tax planning and professional tax preparation services in Corpus Christi, Texas. Save money and reduce stress with our comprehensive tax solutions.',
  openGraph: {
    title: 'Professional Tax Planning & Preparation Services',
    description: 'Strategic year-round tax planning and professional tax preparation services in Corpus Christi, Texas.',
    images: ['/images/home-hero.jpg'],
  },
};

export default function TaxPlanningPage() {
  const services = getAllServices();
  const testimonials = testimonialsData.slice(0, 3);

  return (
    <>
      <Hero
        title="Strategic Tax Planning That Saves You Money"
        subtitle="Professional tax planning and preparation services in Corpus Christi. We help individuals and businesses minimize their tax burden through year-round strategic planning and expert preparation."
        ctaText="Book Your Consultation"
        ctaHref="/contact"
        imageSrc="/images/home-hero.jpg"
        imageAlt="Two CPAs in a sunlit Corpus Christi office reviewing a year-round tax plan on a laptop, neat desk with calendar and organized folders"
      />

      <ProcessSteps />

      <section className="bg-sand py-24 sm:py-32">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-3xl font-bold tracking-tight text-ink sm:text-4xl">
              Comprehensive Tax Services
            </h2>
            <p className="mt-6 text-lg leading-8 text-slate">
              From strategic planning to expert preparation, we provide the full spectrum of tax services to meet your needs.
            </p>
          </div>
          <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
            {services.map((service) => (
              <ServiceCard
                key={service.id}
                title={service.title}
                description={service.description}
                image={service.image}
                imageAlt={`${service.title} service`}
                href={`/services/${service.slug}`}
                features={service.features}
              />
            ))}
          </div>
        </div>
      </section>

      <TrustPanel />

      <section className="bg-cloud py-24 sm:py-32">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-3xl font-bold tracking-tight text-ink sm:text-4xl">
              What Our Clients Say
            </h2>
            <p className="mt-6 text-lg leading-8 text-slate">
              Don't just take our word for it. Here's what our clients have to say about their experience.
            </p>
          </div>
          <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
            {testimonials.map((testimonial) => (
              <Testimonial
                key={testimonial.id}
                quote={testimonial.quote}
                author={testimonial.author}
                role={testimonial.role}
                rating={testimonial.rating}
              />
            ))}
          </div>
        </div>
      </section>

      <CTASection
        title="Ready to Optimize Your Tax Strategy?"
        description="Schedule a consultation with our tax experts and discover how we can help you save money and reduce stress."
        primaryCta={{
          text: 'Book Your Consultation',
          href: '/contact',
          icon: 'phone',
        }}
        secondaryCta={{
          text: 'Learn About Our Process',
          href: '/about',
        }}
        variant="dark"
      />
    </>
  );
}