---
import MainLayout from '@/layouts/MainLayout.astro';
import HeroSection from '@components/sections/landing/HeroSection.astro';
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
import SecondaryCTA from '@components/ui/buttons/SecondaryCTA.astro';
import heroImage from '@images/tenantial-review-board.avif';
import { SITE } from '@data/constants';
import { siteCopy } from '@data/site-copy';
import {
  localeHtmlLang,
  localizeHref,
  localizedPath,
  type Locale,
} from '@/i18n';

const { locale } = Astro.props;

interface Props {
  locale: Locale;
}

const copy = siteCopy[locale].reviewPacks;
const siteDescription = siteCopy[locale].site.description;
const canonicalPath = localizedPath('/platform/review-packs', locale);
---

<MainLayout
  lang={locale}
  title={copy.pageTitle}
  customDescription={copy.metaDescription}
  customOgTitle={copy.pageTitle}
  structuredData={{
    '@context': 'https://schema.org',
    '@type': 'WebPage',
    '@id': `${SITE.url}${canonicalPath}`,
    url: `${SITE.url}${canonicalPath}`,
    name: copy.pageTitle,
    description: copy.metaDescription,
    isPartOf: {
      '@type': 'WebSite',
      url: SITE.url,
      name: SITE.title,
      description: siteDescription,
    },
    inLanguage: localeHtmlLang[locale],
  }}
>
  <HeroSection
    title={copy.heroTitle}
    subTitle={copy.heroSubtitle}
    primaryBtn={copy.primaryCta}
    primaryBtnURL={localizeHref('/contact', locale)}
    secondaryBtn={copy.secondaryCta}
    secondaryBtnURL={localizeHref('/platform', locale)}
    withReview={false}
    supportingLine={copy.supportingLine}
    src={heroImage}
    alt={copy.heroAlt}
  />

  <section
    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
  >
    <div class="max-w-(--breakpoint-md)">
      <h2
        class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
      >
        {copy.problemTitle}
      </h2>
      <p
        class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
      >
        {copy.problemSubtitle}
      </p>
    </div>

    <div class="mt-8 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
      {
        copy.problemCards.map((card: any) => (
          <article class="rounded-3xl border border-neutral-300 bg-neutral-100/80 p-6 shadow-xs dark:border-neutral-700 dark:bg-white/[0.04]">
            <h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-200">
              {card.title}
            </h3>
            <p class="mt-3 text-pretty text-neutral-600 dark:text-neutral-400">
              {card.content}
            </p>
          </article>
        ))
      }
    </div>
  </section>

  <section
    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
  >
    <div
      class="grid gap-8 lg:grid-cols-[minmax(0,0.7fr)_minmax(0,1.3fr)] lg:items-start"
    >
      <div>
        <h2
          class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
        >
          {copy.workflowTitle}
        </h2>
        <p
          class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
        >
          {copy.workflowSubtitle}
        </p>
      </div>

      <div class="grid gap-4 md:grid-cols-2">
        {
          copy.workflowSteps.map((step: any) => (
            <article class="rounded-3xl border border-neutral-300 bg-neutral-100/70 p-5 dark:border-neutral-700 dark:bg-white/[0.04]">
              <span class="inline-flex rounded-full bg-yellow-400 px-3 py-1 text-xs font-semibold tracking-[0.18em] text-neutral-900 uppercase">
                {step.step}
              </span>
              <h3 class="mt-4 text-lg font-semibold text-neutral-800 dark:text-neutral-200">
                {step.title}
              </h3>
              <p class="mt-3 text-sm leading-6 text-neutral-600 dark:text-neutral-400">
                {step.content}
              </p>
            </article>
          ))
        }
      </div>
    </div>
  </section>

  <section
    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
  >
    <div
      class="rounded-[2rem] border border-neutral-300 bg-linear-to-br from-neutral-100 to-neutral-200/70 p-6 md:p-10 dark:border-neutral-700 dark:from-neutral-900 dark:to-neutral-800"
    >
      <div class="max-w-(--breakpoint-md)">
        <h2
          class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
        >
          {copy.anatomyTitle}
        </h2>
        <p
          class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
        >
          {copy.anatomySubtitle}
        </p>
      </div>

      <div class="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {
          copy.reviewPackCards.map((card: any) => (
            <article class="flex flex-col rounded-3xl border border-neutral-200/50 bg-white p-6 shadow-xs transition-shadow hover:shadow-sm dark:border-neutral-800/50 dark:bg-neutral-950/80">
              <div class="mb-4 flex flex-wrap items-start justify-between gap-3">
                <span
                  class:list={[
                    'inline-flex shrink-0 items-center justify-center rounded-lg px-2.5 py-1 text-[11px] font-semibold tracking-[0.16em] uppercase',
                    card.availabilityTone === 'soft-availability'
                      ? 'border border-neutral-200 bg-neutral-50 text-neutral-600 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400'
                      : 'border border-yellow-200/50 bg-yellow-100/50 text-yellow-800 dark:border-yellow-900/30 dark:bg-yellow-500/10 dark:text-yellow-500',
                  ]}
                >
                  {card.availabilityTone === 'soft-availability'
                    ? copy.softAvailabilityLabel
                    : copy.availableNowLabel}
                </span>
              </div>
              <h3 class="mb-2 text-lg font-semibold text-neutral-800 dark:text-neutral-200">
                {card.title}
              </h3>
              <p class="text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
                {card.content}
              </p>
            </article>
          ))
        }
      </div>
    </div>
  </section>

  <section
    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
  >
    <div class="grid gap-8 lg:grid-cols-2">
      <div>
        <div class="max-w-(--breakpoint-md)">
          <h2
            class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
          >
            {copy.evidenceTitle}
          </h2>
          <p
            class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
          >
            {copy.evidenceSubtitle}
          </p>
        </div>

        <div class="mt-8 grid gap-4">
          {
            copy.evidenceCards.map((card: any) => (
              <article class="flex gap-4 rounded-3xl border border-neutral-300 bg-neutral-100/70 p-6 dark:border-neutral-700 dark:bg-white/[0.04]">
                <div class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-neutral-800 text-white dark:bg-neutral-200 dark:text-neutral-900">
                  <svg
                    class="h-3 w-3"
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="3"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <polyline points="20 6 9 17 4 12" />
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-200">
                    {card.title}
                  </h3>
                  <p class="mt-2 text-pretty text-neutral-600 dark:text-neutral-400">
                    {card.content}
                  </p>
                </div>
              </article>
            ))
          }
        </div>
      </div>

      <div>
        <div class="max-w-(--breakpoint-md)">
          <h2
            class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
          >
            {copy.decisionTitle}
          </h2>
          <p
            class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
          >
            {copy.decisionSubtitle}
          </p>
        </div>

        <figure
          class="mt-8 overflow-hidden rounded-3xl border border-neutral-300 bg-white shadow-sm dark:border-neutral-700 dark:bg-neutral-950/80"
        >
          <figcaption
            class="flex flex-wrap items-center justify-between gap-3 border-b border-neutral-200 bg-neutral-50 px-6 py-4 dark:border-neutral-800 dark:bg-neutral-900/70"
          >
            <span
              class="text-[11px] font-semibold tracking-[0.16em] text-neutral-500 uppercase dark:text-neutral-400"
            >
              {copy.decisionSampleBadge}
            </span>
            <span
              class="inline-flex items-center gap-2 rounded-full border border-yellow-200/60 bg-yellow-100/70 px-3 py-1 text-xs font-semibold text-yellow-800 dark:border-yellow-900/40 dark:bg-yellow-500/10 dark:text-yellow-300"
            >
              <span
                class="h-1.5 w-1.5 rounded-full bg-yellow-500 dark:bg-yellow-400"
              ></span>
              {copy.decisionSampleStatusValue}
            </span>
          </figcaption>
          <div class="px-6 py-5">
            <h3
              class="text-base font-semibold text-balance text-neutral-800 dark:text-neutral-200"
            >
              {copy.decisionSampleTitle}
            </h3>
            <dl class="mt-4 grid gap-3">
              {
                copy.decisionSampleRows.map((row: any) => (
                  <div class="grid gap-1 border-t border-neutral-100 pt-3 first:border-0 first:pt-0 sm:grid-cols-[7rem_1fr] sm:gap-4 dark:border-neutral-800">
                    <dt class="text-xs font-semibold tracking-[0.14em] text-neutral-500 uppercase dark:text-neutral-400">
                      {row.label}
                    </dt>
                    <dd class="text-sm leading-6 text-neutral-700 dark:text-neutral-300">
                      {row.value}
                    </dd>
                  </div>
                ))
              }
            </dl>
          </div>
        </figure>

        <div class="mt-8 grid gap-4 sm:grid-cols-2">
          {
            copy.decisionCards.map((card: any) => (
              <article class="flex gap-4 rounded-3xl border border-neutral-300 bg-neutral-100/70 p-6 dark:border-neutral-700 dark:bg-white/[0.04]">
                <div class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200">
                  <svg
                    class="h-3 w-3"
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="3"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <polyline points="20 6 9 17 4 12" />
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-200">
                    {card.title}
                  </h3>
                  <p class="mt-2 text-pretty text-neutral-600 dark:text-neutral-400">
                    {card.content}
                  </p>
                </div>
              </article>
            ))
          }
        </div>
      </div>
    </div>
  </section>

  <section
    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
  >
    <div
      class="rounded-[2rem] border border-neutral-300 bg-neutral-100/80 p-6 md:p-10 dark:border-neutral-700 dark:bg-white/[0.05]"
    >
      <div class="max-w-(--breakpoint-md)">
        <h2
          class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
        >
          {copy.boundaryTitle}
        </h2>
        <p
          class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
        >
          {copy.boundarySubtitle}
        </p>
      </div>

      <div class="mt-8 grid gap-4 lg:grid-cols-2">
        {
          copy.boundaryColumns.map((column: any) => (
            <article class="rounded-3xl bg-neutral-200/80 p-6 dark:bg-neutral-900/70">
              <h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-200">
                {column.title}
              </h3>
              <ul class="mt-4 grid gap-3">
                {column.items.map((item: string) => (
                  <li class="rounded-2xl border border-neutral-300 bg-white/70 px-4 py-3 text-sm leading-6 text-neutral-700 dark:border-neutral-700 dark:bg-neutral-950/50 dark:text-neutral-300">
                    {item}
                  </li>
                ))}
              </ul>
            </article>
          ))
        }
      </div>

      <p
        class="mt-6 max-w-3xl text-sm leading-6 text-neutral-600 dark:text-neutral-400"
      >
        {copy.boundaryNote}
      </p>
    </div>
  </section>

  <section
    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
  >
    <div class="max-w-(--breakpoint-md)">
      <h2
        class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
      >
        {copy.audienceTitle}
      </h2>
      <p
        class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
      >
        {copy.audienceSubtitle}
      </p>
    </div>

    <div class="mt-8 grid gap-6 lg:grid-cols-2">
      {
        copy.audienceCards.map((card: any) => (
          <article class="rounded-[2rem] border border-neutral-300 bg-linear-to-br from-neutral-100 to-neutral-200/70 p-6 shadow-xs dark:border-neutral-700 dark:from-neutral-900 dark:to-neutral-800">
            <h3 class="text-2xl font-semibold text-balance text-neutral-800 dark:text-neutral-200">
              {card.title}
            </h3>
            <p class="mt-4 max-w-prose text-pretty text-neutral-600 dark:text-neutral-400">
              {card.content}
            </p>
          </article>
        ))
      }
    </div>
  </section>

  <section
    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
  >
    <div
      class="rounded-[2rem] bg-linear-to-br from-neutral-900 to-neutral-700 p-6 md:p-10 dark:from-neutral-950 dark:to-neutral-800"
    >
      <div class="max-w-(--breakpoint-md)">
        <h2 class="text-2xl font-bold text-balance text-neutral-50 md:text-3xl">
          {copy.comparisonTitle}
        </h2>
        <p class="mt-3 max-w-prose text-pretty text-neutral-300 md:text-lg">
          {copy.comparisonSubtitle}
        </p>
      </div>

      <div class="mt-8 hidden gap-4 px-2 md:grid md:grid-cols-[9rem_1fr_1fr]">
        <span></span>
        <span
          class="text-xs font-semibold tracking-[0.18em] text-neutral-400 uppercase"
        >
          {copy.comparisonRawLabel}
        </span>
        <span
          class="text-xs font-semibold tracking-[0.18em] text-yellow-300 uppercase"
        >
          {copy.comparisonStoryLabel}
        </span>
      </div>

      <div class="mt-3 grid gap-3">
        {
          copy.comparisonRows.map((row: any) => (
            <article class="grid gap-3 rounded-3xl border border-white/10 bg-white/[0.03] p-4 md:grid-cols-[9rem_1fr_1fr] md:items-stretch">
              <h3 class="self-center text-sm font-semibold text-neutral-100">
                {row.title}
              </h3>
              <div class="rounded-2xl bg-white/[0.04] p-4">
                <p class="text-[11px] font-semibold tracking-[0.18em] text-neutral-400 uppercase md:hidden">
                  {copy.comparisonRawLabel}
                </p>
                <p class="mt-2 text-sm leading-6 text-neutral-400 md:mt-0">
                  {row.rawExport}
                </p>
              </div>
              <div class="rounded-2xl border border-yellow-400/30 bg-yellow-500/10 p-4">
                <p class="text-[11px] font-semibold tracking-[0.18em] text-yellow-300 uppercase md:hidden">
                  {copy.comparisonStoryLabel}
                </p>
                <div class="flex gap-2.5 md:items-start">
                  <span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-yellow-400 text-neutral-900">
                    <svg
                      class="h-3 w-3"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="3"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                  </span>
                  <p class="text-sm leading-6 text-neutral-100">
                    {row.reviewStory}
                  </p>
                </div>
              </div>
            </article>
          ))
        }
      </div>
    </div>
  </section>

  <section
    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
  >
    <div
      class="grid gap-8 border-y border-neutral-300 py-10 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:items-center lg:py-14 dark:border-neutral-700"
    >
      <div>
        <h2
          class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
        >
          {copy.trustTeaserTitle}
        </h2>
        <p
          class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
        >
          {copy.trustTeaserSubtitle}
        </p>
        <div class="mt-6">
          <SecondaryCTA
            title={copy.trustTeaserCta}
            url={localizeHref('/trust', locale)}
          />
        </div>
      </div>

      <ul class="grid gap-3">
        {
          copy.trustPoints.map((point: string) => (
            <li class="rounded-2xl border border-neutral-300 bg-neutral-100/70 px-5 py-4 text-sm font-medium text-neutral-700 dark:border-neutral-700 dark:bg-white/[0.04] dark:text-neutral-300">
              {point}
            </li>
          ))
        }
      </ul>
    </div>
  </section>

  <section
    class="mx-auto max-w-[85rem] px-4 pb-10 sm:px-6 lg:px-8 lg:pb-14 2xl:max-w-full"
  >
    <div
      class="rounded-[2rem] bg-linear-to-r from-neutral-900 to-neutral-700 px-6 py-8 text-neutral-50 md:px-10 md:py-12 dark:from-neutral-100 dark:to-neutral-300 dark:text-neutral-900"
    >
      <div class="max-w-(--breakpoint-lg)">
        <h2 class="text-2xl font-bold text-balance md:text-3xl">
          {copy.finalCtaTitle}
        </h2>
        <p
          class="mt-3 max-w-2xl text-pretty text-neutral-200 dark:text-neutral-700"
        >
          {copy.finalCtaSubtitle}
        </p>
      </div>

      <div class="mt-6 flex flex-col gap-3 sm:flex-row">
        <PrimaryCTA
          title={copy.finalPrimaryCta}
          url={localizeHref('/contact', locale)}
        />
        <SecondaryCTA
          title={copy.finalSecondaryCta}
          url={localizeHref('/platform', locale)}
        />
      </div>
    </div>
  </section>
</MainLayout>