/* global React, Icon, Icons */

/* ---------- "If you can imagine it, we can make it" — 4 big category cards ---------- */
function ImagineBand() {
  const cats = [
    {
      eyebrow: 'Architectural & Permanent',
      title: 'Built to stand for years',
      items: 'Monument Signs · Channel Letters · Cabinet Signs · Pylon Signs · Awnings · ADA Signs',
      img: window.__resources.img11,
      alt: 'James Allen Family Park architectural signage monolith',
    },
    {
      eyebrow: 'Interior & Specialty',
      title: 'Inside-the-doors brand moments',
      items: 'LED Neon · Lobby Signs · 3D Printed Signs · Green/Moss Walls · Edge-Lit Acrylic · Custom Murals',
      img: window.__resources.img12,
      alt: 'Klick. backlit halo channel-letter lobby sign',
    },
    {
      eyebrow: 'Mobile & Event',
      title: 'Rolling and traveling brand',
      items: 'Full Truck & Vehicle Wraps · Fleet Graphics · 10×10 Tents · Retractable Banners · Exhibition Signage',
      img: window.__resources.img13,
      alt: 'Pet Ambulance vehicle wrap installed on a service truck',
    },
    {
      eyebrow: 'Everyday Essentials',
      title: 'Quick-turn pieces, done right',
      items: 'A-Frames · Yard Signs · Banners · Decals · Menu Boards · Window Graphics',
      img: window.__resources.img14,
      alt: 'A row of campaign yard signs along a roadside',
    },
  ];
  return (
    <section className="imagine" id="services">
      <div className="container">
        <div className="header-row">
          <div>
            <span className="section-eyebrow">What we make</span>
            <h2>If you can imagine it <span className="slash">/</span> we can make it</h2>
          </div>
          <p className="lede">
            Four families of work cover almost everything that leaves the shop. From the
            smallest engraved sign to massive flex‑face displays, we have the tools and
            talent to get the job done right.
          </p>
        </div>
        <div className="category-grid">
          {cats.map((c, i) => (
            <div className="category-card" key={i}>
              <img src={c.img} alt={c.alt}/>
              <div className="copy">
                <span className="eyebrow">{c.eyebrow}</span>
                <h3>{c.title}</h3>
                <p className="items">{c.items}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ImagineBand = ImagineBand;