// Заглушка страницы: проверяем форму и CTA. Секции и вёрстку сделает дизайнер.
import { CtaButton } from '@/components/CtaButton';
import { LeadForm } from '@/components/LeadForm';
import { CTAS, FORM_TEXT } from '@/content/form';
import { LEAD_SECTION_ID } from '@/lib/leadPrefill';

const ctaClass = 'rounded border border-neutral-900 px-4 py-2';

export default function Page() {
  return (
    <main className="mx-auto flex max-w-2xl flex-col gap-12 px-4 py-10 font-sans">
      <section id="hero" className="flex flex-col gap-4">
        <h1 className="text-3xl font-bold">Кварта — свежая обжарка в Минске</h1>
        <p>Обжариваем по четвергам, привозим по пятницам.</p>
        <div className="flex flex-wrap gap-3">
          {Object.values(CTAS).map((cta) => (
            <CtaButton key={cta.label} interest={cta.interest} comment={'comment' in cta ? cta.comment : undefined} className={ctaClass}>
              {cta.label}
            </CtaButton>
          ))}
        </div>
      </section>

      <section id={LEAD_SECTION_ID} className="flex scroll-mt-4 flex-col gap-4">
        <h2 className="text-2xl font-bold">{FORM_TEXT.title}</h2>
        <p>{FORM_TEXT.lead}</p>
        <LeadForm />
      </section>
    </main>
  );
}