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

export const metadata: Metadata = {
  title: 'Estate Tax Planning Services',
  description: 'Comprehensive estate tax planning to protect your legacy and minimize estate taxes.',
  openGraph: {
    title: 'Estate Tax Planning Services',
    description: 'Comprehensive estate tax planning to protect your legacy and minimize estate taxes.',
    images: ['/images/service-estate-tax.jpg'],
  },
};

export default function EstateTaxPlanningPage() {
  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">
             Estate Tax Planning Services
           </h1>
           <p className="text-xl text-cloud/90 max-w-3xl mx-auto mb-8">
             Comprehensive estate planning strategies to minimize estate taxes and ensure your wealth transfers efficiently to future generations.
           </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>

       <section className="bg-cloud py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 lg:px-6">
          <div className="mx-auto max-w-2xl lg:max-w-none">
            <div className="grid grid-cols-1 gap-16 lg:grid-cols-2 lg:gap-24">
              <div>
                <div className="flex items-center mb-6">
                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-navy mr-4">
                    <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>
                    <h1 className="text-3xl font-bold tracking-tight text-ink sm:text-4xl">
                      Estate Tax Planning
                    </h1>
                    <p className="text-lg text-teal">Protect and Transfer Your Wealth</p>
                  </div>
                </div>
                
                <p className="text-lg leading-8 text-slate mb-8">
                  Comprehensive estate planning strategies to minimize estate taxes and ensure your wealth transfers efficiently to future generations.
                </p>

                {/* Blue Banner Section */}
                <div className="bg-navy rounded-lg p-6 mb-8">
                  <div className="flex items-center">
                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-teal mr-4">
                      <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-cloud">Protect and Transfer Your Wealth</h3>
                      <p className="text-slate-200 mt-1">Comprehensive estate planning strategies for your legacy</p>
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                  <div>
                    <h3 className="text-lg font-semibold text-ink mb-4">What We Do</h3>
                    <ul className="space-y-3">
                      <li className="flex items-start">
                        <div className="flex-shrink-0">
                          <div className="flex h-2 w-2 items-center justify-center rounded-full bg-teal mt-2 mr-3"></div>
                        </div>
                        <span className="text-slate">Estate tax reduction strategies</span>
                      </li>
                      <li className="flex items-start">
                        <div className="flex-shrink-0">
                          <div className="flex h-2 w-2 items-center justify-center rounded-full bg-teal mt-2 mr-3"></div>
                        </div>
                        <span className="text-slate">Business succession planning</span>
                      </li>
                      <li className="flex items-start">
                        <div className="flex-shrink-0">
                          <div className="flex h-2 w-2 items-center justify-center rounded-full bg-teal mt-2 mr-3"></div>
                        </div>
                        <span className="text-slate">Trust structure design and implementation</span>
                      </li>
                      <li className="flex items-start">
                        <div className="flex-shrink-0">
                          <div className="flex h-2 w-2 items-center justify-center rounded-full bg-teal mt-2 mr-3"></div>
                        </div>
                        <span className="text-slate">Gift tax planning and compliance</span>
                      </li>
                      <li className="flex items-start">
                        <div className="flex-shrink-0">
                          <div className="flex h-2 w-2 items-center justify-center rounded-full bg-teal mt-2 mr-3"></div>
                        </div>
                        <span className="text-slate">Charitable giving strategies</span>
                      </li>
                      <li className="flex items-start">
                        <div className="flex-shrink-0">
                          <div className="flex h-2 w-2 items-center justify-center rounded-full bg-teal mt-2 mr-3"></div>
                        </div>
                        <span className="text-slate">Generation-skipping transfer tax planning</span>
                      </li>
                    </ul>
                  </div>

                  <div>
                    <h3 className="text-lg font-semibold text-ink mb-4">Outcomes</h3>
                    <ul className="space-y-3">
                      <li className="flex items-start">
                        <div className="flex-shrink-0">
                          <svg className="h-5 w-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                          </svg>
                        </div>
                        <span className="text-slate">Minimized estate tax liability</span>
                      </li>
                      <li className="flex items-start">
                        <div className="flex-shrink-0">
                          <svg className="h-5 w-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                          </svg>
                        </div>
                        <span className="text-slate">Smooth wealth transfer to heirs</span>
                      </li>
                      <li className="flex items-start">
                        <div className="flex-shrink-0">
                          <svg className="h-5 w-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                          </svg>
                        </div>
                        <span className="text-slate">Protected family business interests</span>
                      </li>
                      <li className="flex items-start">
                        <div className="flex-shrink-0">
                          <svg className="h-5 w-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                          </svg>
                        </div>
                        <span className="text-slate">Optimized charitable giving impact</span>
                      </li>
                    </ul>
                  </div>
                </div>

                <div className="mt-8">
                  <button className="bg-navy text-cloud px-6 py-3 rounded-lg font-semibold hover:bg-navy/90 transition-colors flex items-center">
                    Learn More About Estate Tax Planning
                    <svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </button>
                </div>
              </div>

              <div className="relative">
                <div className="bg-sand p-8 rounded-lg shadow-lg">
                  <div className="flex items-center justify-center mb-6">
                    <div className="h-64 w-64 border rounded-lg overflow-hidden">
                      <Image
                        src="/images/service-estate-tax.jpg"
                        alt="Estate Tax Planning"
                        width={256}
                        height={256}
                        className="h-full w-full object-cover"
                      />
                    </div>
                  </div>
                  <h2 className="text-2xl font-bold text-ink text-center mb-2">Estate Tax Planning</h2>
                  <p className="text-teal text-center">Protect and Transfer Your Wealth</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTASection
        title="Ready to Get Started?"
        description="Contact Hampton, Brown & Associates today to discuss your needs and learn how our comprehensive CPA services can help you achieve your financial goals."
        primaryCta={{
          text: 'Schedule Free Consultation',
          href: '/contact',
          icon: 'phone',
        }}
        secondaryCta={{
          text: 'Call (361) 888-7711',
          href: 'tel:+1-361-888-7711',
        }}
        variant="dark"
      />
    </>
  );
}