// ProductCard + ProductGrid
const PRODUCTS = [
  {
    id: 'phone-case',
    name: 'Custom wood phone case',
    meta: 'Real wood veneer · your model',
    price: 45,
    tone: 'walnut',
    image: 'images/iphone-cases.png',
    tag: 'Made to order',
    blurb: "A real wood veneer case, laser-engraved with whatever you want on it — a name, a date, initials, a short line. Tell me your phone model and I'll cut it to fit. Ships in about a week."
  },
  {
    id: 'coaster',
    name: 'Engraved coasters',
    meta: 'Wood or slate · set of four',
    price: 38,
    tone: 'stone',
    image: 'images/wood-coasters.jpg',
    images: ['images/wood-coasters.jpg', 'images/slate-coasters.png'],
    tag: 'Made to order',
    blurb: "Sets of four, in wood or slate — your pick. I engrave each one with a name, a monogram, coordinates, or a short phrase. The kind of thing people keep long after the drink is gone."
  },
  {
    id: 'keychain',
    name: 'Wood keychain',
    meta: 'Walnut or maple · with loop',
    price: 18,
    tone: 'oak',
    image: 'images/keychains.png',
    tag: 'Ships fast',
    blurb: "A small, solid piece of walnut or maple on a steel loop. Engraved with a name, a word, or a date. Light enough to forget it's there — until someone asks about it."
  },
  {
    id: 'glass',
    name: 'Engraved whiskey & wine glass',
    meta: 'Glass · UV printed',
    price: 32,
    tone: 'ember',
    image: 'images/whiskey-glasses.jpg',
    tag: 'Made to order',
    blurb: "A whiskey tumbler or wine glass with your text or design UV-printed right onto the glass. Sharp, permanent, dishwasher-safe. A name, a toast, a date — or bring me something and I'll make it work."
  },
];

function ProductCard({ product, onOpen }) {
  return (
    <div className="mys-card hoverable" onClick={() => onOpen(product)}>
      {product.image
        ? <img src={product.image} alt={product.name} style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', borderRadius: '14px 14px 0 0', display: 'block' }} />
        : <div className={'mys-photo ' + product.tone} style={{ borderRadius: '14px 14px 0 0', aspectRatio: '4/5' }}>
            <span className="mys-photo-label">Photo coming soon</span>
          </div>
      }
      <div style={{ padding: '16px 18px 18px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
          <h3 style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 600,
            fontSize: 20, letterSpacing: '-0.01em', margin: 0, color: 'var(--fg)'
          }}>{product.name}</h3>
          <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 18, color: 'var(--fg)' }}>
            ${product.price}
          </span>
        </div>
        <hr className="mys-rule" style={{ width: 32, margin: '8px 0' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12 }}>
          <span style={{ color: 'var(--fg-subtle)' }}>{product.meta}</span>
          <span className="mys-badge mys-badge-cream">{product.tag}</span>
        </div>
      </div>
    </div>
  );
}

function ProductGrid({ onOpen }) {
  return (
    <section className="mys-section" style={{ paddingTop: 16 }}>
      <div className="mys-page">
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 28 }}>
          <div>
            <p className="mys-eyebrow">The shop · four pieces</p>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 600, fontSize: 36, margin: 0, letterSpacing: '-0.02em' }}>
              Small things, made slowly.
            </h2>
          </div>
          <p className="mys-stamp">All made to order · 1 week</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {PRODUCTS.map(p => (
            <div key={p.id} className="mys-fade" style={{ animationDelay: `${PRODUCTS.indexOf(p) * 40}ms` }}>
              <ProductCard product={p} onOpen={onOpen} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.PRODUCTS = PRODUCTS;
window.ProductCard = ProductCard;
window.ProductGrid = ProductGrid;