import type { Metadata } from 'next';
import Image from 'next/image';
import { Mail, Phone, MapPin, Clock } from 'lucide-react';
import { ContactForm } from '@/components/contact-form';
import { CTASection } from '@/components/cta-section';

export const metadata: Metadata = {
  title: 'Contact Us',
  description: 'Get in touch with Hamton Brown CPA for professional tax and financial services in Corpus Christi, Texas. Schedule a consultation today.',
  openGraph: {
    title: 'Contact Us',
    description: 'Get in touch with Hamton Brown CPA for professional tax and financial services.',
    images: ['/images/contact-exterior.jpg'],
  },
};

export default function ContactPage() {
  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">
            Get in Touch
          </h1>
          <p className="text-xl text-cloud/90 max-w-3xl mx-auto mb-8">
            Ready to start your tax planning journey? Contact us today to schedule a consultation or ask any questions about our services.
          </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-24 sm:py-32">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <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>
                <h2 className="text-3xl font-bold tracking-tight text-ink sm:text-4xl">
                  Contact Information
                </h2>
                <p className="mt-6 text-lg leading-8 text-slate">
                  We're here to help with all your tax and financial needs. Reach out to us through any of the methods below.
                </p>
                <div className="mt-8 space-y-6">
                  <div className="flex items-center space-x-4">
                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-navy">
                      <Phone className="h-5 w-5 text-cloud" />
                    </div>
                    <div>
                      <p className="text-sm font-medium text-slate">Phone</p>
                                             <p className="text-lg font-semibold text-ink">(361) 888-7711</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-4">
                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-navy">
                      <Mail className="h-5 w-5 text-cloud" />
                    </div>
                    <div>
                      <p className="text-sm font-medium text-slate">Email</p>
                                             <p className="text-lg font-semibold text-ink">info@hamptonbrown.com</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-4">
                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-navy">
                      <MapPin className="h-5 w-5 text-cloud" />
                    </div>
                    <div>
                      <p className="text-sm font-medium text-slate">Address</p>
                                             <p className="text-lg font-semibold text-ink">711 N. Carancahua St, Suite 800</p>
                       <p className="text-slate">Corpus Christi, TX 78401-0545</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-4">
                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-navy">
                      <Clock className="h-5 w-5 text-cloud" />
                    </div>
                    <div>
                      <p className="text-sm font-medium text-slate">Business Hours</p>
                      <p className="text-lg font-semibold text-ink">Monday - Friday</p>
                      <p className="text-slate">9:00 AM - 5:00 PM</p>
                    </div>
                  </div>
                </div>
                <div className="mt-8 p-6 bg-sand rounded-lg">
                  <h3 className="text-lg font-semibold text-ink mb-2">Free Consultation</h3>
                  <p className="text-sm text-slate">
                    Schedule a free 30-minute consultation to discuss your tax and financial needs. No obligation, just professional advice to help you make informed decisions.
                  </p>
                </div>
              </div>
              <div>
                <ContactForm />
              </div>
            </div>
          </div>
        </div>
      </section>

      <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 lg:max-w-none">
            <div className="grid grid-cols-1 gap-16 lg:grid-cols-2 lg:gap-24">
              <div>
                <h2 className="text-3xl font-bold tracking-tight text-ink sm:text-4xl">
                  Visit Our Office
                </h2>
                <p className="mt-6 text-lg leading-8 text-slate">
                  Located in the heart of Corpus Christi, our office is easily accessible and provides a comfortable environment for confidential discussions about your financial matters.
                </p>
                <div className="mt-8 space-y-4">
                  <div>
                    <h3 className="text-lg font-semibold text-ink">Parking</h3>
                    <p className="text-slate">Free parking available in our building's parking garage</p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-ink">Accessibility</h3>
                    <p className="text-slate">Our office is fully accessible with elevator access and ADA-compliant facilities</p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-ink">Appointments</h3>
                    <p className="text-slate">We recommend scheduling appointments in advance to ensure we can give you our full attention</p>
                  </div>
                </div>
              </div>
              <div className="relative">
                                                   <Image
                    src="/images/contact-office.jpg"
                   alt="Professional office interior with clean desk setup"
                   width={600}
                   height={400}
                   className="rounded-lg shadow-lg"
                 />
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTASection
        title="Ready to Get Started?"
        description="Don't wait until tax season to start planning. Contact us today and take the first step toward better financial management."
        primaryCta={{
          text: 'Schedule Consultation',
          href: '/contact',
          icon: 'phone',
        }}
        secondaryCta={{
          text: 'Learn About Our Services',
          href: '/services/tax-planning',
        }}
        variant="dark"
      />
    </>
  );
}