Contact Cybernetic

使用 React、Tailwind CSS 和 Framer Motion (motion/react) 构建一个现代化的交互式 hero section。请确保严格遵循以下架构和样式说明：
1. 字体与全局动画
从 Google Fonts 导入 Inter 字体。
在 CSS 设置中，将 Tailwind 配置为默认使用该字体（--font-sans: 'Inter', ...）。
在 CSS 中创建一个名为 blink 的 keyframe animation，用于打字机光标：
code
CSS
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.animate-blink { animation: blink 1s step-end infinite; }
2. 通用页面结构
将整个应用包裹在 container div 中，并使用以下 classes：relative bg-white text-neutral-900 font-sans selection:bg-[#EAECE9] selection:text-[#1C2E1E] antialiased overflow-x-hidden flex flex-col lg:block lg:min-h-screen。
3. 背景视频组件（带原生 Scrubbing）
Container element：添加一个包含背景视频的 div，并使用 classes：order-last lg:order-none relative lg:absolute lg:inset-0 lg:z-0 overflow-hidden pointer-events-none w-full aspect-square md:aspect-video lg:aspect-auto lg:h-full bg-neutral-50 lg:bg-transparent。
Video element：使用带有 muted、playsInline、preload="auto" 的 <video>。
Video Source URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260601_110537_3a579fa0-7bbc-4d94-9d25-0e816c7840f5.mp4
Classes：w-full h-full object-cover object-right lg:object-right-bottom。
通过 useEffect hooks 实现 Scrubbing/Playback Logic：
Desktop Mouse Scrubbing Hook：监听 window mousemove event。如果 window.innerWidth < 1024，则忽略（禁用 scrubbing）。存储鼠标的“previous X”坐标，用于计算它与“current X”的 delta。根据 (delta / window.innerWidth) * 0.8 * video.duration 更新目标 scrub time。将时间限制在 0 与 duration 之间。设置 video.currentTime = targetTime。绑定 seeked event listener，确保逐帧平滑跟踪。
Mobile Autoplay Hook：由于移动端 frames 禁用了 scrubbing，请为宽度 < 1024 的屏幕触发正常播放：video.autoplay = true 和 video.play()。
4. 交互式 Navbar
Header wrapper：将 Navbar 包裹在 <header className="fixed top-0 inset-x-0 z-10 px-5 sm:px-8 py-4 sm:py-5 flex flex-row justify-between items-center bg-transparent"> 中。
Logo（Left side）：使用 gap-3 的 flex row。
Text：Mainframe&reg;（使用 ® symbol）。Classes：text-[21px] sm:text-[26px] tracking-tight text-black font-medium select-none。
紧邻文字右侧的 Icon block：一个星号 &#10033;。Classes：text-[25px] sm:text-[30px] text-black select-none tracking-[-0.02em] font-medium leading-none mb-1。
Desktop Nav Links（Center）：使用 flex row、hidden md:flex、text-[23px] text-black。Links 为“Labs”“Studio”“Openings”“Shop”，使用 <span className="opacity-40">, </span> dividers 分隔。Hover states 应使用 hover:opacity-60 transition-opacity。
Desktop CTA（Right）：在移动端隐藏。添加一个文本为“Get in touch”的 link，并使用 text-[23px] text-black underline underline-offset-2 hover:opacity-60 transition-opacity。
Mobile Menu Logic：
在 md 以下显示 Hamburger <button>。包含三个 w-6 h-[2px] bg-black spans。
将其连接到 local state isMobileMenuOpen。打开时，将 burger 动画变形为“X”（top bar rotate-45 translate-y-[7px]、middle bar opacity-0、bottom bar -rotate-45 -translate-y-[7px]）。所有 spans 都需要 transition-all duration-300。
创建一个在 Desktop 隐藏的全屏 Mobile Navigation Overlay div。使用 fixed inset-0 z-[9] 和 bg-white/95 backdrop-blur-sm。当 isMobileMenuOpen 为 true 时应用 opacity-100 pointer-events-auto；否则应用 opacity-0 pointer-events-none。
5. 内容布局 Container
在背景视频下方并相对于它，添加内容分组层：<div className="relative z-10 flex flex-col order-first lg:order-none w-full bg-white lg:bg-transparent pb-8 lg:pb-0 lg:min-h-screen">
在其中添加整体布局引擎：<main id="spade-hero" className="w-full max-w-7xl mx-auto px-6 py-12 flex-1 flex flex-col justify-center">
6. Typewriter Hook 和 Headline
实现自定义 React hook：useTypewriter(text, speed = 38, startDelay = 600)。它使用 setTimeout 和 setInterval，通过逐个 slice 迭代构建 string。它必须返回一个 object：{ displayed: string, done: boolean }。
使用 string "we'd love to\nhear from you!" 运行该 hook。
将 headline 安全地包裹在一个配置为 drop-in 的 motion.div 中（initial: opacity: 0, y: 20, animate: opacity: 1, y: 0, transition duration 0.6）。
在 <h1 className="text-5xl md:text-6xl lg:text-[76px] font-normal tracking-tight text-black leading-[1.08] mb-8 select-none w-full whitespace-pre-wrap"> 中渲染 hook text。
输入过程中（!done），在 displayed text string 末尾输出一个 <span className="inline-block w-[2px] h-[1.1em] bg-black align-middle ml-[2px] animate-blink" /> cursor。
7. 次要描述文字
另一个 motion.div（相对 headline 延迟 0.1s）。
Content：一个 <p> tag，内容为：Whether you have questions, feedback, <br /> drop us a message and we'll get back to you as soon as possible.
Classes：text-lg md:text-xl text-[#5A635A] leading-relaxed font-normal mb-14 max-w-2xl。
8. 交互式 Multi-Select Service Pills
使用 setServices 跟踪 array ["Brand", "Digital", "Campaign", "Other"]。
Prompt Title：“What sort of service?”（text-2xl font-medium tracking-tight mb-2）。Subtitle：“Select all that apply”（opacity-85 text-[#738273] mb-8）。
原生遍历 options，在 flex wrap container 中输出允许多选的 motion.button wrapper tags。
Pill active traits classes：bg-[#1C2E1E] text-white shadow-md shadow-emerald-950/5 transform。显示一个使用 lucide-react 的 check icon，并通过 type: "spring", stiffness: 300, damping: 20 以 drop-in 方式出现。
Pill inactive traits classes：bg-white text-[#1C2E1E] border border-[#F1F3F1] hover:bg-[#F1F3F1]/55。
Contingent Feedback Status Banner：在 service pills 下方编写一个 <AnimatePresence mode="wait">，用于跟踪 user state array length：
Empty：显示通用 placeholder“Please click to select services above.”，透明度为百分之五十（opacity: 0.5, italic, text-xs）。
Active Selection：平滑切换为一个 <motion.div> container，通过 spring 让 height 优雅变化（height: "auto"）。在其中显示 acknowledgment banner，内容为“Ready to inquire about: [array.join(", ")]”，并组合一个 arrow call-to-action button“Let's Go”（text-[#4D6D47] uppercase text-xs）。使用 bg-[#FAFBF9] border rounded-2xl 设置 banner 样式。