export default function Roadmap() {
  return (
    <section className="relative isolate pt-24 sm:pt-32 mx-auto max-w-2xl px-6 md:px-0 lg:max-w-7xl lg:px-8">
      <div className="mx-auto max-w-7xl">
        <h2 className="text-4xl font-semibold tracking-tight sm:text-5xl">
          Our Roadmap
        </h2>
        <p className="mt-4 max-w-3xl text-lg text-gray-600">
          We have a vision on how to safely integrate technology and education
          to make learning personalized and effective to a large audience.
        </p>

        <hr className="my-8 border-indigo-600" />

        <ol className="mt-6 relative border-s border-gray-200 dark:border-gray-700">
          <li className="mb-10 ms-4 pt-2">
            <div className="flex align-middle items-center mb-1">
              <span className="absolute w-3 h-3 bg-gray-200 rounded-full -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></span>
              <time className="text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
                Fall 2025 - Winter 2026
              </time>
            </div>
            <h3 className="text-lg font-semibold text-gray-600">
              Traditional Tutoring Services
            </h3>
            <p className="mb-4 text-base font-normal text-gray-500">
              To begin our journey, we will have a platform to connects students
              with tutors for in-person or online tutoring sessions. We will
              hire a small number of tutors and onboard as many students as we
              can manage.
            </p>
          </li>
          <li className="mb-10 ms-4">
            <div className="flex align-middle items-center mb-1">
              <span className="absolute w-3 h-3 bg-gray-200 rounded-full -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></span>
              <time className="text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
                Spring 2026
              </time>
            </div>
            <h3 className="text-lg font-semibold text-gray-600">
              Light <span className="text-gradient">AI Integration</span> for
              Tutoring
            </h3>
            <p className="text-base font-normal text-gray-500">
              We will use tutoring-related data to train open-source AI models
              that will assist in accurate content generation to make tutoring
              better. This will begin with automatically generated reviews for
              tutors and session summaries for students.
            </p>
          </li>
          <li className="mb-10 ms-4">
            <div className="flex align-middle items-center mb-1">
              <span className="absolute w-3 h-3 bg-gray-200 rounded-full -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></span>
              <time className="text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
                Summer 2026
              </time>
            </div>
            <h3 className="text-lg font-semibold text-gray-600">
              A Full <span className="text-gradient">AI Tutoring</span> Service
            </h3>
            <p className="text-base font-normal text-gray-500">
              We will launch our homemade AI tutoring services, allowing
              students to get help 24/7 for when tutoring isn&apos;t available.
              If you are a student of ours (and if you opt-in), it will learn
              specifically from your sessions and adapt to your learning style.
            </p>
          </li>
          <li className="ms-4">
            <div className="flex align-middle items-center mb-1">
              <span className="absolute w-3 h-3 bg-gray-200 rounded-full -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></span>
              <time className="text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
                Fall 2026 and Beyond
              </time>
            </div>
            <h3 className="text-lg font-semibold text-gray-600">
              Expanding Our Reach with a{" "}
              <span className="text-gradient">Super AI</span> Tutor Agent
            </h3>
            <p className="text-base font-normal text-gray-500">
              After continuous iteration on our specifically trained AI tutor,
              we will make a more broad AI tutor agent that can help anyone,
              even if they do not have a dedicated tutor.
            </p>
            <p className="text-base font-normal text-gray-500">
              A network of on-demand tutors will jump in when the AI fails to
              provide a good response. This will allow us to reach more students
              and offer solid help at a low cost.
            </p>
          </li>
        </ol>
      </div>
    </section>
  );
}