// Recent work — gallery with image-slots

function Gallery() {
  const { t } = useLang();
  const w = t.work;
  return (
    <section className="section work" id="work">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">{w.eyebrow}</span>
            <h2 style={{ marginTop: 16 }}>
              {w.title} <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)', fontWeight: 500 }}>{w.titleEm}</em>
            </h2>
          </div>
          <p>
            {w.sub} <span className="mono" style={{ color: 'var(--sun-deep)' }}>{w.designerNote}</span>
          </p>
        </div>

        <div className="work-grid">
          {w.projects.map((p) => <WorkTile key={p.id} id={p.id} title={p.t} meta={p.m} tag={p.tag} size={p.s} />)}
        </div>
      </div>
      <style>{`
        .work-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
        @media (min-width: 700px) { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
        @media (min-width: 1000px) {
          .work-grid {
            grid-template-columns: repeat(6, 1fr);
            grid-auto-rows: 200px;
            gap: 20px;
          }
        }
      `}</style>
    </section>
  );
}

function WorkTile({ id, title, meta, tag, size }) {
  const span = {
    tall:   { col: 'span 2', row: 'span 2' },
    wide:   { col: 'span 4', row: 'span 2' },
    square: { col: 'span 2', row: 'span 2' },
  }[size] || { col: 'span 2', row: 'span 2' };

  return (
    <article className="work-tile" style={{ '--col': span.col, '--row': span.row }}>
      <image-slot
        id={`work-${id}`}
        shape="rounded"
        radius="20"
        placeholder={title}
        style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}
      />
      <div className="work-tile-grad" />
      <div className="work-tile-meta">
        <span className="work-tile-tag mono">{tag}</span>
        <h3 className="work-tile-title">{title}</h3>
        <div className="work-tile-sub mono">{meta}</div>
      </div>
      <style>{`
        .work-tile {
          position: relative; border-radius: 20px; overflow: hidden;
          aspect-ratio: 4 / 3;
          background: var(--glass);
          border: 1px solid var(--hairline);
        }
        @media (min-width: 1000px) {
          .work-tile { aspect-ratio: auto; grid-column: var(--col); grid-row: var(--row); }
        }
        .work-tile-grad {
          position: absolute; inset: 0;
          background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%);
          pointer-events: none; z-index: 1;
        }
        .work-tile-meta {
          position: absolute; left: 0; right: 0; bottom: 0;
          padding: 18px 20px; color: #fff;
          z-index: 2; pointer-events: none;
        }
        .work-tile-tag {
          display: inline-block; font-size: 10px; letter-spacing: 0.16em;
          text-transform: uppercase; padding: 4px 8px;
          background: rgba(255,255,255,0.15);
          backdrop-filter: blur(8px);
          border-radius: 999px; margin-bottom: 10px;
        }
        .work-tile-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
        .work-tile-sub { font-size: 11px; opacity: 0.8; letter-spacing: 0.04em; }
      `}</style>
    </article>
  );
}

Object.assign(window, { Gallery });