import Link from "next/link";
import { HomeJsonLd } from "@/components/json-ld";
import { getOffers } from "@/content/offers";
import { getNotes } from "@/content/notes";
import { getPerson } from "@/content/person";
import { getProjects } from "@/content/projects";
import { getDictionary } from "@/i18n/dictionaries";
import { publicPath } from "@/i18n/routes";
import { pageMetadata } from "@/lib/metadata";
import { requireLocale } from "@/lib/locale";
import { getUpdates } from "@/lib/updates";

export async function generateMetadata({ params }: PageProps<"/[lang]">) {
  const locale = requireLocale((await params).lang);
  const dict = getDictionary(locale);
  return pageMetadata(
    locale,
    "home",
    locale === "de"
      ? "Jan Wagner — Software für anspruchsvolle Prozesse"
      : "Jan Wagner — Software for demanding processes",
    dict.home.lede,
  );
}

export default async function HomePage({ params }: PageProps<"/[lang]">) {
  const locale = requireLocale((await params).lang);
  const dict = getDictionary(locale);
  const person = getPerson(locale);
  const projects = getProjects(locale);
  const offers = getOffers(locale);
  const notes = getNotes(locale).slice(0, 2);
  const updates = await getUpdates();

  return (
    <main>
      <HomeJsonLd />
      <section className="mx-auto grid w-full max-w-6xl gap-16 px-6 py-20 md:grid-cols-[1.35fr_0.65fr] md:items-end md:px-10 md:py-28">
        <div>
          <p className="kicker">{dict.home.kicker}</p>
          <h1 className="display mt-6 max-w-4xl text-5xl text-paper md:text-7xl">{dict.home.title}</h1>
          <p className="mt-8 max-w-2xl text-lg leading-8 text-mute-strong md:text-xl">{dict.home.lede}</p>
          <div className="mt-10 flex flex-wrap gap-8 text-sm">
            <Link href={publicPath(locale, "work")} className="border-b border-copper pb-1 text-copper">
              {dict.actions.viewWork}
            </Link>
            <Link href={publicPath(locale, "contact")} className="border-b border-line-strong pb-1 text-paper">
              {dict.actions.startConversation}
            </Link>
          </div>
        </div>
        <aside className="border-l border-copper/50 pl-6">
          <p className="kicker">{dict.home.asideLabel}</p>
          <p className="mt-4 font-serif text-2xl leading-snug text-paper">{dict.home.asideTitle}</p>
          <p className="mt-5 text-sm leading-7 text-mute-strong">{dict.home.asideBody}</p>
        </aside>
      </section>

      <section className="border-t border-line">
        <div className="mx-auto w-full max-w-6xl px-6 py-20 md:px-10">
          <div className="mb-12 flex flex-wrap items-end justify-between gap-6">
            <div>
              <p className="kicker">{dict.home.workKicker}</p>
              <h2 className="display mt-4 text-4xl md:text-5xl">{dict.home.workTitle}</h2>
            </div>
            <p className="max-w-md text-sm leading-7 text-mute-strong">{dict.home.workLede}</p>
          </div>
          <div className="grid gap-12 md:grid-cols-2">
            {projects.map((project) => (
              <article key={project.slug} className="border-t border-line pt-8">
                <div className="flex items-baseline justify-between gap-4">
                  <p className="kicker">{project.label}</p>
                  <span className="font-mono text-xs text-mute">{project.number}</span>
                </div>
                <h3 className="mt-5 font-serif text-3xl">{project.title}</h3>
                <p className="mt-4 leading-7 text-mute-strong">{project.summary}</p>
                <p className="mt-6 font-mono text-xs uppercase tracking-[0.14em] text-mute">{project.status}</p>
                <Link
                  href={publicPath(locale, "workItem", project.slug)}
                  className="mt-6 inline-block border-b border-copper pb-1 text-sm text-copper"
                >
                  {dict.actions.openCase} →
                </Link>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="border-t border-line">
        <div className="mx-auto grid w-full max-w-6xl gap-12 px-6 py-20 md:grid-cols-[0.8fr_1.2fr] md:px-10">
          <div>
            <p className="kicker">{dict.home.methodKicker}</p>
            <h2 className="display mt-4 text-4xl md:text-5xl">{dict.home.methodTitle}</h2>
            <p className="mt-6 max-w-md leading-7 text-mute-strong">{dict.home.methodLede}</p>
          </div>
          <ol className="grid gap-8">
            {person.principles.map((principle, index) => (
              <li key={principle.title} className="grid gap-3 border-b border-line pb-8 md:grid-cols-[3rem_1fr]">
                <span className="font-mono text-sm text-copper">0{index + 1}</span>
                <div>
                  <h3 className="font-serif text-2xl">{principle.title}</h3>
                  <p className="mt-2 max-w-xl leading-7 text-mute-strong">{principle.text}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="border-t border-line">
        <div className="mx-auto w-full max-w-6xl px-6 py-20 md:px-10">
          <p className="kicker">{dict.home.offerKicker}</p>
          <h2 className="display mt-4 max-w-2xl text-4xl md:text-5xl">{dict.home.offerTitle}</h2>
          <div className="mt-12 grid gap-10 md:grid-cols-3">
            {offers.map((offer, index) => (
              <article key={offer.title} className="border-l border-line-strong pl-5">
                <span className="font-mono text-xs text-copper">0{index + 1}</span>
                <h3 className="mt-4 font-serif text-2xl">{offer.title}</h3>
                <p className="mt-3 text-sm leading-7 text-mute-strong">{offer.text}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="border-t border-line">
        <div className="mx-auto w-full max-w-6xl px-6 py-20 md:px-10">
          <p className="kicker">{dict.home.notesKicker}</p>
          <h2 className="display mt-4 text-4xl md:text-5xl">{dict.home.notesTitle}</h2>
          <div className="mt-12 grid gap-10 md:grid-cols-2">
            {notes.map((note) => (
              <article key={note.slug}>
                <time className="font-mono text-xs text-mute" dateTime={note.date}>
                  {new Date(note.date).toLocaleDateString(locale === "de" ? "de-DE" : "en-GB")}
                </time>
                <h3 className="mt-3 font-serif text-2xl">{note.title}</h3>
                <p className="mt-3 text-sm leading-7 text-mute-strong">{note.summary}</p>
                <Link
                  href={publicPath(locale, "noteItem", note.slug)}
                  className="mt-5 inline-block text-sm text-copper"
                >
                  {dict.actions.openNote} →
                </Link>
              </article>
            ))}
          </div>
          {updates.length ? (
            <div className="mt-16 border-t border-line pt-10">
              <p className="kicker">Batchmaker</p>
              <div className="mt-6 grid gap-6 md:grid-cols-3">
                {updates.map((update) => (
                  <article key={update.slug}>
                    <h3 className="font-serif text-xl">{update.title}</h3>
                    <p className="mt-2 text-sm leading-6 text-mute-strong">{update.summary}</p>
                  </article>
                ))}
              </div>
            </div>
          ) : null}
        </div>
      </section>

      <section className="border-t border-line">
        <div className="mx-auto w-full max-w-6xl px-6 py-20 md:px-10">
          <div className="border border-copper/30 bg-copper/5 px-8 py-12 md:px-12">
            <p className="kicker">{dict.home.ctaKicker}</p>
            <h2 className="display mt-4 max-w-3xl text-4xl md:text-6xl">{dict.home.ctaTitle}</h2>
            <p className="mt-6 max-w-2xl leading-7 text-mute-strong">{dict.home.ctaBody}</p>
            <Link
              href={publicPath(locale, "contact")}
              className="mt-8 inline-block border border-copper bg-copper px-6 py-3 text-sm font-medium text-ink"
            >
              {dict.actions.startConversation}
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}