const { SectionHeading, Tag, PhotoFrame, Rule } = window.WhiskyNoirTheValleyBarbershop_c4fed7;
const WA = '../../assets/';

function WorkScreen({ lang }) {
  const V = window.VALLEY;
  const T = (zh, en) => lang === 'en' ? en : zh;
  const [cat, setCat] = React.useState('cut');
  const pool = {
    cut: ['heroes/classic-cut-16x9', 'heroes/classic-cut-1x1', 'lifestyle/collar-adjust', 'action/razor-line', 'detail/scissors-comb', 'environment/empty-chair'],
    shave: ['heroes/razor-shave-16x9', 'action/lather-whip', 'action/hot-towel', 'detail/razor-edge', 'heroes/razor-shave-1x1', 'detail/tools-flatlay'],
    colour: ['heroes/color-perm-16x9', 'heroes/color-perm-1x1', 'ritual/whisky-pour', 'ritual/sweating-glass', 'detail/whisky-clippers', 'environment/night-lane'],
    perm: ['heroes/color-perm-1x1', 'heroes/classic-cut-16x9', 'action/lather-whip', 'lifestyle/whisky-hand', 'heroes/razor-shave-1x1', 'detail/razor-edge']
  };
  return (
    <main style={{ padding: 'var(--section-y) var(--gutter-inline)' }}>
      <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', display: 'grid', gap: 'var(--space-7)' }}>
        <SectionHeading eyebrow="Work" title="髮型作品" titleEn="Same shop, same night" />
        <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
          {V.work.map(w => <Tag key={w.id} selected={cat === w.id} onSelect={() => setCat(w.id)}>{T(w.han, w.hanEn)}</Tag>)}
        </div>
        <Rule />
        <div className="g3" style={{ gap: 'var(--space-5)' }}>
          {pool[cat].map((k, i) => <PhotoFrame key={k + i} src={WA + k + '.png'} ratio={i % 4 === 0 ? '4 / 5' : '1 / 1'} />)}
        </div>
      </div>
    </main>
  );
}
Object.assign(window, { WorkScreen });