/* SUPERMEDIA storefront — shared UI primitives (cosmetic mirror of the DS
 * components, inlined so the kit is a reliable standalone artifact). */
const { useState } = React;
const I = (n, s = 18, extra = {}) => <i data-lucide={n} style={{ width: s, height: s, ...extra }} />;
const fmt = (n) => typeof n === 'number' ? n.toLocaleString('sr-RS').replace(/\u00A0/g, '.') : n;

/* viewport hook — true when the layout should switch to its mobile form */
function useIsMobile(bp = 820) {
  const get = () => (typeof window !== 'undefined' ? window.innerWidth <= bp : false);
  const [m, setM] = useState(get);
  React.useEffect(() => {
    const on = () => setM(get());
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, [bp]);
  return m;
}

function Button({ children, variant = 'primary', size = 'md', block, disabled, iconLeft, iconRight, style = {}, ...rest }) {
  const sizes = { sm: { padding: '0 16px', height: 36, fontSize: 14 }, md: { padding: '0 22px', height: 44, fontSize: 16 }, lg: { padding: '0 30px', height: 54, fontSize: 18 } };
  const variants = {
    primary: { background: 'var(--sm-primary)', color: '#fff', boxShadow: 'var(--sm-shadow-purple)' },
    secondary: { background: 'var(--sm-black)', color: '#fff', boxShadow: 'var(--sm-shadow-sm)' },
    outline: { background: '#fff', color: 'var(--sm-primary)', border: '1.5px solid var(--sm-purple-300)' },
    ghost: { background: 'transparent', color: 'var(--sm-text)' },
    light: { background: '#fff', color: 'var(--sm-ink)', boxShadow: 'var(--sm-shadow-sm)' },
  };
  return (
    <button type="button" disabled={disabled} style={{
      display: block ? 'flex' : 'inline-flex', width: block ? '100%' : 'auto', alignItems: 'center', justifyContent: 'center',
      gap: 8, fontFamily: 'var(--sm-font-display)', fontWeight: 700, lineHeight: 1, border: '1px solid transparent',
      borderRadius: 'var(--sm-radius-pill)', cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
      whiteSpace: 'nowrap', transition: 'transform .12s, filter .2s', ...sizes[size], ...variants[variant], ...style,
    }}
      onMouseEnter={e => { if (!disabled) e.currentTarget.style.filter = 'brightness(.93)'; }}
      onMouseLeave={e => { e.currentTarget.style.filter = 'none'; e.currentTarget.style.transform = 'scale(1)'; }}
      onMouseDown={e => { if (!disabled) e.currentTarget.style.transform = 'scale(.97)'; }}
      onMouseUp={e => { e.currentTarget.style.transform = 'scale(1)'; }} {...rest}>
      {iconLeft}{children}{iconRight}
    </button>
  );
}

function IconButton({ children, label, variant = 'chrome', size = 'md', active, badge, style = {}, ...rest }) {
  const dim = { sm: 34, md: 42, lg: 46 }[size];
  const variants = {
    chrome: { background: 'rgba(255,255,255,.10)', color: '#fff', border: '2px solid var(--sm-primary)' },
    light: { background: '#fff', color: 'var(--sm-ink)', border: '1px solid var(--sm-border)' },
    soft: { background: 'var(--sm-purple-50)', color: 'var(--sm-primary)' },
    ghost: { background: 'transparent', color: 'var(--sm-text)' },
  };
  return (
    <button type="button" aria-label={label} title={label} style={{
      position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: dim, height: dim,
      borderRadius: 'var(--sm-radius-pill)', cursor: 'pointer', flex: 'none', border: '1px solid transparent',
      transition: 'background .2s, transform .12s', ...variants[variant], ...(active ? { color: 'var(--sm-violet)' } : null), ...style,
    }}
      onMouseDown={e => e.currentTarget.style.transform = 'scale(.92)'}
      onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
      onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'} {...rest}>
      {children}
      {badge > 0 && <span style={{ position: 'absolute', top: -3, right: -3, minWidth: 18, height: 18, padding: '0 5px', borderRadius: 9, background: 'var(--sm-violet)', color: '#fff', fontSize: 11, fontWeight: 800, fontFamily: 'var(--sm-font-display)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid var(--sm-black)' }}>{badge}</span>}
    </button>
  );
}

function Badge({ children, tone = 'neutral', size = 'md', style = {} }) {
  const tones = {
    neutral: { background: 'var(--sm-gray-100)', color: 'var(--sm-gray-700)' },
    purple: { background: 'var(--sm-purple-50)', color: 'var(--sm-purple-700)' },
    sale: { background: 'var(--sm-sale)', color: '#fff' },
    success: { background: 'var(--sm-success-soft)', color: 'var(--sm-success)' },
    info: { background: 'var(--sm-info-soft)', color: 'var(--sm-info)' },
    dark: { background: 'var(--sm-ink)', color: '#fff' },
  };
  const sz = size === 'sm' ? { fontSize: 11, padding: '3px 8px' } : { fontSize: 12, padding: '5px 11px' };
  return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontFamily: 'var(--sm-font-display)', fontWeight: 700, lineHeight: 1, borderRadius: 'var(--sm-radius-pill)', whiteSpace: 'nowrap', ...sz, ...tones[tone], ...style }}>{children}</span>;
}

function PriceTag({ price, oldPrice, size = 'md', align = 'left', style = {} }) {
  const s = { sm: { now: 16, old: 12 }, md: { now: 22, old: 14 }, lg: { now: 32, old: 16 } }[size];
  const sale = oldPrice != null;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: align === 'right' ? 'flex-end' : 'flex-start', fontFamily: 'var(--sm-font-body)', lineHeight: 1.1, ...style }}>
      {sale && <span style={{ fontSize: s.old, color: 'var(--sm-text-subtle)', textDecoration: 'line-through', fontWeight: 600 }}>{fmt(oldPrice)} din.</span>}
      <span style={{ display: 'flex', alignItems: 'baseline', gap: 4, fontWeight: 800, fontSize: s.now, color: 'var(--sm-price)' }}>
        {fmt(price)}<span style={{ fontSize: '0.62em', fontWeight: 700 }}>din.</span>
      </span>
    </div>
  );
}

function Rating({ value = 0, count, size = 14, showValue }) {
  const r = Math.round(value);
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--sm-font-body)' }}>
      <span style={{ display: 'inline-flex', gap: 1, color: 'var(--sm-warning)' }}>
        {[0, 1, 2, 3, 4].map(i => <i key={i} data-lucide="star" style={{ width: size, height: size, fill: i < r ? 'currentColor' : 'none' }} />)}
      </span>
      {showValue && <span style={{ fontSize: 14, fontWeight: 700 }}>{value.toFixed(1)}</span>}
      {count != null && <span style={{ fontSize: 12, color: 'var(--sm-text-muted)' }}>({count})</span>}
    </span>
  );
}

function ProductCard({ p, onAdd, onOpen, onWish, wished }) {
  const [hover, setHover] = useState(false);
  const isMobile = useIsMobile();
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={() => onOpen && onOpen(p)} style={{
      display: 'flex', flexDirection: 'column', background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-xl)',
      overflow: 'hidden', cursor: 'pointer', transition: 'transform .2s, box-shadow .2s', transform: hover ? 'translateY(-4px)' : 'none',
      boxShadow: hover ? 'var(--sm-shadow-md)' : 'var(--sm-shadow-xs)',
    }}>
      <div style={{ position: 'relative', padding: 16, background: '#fff' }}>
        <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', alignItems: 'center', gap: 6, zIndex: 2 }}>
          {p.discount != null && <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 80, height: 80, borderRadius: '50%', background: 'var(--sm-sale)', color: '#fff', fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 21, lineHeight: 1, boxShadow: 'var(--sm-shadow-sm)' }}>−{p.discount}%</span>}
          {p.soldOut && <Badge tone="neutral" size="sm">Nije na stanju</Badge>}
        </div>
        <div style={{ position: 'absolute', top: 12, right: 12, zIndex: 2 }}>
          <button type="button" aria-label="Lista želja" title="Lista želja" onClick={e => { e.stopPropagation(); onWish && onWish(p); }} style={{ background: 'none', border: 'none', padding: 4, cursor: 'pointer', display: 'inline-flex', lineHeight: 0, transition: 'transform .12s' }} onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.12)'} onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}>
            <i data-lucide="heart" style={{ width: 30, height: 30, color: wished ? 'var(--sm-violet)' : 'var(--sm-purple-300)', fill: wished ? 'currentColor' : 'none' }} />
          </button>
        </div>
        <div style={{ aspectRatio: '1.12 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {p.img
            ? <img src={p.img} alt={p.title} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
            : <span style={{ width: '78%', aspectRatio: '1.3 / 1', borderRadius: 'var(--sm-radius-lg)', background: 'linear-gradient(150deg, var(--sm-purple-50), var(--sm-bg))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--sm-purple-300)' }}>{I(p.icon || 'package', 54, { strokeWidth: 1.4 })}</span>}
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '12px 16px 16px', flex: 1 }}>
        <div style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.1em', fontSize: 11, color: 'var(--sm-text-subtle)' }}>{p.brand}</div>
        <div style={{ fontFamily: 'var(--sm-font-body)', fontWeight: 600, fontSize: 14, lineHeight: 1.35, minHeight: '2.7em' }}>{p.title}</div>
        <div style={{ marginTop: 'auto', paddingTop: 6 }}>
          {p.old && (
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'var(--sm-success-soft)', color: 'var(--sm-success)', borderRadius: 'var(--sm-radius-pill)', padding: '3px 10px', fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 12, marginBottom: 8 }}>
              {I('tag', 13)} Ušteda {fmt(p.old - p.price)} din.
            </div>
          )}
          <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'stretch' : 'center', justifyContent: 'space-between', gap: 10 }}>
            <PriceTag price={p.price} oldPrice={p.old} size="md" />
            <Button variant="primary" size="sm" block={isMobile} disabled={p.soldOut} onClick={e => { e.stopPropagation(); onAdd && onAdd(p); }} iconLeft={I('shopping-cart', 16)} style={{ flex: 'none' }}>U korpu</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

const CAT_GRAD = {
  blue: ['var(--sm-cat-blue-1)', 'var(--sm-cat-blue-2)'], lilac: ['var(--sm-cat-lilac-1)', 'var(--sm-cat-lilac-2)'],
  gray: ['var(--sm-cat-gray-1)', 'var(--sm-cat-gray-2)'], coral: ['var(--sm-cat-coral-1)', 'var(--sm-cat-coral-2)'],
  sand: ['var(--sm-cat-sand-1)', 'var(--sm-cat-sand-2)'], mauve: ['var(--sm-cat-mauve-1)', 'var(--sm-cat-mauve-2)'],
  peach: ['var(--sm-cat-peach-1)', 'var(--sm-cat-peach-2)'], green: ['var(--sm-cat-green-1)', 'var(--sm-cat-green-2)'],
};
function CategoryTile({ title, image, images, cover, imgStyle = {}, color = 'blue', height = 200, onClick }) {
  const [hover, setHover] = useState(false);
  const isMobile = useIsMobile();
  const [c1, c2] = CAT_GRAD[color] || CAT_GRAD.blue;
  const clusterImgs = Array.isArray(images) && images.length > 1 ? images : null;
  if (isMobile) {
    /* mobile: clean vertical card — title on top (full width), image centered below; no overlap */
    return (
      <a onClick={onClick} style={{
        position: 'relative', display: 'flex', flexDirection: 'column', height, borderRadius: 'var(--sm-radius-lg)', overflow: 'hidden',
        background: `linear-gradient(165deg, ${c1}, ${c2})`, boxShadow: 'var(--sm-shadow-xs)', cursor: 'pointer', padding: '11px 12px', boxSizing: 'border-box',
      }}>
        {cover && <img src={cover} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />}
        <span style={{ position: 'relative', zIndex: 2, fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: 13, color: 'var(--sm-ink)', lineHeight: 1.18, letterSpacing: '-.01em', textWrap: 'pretty' }}>{title}</span>
        {!cover && (
          <div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', marginTop: 4 }}>
            {clusterImgs ? (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 4, width: '100%', height: '100%' }}>
                {clusterImgs.slice(0, 4).map((src, i) => (
                  <span key={i} style={{ background: 'rgba(255,255,255,.55)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}><img src={src} alt="" style={{ maxWidth: '80%', maxHeight: '80%', objectFit: 'contain' }} /></span>
                ))}
              </div>
            ) : (image && <img src={image} alt="" style={{ maxWidth: '86%', maxHeight: '100%', objectFit: 'contain' }} />)}
          </div>
        )}
      </a>
    );
  }
  return (
    <a onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      position: 'relative', display: 'block', height, borderRadius: 'var(--sm-radius-lg)', overflow: 'hidden',
      background: `linear-gradient(165deg, ${c1}, ${c2})`, boxShadow: hover ? 'var(--sm-shadow-md)' : 'var(--sm-shadow-xs)',
      transform: hover ? 'translateY(-3px)' : 'none', transition: 'transform .2s, box-shadow .2s', cursor: 'pointer',
    }}>
      {cover && <img src={cover} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transition: 'transform .32s', transform: hover ? 'scale(1.04)' : 'scale(1)' }} />}
      <span style={{ position: 'absolute', top: isMobile ? 11 : 18, left: isMobile ? 12 : 20, zIndex: 2, maxWidth: isMobile ? '64%' : '52%', fontFamily: 'var(--sm-font-display)', fontWeight: 600, fontSize: isMobile ? 14.5 : 22, color: 'var(--sm-ink)', lineHeight: 1.15, letterSpacing: '-.01em' }}>{title}</span>
      {!cover && clusterImgs ? (
        <div style={{ position: 'absolute', right: 10, bottom: 10, width: '54%', height: '82%', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gridTemplateRows: '1fr 1fr', gap: 6, transition: 'transform .32s', transform: hover ? 'scale(1.04)' : 'scale(1)' }}>
          {clusterImgs.slice(0, 4).map((src, i) => (
            <span key={i} style={{ background: 'rgba(255,255,255,.55)', borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
              <img src={src} alt="" style={{ maxWidth: '82%', maxHeight: '82%', objectFit: 'contain' }} />
            </span>
          ))}
        </div>
      ) : (!cover && image && <img src={image} alt="" style={{ position: 'absolute', right: 8, bottom: 0, height: '76%', maxWidth: '64%', objectFit: 'contain', transition: 'transform .32s', transform: hover ? 'scale(1.05)' : 'scale(1)', ...imgStyle }} />)}
    </a>
  );
}

function PromoBanner({ image, eyebrow, title, subtitle, script, cta = 'Saznajte više', bandColor = 'var(--sm-purple-500)', imageHeight = 200, onCta }) {
  return (
    <div style={{ borderRadius: 'var(--sm-radius-xl)', overflow: 'hidden', boxShadow: 'var(--sm-shadow-md)', background: '#fff', display: 'flex', flexDirection: 'column' }}>
      <div style={{ height: imageHeight, background: `url('${image}') center top / cover`, position: 'relative' }}>
        {script && <span style={{ position: 'absolute', left: 24, bottom: 14, fontFamily: 'var(--sm-font-script)', fontWeight: 700, fontSize: 30, color: '#fff', textShadow: '0 1px 8px rgba(0,0,0,.35)' }}>{script}</span>}
      </div>
      <div style={{ position: 'relative', background: bandColor, color: '#fff', padding: '24px 26px 26px' }}>
        {eyebrow && <div style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.12em', fontSize: 12, opacity: .85, marginBottom: 8 }}>{eyebrow}</div>}
        <h3 style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 28, color: '#fff', margin: 0, letterSpacing: '-.01em', maxWidth: '68%' }}>{title}</h3>
        {subtitle && <p style={{ fontFamily: 'var(--sm-font-body)', fontSize: 16, lineHeight: 1.5, margin: '8px 0 0', color: 'rgba(255,255,255,.92)', maxWidth: '60%' }}>{subtitle}</p>}
        <div style={{ position: 'absolute', right: 24, bottom: 24 }}><Button variant="light" onClick={onCta}>{cta}</Button></div>
      </div>
    </div>
  );
}

function BrandChip({ name, onClick }) {
  const [hover, setHover] = useState(false);
  return (
    <a onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} title={name} style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center', height: 64, padding: '0 22px', background: '#fff',
      border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-md)', boxShadow: hover ? 'var(--sm-shadow-sm)' : 'none',
      transform: hover ? 'translateY(-2px)' : 'none', transition: 'transform .2s, box-shadow .2s', cursor: 'pointer',
    }}>
      <span style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: 17, color: hover ? 'var(--sm-primary)' : 'var(--sm-gray-500)', letterSpacing: '.02em', transition: 'color .2s' }}>{name}</span>
    </a>
  );
}

// edit-distance (Levenshtein), za toleranciju slovnih grešaka
function smLev(a, b) {
  if (Math.abs(a.length - b.length) > 1) return 2;
  const m = a.length, n = b.length, dp = [];
  for (let i = 0; i <= m; i++) { dp[i] = [i]; for (let j = 1; j <= n; j++) dp[i][j] = i === 0 ? j : 0; }
  for (let i = 1; i <= m; i++) for (let j = 1; j <= n; j++) {
    dp[i][j] = Math.min(dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
    if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) dp[i][j] = Math.min(dp[i][j], dp[i - 2][j - 2] + 1); // zamena susednih slova
  }
  return dp[m][n];
}
// kako se izgovara / česti nazivi -> stvarni termin u katalogu
const SM_ALIASES = {
  ajfon: 'iphone', ajfn: 'iphone', aple: 'apple', epl: 'apple', ajped: 'ipad', mekbuk: 'macbook', mecbuk: 'macbook',
  erpods: 'airpods', samsng: 'samsung', samsumg: 'samsung', tv: 'televizor',
  susilica: 'susenje', susilice: 'susenje', susara: 'susenje', vesarica: 'masina vesa', vesmasina: 'masina vesa',
  hladnjak: 'frizider', kompjuter: 'racunar', kompjuteri: 'racunar', notebook: 'laptop', bubice: 'slusalice', mobilni: 'telefon',
};
// Zajednička pretraga kataloga: ignoriše kvačice, reč-po-reč (AND), jednina/množina, ALIASI, ŠIFRA, typo tolerancija, rangirano
function smSearch(query, limit) {
  const P = (window.SM_DATA && SM_DATA.PRODUCTS) || [];
  const deb = (s) => String(s == null ? '' : s).toLowerCase().replace(/đ/g, 'dj').replace(/š/g, 's').replace(/ž/g, 'z').replace(/č/g, 'c').replace(/ć/g, 'c');
  const STOP = ['za', 'na', 'sa', 'do', 'po', 'je', 'mi', 'od', 'iz', 'se', 'su', 'ili'];
  const raw = deb(query).split(/[^a-z0-9]+/).filter(w => w.length >= 2 && STOP.indexOf(w) < 0);
  if (!raw.length) return [];
  const variants = raw.map(w => { const a = SM_ALIASES[w]; return a ? [w].concat(a.split(' ')) : [w]; });
  const hit = (f, w) => f.indexOf(w) >= 0 || (w.length >= 5 && f.indexOf(w.slice(0, -1)) >= 0) || (w.length >= 6 && f.indexOf(w.slice(0, -2)) >= 0);
  const scoreOf = (p, fuzzy) => {
    const t = deb(p.title), br = deb(p.brand), c = deb(p.cat), pk = deb(p.potkat), pk2 = deb(p.potkat2), code = deb(p.id);
    let score = 0, all = true;
    for (let k = 0; k < variants.length; k++) {
      let s = 0;
      for (let v = 0; v < variants[k].length; v++) {
        const w = variants[k][v];
        if (code.indexOf(w) >= 0) s = Math.max(s, 6); // šifra: TAČNO (bez tolerancije nastavka)
        if (hit(br, w)) s = Math.max(s, 4);
        if (hit(pk2, w)) s = Math.max(s, 3);
        if (hit(t, w)) s = Math.max(s, 3);
        if (hit(pk, w)) s = Math.max(s, 2);
        if (hit(c, w)) s = Math.max(s, 1);
      }
      if (s === 0 && fuzzy) {
        const w0 = variants[k][0];
        if (w0.length >= 4) { const words = (br + ' ' + t).split(/\s+/); for (let wi = 0; wi < words.length; wi++) { if (words[wi].length >= 3 && smLev(w0, words[wi]) <= 1) { s = 2; break; } } }
      }
      if (s === 0) { all = false; if (!fuzzy) break; }
      score += s;
    }
    return all ? score : 0;
  };
  let res = [];
  for (let i = 0; i < P.length; i++) { const sc = scoreOf(P[i], false); if (sc > 0) res.push({ p: P[i], score: sc }); }
  if (!res.length) { for (let i = 0; i < P.length; i++) { const sc = scoreOf(P[i], true); if (sc > 0) res.push({ p: P[i], score: sc }); } }
  res.sort((a, b) => b.score - a.score || (b.p.discount || 0) - (a.p.discount || 0) || a.p.price - b.p.price);
  return res.slice(0, limit || 7).map(x => x.p);
}

Object.assign(window, { Button, IconButton, Badge, PriceTag, Rating, ProductCard, CategoryTile, PromoBanner, BrandChip, I, fmt, useIsMobile, smSearch });