import '../../variants.css';
import { createT, isLocale, LOCALES, pickMessages, type Locale } from '@barev/i18n';
import { notFound } from 'next/navigation';
import { BotLink, BotLinkProvider } from '../../../components/client';
import { Savings } from '../../../components/savings';
import { VariantHeader, variantMetadata } from '../../../components/variant';
import { getCatalog, getCleaning } from '../../../lib/data';

export const revalidate = 300;
export const dynamicParams = false;
export function generateStaticParams() {
  return LOCALES.map((locale) => ({ locale }));
}
export function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
  return variantMetadata(params, '/land5', 'landing.v5.title');
}

/** Версия 5 «Калькулятор Barev+»: для тех, кто решает про подписку. Честная экономия за вычетом цены подписки */
export default async function Land5({ params }: { params: Promise<{ locale: string }> }) {
  const { locale: raw } = await params;
  if (!isLocale(raw)) notFound();
  const locale: Locale = raw;
  const t = createT(locale);
  const [catalog, cleaning] = await Promise.all([getCatalog(), getCleaning()]);
  const others = catalog.categories.filter((c) => c.code !== 'HOME' && c.barevPlusDiscountPct > 0);
  const messages = pickMessages(locale, ['landing.v5.', 'params.cleaning.', 'common.']);

  return (
    <BotLinkProvider locale={locale} bot={catalog.botUsername}>
      <div className="v5">
        <div className="v-wrap">
          <VariantHeader locale={locale} path="/land5" />

          <section className="v5-hero">
            <h1 className="v5-title">{t('landing.v5.title')}</h1>
            <p className="v5-sub">{t('landing.v5.sub')}</p>
          </section>

          <Savings locale={locale} config={cleaning} monthlyPrice={catalog.barevPlus.monthlyPrice} messages={messages} />

          <section className="v5-more">
            <div>
              <h2>{t('landing.v5.other')}</h2>
              <ul>
                {others.map((c) => (
                  <li key={c.code}>
                    <b>−{c.barevPlusDiscountPct}%</b>
                    {t(`categories.${c.code}.name`)}
                  </li>
                ))}
              </ul>
            </div>
            <div className="v5-more__cta">
              <BotLink className="bc-btn bc-btn--dark">{t('landing.v5.cta')}</BotLink>
              <p>{t('landing.v5.gift')}</p>
            </div>
          </section>

          <footer className="v-footer">
            <span>{t('landing.footer.brand')}</span>
            <a href={`/${locale}/privacy`}>{t('landing.footer.privacy')}</a>
          </footer>
        </div>
      </div>
    </BotLinkProvider>
  );
}