---
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 } from '@/i18n';

const locale = 'de' as const;
const copy = siteCopy[locale].useCases.msp;
const siteDescription = siteCopy[locale].site.description;
const canonicalPath = localizedPath('/use-cases/msp', 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.painTitle}
      </h2>
      <p
        class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
      >
        {copy.painSubtitle}
      </p>
    </div>

    <div class="mt-8 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
      {
        copy.painCards.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="rounded-[2rem] border border-neutral-300 bg-linear-to-br from-neutral-100 to-yellow-100/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.outcomeTitle}
        </h2>
        <p
          class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
        >
          {copy.outcomeSubtitle}
        </p>
      </div>

      <div class="mt-8 grid gap-4 md:grid-cols-2">
        {
          copy.outcomeCards.map((card: any) => (
            <article class="rounded-2xl bg-white/80 p-5 dark:bg-neutral-950/60">
              <h3 class="text-base font-semibold text-neutral-800 dark:text-neutral-200">
                {card.title}
              </h3>
              <p class="mt-3 text-sm leading-6 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-[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="max-w-(--breakpoint-md)">
      <h2
        class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
      >
        {copy.capabilityTitle}
      </h2>
      <p
        class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
      >
        {copy.capabilitySubtitle}
      </p>
    </div>

    <div class="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      {
        copy.capabilityCards.map((card: any) => (
          <article class="rounded-3xl border border-neutral-300 bg-neutral-100/70 p-6 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="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 md:grid-cols-3">
        {
          copy.boundaryCards.map((card: any) => (
            <article class="rounded-2xl bg-neutral-200/80 p-5 dark:bg-neutral-900/70">
              <h3 class="text-base font-semibold text-neutral-800 dark:text-neutral-200">
                {card.title}
              </h3>
              <p class="mt-3 text-sm leading-6 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 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>