<script setup>
import { homeHero as defaultHero } from "~/data/home";

defineProps({
  hero: {
    type: Object,
    default: () => defaultHero,
  },
  sectionId: {
    type: String,
    default: "hero",
  },
});
</script>

<template>
  <section
    :id="sectionId"
    class="relative flex min-h-[calc(100vh-var(--page-offset,134px)-40px)] items-center overflow-hidden bg-black bg-cover bg-center pb-10 text-white"
    :style="{ backgroundImage: `url(${hero.backgroundImage})` }"
  >
    <div class="absolute inset-0 bg-black/40" />
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(27,214,41,0.18),transparent_32%),radial-gradient(circle_at_82%_78%,rgba(0,92,230,0.18),transparent_26%)]" />
    <div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />

    <div class="container-gm relative z-10 grid gap-12 py-16 md:py-20 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
      <div>
        <p class="text-sm uppercase tracking-[0.34em] text-white/70" data-hero-reveal>
          {{ hero.eyebrow }}
        </p>
        <h1 class="mt-5 max-w-4xl text-balance text-[36px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
          {{ hero.title }}
        </h1>
        <p class="mt-5 max-w-2xl text-base leading-8 text-white/82 md:text-lg" data-hero-reveal>
          {{ hero.description }}
        </p>

        <div class="mt-8 flex flex-wrap gap-3" data-hero-reveal>
          <span
            v-for="tag in hero.tags"
            :key="tag"
            class="rounded border border-white/20 bg-white/10 px-4 py-2 text-xs text-white/82 backdrop-blur"
          >
            {{ tag }}
          </span>
        </div>

        <div class="mt-10 flex flex-wrap gap-4" data-hero-reveal>
          <NuxtLink :to="hero.primaryCta.href" class="gm-btn gm-btn-primary px-8">
            {{ hero.primaryCta.label }}
          </NuxtLink>
          <NuxtLink
            :to="hero.secondaryCta.href"
            class="gm-btn border border-white/35 bg-white/10 px-8 text-white hover:border-white hover:bg-white/20"
          >
            {{ hero.secondaryCta.label }}
          </NuxtLink>
        </div>

        <div class="mt-6" data-hero-reveal>
          <SectionRouteLinks :routes="hero.paths" light />
        </div>
      </div>

      <div class="hidden gap-4 lg:grid" data-hero-reveal>
        <div class="rounded-[28px] border border-white/10 bg-white/10 p-6 backdrop-blur">
          <p class="text-xs uppercase tracking-[0.26em] text-white/55">Growth Signal</p>
          <div class="mt-6 grid gap-4 sm:grid-cols-3 lg:grid-cols-1">
            <div class="rounded-2xl border border-white/10 bg-black/10 p-4">
              <p class="text-sm text-white/65">真人内容网络</p>
              <p class="mt-2 text-[28px] font-semibold text-white">50,000+</p>
            </div>
            <div class="rounded-2xl border border-white/10 bg-black/10 p-4">
              <p class="text-sm text-white/65">官媒资源矩阵</p>
              <p class="mt-2 text-[28px] font-semibold text-white">5,000+</p>
            </div>
            <div class="rounded-2xl border border-white/10 bg-black/10 p-4">
              <p class="text-sm text-white/65">标准交付流程</p>
              <p class="mt-2 text-[28px] font-semibold text-white">5 Steps</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
