import { formats, timeline } from '../data/content'
import { useReveal } from '../hooks/useReveal'
import { cx } from '../lib/cx'
import { Container, Section, SectionHead, SmallNote } from './Layout'

export function LaunchSection() {
  const grid = useReveal<HTMLDivElement>()
  const steps = useReveal<HTMLDivElement>()

  return (
    <Section id="launch" tone="white">
      <Container>
        <SectionHead
          split
          eyebrow="Три модели усиления"
          title="Можно начать точечно — без длительного закрытия кабинета"
          lead="Формат определяется после аудита оборудования, расписания и клинических пробелов. Расширение происходит только после того, как пилот подтверждает назначения, загрузку, результат и экономику."
        />

        <div
          ref={grid.ref}
          className={cx('scroll-cards auto-cols-[calc(100vw-62px)] gap-[12px] sm:grid-still sm:grid-cols-3', grid.revealClass)}
        >
          {formats.map((format) => (
            <article
              key={format.area}
              className="relative overflow-hidden rounded-[22px] border border-navy/[0.12] bg-white p-[24px]"
            >
              <span
                aria-hidden="true"
                className="absolute -top-[30px] -right-[30px] size-[110px] rounded-full bg-teal/[0.08]"
              />
              <span className="mb-[9px] block text-[clamp(36px,5vw,52px)] leading-none font-[850] tracking-[-0.055em] text-navy">
                {format.area}
              </span>
              <h3 className="text-[20px]">{format.title}</h3>
              <p className="text-[14px] text-muted">{format.text}</p>
            </article>
          ))}
        </div>

        <SmallNote className="mt-[16px]">
          Финальная конфигурация определяется по техническому состоянию аппаратов, документации, площади, лицензии,
          штату, потоку пациентов и текущей загрузке.
        </SmallNote>

        <h3 className="mt-[30px] mb-[38px] text-[clamp(24px,3vw,34px)] font-[850] tracking-[-0.03em] text-navy">
          Пошаговый план модернизации кабинета за 8 недель
        </h3>

        <div
          ref={steps.ref}
          className={cx('scroll-cards auto-cols-[calc(100vw-62px)] gap-[14px] md:grid-still md:grid-cols-2', steps.revealClass)}
        >
          {timeline.map((step) => (
            <article key={step.week} className="rounded-[20px] border border-teal/[0.16] bg-ice px-[20px] py-[22px]">
              <span className="mb-[8px] block text-[12px] font-black tracking-[0.11em] text-teal-ink uppercase">
                {step.week}
              </span>
              <strong className="mb-[10px] block text-[18px] leading-[1.2] text-navy">{step.title}</strong>
              <span className="mb-[14px] block text-[13px] leading-[1.55] text-muted italic">{step.lead}</span>
              <ul className="grid list-disc gap-[8px] pl-[18px] text-[13px] leading-[1.55] text-muted">
                {step.items.map((item) => (
                  <li key={item.title}>
                    <strong className="inline text-[13px] text-navy">{item.title}</strong>
                    {'text' in item && item.text ? `: ${item.text}` : null}
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </Container>
    </Section>
  )
}