// Shared atoms — placeholders, depth tags, etc.

const MonoTag = ({ children, color, style }) => (
  <span className="uwr-mono" style={{ color: color || 'var(--uwr-cyan)', ...style }}>{children}</span>
);

const Rule = ({ strong, vertical, style }) => (
  <div style={{
    background: strong ? 'var(--uwr-line-strong)' : 'var(--uwr-line)',
    width: vertical ? 1 : '100%',
    height: vertical ? '100%' : 1,
    ...style,
  }} />
);

// Underwater image — real photo with depth overlay
const UnderwaterPlaceholder = ({ label, sub, intensity = 0.6, children, style, src }) => (
  <div className="uwr-depth" style={{ position: 'relative', overflow: 'hidden', ...style }}>
    {src ? (
      <img src={src} alt="" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', opacity: intensity,
      }} />
    ) : (
      <>
        <div style={{
          position: 'absolute', inset: 0,
          background: `radial-gradient(ellipse 60% 40% at 50% -10%, rgba(0,217,255,${0.15 * intensity}) 0%, transparent 70%)`,
          pointerEvents: 'none',
        }} />
        <div style={{
          position: 'absolute',
          left: '50%', top: '52%', transform: 'translate(-50%,-50%)',
          width: '38%', height: '70%',
          background: 'radial-gradient(ellipse at 50% 35%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 40%, transparent 75%)',
          filter: 'blur(2px)',
          pointerEvents: 'none',
        }} />
        {[...Array(6)].map((_, i) => (
          <div key={i} style={{
            position: 'absolute',
            left: `${15 + i * 12}%`,
            top: `${30 + (i % 3) * 15}%`,
            width: 4 + (i % 3) * 2,
            height: 4 + (i % 3) * 2,
            borderRadius: '50%',
            background: 'rgba(242,242,234,0.15)',
            boxShadow: '0 0 4px rgba(0,217,255,0.2)',
          }} />
        ))}
      </>
    )}
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
      <div className="uwr-grain" />
    </div>
    {label && (
      <div style={{
        position: 'absolute', left: 16, bottom: 16,
        fontFamily: 'var(--uwr-mono)', fontSize: 10, letterSpacing: '0.1em',
        color: 'rgba(242,242,234,0.4)', textTransform: 'uppercase',
      }}>
        [ {label} ]{sub && <div style={{ marginTop: 2, color: 'rgba(242,242,234,0.25)' }}>{sub}</div>}
      </div>
    )}
    {children}
  </div>
);

const PRODUCT_IMGS = {
  black: 'https://images.unsplash.com/photo-1583743814966-8936f5b7be1a?w=600&q=80',
  cyan:  'https://images.unsplash.com/photo-1618354691373-d851c5c3a990?w=600&q=80',
  red:   'https://images.unsplash.com/photo-1583743814966-8936f5b7be1a?w=600&q=80',
};

// Product placeholder — real tshirt mockup photo
const ProductPlaceholder = ({ name, color = 'black', hideLabel = false, style }) => (
  <div className="uwr-prod-placeholder" style={{ position: 'relative', overflow: 'hidden', ...style }}>
    <img
      src={PRODUCT_IMGS[color] || PRODUCT_IMGS.black}
      alt={name || 'product'}
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
    />
    {!hideLabel && (
      <div style={{
        position: 'absolute', right: 12, bottom: 12,
        fontFamily: 'var(--uwr-mono)', fontSize: 9, letterSpacing: '0.1em',
        color: 'rgba(242,242,234,0.7)', textAlign: 'right',
        background: 'rgba(5,8,10,0.6)', padding: '2px 6px',
      }}>
        {name || '[PRODUCT]'}
      </div>
    )}
  </div>
);

// Arrow icon
const Arrow = ({ size = 14, style }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" style={style}>
    <path d="M2 7h10M8 3l4 4-4 4" strokeLinecap="square" />
  </svg>
);

const PlusIcon = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6">
    <path d="M7 2v10M2 7h10" strokeLinecap="square" />
  </svg>
);

const CartIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M2 3h2l1.5 8h7L14 5H5" strokeLinecap="square" />
    <circle cx="6.5" cy="13.5" r="1" fill="currentColor" />
    <circle cx="11.5" cy="13.5" r="1" fill="currentColor" />
  </svg>
);

const SearchIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
    <circle cx="7" cy="7" r="4.5" />
    <path d="M10.5 10.5L14 14" strokeLinecap="square" />
  </svg>
);

const CloseIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M3 3l10 10M13 3L3 13" strokeLinecap="square" />
  </svg>
);

Object.assign(window, {
  MonoTag, Rule, UnderwaterPlaceholder, ProductPlaceholder,
  Arrow, PlusIcon, CartIcon, SearchIcon, CloseIcon,
});