export default function Services() {
  const services = [
    {
      num: "01",
      name: "2D Fence Drawing Services",
      desc: "CAD-based fence layout drawings for residential and commercial projects. Perfect for permits, planning, and contractor submissions.",
      list: [
        "Residential & commercial layouts",
        "Chain link, wood, aluminum drawings",
        "Gate placement & access planning",
        "Material takeoff & quantity estimation",
        "Permit support drawings",
        "Property boundary fence design"
      ]
    },
    {
      num: "02",
      name: "Wood Staining Services",
      desc: "Professional application of Expert Stain & Seal products on fences, decks, pergolas, and outdoor structures.",
      list: [
        "Fence, deck & pergola staining",
        "New wood preparation & staining",
        "Old wood restoration & re-staining",
        "Cedar & pressure treated staining",
        "UV & waterproof sealing",
        "Color matching services"
      ]
    },
    {
      num: "03",
      name: "Temporary & Site Services",
      desc: "Complete temporary fencing solutions for construction sites, events, and emergency situations across Ontario.",
      list: [
        "Temporary fence rental setup",
        "Construction site fence management",
        "Site safety barrier installation",
        "Emergency fence repair service"
      ]
    },
    {
      num: "04",
      name: "Delivery & Logistics",
      desc: "Reliable material delivery across our 250km service radius. Same-day local, bulk job site, and scheduled contractor deliveries.",
      list: [
        "Same-day delivery (local KWC)",
        "Bulk job site delivery",
        "Scheduled contractor deliveries",
        "Small order pickup support"
      ]
    }
  ];

  return (
    <section className="services-section" id="services">
      <div className="section-eyebrow" style={{ color: 'rgba(255,255,255,.5)' }}>
        <span style={{ background: 'rgba(255,255,255,.1)', width: '24px', height: '2px', display: 'inline-block', verticalAlign: 'middle', marginRight: '8px' }}></span>
        What we do
      </div>
      <h2 className="section-h2">More than just <span>supply.</span></h2>
      <div className="services-grid">
        {services.map((service, index) => (
          <div key={index} className="service-card">
            <div className="service-num">{service.num}</div>
            <div className="service-name">
              {service.name.split(' ').map((word, wIndex) => (
                wIndex >= 1 ? <span key={wIndex}> {word}</span> : word
              ))}
            </div>
            <div className="service-desc">{service.desc}</div>
            <ul className="service-list">
              {service.list.map((item, lIndex) => (
                <li key={lIndex}>{item}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}