import { Compass, Layers3, Users } from "lucide-react";

import { MotionFade } from "@/components/motion-fade";
import { resolveLocale } from "@/lib/site-data";

type AboutPageProps = {
  params: {
    locale: string;
  };
};

export default function AboutPage({ params: { locale } }: AboutPageProps) {
  const localeKey = resolveLocale(locale);

  const copy =
    localeKey === "de"
      ? {
          title: "Ueber uns",
          intro:
            "Wir bauen klare digitale Erlebnisse fuer Marken, Produkte und Teams.",
          valuesTitle: "Wie wir arbeiten",
          valueA: "Strategie zuerst",
          valueAText: "Jedes Projekt startet mit Zielbild, Scope und Prioritaeten.",
          valueB: "Saubere Systeme",
          valueBText: "Wir setzen auf wartbare Komponenten und klare Strukturen.",
          valueC: "Enge Zusammenarbeit",
          valueCText: "Kurze Schleifen mit direktem Feedback im gesamten Ablauf.",
          processTitle: "Unser Ablauf",
          processOne: "Discovery und Zieldefinition",
          processTwo: "Design und Prototyping",
          processThree: "Build, Test und Launch",
        }
      : {
          title: "About",
          intro:
            "We build clear digital experiences for brands, products and teams.",
          valuesTitle: "How we work",
          valueA: "Strategy first",
          valueAText: "Each project starts with goals, scope and priorities.",
          valueB: "Clean systems",
          valueBText: "We rely on maintainable components and clear structure.",
          valueC: "Close collaboration",
          valueCText: "Short loops with direct feedback across the full process.",
          processTitle: "Our process",
          processOne: "Discovery and goal definition",
          processTwo: "Design and prototyping",
          processThree: "Build, test and launch",
        };

  return (
    <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
      <MotionFade>
        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-10">
          <h1 className="text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
            {copy.title}
          </h1>
          <p className="mt-4 max-w-3xl text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
            {copy.intro}
          </p>
        </section>
      </MotionFade>

      <MotionFade delay={0.05}>
        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
          <h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
            {copy.valuesTitle}
          </h2>
          <div className="mt-6 grid gap-4 md:grid-cols-3">
            <article className="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900">
              <Compass className="h-5 w-5 text-zinc-700 dark:text-zinc-200" />
              <h3 className="mt-3 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
                {copy.valueA}
              </h3>
              <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
                {copy.valueAText}
              </p>
            </article>
            <article className="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900">
              <Layers3 className="h-5 w-5 text-zinc-700 dark:text-zinc-200" />
              <h3 className="mt-3 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
                {copy.valueB}
              </h3>
              <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
                {copy.valueBText}
              </p>
            </article>
            <article className="rounded-2xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900">
              <Users className="h-5 w-5 text-zinc-700 dark:text-zinc-200" />
              <h3 className="mt-3 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
                {copy.valueC}
              </h3>
              <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
                {copy.valueCText}
              </p>
            </article>
          </div>
        </section>
      </MotionFade>

      <MotionFade delay={0.1}>
        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
          <h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
            {copy.processTitle}
          </h2>
          <ol className="mt-5 grid gap-3 sm:grid-cols-3">
            {[copy.processOne, copy.processTwo, copy.processThree].map((step, index) => (
              <li
                key={step}
                className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 text-sm text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200"
              >
                <span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-zinc-200 text-xs font-semibold text-zinc-800 dark:bg-zinc-800 dark:text-zinc-100">
                  {index + 1}
                </span>
                <p>{step}</p>
              </li>
            ))}
          </ol>
        </section>
      </MotionFade>
    </div>
  );
}