export default function WhoWeServe() {
  const targets = [
    { priority: 1, name: "Fence contractors", examples: "Residential · Commercial · Chain link specialists · Ornamental installers" },
    { priority: 1, name: "General contractors", examples: "Landscaping · Deck builders · Pool contractors · Renovation" },
    { priority: 1, name: "Builders & developers", examples: "Home builders · Commercial builders · Site developers · Real estate developers" },
    { priority: 2, name: "Property managers", examples: "Apartments · Commercial properties · Industrial facilities · Storage" },
    { priority: 2, name: "Staining contractors", examples: "Deck staining · Fence staining · Painters · Handyman services · Pressure washing" },
    { priority: 2, name: "Event & rental companies", examples: "Event management · Temp fence rental · Crowd control · Festival organizers" },
    { priority: 3, name: "Government & institutions", examples: "Municipalities · Schools · Parks & rec · Public infrastructure · Government contractors", type: "Specialty" },
    { priority: 3, name: "Agriculture & rural", examples: "Farms · Ranches · Livestock owners · Agricultural businesses", type: "Specialty" },
  ];

  return (
    <section className="targets-section" id="targets">
      <div className="section-eyebrow">Who we serve</div>
      <h2 className="section-h2">Built for the<br />people who <span>build.</span></h2>
      <div className="targets-grid">
        {targets.map((target, index) => (
          <div key={index} className="target-card">
            <div className={`target-priority priority-${target.priority}`}>
              {target.priority === 1 ? '⬛ Priority 1' : target.priority === 2 ? '◼ Priority 2' : `◻ ${target.type}`}
            </div>
            <div className="target-name">{target.name}</div>
            <div className="target-examples">{target.examples}</div>
          </div>
        ))}
      </div>
    </section>
  );
}