'use client'

import { Wrench, ShieldCheck, CalendarCheck } from 'lucide-react'

export default function AboutSection() {
  return (
    <section className="py-16 md:py-24 bg-white">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center max-w-6xl mx-auto">
          {/* Text Content */}
          <div className="order-2 lg:order-1">
            <h2 className="text-3xl md:text-4xl font-bold text-harbor-blue mb-6">
              Why Choose Harbor Smith?
            </h2>
            <p className="text-lg text-gray-600 mb-8">
              We're the San Francisco Bay Area's premier mobile boat maintenance service.
              Our professional team provides expert care, ensuring your vessel stays in pristine condition year-round.
            </p>

            {/* Features List */}
            <div className="space-y-6">
              <div className="flex gap-4">
                <div className="flex-shrink-0">
                  <div className="w-12 h-12 bg-harbor-gold/10 rounded-lg flex items-center justify-center">
                    <Wrench className="w-6 h-6 text-harbor-gold" />
                  </div>
                </div>
                <div>
                  <h4 className="text-lg font-semibold text-harbor-blue mb-1">Tailored Service</h4>
                  <p className="text-gray-600">We provide highly customized service that fits your needs.</p>
                </div>
              </div>

              <div className="flex gap-4">
                <div className="flex-shrink-0">
                  <div className="w-12 h-12 bg-harbor-gold/10 rounded-lg flex items-center justify-center">
                    <ShieldCheck className="w-6 h-6 text-harbor-gold" />
                  </div>
                </div>
                <div>
                  <h4 className="text-lg font-semibold text-harbor-blue mb-1">Certified Professionals</h4>
                  <p className="text-gray-600">Experienced technicians with marine industry certifications</p>
                </div>
              </div>

              <div className="flex gap-4">
                <div className="flex-shrink-0">
                  <div className="w-12 h-12 bg-harbor-gold/10 rounded-lg flex items-center justify-center">
                    <CalendarCheck className="w-6 h-6 text-harbor-gold" />
                  </div>
                </div>
                <div>
                  <h4 className="text-lg font-semibold text-harbor-blue mb-1">Reliable & Consistent</h4>
                  <p className="text-gray-600">Regular maintenance schedules tailored to your needs</p>
                </div>
              </div>
            </div>
          </div>

          {/* Image */}
          <div className="order-1 lg:order-2 relative">
            <img
              src="/leah_1.jpeg"
              alt="Harbor Smith team member"
              className="w-full rounded-xl shadow-xl"
            />
            <div className="absolute bottom-4 right-4 bg-harbor-blue text-white px-6 py-3 rounded-lg">
              <span className="block text-2xl font-bold">10+ Years</span>
              <span className="text-sm">of Excellence</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}