logos-web/apps/web/components/sections/shared/tech-stack-detail-hero.tsx

import { TechDetailHero } from '@acid-info/logos-ui'
import type { HeroSection } from '@repo/content/schemas'

import {
  Button,
  ButtonArrowIcon,
  type ButtonVariant,
} from '@/components/ui'
import { Link } from '@/i18n/navigation'
import { resolveBasecampInstallCtaLinkProps } from '@/lib/basecamp-release-links'

import { DownloadIcon } from './builder-cta-card'

type Props = {
  data: HeroSection
  backHref: string
  actionVariant?: ButtonVariant
  stackActions?: boolean
  /** Keep the mobile layout through tablet widths — flip to desktop at lg (1024px) instead of md. */
  desktopAt1025?: boolean
  className?: string
}

export default function TechStackDetailHero({
  data,
  backHref,
  actionVariant,
  stackActions = false,
  desktopAt1025 = false,
  className,
}: Props) {
  const [primaryCta, secondaryCta] = data.ctas ?? []
  const baseClassName = desktopAt1025
    ? 'mb-0 lg:mb-0 lg:pt-[27px]'
    : 'mb-0 md:mb-0 md:pt-[27px]'
  const stackedActionsClassName = desktopAt1025
    ? 'flex items-center gap-2.5 lg:flex-col lg:items-start'
    : 'flex items-center gap-2.5 md:flex-col md:items-start'

  return (
    <TechDetailHero
      desktopAt1025={desktopAt1025}
      className={`${baseClassName} ${className ?? ''}`}
      title={data.headline}
      body={data.body}
      bodySecondary={data.bodySecondary}
      items={data.items}
      backLink={
        <Link
          href={backHref}
          className="inline-flex cursor-pointer items-center gap-1 text-brand-dark-green transition-opacity hover:opacity-70"
        >
          <span className="inline-flex size-3.75 shrink-0 rotate-180 items-center justify-center">
            <ButtonArrowIcon />
          </span>
          <span className="font-mono text-[10px] leading-[1.3] font-medium uppercase">
            {data.eyebrow}
          </span>
        </Link>
      }
      status={
        data.status
          ? {
              label: data.status.label,
              body: data.status.body,
              cta: data.status.cta ? (
                <Button
                  {...resolveBasecampInstallCtaLinkProps({
                    ...data.status.cta,
                    iconOverride: 'download',
                  })}
                  variant={data.status.cta.variant ?? 'secondary'}
                  icon={<DownloadIcon />}
                  className="w-fit cursor-pointer rounded-none"
                >
                  {data.status.cta.label}
                </Button>
              ) : null,
              secondaryCta: data.status.secondaryCta ? (
                <Button
                  href={data.status.secondaryCta.href}
                  variant={data.status.secondaryCta.variant ?? 'tertiary'}
                  className="w-fit cursor-pointer"
                >
                  {data.status.secondaryCta.label}
                </Button>
              ) : null,
            }
          : undefined
      }
      actions={
        <div
          className={
            stackActions
              ? stackedActionsClassName
              : 'flex flex-wrap items-center gap-2.5'
          }
        >
          {primaryCta ? (
            <Button
              href={primaryCta.href}
              variant={primaryCta.variant ?? actionVariant ?? 'primary'}
              className="cursor-pointer"
            >
              {primaryCta.label}
            </Button>
          ) : null}
          {secondaryCta ? (
            <Button
              href={secondaryCta.href}
              variant={secondaryCta.variant ?? actionVariant ?? 'secondary'}
              className="cursor-pointer"
            >
              {secondaryCta.label}
            </Button>
          ) : null}
        </div>
      }
    />
  )
}