export function StatsSection() {
  return (
    <section
      aria-labelledby="stats-title"
      className="relative mx-auto h-[608px] w-full max-w-[1215px] overflow-hidden"
    >
      <div className="absolute left-0 top-0 flex h-[127px] w-full items-start gap-[80px]">
        <div className="flex h-[127px] w-[939px] flex-col gap-2">
          <div className="flex h-[78px] w-[939px] items-start gap-2">
            <img
              src="/assets/images/stats_title_icon.svg"
              alt=""
              aria-hidden="true"
              className="mt-0 h-10 w-10 shrink-0"
            />
            <h2
              id="stats-title"
              className="m-0 w-[891px] text-left font-[Inter] text-[32px] font-medium leading-[39px] text-white"
            >
              Remote work with no guesswork where meetings become owned tasks.
            </h2>
          </div>
          <p className="m-0 w-[939px] text-left font-[Inter] text-[14px] leading-[17px] text-[#6f829e]">
            TeamBy replaced manual note-taking and messy follow-ups with accurate transcripts, speaker detection, and AI-generated action items—so managers get execution, not more admin work.
          </p>
        </div>
        <div className="h-[127px] w-px shrink-0 bg-gradient-to-b from-[#12141a] via-[#363b4d] to-[#12141a]" />
        <a
          href="#"
          className="btn-primary-gradient flex h-9 w-[116px] shrink-0 items-center justify-center rounded-[12px] px-4 py-2 text-center font-[Inter] text-[16px] leading-5 text-white"
        >
          Read Story
        </a>
      </div>
      <div className="absolute left-[102px] top-[10px] h-[625px] w-[1010px] overflow-hidden">
        <img
          src="/assets/images/stats_visual.png"
          alt="75 percent automate, 50 percent optimize, and 100 percent analyze workflow insights"
          className="absolute left-[-59px] top-[-85px] h-[820px] w-[1129px] max-w-none"
        />
      </div>
    </section>
  );
}