import Link from "next/link";
import { getDictionary, type Locale } from "@/lib/site-content";

export default async function LoginPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dictionary = getDictionary(locale as Locale);

  return (
    <div className="page-stack">
      <section className="login-shell">
        <div className="login-panel">
          <div className="eyebrow">{dictionary.login.tag}</div>
          <h1>{dictionary.login.title}</h1>
          <p>{dictionary.login.subtitle}</p>
          <div className="login-actions">
            <button className="button button-dark" type="button">
              {dictionary.login.primaryProvider}
            </button>
            <button className="button button-light" type="button">
              {dictionary.login.secondaryProvider}
            </button>
          </div>
          <p className="legal-copy">
            {dictionary.login.termsPrefix}{" "}
            <Link href={`/${locale}/pricing`}>{dictionary.login.termsLink}</Link>{" "}
            {dictionary.login.and}{" "}
            <Link href={`/${locale}/docs`}>{dictionary.login.privacyLink}</Link>
          </p>
        </div>

        <div className="login-benefits">
          {dictionary.login.benefits.map((benefit) => (
            <article className="benefit-card" key={benefit.title}>
              <span className="card-kicker">{benefit.kicker}</span>
              <h2>{benefit.title}</h2>
              <p>{benefit.description}</p>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}