import { devices, equipmentNote } from '../data/content'
import { useReveal } from '../hooks/useReveal'
import { cx } from '../lib/cx'
import { CheckIcon } from './Icons'
import { Container, Section, SectionHead } from './Layout'
import { Rail } from './Rail'

/**
 * Product shots differ in framing, so the last stylesheet pass in the original
 * sized two of them separately. Keyed by the device title.
 */
const mediaFit: Record<string, string> = {
  ЭкзоИмпульс: 'max-w-[88%] max-h-[88%] translate-y-[10px]',
  'ЭкзоЛазер В': 'max-w-[82%] max-h-[82%] max-[720px]:max-w-[86%] max-[720px]:max-h-[86%]',
}

const defaultFit = 'max-w-[86%] max-h-[86%] translate-y-[8px]'

/** The laser shot is padded evenly instead of being nudged up off the base. */
const mediaBox: Record<string, string> = {
  'ЭкзоЛазер В': 'p-[20px]',
}

const defaultBox = 'px-[18px] pt-[18px] pb-[14px]'

export function EquipmentSection() {
  const track = useReveal<HTMLDivElement>()
  const note = useReveal<HTMLDivElement>()

  return (
    <Section id="technology" tone="dark" className="overflow-hidden">
      <Container>
        <SectionHead
          split
          tone="dark"
          eyebrow="Технологическое ядро"
          title="Состав под профиль центра и клинические маршруты"
          lead="Конфигурация подбирается под профиль центра, поток пациентов и задачи врачей. Используем технологическое ядро ЭКЗО без универсального набора и лишнего дублирования."
        />

        <Rail
          outerRef={track.ref}
          wrapperClassName={track.revealClass}
          tone="dark"
          label="Оборудование Экзо Групп"
          className="scroll-cards auto-cols-[minmax(275px,84%)] gap-[14px] md:grid-still md:grid-cols-3"
        >
          {devices.map((device) => (
            <article
              key={device.title}
              className="equipment-card-surface flex min-h-[430px] flex-col overflow-hidden rounded-[26px] border border-white/[0.13] md:min-h-[425px]"
            >
              <div
                className={cx(
                  'equipment-media-surface flex h-[300px] items-center justify-center overflow-hidden',
                  mediaBox[device.title] ?? defaultBox,
                )}
              >
                <img
                  alt={device.alt}
                  className={cx(
                    'block h-auto w-auto object-contain object-center drop-shadow-[0_18px_24px_rgb(0_0_0/0.28)]',
                    mediaFit[device.title] ?? defaultFit,
                  )}
                  loading="lazy"
                  src={device.image}
                />
              </div>

              <div className="flex flex-1 flex-col p-[22px]">
                <span className="mb-[8px] text-[11px] font-[850] tracking-[0.12em] text-teal-bright uppercase">
                  {device.kicker}
                </span>
                <h3 className="text-[27px] text-white">{device.title}</h3>
                <p className="mb-[18px] text-[14px] text-white/[0.66]">{device.indications}</p>
                <div className="mt-auto border-t border-white/[0.12] pt-[15px] text-[13px] font-[720] text-[#C7FFF9]">
                  {device.role}
                </div>
              </div>
            </article>
          ))}
        </Rail>

        <div
          ref={note.ref}
          className={cx(
            'mt-[22px] flex items-start gap-[12px] rounded-md border border-teal/[0.26] bg-teal/[0.09] px-[20px] py-[18px] text-[13px] text-white/[0.76]',
            '[&>svg]:size-[20px] [&>svg]:shrink-0 [&>svg]:text-teal-bright',
            note.revealClass,
          )}
        >
          <CheckIcon />
          <span>{equipmentNote}</span>
        </div>
      </Container>
    </Section>
  )
}