---
import Layout from "../../../layouts/Layout.astro";
import type { Locale } from "../../../i18n/config";
import { useTranslations } from "../../../i18n/ui";

const lang: Locale = "fr";
const t = useTranslations(lang);
---
<Layout title="Mon compte" description="Commande invité ou compte client chez Van's DIY & Bastelbedarf." lang={lang} path="/konto/">
  <section class="section-tight">
    <div class="container">
      <span class="eyebrow">{t.account.eyebrow}</span>
      <h1>{t.account.title}</h1>
      <p class="todo-note">{t.account.todoNote}</p>
    </div>
  </section>

  <section class="section-tight">
    <div class="container grid grid-2 account-grid">
      <form class="frm card">
        <h3>{t.account.loginTitle}</h3>
        <div><label for="login-email">{t.account.email}</label><input id="login-email" type="email" /></div>
        <div><label for="login-pw">{t.account.password}</label><input id="login-pw" type="password" /></div>
        <button class="btn btn-primary btn-block" type="button" disabled>{t.account.loginButton}</button>
        <a class="small" href="#">{t.account.forgotPassword}</a>
      </form>

      <div class="card">
        <h3>{t.account.newTitle}</h3>
        <p class="small">{t.account.newText}</p>
        <a class="btn btn-outline btn-block" href="/fr/shop/">{t.account.guestButton}</a>
      </div>
    </div>
  </section>
</Layout>