// components.jsx — shared UI primitives for the gumakem prototype.
// Defines GkMark, Buttons, Badge, Chip, PartnerName, Canister
// (geometric kanister silhouette used across the site). All export to
// window so other Babel scripts can use them.

// ─────────────────────────────────────────────────────────────────
// Gk mark — the existing site's lockup, kept faithful.
// Now with a soft 8px corner radius instead of perfectly square.
// ─────────────────────────────────────────────────────────────────
const GkMark = ({ size = 44, radius = 8 }) => (
  <div style={{
    width: size, height: size,
    background: 'var(--yellow)',
    color: 'var(--ink)',
    borderRadius: radius,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
    fontFamily: '"Space Grotesk", system-ui, sans-serif',
    fontWeight: 700, fontSize: size * 0.6, letterSpacing: '-0.05em',
    lineHeight: 1,
  }}>
    <span style={{ display: 'inline-block', transform: 'translateY(-1px)' }}>Gk</span>
  </div>
);

// ─────────────────────────────────────────────────────────────────
// Buttons — primary (yellow), dark (ink), outline (ink), ghost (light)
// ─────────────────────────────────────────────────────────────────
const Button = ({ kind = 'primary', size = 'md', children, icon, style: extra = {}, ...props }) => {
  const SIZES = {
    sm: { padding: '10px 14px', font: 12, gap: 6 },
    md: { padding: '14px 20px', font: 14, gap: 8 },
    lg: { padding: '17px 26px', font: 15, gap: 10 },
  };
  const s = SIZES[size];
  const KINDS = {
    primary:  { bg: 'var(--yellow)', fg: 'var(--ink)',    border: 'transparent' },
    dark:     { bg: 'var(--ink)',    fg: 'var(--paper)',  border: 'transparent' },
    outline:  { bg: 'transparent',   fg: 'var(--ink)',    border: 'var(--ink)' },
    ghost:    { bg: 'transparent',   fg: 'var(--ink)',    border: 'rgba(22,23,15,0.18)' },
    green:    { bg: 'var(--green-deep)', fg: 'var(--paper-white)', border: 'transparent' },
    pink:     { bg: 'var(--pink-deep)', fg: 'var(--paper-white)', border: 'transparent' },
    'ghost-light': { bg: 'transparent', fg: 'var(--paper-white)', border: 'rgba(255,255,255,0.32)' },
  };
  const k = KINDS[kind];
  return (
    <button {...props} style={{
      padding: s.padding,
      background: k.bg, color: k.fg,
      border: `1.5px solid ${k.border}`,
      borderRadius: 'var(--r-pill)',
      fontSize: s.font, fontWeight: 600,
      letterSpacing: '-0.005em',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      gap: s.gap, whiteSpace: 'nowrap',
      transition: 'transform .12s ease, filter .12s ease',
      ...extra,
    }}
    onMouseEnter={(e)=>{e.currentTarget.style.transform='translateY(-1px)'; e.currentTarget.style.filter='brightness(0.96)';}}
    onMouseLeave={(e)=>{e.currentTarget.style.transform=''; e.currentTarget.style.filter='';}}>
      <span>{children}</span>
      {icon && <span style={{fontSize: s.font + 2}}>{icon}</span>}
    </button>
  );
};

// Mono-style technical button (small, all-caps, square edges)
const MonoButton = ({ kind = 'outline', children, style: extra = {}, ...props }) => {
  const KINDS = {
    outline: { bg: 'transparent', fg: 'var(--ink)', border: 'var(--ink)' },
    dark:    { bg: 'var(--ink)',  fg: 'var(--paper)', border: 'var(--ink)' },
    'light': { bg: 'transparent', fg: 'var(--paper-white)', border: 'rgba(255,255,255,0.4)' },
  };
  const k = KINDS[kind];
  return (
    <button {...props} className="mono" style={{
      padding: '12px 16px',
      background: k.bg, color: k.fg,
      border: `1.5px solid ${k.border}`,
      borderRadius: 'var(--r-pill)',
      fontSize: 11, fontWeight: 600,
      letterSpacing: '0.16em', textTransform: 'uppercase',
      display: 'inline-flex', alignItems: 'center', gap: 8,
      ...extra,
    }}>{children}</button>
  );
};

// ─────────────────────────────────────────────────────────────────
// Badges — small contextual labels (BIO %, REACH, lot, stock)
// Each gets its own palette anchor for system feel.
// ─────────────────────────────────────────────────────────────────
const Badge = ({ tone = 'green', children, style: extra = {} }) => {
  const T = {
    green:  { bg: 'var(--green-mint)',  fg: 'var(--green-deep)' },
    pink:   { bg: 'var(--pink-cream)',  fg: 'var(--pink-deep)' },
    yellow: { bg: 'var(--yellow-cream)', fg: 'var(--ink)' },
    paper:  { bg: 'var(--paper-2)',     fg: 'var(--ink)' },
    ink:    { bg: 'var(--ink)',         fg: 'var(--paper-white)' },
    outline:{ bg: 'transparent',        fg: 'var(--ink)', border: '1px solid var(--rule)' },
  };
  const t = T[tone];
  return (
    <span className="mono" style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '4px 9px',
      background: t.bg, color: t.fg,
      border: t.border || 'none',
      borderRadius: 'var(--r-xs)',
      fontSize: 10, letterSpacing: '0.12em',
      textTransform: 'uppercase', fontWeight: 600,
      lineHeight: 1.4,
      ...extra,
    }}>{children}</span>
  );
};

// Stock dot indicator
const StockDot = ({ stock = 'na-stanju' }) => {
  const D = {
    'na-stanju': { color: 'var(--green-mid)', label: 'Na stanju' },
    'malo':      { color: '#C68A0E',           label: 'Malo na stanju' },
    'najava':    { color: 'var(--mid)',        label: 'Na najavu · 5 rd' },
  }[stock];
  return (
    <span className="mono" style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
      color: 'var(--mid)', fontWeight: 500,
    }}>
      <span style={{
        width: 8, height: 8, background: D.color,
        borderRadius: '50%', display: 'inline-block', flexShrink: 0,
      }}/>
      {D.label}
    </span>
  );
};

// ─────────────────────────────────────────────────────────────────
// Partner name — uniform mono wordmark, legal-safe (no logo recreation)
// ─────────────────────────────────────────────────────────────────
const PartnerName = ({ name, dim = false, size = 'md' }) => (
  <span className="mono" style={{
    fontSize: size === 'sm' ? 10 : 11,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    color: dim ? 'var(--mid)' : 'var(--ink)',
    fontWeight: 500, whiteSpace: 'nowrap',
  }}>{name}</span>
);

// ─────────────────────────────────────────────────────────────────
// Canister — the gumakem kanister silhouette, built from primitives.
// Size scales everything. Used as illustration/placeholder until real
// product photography lands.
// ─────────────────────────────────────────────────────────────────
const Canister = ({
  width = 200, height = 280,
  body = 'var(--paper-white)',
  cap = 'var(--ink)',
  label = 'var(--ink)',
  labelText = 'var(--paper-white)',
  accent = 'var(--yellow)',
  showHandle = true,
  rotate = 0,
  productName = 'BIOCRO',
  productSub = 'COROTRANS',
  productMeta = '5 L · pretvarač korozije',
}) => {
  const handleH = height * 0.34;
  return (
    <div style={{
      position: 'relative', width, height,
      transform: `rotate(${rotate}deg)`,
    }}>
      {/* shadow */}
      <div style={{
        position: 'absolute',
        bottom: -16, left: -10, right: -10, height: 22,
        background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.30), transparent 70%)',
        filter: 'blur(6px)',
      }}/>
      {/* body */}
      <div style={{
        position: 'absolute', inset: 0,
        background: body,
        borderRadius: '8px 8px 14px 14px',
        boxShadow: `inset 0 -40px 60px rgba(0,0,0,0.18), inset 28px 0 60px rgba(0,0,0,0.12)`,
      }}/>
      {/* cap */}
      <div style={{
        position: 'absolute',
        top: -height * 0.085, left: '50%',
        transform: 'translateX(-50%)',
        width: width * 0.32, height: height * 0.10,
        background: cap,
        borderRadius: '6px 6px 0 0',
      }}/>
      <div style={{
        position: 'absolute',
        top: -height * 0.135, left: '50%',
        transform: 'translateX(-50%)',
        width: width * 0.18, height: height * 0.05,
        background: cap,
        borderRadius: '3px 3px 0 0',
      }}/>
      {/* handle */}
      {showHandle && (
        <div style={{
          position: 'absolute',
          top: height * 0.10, right: -width * 0.11,
          width: width * 0.16, height: handleH,
          border: `${width * 0.030}px solid ${body}`,
          borderLeft: 'none',
          borderRadius: `0 ${width * 0.06}px ${width * 0.06}px 0`,
          boxShadow: '0 4px 8px rgba(0,0,0,0.15)',
        }}/>
      )}
      {/* label */}
      <div style={{
        position: 'absolute',
        top: '34%', left: width * 0.08, right: width * 0.08, height: '50%',
        background: label, color: labelText,
        padding: `${width * 0.06}px ${width * 0.08}px`,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        borderTop: `${width * 0.02}px solid ${accent}`,
        borderRadius: 'var(--r-xs)',
      }}>
        <div>
          <div className="mono" style={{
            fontSize: width * 0.045, color: accent,
            letterSpacing: '0.2em', textTransform: 'uppercase',
            fontWeight: 600,
          }}>Gumakem · {productName}</div>
          <div style={{
            fontFamily: '"Space Grotesk",sans-serif',
            fontSize: width * 0.12, fontWeight: 700,
            marginTop: width * 0.025, lineHeight: 0.95,
            letterSpacing: '-0.03em', textTransform: 'uppercase',
          }}>{productSub}</div>
        </div>
        <div className="mono" style={{
          fontSize: width * 0.038, color: 'rgba(255,255,255,0.6)',
          letterSpacing: '0.16em', textTransform: 'uppercase',
        }}>{productMeta}</div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// Designed pictogram — circle with letter mark (ISO/REACH/BIO/HR)
// ─────────────────────────────────────────────────────────────────
const Pictogram = ({ char, label, stroke = 'var(--ink)' }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <div style={{
      width: 44, height: 44, borderRadius: '50%',
      border: `1.5px solid ${stroke}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: '"JetBrains Mono",ui-monospace,monospace',
      fontSize: 11, fontWeight: 700, letterSpacing: '0.04em',
    }}>{char}</div>
    <div className="mono" style={{
      fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
      color: 'var(--mid)', lineHeight: 1.3, maxWidth: 120,
    }}>{label}</div>
  </div>
);

// Card primitive — soft rounded container with optional accent
const SoftCard = ({ bg = 'var(--paper-white)', radius = 'var(--r-md)', children, style = {}, ...rest }) => (
  <div {...rest} style={{
    background: bg, borderRadius: radius,
    border: `1px solid var(--hair)`,
    ...style,
  }}>{children}</div>
);

Object.assign(window, {
  GkMark, Button, MonoButton, Badge, StockDot, PartnerName, Canister, Pictogram, SoftCard,
});