// Shared helpers for the 5 home-page variations.
//
// `Photo` — labeled photo placeholder. Subtle stripes + monospace caption so
// the user can see exactly what content is intended to drop in. Stripes
// rotate ~4deg so the texture reads as "placeholder", not "real background".
// `IconChevron`, `IconArrow` — minimal SVG glyphs (kept simple per guidance).
// `ARTBOARD_W` — common artboard width so all 5 mocks line up in the canvas.

const ARTBOARD_W = 1280;

function Photo({
  label = 'photo',
  ratio,                // 'wide' | 'tall' | 'square' — only when no explicit h
  height = 480,
  tone = 'cool',        // 'cool' | 'warm' | 'neutral' | 'ink'
  style = {},
  caption,              // override caption text; defaults to label
  align = 'center',     // caption corner: 'tl' | 'tr' | 'bl' | 'br' | 'center'
  rounded = 0,
}) {
  const palettes = {
    cool:    { a: '#cfd8e0', b: '#b9c4cd', ink: '#3c4754' },
    warm:    { a: '#e3d6c4', b: '#d3c2ad', ink: '#5a4632' },
    neutral: { a: '#dcdad4', b: '#c8c5bd', ink: '#494640' },
    ink:     { a: '#2a2f36', b: '#363c45', ink: '#cfd3d8' },
    desert:  { a: '#e0c8a8', b: '#caa57f', ink: '#4a2e1a' },
    sage:    { a: '#bfc7b3', b: '#a3ad95', ink: '#2f3a26' },
  };
  const p = palettes[tone] || palettes.cool;
  // Diagonal stripes via repeating-linear-gradient
  const stripes = `repeating-linear-gradient(118deg, ${p.a} 0 14px, ${p.b} 14px 28px)`;
  const cornerStyle = (() => {
    const pad = 12;
    const map = {
      tl: { top: pad, left: pad },
      tr: { top: pad, right: pad },
      bl: { bottom: pad, left: pad },
      br: { bottom: pad, right: pad },
      center: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' },
    };
    return map[align] || map.center;
  })();
  return (
    <div
      style={{
        position: 'relative',
        width: '100%',
        height,
        background: stripes,
        color: p.ink,
        overflow: 'hidden',
        borderRadius: rounded,
        ...style,
      }}
    >
      <div
        style={{
          position: 'absolute',
          ...cornerStyle,
          fontFamily: 'IBM Plex Mono, ui-monospace, monospace',
          fontSize: 11,
          letterSpacing: 0.4,
          textTransform: 'uppercase',
          background: 'rgba(255,255,255,0.7)',
          color: p.ink,
          padding: '4px 8px',
          borderRadius: 2,
          whiteSpace: 'nowrap',
        }}
      >
        ▦ {caption || label}
      </div>
    </div>
  );
}

function IconChevron({ size = 12, dir = 'right', style = {} }) {
  const rotate = { right: 0, down: 90, left: 180, up: 270 }[dir];
  return (
    <svg width={size} height={size} viewBox="0 0 12 12" style={{ transform: `rotate(${rotate}deg)`, ...style }} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
      <path d="M4.5 2.5L8 6l-3.5 3.5" />
    </svg>
  );
}

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

Object.assign(window, { Photo, IconChevron, IconArrow, ARTBOARD_W });