vf_react/src/hooks/useHomeResponsive.ts

// src/hooks/useHomeResponsive.ts
// 首页响应式配置 Hook

import { useBreakpointValue } from '@chakra-ui/react';
import type { ResponsiveConfig } from '@/types/home';

/**
 * 首页响应式配置 Hook
 * 集中管理所有响应式断点值
 *
 * @returns 响应式配置对象
 */
export const useHomeResponsive = (): ResponsiveConfig => {
  const heroHeight = useBreakpointValue({
    base: '60vh',
    md: '80vh',
    lg: '100vh'
  });

  const headingSize = useBreakpointValue({
    base: 'lg',
    md: 'xl',
    lg: '2xl'
  });

  const headingLetterSpacing = useBreakpointValue({
    base: '-0.5px',
    md: '-1px',
    lg: '-1.5px'
  });

  const heroTextSize = useBreakpointValue({
    base: 'xs',
    md: 'sm',
    lg: 'md'
  });

  const containerPx = useBreakpointValue({
    base: 10,
    md: 10,
    lg: 10
  });

  const showDecorations = useBreakpointValue({
    base: false,
    md: true
  });

  return {
    heroHeight,
    headingSize,
    headingLetterSpacing,
    heroTextSize,
    containerPx,
    showDecorations
  };
};