---
import type { Locale } from '@i18n/locales';
import type { ProjectPageId } from '@i18n/slugMap';
import Base from '@layouts/Base.astro';
import { getProject, getMeta } from '@lib/content';
import CsHeader from '@components/case-study/CsHeader.astro';
import TldrBox from '@components/case-study/TldrBox.astro';
import MiniToc from '@components/case-study/MiniToc.astro';
import SectionRenderer from '@components/case-study/SectionRenderer.astro';
import NextPrev from '@components/case-study/NextPrev.astro';
import FramedImage from '@components/ui/FramedImage.astro';

interface Props {
  id: ProjectPageId;
  locale: Locale;
}
const { id, locale } = Astro.props;
const project = getProject(id, locale);
const m = getMeta(id, locale);
const hero = project.media[0];
const isCapability = project.template === 'capability';
const projectType = id === 'inboxintel' ? 'SoftwareSourceCode' : 'SoftwareApplication';
---

<Base
  locale={locale}
  pageId={id}
  title={m.title}
  description={m.description}
  ogType="article"
  jsonLdOpts={isCapability
    ? { projectName: project.name }
    : { projectName: project.name, projectType }}
>
  <article class="mx-auto max-w-[--content-max] px-6 py-14">
    <CsHeader locale={locale} project={project} />

    {
      hero && (
        <div class="mt-8">
          <FramedImage media={hero} priority index={0} url={`${id}.local`} />
        </div>
      )
    }

    <div class:list={['mt-12 grid gap-12', !isCapability && 'xl:grid-cols-[1fr_240px]']}>
      <div>
        {!isCapability && <TldrBox locale={locale} tldr={project.tldr} />}
        <div>
          {
            project.sections.map((s) => (
              <SectionRenderer
                locale={locale}
                section={s}
                diagram={project.diagram}
                media={project.media}
              />
            ))
          }
        </div>
      </div>

      {!isCapability && <MiniToc locale={locale} sections={project.sections} />}
    </div>

    <NextPrev locale={locale} currentId={id} />
  </article>

  <script>
    import '@scripts/lightbox';
  </script>
</Base>
