import { For } from "solid-js";
import { usePageMeta } from "@/lib/meta";
import { timeline, timelinePage } from "@/data/timeline";

export default function TimelinePage() {
  usePageMeta(timelinePage.metadata.title as string, timelinePage.metadata.description as string);

  return (
    <main class="min-h-screen bg-deep-space">
      <section class="pt-32 pb-20 px-[5vw] bg-charcoal">
        <div class="max-w-[1200px] mx-auto space-y-6">
          <p class="section-label">{timelinePage.label}</p>
          <h1
            class="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
            style={{ "font-size": "clamp(2.5rem, 8vw, 5rem)" }}
          >
            {timelinePage.pageTitle}
          </h1>
          <p class="text-text-secondary max-w-2xl text-lg leading-relaxed">
            {timelinePage.subtitle}
          </p>
        </div>
      </section>

      <section class="py-20 md:py-32 px-[5vw]">
        <div class="max-w-[1200px] mx-auto space-y-16">
          <For each={timeline}>
            {(item) => (
              <div class="grid grid-cols-1 md:grid-cols-[120px_1fr] gap-8 border-t border-warm-grey pt-12">
                <span class="font-mono text-amber text-xl">{item.year}</span>
                <div class="space-y-4">
                  <h2 class="font-display font-semibold text-text-primary text-2xl tracking-tight">
                    {item.title}
                  </h2>
                  <p class="text-text-secondary leading-relaxed">
                    {item.description}
                  </p>
                  <p class="text-text-secondary leading-relaxed">
                    {timelinePage.detailText}
                  </p>
                  <div class="flex flex-wrap gap-2 pt-2">
                    <For each={item.tags}>
                      {(tag) => <span class="chip">{tag}</span>}
                    </For>
                  </div>
                </div>
              </div>
            )}
          </For>
        </div>
      </section>
    </main>
  );
}