export default function Problem() {
  return (
    <section className="px-6 py-20 md:px-12 lg:py-28">
      <div className="mx-auto max-w-[680px] text-center">
        <p className="text-lg leading-relaxed text-text-body md:text-xl">
          If you use AI coding agents, you know the pain. Terminal tabs
          everywhere. Which agent finished? Which one needs input? What branch is
          it on? What files did it change?
        </p>
        <p className="mt-6 text-lg leading-relaxed text-text-body md:text-xl">
          Broomy gives you a single window to manage all of it &mdash; and since
          it&apos;s open source, you can extend it to fit exactly how you work.
        </p>
      </div>
    </section>
  )
}
