const moments = [
  {
    time: "Yesterday · 8:42 pm",
    label: "Stopped",
    title: "Ray diagrams · Step 8",
    note: "The lesson stays unfinished. Opening the page again does not erase your place.",
    active: false,
  },
  {
    time: "Tonight · first",
    label: "Continue",
    title: "Finish the same diagram",
    note: "Continuation comes before a random new chapter. One clear action is placed first.",
    active: true,
  },
  {
    time: "After your answer",
    label: "Correct",
    title: "Repair the missing image rule",
    note: "A partial answer creates a short correction—not a fake mastery increase.",
    active: false,
  },
  {
    time: "Tomorrow",
    label: "Remember",
    title: "Revise only if it is still needed",
    note: "Successful repair moves on. Unfinished work returns with a reason.",
    active: false,
  },
] as const;

export function ConnectedLearningLoop() {
  return (
    <section
      id="living-plan"
      className="border-t border-[var(--df-border)] bg-[#171716] py-[clamp(4rem,8vw,7.5rem)] text-white"
    >
      <div className="df-container">
        <div className="grid gap-12 lg:grid-cols-[0.72fr_1.28fr] lg:gap-20">
          <div className="max-w-md">
            <p className="text-[12px] font-semibold uppercase tracking-[0.12em] text-white/55">
              One continuous evening
            </p>
            <h2 className="mt-5 text-[clamp(2rem,4.2vw,3.6rem)] font-semibold leading-[1.02] tracking-[-0.045em]">
              What you do today changes tomorrow.
            </h2>
            <p className="mt-6 text-[16px] leading-7 text-white/65">
              DocDoe is not five tools sharing a logo. The plan, lesson,
              correction and revision read the same student history.
            </p>
            <p className="mt-8 border-l border-white/25 pl-4 text-[13px] leading-6 text-white/55">
              Example Kerala SSLC evening. Every state shown here corresponds to
              a real product action; it is not a coverage claim.
            </p>
          </div>

          <ol className="border-t border-white/20">
            {moments.map((moment, index) => (
              <li
                key={moment.time}
                className={`grid gap-4 border-b border-white/20 py-6 sm:grid-cols-[8.5rem_5.5rem_minmax(0,1fr)] sm:gap-6 sm:py-7 ${
                  moment.active ? "bg-white/[0.045] sm:-mx-5 sm:px-5" : ""
                }`}
              >
                <div className="flex items-center justify-between gap-4 sm:block">
                  <span className="text-[11px] font-semibold tabular-nums text-white/40">
                    {String(index + 1).padStart(2, "0")}
                  </span>
                  <p className="text-[12px] leading-5 text-white/55 sm:mt-3">{moment.time}</p>
                </div>
                <p className="text-[12px] font-semibold uppercase tracking-[0.1em] text-white/55">
                  {moment.label}
                </p>
                <div>
                  <h3 className="text-[18px] font-semibold tracking-[-0.025em] sm:text-[20px]">
                    {moment.title}
                  </h3>
                  <p className="mt-2 max-w-xl text-[14px] leading-6 text-white/60">{moment.note}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}