@props([
    'title' => '',
    'description' => '',
    'image' => [], // Mantener prop para compatibilidad, aunque no se usa
    'alt' => '',   // Mantener prop para compatibilidad
    'position' => 'left', // 'left' or 'right'
    'loading' => 'lazy',
    'decoding' => 'async',
])

{{--
    Componente Hermano: Community Split Card (Text Only Variant)

    Diferencias con el original (community-split-card.blade.php):
    1. Eliminación de Dependencia de Imágenes: Se han eliminado las etiquetas <picture> e <img>.
       Los props 'image', 'alt', 'loading', y 'decoding' se mantienen solo por compatibilidad de interfaz (API).
    2. Diseño Visual Alternativo:
       - Se utiliza un diseño tipo "tarjeta" (card) con bordes laterales de acento y sombras suaves.
       - Se reemplaza la imagen con elementos decorativos abstractos (círculos/gradientes) y acentos de color.
       - Se usa la prop 'position' para alternar la alineación del texto y la posición del acento visual,
         manteniendo el ritmo visual "zig-zag" del original sin usar imágenes.
    3. Estructura:
       - Contenedor unificado en lugar de grid de dos columnas.
       - Mayor padding y uso de espacio negativo para compensar la falta de imágenes.
--}}

@php
  $isLeft = $position === 'left';
  // Clases dinámicas basadas en la posición para mantener variedad visual
  // Si es 'left', alineamos a la izquierda con borde a la izquierda.
  // Si es 'right', alineamos a la derecha con borde a la derecha (opcional, o mantener left pero cambiar acento).
  // Para mantener buena legibilidad, el texto suele ser mejor left-aligned, pero podemos jugar con el contenedor.

  $containerAlign = $isLeft ? 'items-start' : 'items-end';
  $textAlign = $isLeft ? 'text-left' : 'text-left md:text-right';
  $borderAccent = $isLeft ? 'border-l-4' : 'border-r-4';

  // Ajuste del margen del separador
  $separatorAlign = $isLeft ? 'mr-auto' : 'ml-auto';

  //Ajuste de la esfera en una esquina
  $spherePosition = $isLeft ? '-right-20 -top-20' : '-left-20 -top-20';
@endphp

<div class="group relative mb-8 w-full overflow-hidden bg-white p-8 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.05)] lg:mb-12 lg:p-12 {{ $borderAccent }} border-primary">

  {{-- Elementos Decorativos de Fondo --}}
  <div class="absolute {{ $spherePosition }} -z-0 h-64 w-64 rounded-full bg-blue-50 opacity-40 transition-transform duration-700 group-hover:scale-110"></div>
  <div class="absolute -bottom-20 -left-20 -z-0 h-40 w-40 rounded-full bg-gray-50 opacity-60 transition-transform duration-700 group-hover:scale-110"></div>

  <div class="relative z-10 flex flex-col {{ $containerAlign }} {{ $textAlign }}">
    <h3 class="text-primary-blue-variant mb-6 text-2xl font-bold leading-tight md:text-3xl lg:max-w-3xl">
      {{ $title }}
    </h3>

    {{-- Separador Visual --}}
    <div class="bg-primary mb-6 h-1.5 w-20 rounded-full opacity-30 {{ $separatorAlign }}"></div>

    <div class="prose-lg text-gray-700 text-pretty max-w-none lg:max-w-4xl">
      <p class="leading-relaxed">
        {{ $description }}
      </p>
    </div>
  </div>
</div>