// ui_kits/website/CategoryStrip.jsx
// Six little category cards beneath the hero — Salud, Belleza, Nutrición, etc.

const stripStyles = {
  wrap: { background: '#fff', borderBottom: '1px solid var(--color-divider)' },
  inner: {
    maxWidth: 1200, margin: '0 auto',
    padding: '40px 32px',
    display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16,
  },
  tile: {
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
    padding: '24px 12px',
    borderRadius: 16,
    background: 'var(--brand-cream)',
    cursor: 'pointer',
    transition: 'all 220ms var(--ease-out)',
    border: '1px solid transparent',
  },
  glyph: {
    width: 56, height: 56, borderRadius: '50%',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: '#fff',
  },
  label: {
    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 700,
    letterSpacing: '0.14em', textTransform: 'uppercase',
    color: '#383838',
  },
};

const CATEGORIES = [
  { key: 'Health',     i18n: 'nav.health',     color: '#6FA98C', glyph: <Headphones size={24}/> },
  { key: 'Beauty',     i18n: 'nav.beauty',     color: '#D9A29B', glyph: <Star size={22}/> },
  { key: 'Nutrition',  i18n: 'nav.nutrition',  color: '#E8B458', glyph: <HeartIcon size={22}/> },
  { key: 'Exercise',   i18n: 'nav.exercise',   color: '#6E97C2', glyph: <ArrowRight size={22}/> },
  { key: 'Shop',       i18n: 'nav.shop',       color: '#C26A4A', glyph: <ShoppingBag size={22}/> },
  { key: 'Podcasts',   i18n: 'nav.podcasts',   color: '#2E6F5A', glyph: <PlayIcon size={20}/> },
];

function CategoryStrip({ onPick }) {
  const tr = useT();
  const [hover, setHover] = React.useState(null);
  return (
    <div style={stripStyles.wrap}>
      <div style={stripStyles.inner}>
        {CATEGORIES.map(c => (
          <div key={c.key}
               style={{ ...stripStyles.tile,
                        background: hover === c.key ? '#fff' : 'var(--brand-cream)',
                        borderColor: hover === c.key ? 'var(--brand-mint)' : 'transparent',
                        transform: hover === c.key ? 'translateY(-2px)' : 'none' }}
               onMouseEnter={() => setHover(c.key)}
               onMouseLeave={() => setHover(null)}
               onClick={() => onPick && onPick(c.key)}>
            <div style={{ ...stripStyles.glyph, background: c.color }}>{c.glyph}</div>
            <div style={stripStyles.label}>{tr(c.i18n)}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.CategoryStrip = CategoryStrip;
window.CATEGORIES = CATEGORIES;