'use client'; import React, { useMemo } from 'react'; import { motion } from 'framer-motion'; import { Scale, Activity, Droplets, Leaf, Wind, Snowflake, Flame, Mountain } from 'lucide-react'; // ----------------------------------------------------------------------------- // 子组件：太极符号 (SVG) // ----------------------------------------------------------------------------- const TaijiSymbol = () => { return ( {/* 阳 (Yang) - White side */}

{/* 阴 (Yin) - Dark side (using background color to simulate) */}

{/* Curves to form the S shape */}

{/* The Dots */}

); }; // ----------------------------------------------------------------------------- // 子组件：背景经络线 (SVG) // ----------------------------------------------------------------------------- const MeridianLines = () => { return ( ); }; // ----------------------------------------------------------------------------- // 主组件：中医理论基础展示 // ----------------------------------------------------------------------------- export default function TCMFoundations() { // 五行数据 const elements = useMemo(() => [ { name: "木", char: "Wood", color: "#86efac", icon: Leaf, pos: { top: '10%', right: '45%' } }, { name: "火", char: "Fire", color: "#fca5a5", icon: Flame, pos: { top: '35%', right: '15%' } }, { name: "土", char: "Earth", color: "#fde047", icon: Mountain, pos: { bottom: '15%', right: '25%' } }, { name: "金", char: "Metal", color: "#e2e8f0", icon: Wind, pos: { bottom: '15%', left: '25%' } }, { name: "水", char: "Water", color: "#93c5fd", icon: Droplets, pos: { top: '35%', left: '15%' } }, ], []); // 理论卡片数据 const cards = useMemo(() => [ { title: "阴阳学说", eng: "Yin-Yang Theory", desc: "对立制约，互根互用，消长平衡。", icon: Scale, color: "#e2e8f0" }, { title: "五行学说", eng: "Five Elements", desc: "木火土金水，相生相克，制化胜复。", icon: Activity, // Using Activity as a metaphor for system interaction color: "#fcd34d" }, { title: "藏象经络", eng: "Zang-Fu & Meridians", desc: "五脏六腑为本，经络沟通内外。", icon: Leaf, // Natural organic system color: "#86efac" }, { title: "辨证论治", eng: "Pattern Differentiation", desc: "望闻问切，同病异治，异病同治。", icon: Snowflake, // Detail/Specifics color: "#93c5fd" } ], []); return (

{/* 1. 动态背景光晕 (Qi Flow) */} {/* 2. 经络线条 SVG */} {/* 3. 主要内容容器 */}

{/* 标题区域 */}

Traditional Chinese Medicine

中医理论基础

{/* 核心布局：中间太极，两侧卡片 */}

{/* 左侧卡片组 */}

{cards.slice(0, 2).map((card, i) => ( ))}

{/* 中间：太极与五行环绕 */}

{/* 太极核心 */} {/* 五行环绕动画 */} {elements.map((el, i) => ( {/* 悬浮微动 */} {el.name} ))} {/* 连接线圈 */}

{/* 右侧卡片组 */}

{cards.slice(2, 4).map((card, i) => ( ))}

); } // ----------------------------------------------------------------------------- // 子组件：单张信息卡片 // ----------------------------------------------------------------------------- const CardItem = ({ item, index, align }) => { const isRight = align === 'right'; const Icon = item.icon; return ( {/* 装饰性光辉 */}

{/* 图标 */}

{/* 文本内容 */}

{item.title}

{item.eng}

{item.desc}

); };