import { setRequestLocale } from 'next-intl/server';
import { HeroCanvas } from '@/components/canvas/hero-canvas';
import { Card } from '@/components/ui/card';
import { getT } from '@/i18n/t';
import { RucHook } from './ruc-hook';

export default async function LandingPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getT(locale);

  const values = [
    { title: t('landing.value1.title'), body: t('landing.value1.body') },
    { title: t('landing.value2.title'), body: t('landing.value2.body') },
    { title: t('landing.value3.title'), body: t('landing.value3.body') },
  ];

  return (
    <div className="mx-auto w-full max-w-5xl px-5">
      {/* The one hero effect FLOWS.md A1 allows, behind the content and off under
          reduced motion. */}
      <section className="relative isolate py-14 sm:py-20">
        <HeroCanvas />
        <h1 className="max-w-2xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
          {t('landing.hero.title')}
        </h1>
        <p className="mt-4 max-w-xl text-lg text-[var(--text-muted)] text-pretty">
          {t('landing.hero.subtitle')}
        </p>
        <div className="mt-8 max-w-md">
          <RucHook />
        </div>
      </section>

      <section className="grid gap-4 pb-14 sm:grid-cols-3">
        {values.map((value) => (
          <Card key={value.title} className="space-y-2">
            <h2 className="font-semibold tracking-tight">{value.title}</h2>
            <p className="text-sm text-[var(--text-muted)] text-pretty">{value.body}</p>
          </Card>
        ))}
      </section>

      <section className="pb-16">
        <Card className="space-y-2">
          <h2 className="font-semibold tracking-tight">{t('landing.pricing.title')}</h2>
          <p className="text-sm text-[var(--text-muted)]">{t('landing.pricing.body')}</p>
        </Card>
      </section>
    </div>
  );
}