import LoginForm from "@/components/login-form";

export default function LoginPage() {
  return (
    <main className="mx-auto max-w-[1200px] px-6 py-16">
      <div className="mx-auto flex flex-col gap-y-8 md:grid md:grid-cols-[minmax(0,1fr)_420px] md:gap-x-8 md:items-start">
        {/* Left column wrapper — contents on mobile for flex ordering, block on desktop as one grid cell */}
        <div className="contents md:block">
          <section>
            <h1 className="text-3xl font-bold tracking-tight text-teal-700">
              Confidence Engine
            </h1>

            <div className="space-y-4 text-base leading-relaxed text-gray-700">
              <h2 className="text-xl font-semibold tracking-tight text-gray-900">
                Get clearer about what{"'"}s really going on.
              </h2>
              <p>
                Confidence Engine helps you work through situations that feel
                uncertain, complicated or difficult to act on.
              </p>
              <p>
                Describe the situation in your own words. Confidence Engine will
                help reconstruct what is known, what may be happening, and what
                is still unclear — then let you decide what to explore further.
              </p>
              <p className="text-gray-600">
                It doesn{"'"}t try to make the decision for you. The aim is to
                help you reach a clearer understanding so you can decide what to
                do with more confidence.
              </p>
            </div>
          </section>

          <section className="space-y-4 mt-8 md:mt-8">
            <h2 className="text-sm font-semibold uppercase tracking-[.18em] text-teal-700/70">
              How it works
            </h2>

            <ol className="space-y-3 text-base leading-relaxed text-gray-700">
              <li className="grid grid-cols-[1.5rem_1fr]">
                <span className="font-bold">1.</span>
                <div>
                  <strong>Describe your situation</strong>
                  <br />
                  <span className="text-gray-600">
                    As much or as little as you currently know.
                  </span>
                </div>
              </li>

              <li className="grid grid-cols-[1.5rem_1fr]">
                <span className="font-bold">2.</span>
                <div>
                  <strong>Explore what{"'"}s unclear</strong>
                  <br />
                  <span className="text-gray-600">
                    Answer the questions that feel useful; skip the ones that
                    don{"'"}t.
                  </span>
                </div>
              </li>

              <li className="grid grid-cols-[1.5rem_1fr]">
                <span className="font-bold">3.</span>
                <div>
                  <strong>Build your Current Understanding</strong>
                  <br />
                  <span className="text-gray-600">
                    Your picture of the situation develops as you learn more.
                  </span>
                </div>
              </li>

              <li className="grid grid-cols-[1.5rem_1fr]">
                <span className="font-bold">4.</span>
                <div>
                  <strong>Stop when you have enough</strong>
                  <br />
                  <span className="text-gray-600">
                    You don{"'"}t have to answer everything. Your investigation
                    is saved so you can return later.
                  </span>
                </div>
              </li>
            </ol>

            <p className="text-sm italic text-gray-500">
              Try it with something real.
              <br />A decision you{"'"}re unsure about. A problem that doesn
              {"'"}t quite make sense. A situation where you feel you may be
              missing something.
            </p>
          </section>
        </div>

        {/* Right column — login card, explicitly positioned to top-right on desktop */}
        <section className="md:col-start-2 md:row-start-1">
          <LoginForm />
        </section>
      </div>
    </main>
  );
}