import { AutoplayVideo } from "../AutoplayVideo";
import { NewFile } from "../NewFile";
import { ExtraLargeTitle } from "../Primitives/ExtraLargeTitle";
import { SmallSubtitle } from "../Primitives/SmallSubtitle";

import heroVideo from "~/assets/home/JsonHero2.mp4";

const jsonHeroTitle = "JSON 很糟糕。";
const jsonHeroSlogan = "但我们正在让它变得更好。";

export function HomeHeroSection() {
  return (
    <div
      className={`flex items-stretch flex-col md:flex-row bg-[rgb(56,52,139)] lg:p-6 lg:pb-16 pt-20 lg:pt-32`}
    >
      <div className="self-center md:w-1/2 md:pr-10 flex justify-end">
        <div className=" max-w-3xl">
          <AutoplayVideo src={heroVideo} />
        </div>
      </div>
      <div className="self-center flex align-center md:w-1/2 px-6 pb-8 mt-8 lg:mt-0">
        <div className="max-w-lg">
          <ExtraLargeTitle className="text-lime-300">
            {jsonHeroTitle}
          </ExtraLargeTitle>
          <ExtraLargeTitle className="text-white mb-4">
            {jsonHeroSlogan}
          </ExtraLargeTitle>
          <SmallSubtitle className="text-slate-200 mb-8">
            别再在编辑器里盯着几千行的 JSON 文件看了，
            开始使用世界上最好的 JSON 查看器来查看几千行的 JSON 文件吧。
            它有一些不错的功能，让 JSON 不再那么 <em>糟糕</em>。
          </SmallSubtitle>
          <NewFile />
        </div>
      </div>
    </div>
  );
}