// ProductPage.jsx — detail view with engraving input
function ProductPage({ product, onBack, onAdd }) {
  const [engraving, setEngraving] = React.useState("");
  const [signBack, setSignBack] = React.useState(true);
  const [giftWrap, setGiftWrap] = React.useState(false);

  return (
    <section className="mys-section" style={{ paddingTop: 28 }}>
      <div className="mys-page">
        <button className="mys-btn mys-btn-ghost mys-btn-sm" onClick={onBack} style={{ marginBottom: 20 }}>
          ← Back to the shop
        </button>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 }}>
          <div>
            {product.image
              ? <img src={product.image} alt={product.name} style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', borderRadius: 'var(--radius-lg)', display: 'block' }} />
              : <div className={'mys-photo ' + product.tone} style={{ aspectRatio: '4/5', borderRadius: 'var(--radius-lg)' }}>
                  <span className="mys-photo-label">Photo coming soon</span>
                </div>
            }
            {product.images && product.images.length > 1 && (
              <div style={{ display: 'grid', gridTemplateColumns: `repeat(${product.images.length}, 1fr)`, gap: 8, marginTop: 8 }}>
                {product.images.map((src, i) => (
                  <img key={i} src={src} alt={product.name} style={{ width: '100%', aspectRatio: '1/1', objectFit: 'cover', borderRadius: 'var(--radius-md)', display: 'block' }} />
                ))}
              </div>
            )}
          </div>
          <div>
            <p className="mys-eyebrow">{product.tag}</p>
            <h1 style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 600, fontSize: 44, margin: '0 0 6px', letterSpacing: '-0.02em' }}>
              {product.name}
            </h1>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 8 }}>
              <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 28, color: 'var(--fg)' }}>${product.price}</span>
              <span className="mys-stamp">{product.meta}</span>
            </div>
            <hr className="mys-rule" />
            <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--fg-muted)', marginBottom: 24 }}>
              {product.blurb}
            </p>

            <div className="mys-field" style={{ marginBottom: 16 }}>
              <label>What should it say?</label>
              <textarea
                className="mys-textarea"
                rows={2}
                placeholder="A name, a date, or a short line — I'll take it from there."
                value={engraving}
                onChange={e => setEngraving(e.target.value)}
              />
              <span className="mys-hint"><em>Tip —</em> curly quotes and em dashes engrave beautifully.</span>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24 }}>
              <Checkbox checked={signBack} onChange={setSignBack} label="Sign the back of the piece" />
              <Checkbox checked={giftWrap} onChange={setGiftWrap} label="Gift wrap in kraft paper (+$4)" />
            </div>

            <div style={{ display: 'flex', gap: 10 }}>
              <button className="mys-btn mys-btn-primary mys-btn-lg" onClick={() => onAdd(product)} style={{ flex: 1 }}>
                Add to cart — ${product.price + (giftWrap ? 4 : 0)}
              </button>
              <button className="mys-btn mys-btn-secondary mys-btn-lg" title="Save for later">
                <i data-lucide="heart" style={{ width: 16, height: 16, strokeWidth: 1.5 }} />
              </button>
            </div>

            <p style={{ fontSize: 12, color: 'var(--fg-subtle)', marginTop: 18, lineHeight: 1.6 }}>
              Ships from Ottawa, ON. About a week from order to doorstep.
              Nothing's final until it's on the wood — reply to your confirmation to tweak.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Checkbox({ checked, onChange, label }) {
  return (
    <label style={{ display: 'inline-flex', alignItems: 'center', gap: 10, cursor: 'pointer', fontSize: 14, color: 'var(--fg-muted)' }}>
      <span style={{
        width: 18, height: 18, borderRadius: 5,
        border: '1px solid ' + (checked ? 'var(--walnut)' : 'var(--walnut-30)'),
        background: checked ? 'var(--walnut)' : '#fff',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--cream)', fontSize: 11, transition: 'all var(--dur) var(--ease-out)'
      }} onClick={() => onChange(!checked)}>{checked ? '✓' : ''}</span>
      <span onClick={() => onChange(!checked)}>{label}</span>
    </label>
  );
}

window.ProductPage = ProductPage;
window.Checkbox = Checkbox;