<template>
  <div class="absolute inset-0 pointer-events-none overflow-hidden">
    <div
      class="absolute inset-0 transition-transform duration-100 xParallax"
      data-parallax-speed="0.4"
      :style="{
        opacity: opacity,
        backgroundImage: patternSvg
      }"
    />
    <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#0a0a0a] to-transparent z-10" />
    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10" />
  </div>
</template>

<script setup>
const props = defineProps({
  /** Pattern opacity (0-1) */
  opacity: {
    type: Number,
    default: 0.6,
  },
  /** Primary pattern color */
  color: {
    type: String,
    default: '#164e63',
  },
  /** Secondary pattern color */
  colorSecondary: {
    type: String,
    default: '#1e3a8a',
  },
  /** Background color */
  bgColor: {
    type: String,
    default: '#0a0a0a',
  },
})

const patternSvg = computed(() => {
  const encodedColor = encodeURIComponent(props.color)
  const encodedColorSecondary = encodeURIComponent(props.colorSecondary)
  const encodedBgColor = encodeURIComponent(props.bgColor)
  return `url('data:image/svg+xml,%3Csvg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3Cpattern id="plaid" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"%3E%3Crect width="200" height="200" fill="${encodedBgColor}"/%3E%3Cline x1="0" y1="0" x2="200" y2="200" stroke="${encodedColor}" stroke-width="4" opacity="0.7"/%3E%3Cline x1="80" y1="0" x2="280" y2="200" stroke="${encodedColorSecondary}" stroke-width="4" opacity="0.6"/%3E%3Cline x1="160" y1="0" x2="360" y2="200" stroke="${encodedColor}" stroke-width="4" opacity="0.7"/%3E%3Cline x1="-80" y1="0" x2="120" y2="200" stroke="${encodedColorSecondary}" stroke-width="4" opacity="0.6"/%3E%3Cline x1="200" y1="0" x2="0" y2="200" stroke="${encodedColor}" stroke-width="4" opacity="0.65"/%3E%3Cline x1="280" y1="0" x2="80" y2="200" stroke="${encodedColorSecondary}" stroke-width="4" opacity="0.55"/%3E%3Cline x1="120" y1="0" x2="-80" y2="200" stroke="${encodedColor}" stroke-width="4" opacity="0.65"/%3E%3Cline x1="40" y1="0" x2="-160" y2="200" stroke="${encodedColorSecondary}" stroke-width="4" opacity="0.55"/%3E%3C/pattern%3E%3C/defs%3E%3Crect width="200" height="200" fill="url(%23plaid)"/%3E%3C/svg%3E')`
})
</script>

