/* global React */
const GM = window.MADECIDesignSystem_419fb1;

const G_GLYPHS = {
  cerveza:  <><path d="M8 22h8M9 22V9M15 22V9" /><path d="M7 9h10l-1-4H8L7 9Z" /><path d="M10 5V3h4v2" /></>,
  vino:     <><path d="M8 22h8M12 15v7" /><path d="M7 3h10l-1 6a4 4 0 0 1-8 0L7 3Z" /></>,
  agua:     <><path d="M12 3s5 6 5 10a5 5 0 0 1-10 0c0-4 5-10 5-10Z" /></>,
  bebida:   <><path d="M6 4h12l-1.2 15.2A2 2 0 0 1 14.8 21H9.2a2 2 0 0 1-2-1.8L6 4Z" /><path d="M6.4 9h11.2" /></>,
  licor:    <><path d="M9 2h6v5l2 4v9a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-9l2-4V2Z" /><path d="M7 13h10" /></>,
  default:  <><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-5-5L5 21" /></>,
};
function GGlyph({ category, size = 52 }) {
  const key = (category || '').toLowerCase();
  const match = Object.keys(G_GLYPHS).find((k) => k !== 'default' && key.includes(k)) || 'default';
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="var(--neutral-300)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">{G_GLYPHS[match]}</svg>;
}
function Lock({ size = 15 }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>;
}

/** Catalog card for guests: no price, no add — routes to login. */
function GuestProductCard({ product: p, onLogin }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'flex', flexDirection: 'column', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)', transform: hover ? 'translateY(-2px)' : 'none', transition: 'box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard)', height: '100%' }}>
      <div style={{ position: 'relative', height: 168, background: 'var(--neutral-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', borderBottom: '1px solid var(--border-subtle)' }}>
        {p.image
          ? <img src={p.image} alt={p.name} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'contain', padding: 14, mixBlendMode: 'multiply' }} />
          : <GGlyph category={p.category} />}
        {p.badge && (
          <span style={{ position: 'absolute', top: 10, left: 10, height: 22, padding: '0 9px', display: 'inline-flex', alignItems: 'center', background: 'var(--madeci-red)', color: '#fff', fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing: '.05em', textTransform: 'uppercase', borderRadius: 'var(--radius-xs)' }}>{p.badge}</span>
        )}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: 'var(--space-4)', flex: 1 }}>
        {p.category && <span style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--text-subtle)' }}>{p.category}</span>}
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16.5, lineHeight: 1.12, color: 'var(--text-strong)' }}>{p.name}</div>
        {p.brand && <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', marginTop: -2 }}>{p.brand}</div>}

        <div style={{ marginTop: 'auto', paddingTop: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--text-subtle)', marginBottom: 8 }}>
            <Lock size={15} /> Precio para clientes
          </div>
          <GM.Button block size="sm" variant="secondary" iconLeft={<Lock size={14} />} onClick={onLogin}>Inicia sesión para ver precio</GM.Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { GuestProductCard });