function CategoryBar({ active, onChange }) {
  return (
    <div className="catbar">
      <button className={'cat-pill' + (active === 'todo' ? ' on' : '')} onClick={() => onChange('todo')}>Todo</button>
      {window.EO_DATA.CATEGORIES.map((c) => (
        <button
          key={c.id}
          className={'cat-pill' + (active === c.id ? ' on' : '')}
          onClick={() => onChange(c.id)}
        >
          {c.label}
        </button>
      ))}
    </div>
  );
}

function ProductCard({ product, qty, onAdd, onInc, onDec }) {
  const cat = product.unit ? product.unit
    : (product.veg ? 'Verdura · recipiente' : 'Fruta · recipiente');
  return (
    <div className={'pcard' + (qty > 0 ? ' in-cart' : '')}>
      {qty > 0 && <span className="pcard-flag"><Icon name="Check" size={13}/> En tu pedido</span>}
      <PhotoWell product={product} />
      <div className="pcard-body">
        <div className="pcard-cat">{cat}</div>
        <div className="pcard-name">{product.name}</div>
        <div className="pcard-foot">
          <span className="price">{window.eoMoney(product.price)}</span>
          {qty > 0 ? (
            <div className="stepper">
              <button onClick={() => onDec(product)} aria-label="Quitar"><Icon name="Minus" size={16}/></button>
              <span>{qty}</span>
              <button onClick={() => onInc(product)} aria-label="Agregar"><Icon name="Plus" size={16}/></button>
            </div>
          ) : (
            <button className="add" onClick={() => onAdd(product)} aria-label="Agregar"><Icon name="Plus" size={22}/></button>
          )}
        </div>
      </div>
    </div>
  );
}

function ComboCard({ combo, inCart, onConfigure, onRemove }) {
  const lines = [
    ...combo.slots.map((s) => `${s.qty} ${s.unit} a elegir`),
    ...combo.includes,
  ];
  return (
    <div className={'combo' + (combo.featured ? ' featured' : '') + (inCart ? ' in-cart' : '')}>
      <div className="combo-head" style={{ background: combo.color }}>
        {combo.img ? (
          <img src={combo.img} alt={combo.name} className="combo-img" />
        ) : (
          <span className="combo-head-name">{combo.name}</span>
        )}
        {combo.badge && <span className="combo-badge"><Icon name="Truck" size={14}/> {combo.badge}</span>}
        {combo.featured && <span className="combo-star"><Icon name="Star" size={13}/> Más vendido</span>}
      </div>
      <div className="combo-body">
        <div className="combo-title">{combo.name}</div>
        <div className="combo-serves">{combo.serves}</div>
        <ul className="combo-items">
          {lines.map((it, i) => (
            <li key={i}><Icon name="Check" size={15}/> {it}</li>
          ))}
        </ul>
        <div className="combo-foot">
          <span className="price price-lg">{window.eoMoney(combo.price)}</span>
          {inCart ? (
            <div className="combo-incart">
              <button className="combo-edit" onClick={() => onConfigure(combo)}><Icon name="Edit" size={15}/> Editar</button>
              <button className="combo-remove" onClick={() => onRemove(combo)} aria-label="Quitar del pedido"><Icon name="Trash" size={16}/></button>
            </div>
          ) : (
            <button className="btn btn-primary btn-sm" onClick={() => onConfigure(combo)}>
              <Icon name="Sparkles" size={16}/> Personalizar
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

function Section({ title, subtitle, count, children }) {
  return (
    <section className="section">
      <div className="section-head">
        <h2 className="section-title">{title}</h2>
        {subtitle && <p className="section-sub">{subtitle}</p>}
      </div>
      {children}
    </section>
  );
}

Object.assign(window, { CategoryBar, ProductCard, ComboCard, Section });