NexaCore 控制

构建一个名为 `FreedomSection` 的单一 React + TypeScript + Tailwind CSS v3 组件。它使用 `hls.js` 进行 HLS 视频流播放，并使用 React 的 `useEffect` / `useRef`。不使用外部图标库——所有图标均为内联 SVG 或 `<img>` 标签。完全适配移动端。无 hover 状态。

---

## 全局字体

在 `index.css` 中注册 **"Mazzard H"** 并全局应用：

```css
@font-face {
  font-family: 'Mazzard H';
  font-weight: 400;
  font-style: normal;
  src: url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff') format('woff'),
       url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.ttf') format('truetype');
}
@font-face {
  font-family: 'Mazzard H';
  font-weight: 500;
  font-style: normal;
  src: url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff') format('woff'),
       url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.ttf') format('truetype');
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body, * { font-family: 'Mazzard H', sans-serif; }
}
```

---

## 依赖项

必须安装 `hls.js`：`npm install hls.js`。导入方式为 `import Hls from 'hls.js'`。

---

## 文件：`src/components/FreedomSection.tsx`

### 常量（文件顶部）

```ts
const HLS_SRC = 'https://stream.mux.com/bnYL6x5cAX6WiJv2pOKpITehZd3NVdXpj3ylJFpX5Lk.m3u8';

const CROSS_ICON = 'https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/686cc0f520a992816d8b15dc_bullet-list-cross.svg';
const CHECK_ICON = 'https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/686cc068490683bbb3377d04_bullet-list.svg';

const negatives = [
  '基础问题暴露得太晚，只能被动救火',
  '臃肿的协调开销耗尽核心团队的精力',
  '源数据不可信，导致持续重复验证',
  '分散的供应商关系造成交付成果不匹配',
  '规格与决策散落并深埋于相互隔离的系统中',
];

const positives = [
  '分层依赖关系图在每个阶段消除代价高昂的意外',
  '精简的团队交接可快速产出生产就绪的成果',
  '实时验证闭环确保所有阶段的需求始终锁定一致',
  '通过单一责任联系人统一管理供应商',
  '集中式上下文与清晰记录加速每一项决策',
];
```

---

### `HlsVideo` 子组件（定义在 `FreedomSection` 上方，不导出）

```ts
function HlsVideo() {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    if (Hls.isSupported()) {
      const hls = new Hls({
        startLevel: -1,
        capLevelToPlayerSize: false,
        maxMaxBufferLength: 60,
        enableWorker: true,
      });
      hls.loadSource(HLS_SRC);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        hls.currentLevel = hls.levels.length - 1;
        video.play().catch(() => {});
      });
      return () => hls.destroy();
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = HLS_SRC;
      video.play().catch(() => {});
    }
  }, []);

  return (
    <video
      ref={videoRef}
      autoPlay
      loop
      muted
      playsInline
      style={{
        width: '160%',
        height: '160%',
        objectFit: 'cover',
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
      }}
    />
  );
}
```

视频放大至 `160% x 160%`，并在圆形裁剪容器内通过 `translate(-50%, -50%)` 居中，因此会填满圆形且不会出现黑边。

---

### `FreedomSection` 组件

**`<section>`** — Tailwind：`w-full flex flex-col items-center`

内联：
```
background-color: #ffffff
padding: clamp(48px, 6vw, 80px) clamp(16px, 3vw, 40px)
gap: 36px
```

---

#### 区块 1 — 页头

Tailwind：`flex flex-col items-center gap-9 text-center`

**徽章胶囊：**

Tailwind：`flex items-center gap-2 text-lg font-medium rounded-full`

内联：`background-color: rgb(249, 249, 249)`、`padding: 0.9vw 1.25vw`、`color: rgb(26, 11, 84)`

包含以下内联 SVG（`width: 19px`、`height: 18px`、`flex-shrink: 0`、`viewBox="0 0 17 16"`、`fill="none"`、`xmlns="http://www.w3.org/2000/svg"`）：

```xml
<g clipPath="url(#freedom-clip)">
  <path
    fillRule="evenodd"
    clipRule="evenodd"
    d="M8.50037 3.66955C7.53221 2.82462 6.41758 2.275 5.333 2.07887C4.11096 1.85888 2.84987 2.0826 1.96658 2.95885C1.10056 3.81944 0.866218 5.04172 1.06751 6.23193C1.24778 7.29835 1.7803 8.39907 2.60501 9.35959C2.41536 10.1071 2.46371 10.8946 2.7434 11.6137C3.02308 12.3327 3.52035 12.9481 4.16678 13.375C4.81321 13.802 5.57702 14.0195 6.35308 13.9976C7.12915 13.9758 7.87933 13.7157 8.50037 13.2531C9.12146 13.7161 9.87183 13.9765 10.6482 13.9985C11.4245 14.0205 12.1886 13.8029 12.8352 13.3758C13.4819 12.9487 13.9792 12.3331 14.2588 11.6137C14.5384 10.8943 14.5865 10.1065 14.3965 9.35884C15.2204 8.39832 15.753 7.29835 15.9325 6.23119C16.1338 5.04098 15.8994 3.81944 15.0334 2.9596C14.1501 2.0826 12.889 1.85888 11.667 2.07962C10.5824 2.275 9.46854 2.82537 8.50037 3.66955Z"
    fill="rgb(200, 111, 255)"
  />
</g>
<defs>
  <clipPath id="freedom-clip">
    <rect width="16" height="16" fill="white" transform="translate(0.5)" />
  </clipPath>
</defs>
```

SVG 后是纯文本 **"掌控"**

**`<h2>`** — Tailwind：`font-medium`

内联：`font-size: clamp(32px, 4vw, 56px)`、`color: rgb(26, 11, 84)`、`line-height: 1.15`、`margin: 0`

结构：
```
停止承受混乱。<br />
<span gradient>自信推进。</span>
```

渐变 `<span>` 内联样式：
```
background-image: linear-gradient(90deg, rgb(43,167,255), rgb(202,69,255) 50%, rgb(254,136,27))
-webkit-background-clip: text
background-clip: text
-webkit-text-fill-color: transparent
color: transparent
padding-bottom: 0.3vw
display: inline-block
```

---

#### 区块 2 — 三列网格

Tailwind：`w-full flex flex-col lg:grid`

内联：
```
grid-template-columns: 26vw 1fr 26vw
column-gap: 36px
row-gap: 24px
align-items: start
padding: 0 clamp(0px, 2.92vw, 40px)
gap: 24px
```

在移动端（`flex flex-col`）：垂直堆叠。在 `lg:` 及以上：渲染为三列网格，`gridTemplateColumns: '26vw 1fr 26vw'`。

---

##### 左列 — 负面项

Tailwind：`flex flex-col`

内联：`gap: 12px`、`font-size: clamp(13px, 1.15vw, 17px)`、`color: rgb(131, 121, 158)`

遍历 `negatives`。每张卡片 `<div>` — Tailwind：`flex flex-col`

内联：
```
gap: 12px
padding: clamp(12px, 0.97vw, 16px) clamp(14px, 1.25vw, 20px)
border-radius: 18px
background-color: rgb(255, 255, 255)
box-shadow: 0 3px 9.1px #3f4a7e0d, 0 1px 29px #3f4a7e1a
```

内容：
1. `<img src={CROSS_ICON} alt="" aria-hidden style={{ width: 'clamp(16px, 1.25vw, 20px)', flexShrink: 0 }} />`
2. `<div>{text}</div>` — 继承父元素的 `color: rgb(131, 121, 158)`

---

##### 中列 — 视频圆形区域

Tailwind：`flex items-center justify-center order-first lg:order-none`

内联：`align-self: center`

在移动端，`order-first` 将视频置于两列卡片上方。在 `lg:` 下，`lg:order-none` 将其恢复至中间。

内部是一个圆形容器：
```
position: relative
border-radius: 50%
overflow: hidden
width: clamp(200px, 22vw, 400px)
height: clamp(200px, 22vw, 400px)
flex-shrink: 0
```

圆形内部：`<HlsVideo />`（如上所述——`<video>` 以绝对定位方式设为 160% 大小，并通过 translate -50% -50% 居中）。

---

##### 右列 — 正面项

Tailwind：`flex flex-col`

内联：`gap: 12px`、`font-size: clamp(13px, 1.15vw, 17px)`

遍历 `positives`。每张卡片 `<div>` — Tailwind：`flex flex-col`

内联：（与负面项使用相同的阴影、内边距和圆角）
```
gap: 12px
padding: clamp(12px, 0.97vw, 16px) clamp(14px, 1.25vw, 20px)
border-radius: 18px
background-color: rgb(255, 255, 255)
box-shadow: 0 3px 9.1px #3f4a7e0d, 0 1px 29px #3f4a7e1a
```

内容：
1. `<img src={CHECK_ICON} alt="" aria-hidden style={{ width: 'clamp(16px, 1.25vw, 20px)', flexShrink: 0 }} />`
2. `<div style={{ color: 'rgb(26, 11, 84)' }}>{text}</div>`

---

## 布局摘要

- **移动端**：flex-col — 视频最先显示（order-first），随后是左侧负面项，最后是右侧正面项，三者垂直堆叠
- **桌面端（lg+）**：CSS grid — 左侧负面项 | 中间视频圆形区域 | 右侧正面项
- Section 背景为纯白色 `#ffffff`
- 无 animations、无 hover 状态、无 scroll 效果