// Gear page — full kit list. Grouped by body, lenses + films listed under each.
function Gear() {
  const gear = window.GEAR || [];

  return (
    <main className="gear">
      <a className="back-link" onClick={(e) => { e.preventDefault(); window.location.hash = '#/'; }} href="#/">
        <Icon name="arrow-left" size={12} /> all projects
      </a>

      <header className="gear-head">
        <p className="eyebrow">— gear</p>
        <h1>what's in the bag</h1>
        <p className="desc">
          a working list of cameras, lenses and film stocks. some of this is for sale,
          some of it is older than i am. the iphone counts.
        </p>
      </header>

      <div className="gear-list">
        {gear.map((g) => (
          <article key={g.key} className="gear-card">
            <div className="gear-card-head">
              <div className="gc-l">
                <h2 className="gc-name">{g.name}</h2>
                <p className="gc-kind">{g.kind}{g.year ? ` · ${g.year}` : ''}</p>
              </div>
              {g.role && <span className={`gc-role ${g.forSale ? 'for-sale' : ''}`}>{g.role}</span>}
            </div>

            {g.lenses && g.lenses.length > 0 && (
              <div className="gc-section">
                <div className="gc-section-label">lenses</div>
                <ul className="gc-list">
                  {g.lenses.map((l, i) => (
                    <li key={i} className={`gc-item ${l.forSale ? 'for-sale' : ''}`}>
                      <span className="gc-item-name">{l.name}</span>
                      {l.note && <span className="gc-item-note">{l.note}</span>}
                    </li>
                  ))}
                </ul>
              </div>
            )}

            {g.films && g.films.length > 0 && (
              <div className="gc-section">
                <div className="gc-section-label">films i shoot</div>
                <ul className="gc-list">
                  {g.films.map((f, i) => (
                    <li key={i} className="gc-item">
                      <span className="gc-item-name">{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </article>
        ))}
      </div>

      <p className="gear-foot">
        more to add — keep checking back. for sale items: ping <a href="https://instagram.com/tick.ley" target="_blank" rel="noopener">@tick.ley</a>.
      </p>
    </main>
  );
}

window.Gear = Gear;