import { ctaChecklist } from '../data/content'
import { useReveal } from '../hooks/useReveal'
import { cx } from '../lib/cx'
import { CheckIcon } from './Icons'
import { Container, Label, Section, headingScale } from './Layout'
import { LeadForm } from './LeadForm'

export function RequestSection({ configuration, commentPrefill }: { configuration: string; commentPrefill: string }) {
  const { ref, revealClass } = useReveal<HTMLDivElement>()

  return (
    <Section id="request" tone="white">
      <Container>
        <div
          ref={ref}
          className={cx(
            'relative isolate overflow-hidden rounded-[38px] bg-[linear-gradient(135deg,#0A2540,#061B2F)] text-white shadow-deep',
            revealClass,
          )}
        >
          <div
            aria-hidden="true"
            className="absolute -top-[190px] -right-[180px] -z-1 size-[470px] rounded-full bg-teal/[0.28] blur-[95px]"
          />

          <div className="grid md:grid-cols-[1.03fr_0.97fr]">
            <div className="p-[clamp(28px,5vw,58px)]">
              <Label>Персональная конфигурация</Label>
              <h2 className={cx('mb-[20px] max-w-[680px]', headingScale)}>
                Подберем индивидуальный комплект оборудования точно под формат вашего клуба.
              </h2>
              <p className="max-w-[610px] text-[16px] text-[#B6C9D4]">
                Оставьте контакты — проведём первичный аудит потока и площади, предложим состав оборудования, формат
                размещения и визуальную концепцию.
              </p>

              <div className="mt-[27px] grid gap-[10px]">
                {ctaChecklist.map((item) => (
                  <div key={item} className="grid grid-cols-[24px_1fr] items-center gap-[9px] text-[13px] text-[#D7E4EB]">
                    <i className="grid size-[23px] place-items-center rounded-full bg-teal/[0.15] text-teal [&>svg]:size-[13px]">
                      <CheckIcon />
                    </i>
                    <span>{item}</span>
                  </div>
                ))}
              </div>
            </div>

            <LeadForm configuration={configuration} commentPrefill={commentPrefill} />
          </div>
        </div>
      </Container>
    </Section>
  )
}