// Artwork detail — full-bleed hero + metadata + sticky buy bar
function ArtworkDetail({ artwork, onBack, saved, toggleSave, onAddToCart }) {
  const a = artwork || {
    title: 'Morning Calm', num: '№22', artist: 'Yui Nakamura',
    price: '$480', grad: 'linear-gradient(160deg,#e5d4b2,#b59468 55%,#6a4a2a)',
    tag: { tone: 'sage', label: 'Available' },
  };
  return (
    <div style={{ position: 'relative', paddingBottom: 84 }}>
      <AppHeader
        title=""
        onBack={onBack}
        trailing={<button onClick={() => toggleSave(a.id)} style={{ background:'none', border:'none', cursor:'pointer', padding:0 }}>
          <Icon name="heart" size={22} color={saved ? 'var(--lucky-500)' : 'var(--fg)'} fill={saved ? 'var(--lucky-500)' : 'none'}/>
        </button>}
      />

      {/* Full-bleed matte frame */}
      <div style={{ padding: '8px 20px 0' }}>
        <ArtworkFrame image={a.image_url} gradient={a.grad} alt={`${a.title} — ${a.artist}`} aspect="4/5" tag={a.tag && <Tag tone={a.tag.tone}>{a.tag.label}</Tag>}/>
      </div>

      {/* Dot thumbnails */}
      <div style={{ display: 'flex', gap: 6, justifyContent: 'center', padding: '12px 0 4px' }}>
        {[0,1,2,3].map(i => (
          <div key={i} style={{ width: i===0?18:6, height:6, borderRadius: 999, background: i===0 ? 'var(--ink-500)' : 'var(--line-strong)' }}/>
        ))}
      </div>

      <div style={{ padding: '18px 20px 10px' }}>
        <Eyebrow>{a.medium || 'Painting'}</Eyebrow>
        <h1 style={{ margin: '8px 0 4px', fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500, lineHeight: 1.15, color: 'var(--fg)' }}>
          {a.title}{a.num && <span style={{ fontStyle: 'italic', color: 'var(--fg-muted)', fontWeight: 400 }}>, {a.num}</span>}
        </h1>
        <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 15, color: 'var(--fg-muted)' }}>— {a.artist}</div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 16, paddingBottom: 14, borderBottom: '1px solid var(--line)' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500, color: 'var(--fg)' }}>{a.price}</div>
          {a.dimensions && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-faint)' }}>{a.dimensions}</div>}
        </div>

        {/* Meta rows */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px 24px', padding: '18px 0', borderBottom: '1px solid var(--line)' }}>
          <Meta label="Edition" value={a.num ? `${a.num} · one of one` : 'One of one'}/>
          <Meta label="Year" value={a.year || '—'}/>
          <Meta label="Framed" value={a.frame_description || '—'}/>
          <Meta label="Ships" value={a.ships_from || '—'}/>
        </div>

        {/* Artist note */}
        {a.artist_note && (
          <div style={{ padding: '20px 0', borderBottom: '1px solid var(--line)' }}>
            <Eyebrow style={{ marginBottom: 10 }}>A note from the artist</Eyebrow>
            <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 16, lineHeight: 1.5, color: 'var(--fg-soft)' }}>
              "{a.artist_note}"
            </p>
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 13, color: 'var(--fg-muted)', marginTop: 10 }}>— {a.artist}, from the studio</div>
          </div>
        )}

        {/* Care */}
        <div style={{ padding: '16px 0' }}>
          <Eyebrow style={{ marginBottom: 8 }}>Care</Eyebrow>
          <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: 'var(--fg-soft)' }}>
            Hang away from direct sun. We wrap each piece in archival tissue and tuck a handwritten note between the boards.
          </p>
        </div>
      </div>

      {/* Sticky buy bar */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, padding: '14px 20px calc(22px + env(safe-area-inset-bottom))',
        background: 'rgba(251,247,236,0.92)', backdropFilter: 'blur(12px)',
        borderTop: '1px solid var(--line)', display: 'flex', gap: 10,
      }}>
        <Button variant="secondary" size="md" icon="bag">Cart</Button>
        <Button variant="primary" size="md" full onClick={onAddToCart} iconRight="arrowRight">Add — {a.price}</Button>
      </div>
    </div>
  );
}

function Meta({ label, value }) {
  return (
    <div>
      <div style={{ fontFamily:'var(--font-body)', fontSize:10, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--fg-muted)' }}>{label}</div>
      <div style={{ fontFamily:'var(--font-display)', fontSize:14, color:'var(--fg)', marginTop:3 }}>{value}</div>
    </div>
  );
}

window.ArtworkDetail = ArtworkDetail;