// Shared primitives — small components used across screens.

const Logo = ({ size = 22, onClick, asLink = false }) => {
  const handle = onClick || (asLink ? () => {
    if (window.parent && window.parent !== window) {
      window.parent.postMessage({ type: 'axo:site-path', path: '/' }, window.location.origin);
    } else {
      window.history.pushState(null, '', '/');
    }
    window.scrollTo({ top: 0, behavior: 'instant' });
  } : undefined);
  return (
    <span className="brand" style={{ fontSize: size, cursor: handle ? 'pointer' : 'default' }} onClick={handle} title={handle ? 'Back to home' : undefined}>
      <span>AmazingXO</span>
    </span>
  );
};

const Eyebrow = ({ children, dark, light }) => (
  <div className="hero-eyebrow" style={(dark || light) ? { color: 'rgba(244,237,228,0.7)' } : undefined}>
    {children}
  </div>
);

const Marquee = ({ items, dark }) => (
  <div className={`marquee ${dark ? 'marquee-dark' : ''}`}>
    <div className="marquee-track">
      {[...items, ...items].map((it, i) => (
        <span key={i} className="marquee-item">
          <span className="marquee-dot" />{it}
        </span>
      ))}
    </div>
  </div>
);

// SVG-only "lifestyle" placeholders — striped, monospace explainer.
const ImagePlaceholder = ({ label, ratio = '4/5', tone = 'sand' }) => {
  const palettes = {
    sand:  ['#e8d5b7', '#c9a878', '#8b4513'],
    cream: ['#faf5ec', '#e8d5b7', '#b88a5a'],
    cocoa: ['#4a2818', '#2b1810', '#1a0f0a'],
    sage:  ['#a8b09a', '#7d8770', '#5a6c4a'],
  };
  const [a, b, c] = palettes[tone] || palettes.sand;
  return (
    <div style={{
      aspectRatio: ratio,
      background: `repeating-linear-gradient(135deg, rgba(43,24,16,0.06) 0 2px, transparent 2px 18px), linear-gradient(180deg, ${a} 0%, ${b} 50%, ${c} 100%)`,
      borderRadius: 4,
      position: 'relative',
      overflow: 'hidden',
      border: '1px solid var(--rule)',
    }}>
      <span className="mono" style={{
        position: 'absolute', bottom: 16, left: 16,
        fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.85)',
      }}>{label}</span>
    </div>
  );
};

Object.assign(window, { Logo, Eyebrow, Marquee, ImagePlaceholder });