import React from 'react';
import { motion } from 'motion/react';
import { ServiceCardItem } from '../types';

const servicesData: ServiceCardItem[] = [
  {
    id: 'computers',
    icon: 'fa-solid fa-laptop-medical',
    title: 'Computers & Laptops',
    items: [
      'PC & Mac Troubleshooting',
      'Virus & Malware Removal',
      'Data Backup & Recovery',
      'New Device Setup'
    ]
  },
  {
    id: 'wifi',
    icon: 'fa-solid fa-wifi',
    title: 'Wi-Fi & Networking',
    items: [
      'Router Setup & Fixes',
      'Dead Spot Diagnosis',
      'Mesh Network Install',
      'Parental Controls'
    ]
  },
  {
    id: 'websites',
    icon: 'fa-solid fa-globe',
    title: 'Websites',
    items: [
      'Design, consultation, & creation',
      'Website hosting',
      'Management and updating',
      'Matching email addresses',
      'Online 24/7'
    ]
  },
  {
    id: 'tv',
    icon: 'fa-solid fa-tv',
    title: 'TV & Streaming',
    items: [
      'Smart TV & App Setup',
      'Sky / Freeview Tuning',
      'Soundbar Installation',
      'Netflix & iPlayer Help'
    ]
  },
  {
    id: 'printers',
    icon: 'fa-solid fa-print',
    title: 'Printers & Gadgets',
    items: [
      'Wireless Printer Setup',
      'Scanner Troubleshooting',
      'Smart Speaker Setup',
      'Digital Camera Help'
    ]
  },
  {
    id: 'why-me',
    icon: 'fa-solid fa-user-check',
    title: 'Why Should You Use Me?',
    items: [
      'I come to you and help you in your own home.',
      'I help you on your own tech and show you how to use it properly.',
      'I am not particularly time conscious.',
      'Over 40 years of IT experience.'
    ],
    isHighlighted: true
  }
];

export const ServicesSection: React.FC = () => {
  return (
    <section 
      id="services" 
      className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8 bg-[#56a0ab]/5 border-y border-[#56a0ab]/10"
    >
      <div className="max-w-7xl mx-auto">
        {/* Section Header */}
        <div className="text-center max-w-2xl mx-auto mb-12 sm:mb-16">
          <h2 className="text-2xl sm:text-3xl md:text-4xl font-montserrat font-black text-[#56a0ab] uppercase tracking-wide mb-3">
            🔧 Services I Offer
          </h2>
          <p className="font-inter font-light text-stone-600 text-sm sm:text-base">
            Comprehensive, patient, in-person assistance for homes and small businesses.
          </p>
        </div>

        {/* 6 Service Cards Responsive Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
          {servicesData.map((service, index) => (
            <motion.div
              key={service.id}
              initial={{ opacity: 0, y: 35 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-50px' }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              whileHover={{ y: -8 }}
              className={`bg-white p-6 sm:p-8 rounded-xl border-b-4 shadow-sm hover:shadow-xl transition-all duration-300 ${
                service.isHighlighted
                  ? 'border-[#8b5e3c] ring-1 ring-[#8b5e3c]/20'
                  : 'border-[#56a0ab]'
              }`}
            >
              <div className="mb-4 inline-flex items-center justify-center w-12 h-12 rounded-xl bg-[#56a0ab]/10 text-[#56a0ab]">
                <i className={`${service.icon} text-2xl`} />
              </div>

              <h3 className="font-montserrat font-black text-lg sm:text-xl text-[#333333] uppercase tracking-wide mb-4">
                {service.title}
              </h3>

              <ul className="space-y-2.5 font-inter font-light text-sm text-stone-600">
                {service.items.map((item, itemIdx) => (
                  <li key={itemIdx} className="flex items-start gap-2.5">
                    <span className="text-[#56a0ab] font-bold shrink-0 mt-0.5">✓</span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};