// Tobeads — shared UI components
//
// Only the pieces still used by the live app remain here:
//   - ColorSwatch    → palette bar in src/pages/create.jsx
//   - BeadCountList  → order summary in src/pages/create.jsx
//
// The earlier marketing components (Logo, Header, Footer, ProductCard,
// TemplateCard, CTASection, etc.) belonged to the legacy "PiBead" storefront
// and were removed once the arcade UI replaced them.

// ---------- Color Swatch ----------
function ColorSwatch({ color, selected, onClick, size = 28, showCode = false }) {
  return (
    <button
      onClick={onClick}
      title={`${color.code} ${color.name} ${color.hex}`}
      className="relative"
      style={{
        width: size, height: size,
        background: color.hex,
        border: selected ? '2px solid var(--ink)' : '1px solid var(--line-2)',
        borderRadius: 6,
        boxShadow: selected ? '0 0 0 3px var(--yellow)' : undefined,
        padding: 0,
        cursor: 'pointer',
      }}
    >
      {showCode && (
        <span className="font-mono" style={{ position: 'absolute', bottom: -16, left: '50%', transform: 'translateX(-50%)', fontSize: 9, color: 'var(--muted)' }}>{color.code}</span>
      )}
    </button>
  );
}
window.ColorSwatch = ColorSwatch;

// ---------- Bead Count List ----------
function BeadCountList({ counts, total, max = 12, dense = false }) {
  const items = max ? counts.slice(0, max) : counts;
  const totalCount = total || counts.reduce((s, c) => s + c.count, 0);
  return (
    <div>
      <div className="flex items-center justify-between" style={{ marginBottom: 12 }}>
        <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)' }}>
          Bead Count
        </div>
        <div className="font-mono" style={{ fontSize: 11, color: 'var(--muted)' }}>
          {counts.length} colors · {totalCount.toLocaleString()} beads
        </div>
      </div>
      <div className="space-y-1.5">
        {items.map((b, i) => (
          <div key={b.code} className="flex items-center gap-3" style={{ padding: dense ? '4px 8px' : '8px 10px', borderRadius: 8, background: i % 2 === 0 ? 'rgba(17,17,17,0.025)' : 'transparent' }}>
            <div style={{ width: 18, height: 18, background: b.hex, borderRadius: 4, border: '1px solid rgba(17,17,17,0.12)', flexShrink: 0 }}/>
            <div className="font-mono" style={{ fontSize: 11, color: 'var(--muted)', width: 28 }}>{b.code}</div>
            <div style={{ fontSize: dense ? 12 : 13, flex: 1, fontWeight: 500 }}>{b.name}</div>
            <div className="font-mono" style={{ fontSize: dense ? 11 : 12, color: 'var(--muted)' }}>{b.hex.toUpperCase()}</div>
            <div className="font-mono" style={{ fontSize: dense ? 12 : 13, fontWeight: 600, width: 56, textAlign: 'right' }}>{b.count.toLocaleString()}</div>
          </div>
        ))}
      </div>
      {max && counts.length > max && (
        <div className="font-mono mt-3" style={{ fontSize: 11, color: 'var(--muted)' }}>
          + {counts.length - max} more colors
        </div>
      )}
    </div>
  );
}
window.BeadCountList = BeadCountList;