export default function WhoWeServe() {
  const targets = [
    { p: "p1", label: "■ PRIORITY 1", name: "FENCE CONTRACTORS", examples: "Residential · Commercial · Chain link specialists · Ornamental installers" },
    { p: "p1", label: "■ PRIORITY 1", name: "GENERAL CONTRACTORS", examples: "Landscaping · Deck builders · Pool contractors · Renovation" },
    { p: "p1", label: "■ PRIORITY 1", name: "BUILDERS & DEVELOPERS", examples: "Home builders · Commercial builders · Site developers · Real estate developers" },
    { p: "p2", label: "■ PRIORITY 2", name: "PROPERTY MANAGERS", examples: "Apartments · Commercial properties · Industrial facilities · Storage" },
    { p: "p2", label: "■ PRIORITY 2", name: "STAINING CONTRACTORS", examples: "Deck staining · Fence staining · Painters · Handyman · Pressure washing" },
    { p: "p2", label: "■ PRIORITY 2", name: "EVENT & RENTAL COMPANIES", examples: "Event management · Temp fence rental · Crowd control · Festival organizers" },
    { p: "p3", label: "□ SPECIALTY", name: "GOVERNMENT & INSTITUTIONS", examples: "Municipalities · Schools · Parks & rec · Public infrastructure" },
    { p: "p3", label: "□ SPECIALTY", name: "AGRICULTURE & RURAL", examples: "Farms · Ranches · Livestock owners · Agricultural businesses" },
  ];

  return (
    <section className="targets-section" id="targets">
      <div className="reveal">
        <div className="section-eyebrow">Who we serve</div>
        <h2 className="sh">BUILT FOR THE<br />PEOPLE WHO <span>BUILD.</span></h2>
      </div>

      <div className="targets-grid reveal">
        {targets.map((target, index) => (
          <div key={index} className="target-card">
            <div className={`target-priority ${target.p}`}>{target.label}</div>
            <div className="target-name">{target.name}</div>
            <div className="target-examples">{target.examples}</div>
          </div>
        ))}
      </div>
    </section>
  );
}