// Gallery.jsx — samples of past work. Not for sale as-is; they're here for ideas.
// To add a photo: drop the file in images/ and set `image` to its path.
// Samples without a photo are hidden, and the whole section hides until there's at least one.
const SAMPLES = [
  { id: 'phone-case', name: 'Wood phone case', meta: 'Wood veneer · engraved', image: null },
  { id: 'wood-coasters', name: 'Wood coasters', meta: 'Set of four · monogram', image: null },
  { id: 'slate-coasters', name: 'Slate coasters', meta: 'Set of four · engraved', image: null },
  { id: 'keychain', name: 'Wood keychains', meta: 'Walnut & maple · names', image: null },
  { id: 'glass', name: 'Whiskey & wine glasses', meta: 'Glass · UV printed', image: null },
];

function SampleCard({ sample }) {
  return (
    <div className="mys-card">
      <img src={sample.image} alt={sample.name} loading="lazy" style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', borderRadius: 'var(--radius-lg) var(--radius-lg) 0 0', display: 'block' }} />
      <div style={{ padding: '16px 18px 18px' }}>
        <h3 style={{
          fontFamily: 'var(--font-serif)', fontWeight: 600,
          fontSize: 24, letterSpacing: '-0.01em', margin: 0, color: 'var(--fg)'
        }}>{sample.name}</h3>
        <hr className="mys-rule" style={{ width: 32, margin: '8px 0' }} />
        <span style={{ fontSize: 14, color: 'var(--fg-subtle)' }}>{sample.meta}</span>
      </div>
    </div>
  );
}

function Gallery() {
  const shown = SAMPLES.filter(s => s.image);
  if (shown.length === 0) return null;
  return (
    <section id="work" className="mys-section" style={{ paddingTop: 16 }}>
      <div className="mys-page">
        <div className="mys-row between" style={{ alignItems: 'baseline', marginBottom: 28 }}>
          <div>
            <p className="mys-eyebrow">Past work</p>
            <h2 className="mys-h2">A few things I've made.</h2>
          </div>
          <p className="mys-stamp">Samples only · every order is custom</p>
        </div>
        <div className="mys-tiles" style={{ '--cols': 'repeat(3, 1fr)' }}>
          {shown.map((s, i) => (
            <div key={s.id} className="mys-fade" style={{ animationDelay: `${i * 40}ms` }}>
              <SampleCard sample={s} />
            </div>
          ))}
          <div className="mys-fade" style={{ animationDelay: `${shown.length * 40}ms` }}>
            <a className="mys-card hoverable" href="#/custom" style={{
              height: '100%', boxSizing: 'border-box', background: 'var(--cream-warm)',
              display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 28,
              textDecoration: 'none'
            }}>
              <p className="mys-eyebrow">Yours next</p>
              <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 32, lineHeight: 1.15, letterSpacing: '-0.01em', margin: 0, color: 'var(--fg)' }}>
                Have something else in mind?
              </h3>
              <hr className="mys-rule" />
              <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', margin: '0 0 18px' }}>
                Tell me about it and I'll send you a quote.
              </p>
              <span style={{ fontSize: 16, fontWeight: 500, color: 'var(--walnut)' }}>
                Start a custom order <span className="mys-btn-arrow">→</span>
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.SAMPLES = SAMPLES;
window.Gallery = Gallery;