/* global React, Icon, Icons */

/* ---------- Portfolio gallery ---------- */
function PortfolioBand() {
  const items = [
    {
      id: 'landing', tag: 'Dimensional', name: 'The Landing · XL blade sign',
      img: window.__resources.img07,
      style: { gridColumn: 'span 5', gridRow: 'span 3' },
    },
    {
      id: 'tasty', tag: 'Storefront', name: 'Tasty Thai · Authentic Friendly Fun',
      img: window.__resources.img04,
      style: { gridColumn: 'span 3', gridRow: 'span 3' },
    },
    {
      id: 'lakewood', tag: 'Cabinet Sign', name: 'Lakewood Complete Dentistry',
      img: window.__resources.img09,
      style: { gridColumn: 'span 4', gridRow: 'span 3' },
    },
    {
      id: 'windsong', tag: 'Monument', name: 'Windsong · Lighted Channel Letters',
      img: window.__resources.img03,
      style: { gridColumn: 'span 7', gridRow: 'span 2' },
    },
    {
      id: 'nineco', tag: 'Window Vinyl', name: '9.CO · Tenant Logo Window',
      img: window.__resources.img06,
      style: { gridColumn: 'span 5', gridRow: 'span 2' },
    },
    {
      id: 'pampered', tag: 'Channel Letter Removal', name: 'Pampered Pooch · Boulder',
      img: window.__resources.img05,
      style: { gridColumn: 'span 4', gridRow: 'span 2' },
    },
    {
      id: 'cofloor', tag: 'Monument', name: 'The Colorado Floor Company',
      img: window.__resources.img08,
      style: { gridColumn: 'span 8', gridRow: 'span 2' },
    },
  ];

  return (
    <section className="portfolio" id="work">
      <div className="container">
        <div className="header-row">
          <div>
            <span className="section-eyebrow">From the shop floor</span>
            <h2>Recent Work</h2>
          </div>
        </div>
        <div className="gallery">
          {items.map(it => (
            <div className="tile" key={it.id} style={it.style}>
              <img src={it.img} alt={it.name}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.PortfolioBand = PortfolioBand;