---
import heroContent from '../data/hero-content.json';
import heroStats from '../data/hero-stats.json';

const { communityLabel, headingLine1, headingLine2, description, buttons } = heroContent;
---

<section class="relative w-full py-20 md:py-32 lg:py-40 overflow-hidden">
  <div class="absolute inset-0 -z-10 overflow-hidden">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background to-background/50"></div>
    <div class="absolute top-1/4 -left-20 w-80 h-80 rounded-full bg-gradient-to-r from-primary/20 to-blue-400/20 blur-3xl opacity-60"></div>
    <div class="absolute bottom-1/3 -right-20 w-80 h-80 rounded-full bg-gradient-to-r from-blue-400/20 to-primary/20 blur-3xl opacity-60"></div>
    <div class="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.05)_1px,transparent_1px)] bg-[size:40px_40px]"></div>
  </div>

  <div class="container px-4 md:px-6 relative">
    <div class="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
      <div class="flex flex-col justify-center space-y-8 animate-[fadeInUp_0.5s_ease-out]">
        <div class="flex flex-wrap items-center gap-2">
          <span class="inline-flex items-center rounded-full border px-3 py-1 text-sm">
            {communityLabel}
          </span>
          <a
            href="https://ancikri.com"
            target="_blank"
            rel="noopener noreferrer"
            class="inline-flex items-center rounded-full border px-3 py-1 text-sm hover:bg-muted transition-colors"
          >
            Powered By Ancikri
          </a>
        </div>

        <div class="space-y-4">
          <h1 class="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
            {headingLine1}{' '}
            <span class="bg-clip-text bg-gradient-to-r text-primary-500">
              {headingLine2}
            </span>
          </h1>
          <p class="max-w-[600px] text-muted-foreground md:text-xl">
            {description}
          </p>
        </div>

        <div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
          <a
            href={buttons.joinUrl}
            class="inline-flex items-center justify-center rounded-lg bg-primary text-primary-foreground px-6 py-3 text-sm font-medium hover:bg-primary/90 transition-colors"
          >
            {buttons.join}
          </a>
          <a
            href={buttons.exploreUrl}
            class="inline-flex items-center justify-center rounded-lg border border-input bg-background px-6 py-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors w-full sm:w-auto"
          >
            {buttons.explore}
          </a>
        </div>

        <div class="flex flex-wrap justify-center md:justify-start gap-6 sm:gap-8">
          {heroStats.map(({ value, label }: { value: string; label: string }, i: number) => (
            <>
              <div class="flex flex-col items-center">
                <div class="text-2xl font-bold bg-clip-text text-primary-500">
                  {value}
                </div>
                <div class="text-xs text-muted-foreground">{label}</div>
              </div>
              {i < heroStats.length - 1 && (
                <div class="hidden sm:block h-10 border-r border-border mx-4"></div>
              )}
            </>
          ))}
        </div>
      </div>

      <div class="relative w-full lg:w-auto mx-auto lg:ml-auto animate-[fadeIn_0.5s_ease-out_0.2s_both]">
        <img
          src="/logo.webp"
          alt="logo"
          width="600"
          height="500"
          class="w-full h-auto object-cover"
        />
      </div>
    </div>
  </div>
</section>
