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

const { locale } = Astro.props;

interface Props {
  locale: Locale;
}

const copy = siteCopy[locale].home;
---

<MainLayout
  lang={locale}
  title={copy.pageTitle}
  customDescription={copy.metaDescription}
  customOgTitle={copy.pageTitle}
>
  <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}
  />

  <FeaturesGeneral
    title={copy.featureTitle}
    subTitle={copy.featureSubtitle}
    src={featureImage}
    alt={copy.featureAlt}
    features={featuresByLocale[locale]}
  />

  <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-3">
      {
        copy.audiences.map((audience: any) => (
          <article class="rounded-3xl border border-neutral-300 bg-neutral-100/70 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">
              {audience.title}
            </h3>
            <p class="mt-3 text-pretty text-neutral-600 dark:text-neutral-400">
              {audience.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="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between"
    >
      <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.useCasesTitle}
        </h2>
        <p
          class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
        >
          {copy.useCasesSubtitle}
        </p>
      </div>
    </div>

    <div class="mt-8 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
      {
        copy.useCases.map((useCase: any) => (
          <article class="rounded-[2rem] border border-neutral-300 bg-linear-to-br from-neutral-100 to-yellow-100/60 p-6 shadow-xs dark:border-neutral-700 dark:from-neutral-900 dark:to-neutral-800">
            <p class="text-xs font-semibold tracking-[0.22em] text-neutral-500 uppercase dark:text-neutral-400">
              {useCase.eyebrow}
            </p>
            <h3 class="mt-4 text-2xl font-semibold text-balance text-neutral-800 dark:text-neutral-200">
              {useCase.title}
            </h3>
            <p class="mt-4 max-w-prose text-pretty text-neutral-600 dark:text-neutral-400">
              {useCase.content}
            </p>
            <div class="mt-6">
              <SecondaryCTA
                title={useCase.cta}
                url={localizeHref(useCase.href, locale)}
              />
            </div>
          </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.boundaries.map((boundary: 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">
                {boundary.title}
              </h3>
              <p class="mt-3 text-sm leading-6 text-neutral-600 dark:text-neutral-400">
                {boundary.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>