export default function Services() {
  const services = [
    {
      num: "01",
      name: "2D Fence",
      span: "Drawing Services",
      desc: "CAD-based fence layout drawings for residential and commercial projects. Perfect for permits, planning, and contractor submissions.",
      bullets: [
        "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",
      span: "Staining Services",
      desc: "Professional application of Expert Stain & Seal products on fences, decks, pergolas, and outdoor structures.",
      bullets: [
        "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 &",
      span: "Site Services",
      desc: "Complete temporary fencing solutions for construction sites, events, and emergencies across Ontario.",
      bullets: [
        "Temporary fence rental setup", "Construction site fence management",
        "Beer gardens, festivals & events", "Emergency fence same-day KWC"
      ]
    },
    {
      num: "04",
      name: "Delivery &",
      span: "Logistics",
      desc: "Reliable material delivery across our 250km service radius with contractor accounts for streamlined ordering.",
      bullets: [
        "Scheduled job site delivery", "Bulk job site delivery",
        "Contractor account ordering", "250km Ontario radius from KWC"
      ]
    }
  ];

  return (
    <section className="services-section" id="services">
      <div className="reveal">
        <div className="section-eyebrow">What we do</div>
        <h2 className="sh white">More than just <span>supply.</span></h2>
      </div>

      <div className="services-grid reveal">
        {services.map((service, index) => (
          <div key={index} className="service-card">
            <div className="service-num">{service.num}</div>
            <div className="service-name">{service.name} <span>{service.span}</span></div>
            <div className="service-desc">{service.desc}</div>
            <ul className="service-list">
              {service.bullets.map((bullet, bIndex) => (
                <li key={bIndex}>{bullet}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}