import type { Metadata } from "next";
import { getActiveLocale, getDictionary, isLocale, type Locale } from "@/lib/i18n";
import { buildPageMetadata } from "@/lib/metadata";
import { isComingSoonMode } from "@/lib/site";
import { notFound, redirect } from "next/navigation";

export function generateMetadata({ params }: { params: { locale: string } }): Metadata {
  if (!isLocale(params.locale)) {
    return {};
  }

  return buildPageMetadata(getActiveLocale(params.locale), "about");
}

export default function AboutPage({ params }: { params: { locale: string } }) {
  if (!isLocale(params.locale)) {
    notFound();
  }

  if (isComingSoonMode()) {
    redirect("/");
  }

  const locale = getActiveLocale(params.locale as Locale);
  const dictionary = getDictionary(locale);

  return (
    <section className="panel section-stack">
      <div>
        <p className="eyebrow">{dictionary.about.kicker}</p>
        <h1>{dictionary.about.title}</h1>
        <p className="lead">{dictionary.about.story}</p>
      </div>

      <div className="split-grid">
        <article className="card">
          <h2>{dictionary.about.skillsTitle}</h2>
          <ul className="list">
            {dictionary.about.skills.map((skill) => (
              <li key={skill}>{skill}</li>
            ))}
          </ul>
        </article>

        <article className="card">
          <h2>{dictionary.about.experienceTitle}</h2>
          <ul className="list">
            {dictionary.about.experience.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </article>
      </div>

      <article className="card">
        <h2>{dictionary.about.principlesTitle}</h2>
        <ul className="list">
          {dictionary.about.principles.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </article>
    </section>
  );
}