'use client'

import { Phone, Mail, MapPin, Clock } from 'lucide-react'

export default function ContactSection() {
  return (
    <section id="contact" className="py-16 md:py-24 bg-harbor-blue text-white">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Schedule Service?</h2>
          <p className="text-lg md:text-xl mb-12 opacity-90">
            Contact us today for a free consultation and quote
          </p>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {/* Contact Info */}
            <div className="space-y-4">
              <div className="flex items-center justify-center md:justify-start gap-3">
                <Phone className="w-5 h-5 text-harbor-gold" />
                <a href="tel:510-701-2535" className="hover:text-harbor-gold transition-colors">
                  (510) 701-2535
                </a>
              </div>
              <div className="flex items-center justify-center md:justify-start gap-3">
                <Mail className="w-5 h-5 text-harbor-gold" />
                <a href="mailto:info@harborsmith.com" className="hover:text-harbor-gold transition-colors">
                  info@harborsmith.com
                </a>
              </div>
              <div className="flex items-center justify-center md:justify-start gap-3">
                <MapPin className="w-5 h-5 text-harbor-gold" />
                <span>San Francisco Bay Area</span>
              </div>
              <div className="flex items-center justify-center md:justify-start gap-3">
                <Clock className="w-5 h-5 text-harbor-gold" />
                <span>Mon-Sat: 8AM-6PM</span>
              </div>
            </div>

            {/* CTA */}
            <div className="flex flex-col justify-center">
              <h3 className="text-2xl font-bold mb-4">Get Your Free Quote</h3>
              <p className="mb-6 opacity-90">Professional service at competitive prices</p>
              <a
                href="tel:510-701-2535"
                className="inline-block bg-harbor-gold text-white font-semibold py-4 px-8 rounded-lg hover:bg-harbor-amber transition-colors mx-auto md:mx-0"
              >
                Call Now: (510) 701-2535
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}