Arceage 统计数据

创建一个 React + Tailwind CSS v4 + Motion（framer-motion successor）统计数据区块组件。使用 Vite 作为打包工具。该区块应完全适配移动端响应式布局。

### 字体

在全局 CSS 中从 Google Fonts 导入：
```
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Instrument+Serif:ital@0;1&display=swap');
```

定义两个 Tailwind v4 主题字体：
- `--font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;`（通过 `font-sans` 用作主要 UI 字体）
- `--font-dm-serif: "Instrument Serif", serif;`（通过 `font-dm-serif` 用作强调/诗意字体）

页面容器使用 `bg-black font-sans text-white`。

### 依赖项

- `react` v19
- `motion`（npm 包 "motion"，以 `motion/react` 导入——提供 `motion`、`useInView`、`animate`）
- Tailwind CSS v4，搭配 `@tailwindcss/vite` 插件
- Vite v6+

### 区块布局

该区块是一个 `<section>`，包含：
- `id="stats"`
- 类名：`bg-black text-white py-8 md:py-24 px-6 md:px-12 lg:px-[120px] w-full border-t border-white/10 overflow-hidden`
- 内层容器：`w-full max-w-[1440px] mx-auto`
- 内容采用双列 flexbox：`flex flex-col lg:flex-row gap-16 lg:gap-[160px] items-stretch`

### 左栏（flex-1, flex flex-col justify-start）

整个左栏包裹在带有交错显现动画的 `motion.div` 中：
- `initial="hidden"`, `whileInView="visible"`, `viewport={{ once: true, margin: "-100px" }}`
- Variants：hidden = `{ opacity: 0 }`，visible = `{ opacity: 1, transition: { staggerChildren: 0.06 } }`

**标题（h2）：**
- 类名：`text-[clamp(1.5rem,4vw,3.5rem)] font-medium tracking-tight mb-6 leading-[1.1] w-[590px] max-w-full`
- 内容使用自定义 `<Typewriter>` 组件（如下所述）：
  - `<Typewriter text="Powering Harvests" delay={0} speed={0.012} />`，后接 `<br />`
  - `<Typewriter text="that " delay={0.25} speed={0.012} />`，然后是一个 `<span className="font-dm-serif italic font-normal">`，其中包裹 `<Typewriter text="Maximize Your Yield" delay={0.35} speed={0.012} />`
- 短语 "Maximize Your Yield" 使用 Instrument Serif 斜体作为强调字体渲染。

**副标题（p）：**
- 类名：`text-base md:text-lg text-white/40 leading-relaxed font-light max-w-lg whitespace-normal mb-16`
- 内容：`<Typewriter text="For over a decade, the region's most demanding agricultural operations have relied on our modern machinery and skilled crews to secure their crops efficiently and reduce loss." delay={0.1} speed={0.012} />`

**统计数据网格：**
- 包裹在带有交错 variants 的 `motion.div` 中：hidden = `{ opacity: 0 }`，visible = `{ opacity: 1, transition: { staggerChildren: 0.06, delayChildren: 0.1 } }`
- 类名：`grid grid-cols-2 md:grid-cols-[max-content_max-content] gap-8 md:gap-x-16 lg:gap-x-24`
- 5 个统计项，每个都包裹在 `motion.div` 中，variants 为：hidden = `{ opacity: 0, y: 20 }`，visible = `{ opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } }`
- 每个统计项（`flex flex-col`）：
  - **数值：** `text-4xl md:text-5xl lg:text-[56px] font-dm-serif tracking-tight mb-3`（使用 Instrument Serif）
  - **标签：** `text-[10px] md:text-xs font-semibold text-white/40 uppercase tracking-wider`

5 项统计数据及其 AnimatedCounter props：
1. `value={500} suffix="K+"` / 标签："每年收割英亩数"
2. `value={99.8} decimals={1} suffix="%"` / 标签："作物回收率"
3. `value={50} suffix="+"` / 标签："投入使用的现代联合收割机"
4. `value={15} suffix="+"` / 标签："支持的作物品种"
5. `value={24} suffix="/7"` / 标签："收获季运行时间"

### AnimatedCounter 组件

一个辅助组件，在滚动进入视口时将数值从 0 动画变化至目标值：
- Props：`value: number`、`suffix?: string`（默认 ""）、`prefix?: string`（默认 ""）、`decimals?: number`（默认 0）
- 使用来自 `motion/react` 的 `useRef<HTMLSpanElement>`、`useInView(ref, { once: true, margin: "-50px" })`
- 当 `inView` 时，调用 `animate(0, value, { duration: 1.5, ease: "easeOut", onUpdate(val) { ref.current.textContent = prefix + val.toFixed(decimals) + suffix } })`
- 返回 `<span ref={ref}>{prefix}0{suffix}</span>` 作为初始渲染

### Typewriter 组件

一个在滚动进入视口时触发、逐字符显现的可复用动画：
- Props：`text: string`、`delay?: number`（默认 0）、`speed?: number`（默认 0.015）、`className?: string`（默认 ""）
- 使用来自 `motion/react` 的 `useRef`、`useInView(ref, { once: true, margin: "-10px" })`
- 渲染一个 `motion.span`，设置 `initial="hidden"` 和 `animate={inView ? "visible" : "hidden"}`
- 父级 variants：hidden = `{ opacity: 1 }`，visible = `{ opacity: 1, transition: { staggerChildren: speed, delayChildren: delay } }`
- 将文本拆分为单个字符，每个字符都包裹在 `motion.span` 中，variants 为：hidden = `{ opacity: 0 }`，visible = `{ opacity: 1 }`

### 右栏：Logo 蒙版视频

- 容器：`flex justify-center lg:justify-end items-center shrink-0 lg:w-1/2`
- 内层 `motion.div`：
  - `initial={{ opacity: 0, scale: 0.9 }}`
  - `whileInView={{ opacity: 1, scale: 1.2 }}`
  - `viewport={{ once: true, margin: "-100px" }}`
  - `transition={{ duration: 0.8, delay: 0, ease: "easeOut" }}`
  - 类名：`w-full max-w-[500px] lg:max-w-none lg:w-[120%] aspect-square origin-center`
  - 使用 CSS `mask-image`（同时包含 `-webkit-mask-image` 和 `mask-image`），并以三角形/山形 Logo 的内联 SVG data URI 作为蒙版。准确的 SVG 路径数据：
    ```
    m53.54,45.42c2.19-3.79,7.67-3.79,9.86,0l4.54,7.87c1.17,2.02,1.17,4.51,0,6.54l-8.15,13.81c-1.68,2.91.42,6.55,3.78,6.55h17.81c3.45,0,5.61-3.74,3.89-6.73l-28.76-49.81c-2.95-5.12-10.34-5.12-13.29,0l-28.46,49.3c-1.86,3.22.46,7.24,4.18,7.24h10.23c2.55,0,4.91-1.36,6.19-3.57l18.18-31.19Z
    ```
  - SVG viewBox：`0 0 100 100`
  - 蒙版属性：`maskSize: 'contain'`、`maskRepeat: 'no-repeat'`、`maskPosition: 'center'`
  - 完整内联 style 对象：
    ```js
    {
      WebkitMaskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='m53.54,45.42c2.19-3.79,7.67-3.79,9.86,0l4.54,7.87c1.17,2.02,1.17,4.51,0,6.54l-8.15,13.81c-1.68,2.91.42,6.55,3.78,6.55h17.81c3.45,0,5.61-3.74,3.89-6.73l-28.76-49.81c-2.95-5.12-10.34-5.12-13.29,0l-28.46,49.3c-1.86,3.22.46,7.24,4.18,7.24h10.23c2.55,0,4.91-1.36,6.19-3.57l18.18-31.19Z'/%3E%3C/svg%3E")`,
      WebkitMaskSize: 'contain',
      WebkitMaskRepeat: 'no-repeat',
      WebkitMaskPosition: 'center',
      maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='m53.54,45.42c2.19-3.79,7.67-3.79,9.86,0l4.54,7.87c1.17,2.02,1.17,4.51,0,6.54l-8.15,13.81c-1.68,2.91.42,6.55,3.78,6.55h17.81c3.45,0,5.61-3.74,3.89-6.73l-28.76-49.81c-2.95-5.12-10.34-5.12-13.29,0l-28.46,49.3c-1.86,3.22.46,7.24,4.18,7.24h10.23c2.55,0,4.91-1.36,6.19-3.57l18.18-31.19Z'/%3E%3C/svg%3E")`,
      maskSize: 'contain',
      maskRepeat: 'no-repeat',
      maskPosition: 'center',
    }
    ```

- 在蒙版 div 内放置一个 `<video>` 元素：
  - 属性：`autoPlay`、`loop`、`muted`、`playsInline`
  - 类名：`w-full h-full object-cover`
  - 来源：`https://app-uploads.krea.ai/wan-videos/7f348c17-c3aa-40c9-9d5b-a2bed9a72c2e.mp4`（类型 `video/mp4`）

### 移动端响应式设计摘要

- 区块内边距：移动端为 `py-8 px-6`，`md:py-24 md:px-12`，`lg:px-[120px]`
- 移动端采用垂直堆叠（`flex-col`），在 `lg:` 下变为并排布局（`flex-row`）
- 标题使用流式排版：`clamp(1.5rem, 4vw, 3.5rem)`
- 统计数据网格：移动端为 2 列（`grid-cols-2`），在 `md:` 下自动调整列宽（`grid-cols-[max-content_max-content]`）
- 统计数值：移动端为 `text-4xl`，`md:text-5xl`，`lg:text-[56px]`
- 视频蒙版：移动端为 `max-w-[500px]`，在 `lg:` 下使用全宽并设置 `lg:w-[120%]`

---