<script setup>
import { geoLoopModel } from "~/data/home";

defineProps({
  model: {
    type: Object,
    default: () => geoLoopModel,
  },
  routes: {
    type: Array,
    default: () => [],
  },
  sectionId: {
    type: String,
    default: "model",
  },
});
</script>

<template>
  <section :id="sectionId" class="bg-[#f4f4f4] py-16 md:py-20">
    <div class="container-gm">
      <div class="grid gap-10 lg:grid-cols-[0.82fr_1.18fr]">
        <div data-reveal>
          <p class="text-sm uppercase tracking-[0.3em] text-[#999]">GEO Model</p>
          <h2 class="section-title mt-4">{{ model.title }}</h2>
          <p class="mt-5 text-base leading-8 text-[#666]">{{ model.description }}</p>
          <div class="mt-6">
            <SectionRouteLinks :routes="routes" />
          </div>
          <NuxtLink :to="model.cta.href" class="gm-btn gm-btn-primary mt-8">
            {{ model.cta.label }}
          </NuxtLink>
        </div>

        <div class="grid gap-5 md:grid-cols-2" data-stagger data-geo-loop>
          <article
            v-for="loop in model.loops"
            :key="loop.title"
            class="rounded-lg border border-gm-border bg-white p-6 shadow-soft"
            data-stagger-item
            data-hover-card
          >
            <p class="text-sm font-medium text-gm-green">{{ loop.title }}</p>
            <p class="mt-3 text-[32px] font-semibold leading-none text-[#262626]">{{ loop.value }}</p>
            <p class="mt-4 text-sm leading-7 text-[#666]">{{ loop.description }}</p>
            <div class="mt-6 space-y-3">
              <div
                v-for="node in loop.nodes"
                :key="node"
                class="flex items-center gap-3 rounded border border-gm-border bg-white px-4 py-3 text-sm text-[#555]"
                data-geo-node
              >
                <span class="size-2 shrink-0 rounded-full bg-gm-green" />
                <span>{{ node }}</span>
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
  </section>
</template>
