// Pressing Matters - Bold Workshop site
// Tokens, helpers, shared SVG/icon components

const PM = {
  ink: '#0a0a0a',
  bone: '#F1ECE0',
  paper: '#FFFCF5',
  yellow: '#FFC222',
  yellowDeep: '#E8A100',
  gold: '#C9A341',
  muted: '#8a8275',
  mutedDark: '#3a3530',
};

const FONTS = {
  display: `'Anton','Bebas Neue',sans-serif`,
  script: `'Caveat Brush','Caveat',cursive`,
  body: `'Inter','Helvetica Neue',sans-serif`,
  mono: `'JetBrains Mono',ui-monospace,monospace`,
};

const GRAIN_BG = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")`;

function PMMonogram({ size = 36, light = false }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
      <rect width="40" height="40" fill={light ? PM.bone : PM.yellow} />
      <path d="M9 10 H17 Q23 10 23 16 Q23 22 17 22 H13 V30 H9 Z" fill={PM.ink} />
      <path d="M21 30 V14 L26 22 L31 14 V30" stroke={PM.ink} strokeWidth="2.5" fill="none" strokeLinejoin="round" />
    </svg>
  );
}

function ShirtSilhouette({ fill = '#fff' }) {
  return (
    <svg viewBox="0 0 200 220" fill="none" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>
      <path d="M40 30 L70 10 Q85 24 100 24 Q115 24 130 10 L160 30 L185 50 L170 75 L155 65 L155 200 Q155 210 145 210 L55 210 Q45 210 45 200 L45 65 L30 75 L15 50 Z" fill={fill} stroke="rgba(0,0,0,.15)" strokeWidth="1.5" />
      <path d="M70 10 Q85 30 100 30 Q115 30 130 10" stroke="rgba(0,0,0,.18)" strokeWidth="1.5" fill="none" />
    </svg>
  );
}

function WAIcon({ size = 24, fill = '#fff' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}>
      <path d="M17.6 6.3A8 8 0 0 0 4.3 16.5L3 21l4.6-1.2a8 8 0 0 0 12-10.5 7.9 7.9 0 0 0-2-3zm-5.6 12.3a6.6 6.6 0 0 1-3.4-.9l-.2-.1-2.7.7.7-2.6-.2-.3a6.6 6.6 0 1 1 5.8 3.2zm3.6-5c-.2-.1-1.2-.6-1.4-.6s-.3-.1-.5.1l-.6.7c-.1.2-.2.2-.4.1a5.4 5.4 0 0 1-1.6-1c-.6-.5-1-1.2-1.1-1.4s0-.3.1-.4l.3-.4.2-.3v-.4l-.6-1.4c-.1-.4-.3-.3-.4-.3h-.4a.7.7 0 0 0-.5.2 2 2 0 0 0-.6 1.5 3.5 3.5 0 0 0 .7 1.8 8 8 0 0 0 3.1 2.7c.4.2.8.3 1 .4a2.5 2.5 0 0 0 1.2 0 2 2 0 0 0 1.2-.8 1.6 1.6 0 0 0 .1-.9z" />
    </svg>
  );
}

// Reveal-on-scroll hook
function useRevealOnScroll(deps = []) {
  React.useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add('pm-revealed');
            obs.unobserve(e.target);
          }
        });
      },
      { threshold: 0.15 }
    );
    document.querySelectorAll('.pm-reveal:not(.pm-revealed)').forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, deps);
}

window.PM = PM;
window.FONTS = FONTS;
window.GRAIN_BG = GRAIN_BG;
window.PMMonogram = PMMonogram;
window.ShirtSilhouette = ShirtSilhouette;
window.WAIcon = WAIcon;
window.useRevealOnScroll = useRevealOnScroll;

// Asset path resolver. In dev: returns the path as-is. In the bundled
// standalone HTML: returns window.__resources[id] (a blob: URL) when the
// path is registered. This lets the same JSX work in both environments.
window.__assetMap = {
  'assets/hero-bg.png': 'heroBg',
  'assets/grid-1-apparel.png': 'grid1Apparel',
  'assets/grid-2-drinkware.png': 'grid2Drinkware',
  'assets/grid-3-headwear.png': 'grid3Jeans',
  'assets/shirt-photo-white.png': 'shirtWhite',
  'assets/shirt-photo-black.png': 'shirtBlack',
  'assets/shirt-photo-sand.png': 'shirtSand',
  'assets/review-rayne-1.jpg': 'reviewRayne1',
  'assets/review-rayne-2.jpg': 'reviewRayne2',
  'assets/review-rayne-3.jpg': 'reviewRayne3',
  'assets/review-cups-1.jpg': 'reviewCups1',
  'assets/review-cups-2.jpg': 'reviewCups2',
  'assets/review-lanyards-1.jpg': 'reviewLanyards1',
};
window.A = function (path) {
  var id = window.__assetMap[path];
  if (id && window.__resources && window.__resources[id]) return window.__resources[id];
  return path;
};