// Placeholder stubs for the funnel screens. These will be replaced
// one-by-one as we build. Each exports a component that renders inside
// an artboard at the listed dimensions.

function Placeholder({ label, w, h }) {
  return (
    <div style={{
      width: w, height: h,
      background: 'repeating-linear-gradient(135deg, #f4f1ec 0 12px, #efece6 12px 13px)',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      gap: 12, color: '#8a8a8a',
      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
    }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: '#0a0a0a', letterSpacing: '-0.02em' }}>
        {label}
      </div>
      <div>placeholder · building next</div>
    </div>
  );
}

window.Placeholder = Placeholder;