const { motion: CapMotion } = window.Motion;

const CAPABILITIES_VIDEO =
  "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_094631_d30ab262-45ee-4b7d-99f3-5d5848c8ef13.mp4";

const capabilities = [
  {
    title: "Linux 环境搭建",
    body: "搭建 Linux 学习环境，完成系统基础配置和网络连通性测试；练习用户、用户组、文件权限、目录、进程与端口等基础运维操作。",
    tags: ["用户与权限", "服务管理", "系统巡检", "基础排障"],
    iconPath: "M20 4H4q-.825 0-1.412.588T2 6v12q0 .825.588 1.413T4 20h16q.825 0 1.413-.587T22 18V6q0-.825-.587-1.412T20 4ZM8.5 15 5 11.5 6.4 10l2.1 2.1 2.1-2.1 1.4 1.5L8.5 15Zm8.5 0h-5v-2h5v2Z",
  },
  {
    title: "Nginx Web 服务",
    body: "在 Linux 环境安装并启动 Nginx，配置开机自启动并完成页面验证；结合监听端口、防火墙状态和访问日志理解基础故障定位流程。",
    tags: ["Nginx", "Web 部署", "端口检查", "访问日志"],
    iconPath: "M4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20H4q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4Zm0 4h16V6H4v2Zm0 5h16v-3H4v3Zm0 5h16v-3H4v3Zm2-9h2v2H6V9Zm0 5h2v2H6v-2Z",
  },
  {
    title: "网络与日志排查",
    body: "理解 TCP/IP、DNS、HTTP/HTTPS、IP、端口与网关；可使用 ping、curl、ss/netstat、tail、grep 和 journalctl 完成基础连通性与日志排查。",
    tags: ["TCP/IP", "DNS", "Shell 基础", "Git / MySQL"],
    iconPath: "M3 13h2v-2H3v2Zm4 4h2V7H7v10Zm4 4h2V3h-2v18Zm4-6h2V9h-2v6Zm4 4h2V5h-2v14Z",
  },
];

function CapabilityCard({ item, index }) {
  return (
    <CapMotion.article
      initial={{ filter: "blur(10px)", opacity: 0, y: 28 }}
      whileInView={{ filter: "blur(0px)", opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.15 }}
      transition={{ duration: 0.7, delay: index * 0.12, ease: "easeOut" }}
      className="liquid-glass flex min-h-[360px] flex-col rounded-[1.25rem] p-6"
    >
      <div className="flex items-start justify-between gap-4">
        <div className="liquid-glass flex h-11 w-11 shrink-0 items-center justify-center rounded-[0.75rem]">
          <MaterialIcon path={item.iconPath} />
        </div>

        <div className="flex max-w-[70%] flex-wrap justify-end gap-1.5">
          {item.tags.map((tag) => (
            <span
              key={tag}
              className="liquid-glass whitespace-nowrap rounded-full px-3 py-1 font-body text-[11px] text-white/90"
            >
              {tag}
            </span>
          ))}
        </div>
      </div>

      <div className="flex-1" />

      <div className="mt-6">
        <h3 className="font-heading text-3xl italic leading-none tracking-[-1px] text-white md:text-4xl">
          {item.title}
        </h3>
        <p className="mt-3 max-w-[32ch] font-body text-sm font-light leading-snug text-white/90">{item.body}</p>
      </div>
    </CapMotion.article>
  );
}

function Capabilities() {
  return (
    <section id="capabilities" className="relative min-h-screen overflow-hidden bg-black">
      <FadingVideo
        src={CAPABILITIES_VIDEO}
        className="absolute inset-0 z-0 h-full w-full object-cover"
        style={{ opacity: 0 }}
      />

      <div className="relative z-10 flex min-h-screen flex-col px-6 pb-10 pt-24 md:px-16 lg:px-20">
        <CapMotion.header
          initial={{ filter: "blur(10px)", opacity: 0, y: 20 }}
          whileInView={{ filter: "blur(0px)", opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.25 }}
          transition={{ duration: 0.7, ease: "easeOut" }}
          className="mb-auto"
        >
          <p className="mb-6 font-body text-sm text-white/80">// 专业技能与项目实践</p>
          <h2 className="font-heading text-6xl italic leading-[0.9] tracking-[-3px] text-white md:text-7xl lg:text-[6rem]">
            Operations
            <br />
            in practice
          </h2>
        </CapMotion.header>

        <div className="mt-16 grid grid-cols-1 gap-6 md:grid-cols-3">
          {capabilities.map((item, index) => (
            <CapabilityCard key={item.title} item={item} index={index} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.Capabilities = Capabilities;