// Real photo loader with gradient fallback (in case Unsplash 404s any ID).

const { useState } = React;

const GradientBG = ({ p, variant = 'a', className = '' }) => {
  const angle = variant === 'a' ? 145 : 215;
  const gid = `g-${p.id}-${variant}`;
  return (
    <svg viewBox="0 0 600 800" preserveAspectRatio="xMidYMid slice" className={className} xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="1" y2="1" gradientTransform={`rotate(${angle} 0.5 0.5)`}>
          <stop offset="0%"  stopColor={p.hue1}/>
          <stop offset="100%" stopColor={p.hue2}/>
        </linearGradient>
      </defs>
      <rect width="600" height="800" fill={`url(#${gid})`}/>
      <text x="300" y="430" textAnchor="middle" fontFamily="Allura, cursive" fontSize="56" fill="rgba(255,255,255,0.55)">Rare</text>
      <text x="300" y="470" textAnchor="middle" fontFamily="Italianno, cursive" fontSize="22" fill="rgba(255,255,255,0.42)">boutique</text>
    </svg>
  );
};

const ProductImg = ({ p, variant = 'a', className = '', eager = false }) => {
  const [ok, setOk] = useState(true);
  const [loaded, setLoaded] = useState(false);
  const src = p.img?.[variant];
  return (
    <div className={`relative overflow-hidden ${className} bg-paper-warm`}>
      {/* Gradient ONLY shows when the real photo failed OR while it's still loading.
          Once loaded, it's hidden so the real product image is what the user sees. */}
      {(!ok || !loaded) && (
        <GradientBG p={p} variant={variant} className="absolute inset-0 w-full h-full"/>
      )}
      {ok && src && (
        <img src={src}
             alt={p.en || p.ar}
             loading={eager ? "eager" : "lazy"}
             decoding="async"
             onError={() => setOk(false)}
             onLoad={() => setLoaded(true)}
             className="absolute inset-0 w-full h-full object-cover img-scale gpu"
             style={{ opacity: loaded ? 1 : 0, transition: 'opacity 250ms ease' }}/>
      )}
    </div>
  );
};

const CategoryImg = ({ c, className = '' }) => {
  const [ok, setOk] = useState(true);
  const [loaded, setLoaded] = useState(false);
  const src = window.RB.catImg(c.id);
  return (
    <div className={`relative overflow-hidden ${className} bg-paper-warm`}>
      {(!ok || !loaded) && (
        <svg viewBox="0 0 600 800" preserveAspectRatio="xMidYMid slice" className="absolute inset-0 w-full h-full" aria-hidden="true">
          <defs>
            <linearGradient id={`cg-${c.id}`} x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor={c.hue1}/>
              <stop offset="100%" stopColor={c.hue2}/>
            </linearGradient>
          </defs>
          <rect width="600" height="800" fill={`url(#cg-${c.id})`}/>
        </svg>
      )}
      {ok && (
        <img src={src} alt={c.en} loading="lazy" decoding="async"
             onError={() => setOk(false)}
             onLoad={() => setLoaded(true)}
             className="absolute inset-0 w-full h-full object-cover img-scale gpu"
             style={{ opacity: loaded ? 1 : 0, transition: 'opacity 250ms ease' }}/>
      )}
    </div>
  );
};

const HeroImg = ({ src, alt = '', className = '', fallbackHue1 = '#fde0ec', fallbackHue2 = '#f79ab5' }) => {
  const [ok, setOk] = useState(true);
  return (
    <div className={`relative overflow-hidden ${className}`}>
      <div className="absolute inset-0" style={{ background: `linear-gradient(145deg, ${fallbackHue1}, ${fallbackHue2})` }}/>
      {ok && (
        <img src={src} alt={alt} onError={() => setOk(false)}
             className="absolute inset-0 w-full h-full object-cover img-scale gpu"/>
      )}
    </div>
  );
};

const Swatch = ({ hex, size=14, ring=false, className = '' }) => (
  <span style={{ background:hex, width:size, height:size }}
        className={`inline-block rounded-full ${ring ? 'ring-2 ring-ink ring-offset-2 ring-offset-paper' : 'ring-1 ring-black/10'} ${className}`} />
);

window.RBImg = { ProductImg, CategoryImg, HeroImg, Swatch, GradientBG };