import Link from "next/link";

import { Wordmark } from "@/components/wordmark";

export const metadata = {

  title: "About · Chicago Stepping",

  description:

    "A plain-language guide to Chicago Stepping: find your city, see the sets, meet the people, and plan the road.",

};

const STEPS = [

  {

    index: "01",

    title: "Find your city",

    body: "On the home page you will see a list of cities. Tap the one nearest to you. That is your starting point.",

  },

  {

    index: "02",

    title: "See the sets",

    body: "Inside a city you will find The Sets: every set, weekender, class, and workshop coming up. Tap any one to see the date, the time, and the details.",

  },

  {

    index: "03",

    title: "Step onto The Floor",

    body: "The Floor is the community for that city: the stepping groups, the DJs, the promoters who host the sets, and the classes where you can learn the count.",

  },

  {

    index: "04",

    title: "Plan The Road",

    body: "Traveling for a set or a weekender? The Road helps you get there. Pick a city and find the hotels, food, and the nearest hospital, just in case.",

  },

];

export default function AboutPage() {

  return (

    <main className="mx-auto w-full max-w-3xl px-5 py-16 sm:px-8">

      <Link href="/" className="kicker hover:text-gold">

        ← Home

      </Link>

      <p className="kicker mt-12 text-ash">About</p>

      <h1 className="display mt-3 text-6xl leading-[0.9] sm:text-8xl">

        <span className="serif block text-4xl font-normal italic text-bone/80 sm:text-5xl">

          Chicago

        </span>

        <span className="text-gold">Stepping</span>

      </h1>

      <p className="serif mt-10 text-2xl leading-snug text-bone/85 sm:text-3xl">

        Chicago stepping is a partner dance. Smooth, gliding, soulful, danced on

        a count. It came up in the African American community on Chicago's

        West and South sides, and from the 1940s to the 60s it grew out of the

        jitterbug and the glide-and-stride dance called the bop. This is

        Chicago stepping, not Greek stepping.

      </p>

      <p className="serif mt-6 text-2xl leading-snug text-bone/85 sm:text-3xl">

        This site does one thing. One place, organized by city, where the

        community posts and finds the sets, the classes, the DJs, and the

        people.

      </p>

      <section className="mt-16 border-t border-[var(--line)] pt-12">

        <div className="flex items-end justify-between">

          <h2 className="display text-4xl sm:text-5xl">How to use it</h2>

          <span className="kicker text-ash">Four steps</span>

        </div>

        <div className="mt-10 flex flex-col">

          {STEPS.map((s) => (

            <div

              key={s.index}

              className="flex flex-col gap-3 border-b border-[var(--line)] py-8 sm:flex-row sm:gap-8"

            >

              <span className="kicker pt-2 text-gold sm:w-12">{s.index}</span>

              <div className="flex-1">

                <h3 className="display text-3xl sm:text-4xl">{s.title}</h3>

                <p className="serif mt-3 text-xl leading-relaxed text-bone/75 sm:text-2xl">

                  {s.body}

                </p>

              </div>

            </div>

          ))}

        </div>

      </section>

      <section className="mt-16 border-t border-[var(--line)] pt-12">

        <h2 className="display text-4xl sm:text-5xl">

          That's all there is

        </h2>

        <p className="serif mt-6 text-xl leading-relaxed text-bone/75 sm:text-2xl">

          Take your time. Tap around. If you ever feel lost, the

          <span className="text-gold"> Chicago Stepping</span> mark in the top

          corner always brings you back to the start.

        </p>

        <Link

          href="/"

          className="kicker mt-12 inline-block border border-gold px-8 py-5 text-gold hover:bg-gold hover:text-stage"

        >

          Start here →

        </Link>

      </section>

      <footer className="mt-20 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--line)] pt-8">

        <Link href="/" className="text-xl">

          <Wordmark />

        </Link>

        <span className="kicker text-ash">Chicago Stepping. Your City.</span>

      </footer>

    </main>

  );

}