import React from 'react';
import { ShieldCheck, HeartHandshake, MapPin, Clock } from 'lucide-react';

export const AboutSection: React.FC = () => {
  return (
    <section id="about" className="py-16 sm:py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
      <div className="text-center max-w-3xl mx-auto">
        {/* Section Title */}
        <h2 className="text-2xl sm:text-3xl md:text-4xl font-montserrat font-black text-[#56a0ab] uppercase tracking-wide mb-4">
          🌟 Mobile Tech Support
        </h2>

        {/* Overview Paragraph */}
        <p className="font-inter font-light text-base sm:text-lg text-stone-700 leading-relaxed mb-6">
          Friendly, reliable help with everything tech-related—from PCs and printers to phones, smart TVs, and Wi-Fi. Serving homes and small businesses across the Cornwall area.
        </p>

        {/* Tagline */}
        <div className="tagline text-[#8b5e3c] font-montserrat font-black text-sm sm:text-lg md:text-xl uppercase tracking-widest py-3 px-6 bg-[#8b5e3c]/10 rounded-full inline-block border border-[#8b5e3c]/20 mb-12 shadow-sm">
          TECH DOESN'T HAVE TO BE TRICKY!
        </div>
      </div>

      {/* Feature Badges Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
        <div className="ss-card p-5 flex items-start gap-4">
          <div className="p-3 bg-[#56a0ab]/10 text-[#56a0ab] rounded-lg shrink-0">
            <MapPin className="w-6 h-6" />
          </div>
          <div>
            <h4 className="font-montserrat font-black text-sm text-[#333333] uppercase">Mobile Service</h4>
            <p className="font-inter font-light text-xs text-stone-600 mt-1">I come straight to your home or office anywhere in Cornwall.</p>
          </div>
        </div>

        <div className="ss-card p-5 flex items-start gap-4">
          <div className="p-3 bg-[#56a0ab]/10 text-[#56a0ab] rounded-lg shrink-0">
            <HeartHandshake className="w-6 h-6" />
          </div>
          <div>
            <h4 className="font-montserrat font-black text-sm text-[#333333] uppercase">Friendly & Patient</h4>
            <p className="font-inter font-light text-xs text-stone-600 mt-1">Clear advice without jargon, specialized for older adults and seniors.</p>
          </div>
        </div>

        <div className="ss-card p-5 flex items-start gap-4">
          <div className="p-3 bg-[#56a0ab]/10 text-[#56a0ab] rounded-lg shrink-0">
            <Clock className="w-6 h-6" />
          </div>
          <div>
            <h4 className="font-montserrat font-black text-sm text-[#333333] uppercase">Not Time Conscious</h4>
            <p className="font-inter font-light text-xs text-stone-600 mt-1">Never rushed. If we go over to ensure things work properly, great!</p>
          </div>
        </div>

        <div className="ss-card p-5 flex items-start gap-4">
          <div className="p-3 bg-[#56a0ab]/10 text-[#56a0ab] rounded-lg shrink-0">
            <ShieldCheck className="w-6 h-6" />
          </div>
          <div>
            <h4 className="font-montserrat font-black text-sm text-[#333333] uppercase">40+ Years Experience</h4>
            <p className="font-inter font-light text-xs text-stone-600 mt-1">Over four decades of deep IT expertise handling all technology.</p>
          </div>
        </div>
      </div>
    </section>
  );
};