{#
/**
 * Testimonial Style One Component
 * 
 * Customer testimonial card with quote, star rating, and author information.
 * Features decorative quote mark icon.
 *
 * Available variables:
 * - name: (string) Testimonial author's name. Required.
 * - subtitle: (string) Author's title or company. Required.
 * - description: (string|markup) Testimonial quote text. Required.
 * - imageurl: (string) Author's photo URL. Use square images (200x200px+).
 * - rating: (number) Star rating out of 5. Default: 4
 * - heading_level: (number) HTML heading level for name (1-6). Default: 2
 *
 * Accessibility:
 * - Uses <figure> and <blockquote> semantic elements
 * - aria-label on star rating for screen readers
 * - Decorative quote icon has aria-hidden
 * - Proper heading hierarchy
 * - Sufficient color contrast
 *
 * Theme Variables Used:
 * - bg-gray-100: Card background
 * - text-body: Body text color
 * - border-primary: Profile image border
 * - text-[#FDCC0D]: Star rating color (yellow)
 *
 * Examples:
 * {% include 'tailpine:testimonialstyleone' with {
 *   name: 'John Smith',
 *   subtitle: 'CEO, TechCorp',
 *   description: 'This platform transformed our workflow...',
 *   imageurl: 'https://cdn.pixabay.com/photo/...jpg',
 *   rating: 5,
 * } %}
 */
#}

{% set author_heading = heading_level|default(2) %}
{% set author_image = imageurl|default('') %}
{% set testimonial_rating = rating|default(4) %}

<figure class="pb-12 xl:pt-12 flex flex-col">
  <!-- Testimonial Card -->
  <blockquote class="relative flex flex-col justify-between bg-gray-100 text-body px-6 pt-7 w-full flex-grow">
    <!-- Quote and Text -->
    <div class="flex gap-5">
      <!-- Decorative Quote Icon -->
      <div class="w-20 md:w-19 lg:w-15 xl:w-20 h-10 pt-2 flex-shrink-0" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="31" viewBox="0 0 39 31" fill="currentColor" class="text-gray-300">
          <path d="M14.1614 30.6289H0.608784V20.6792C0.608784 10.0761 4.60791 3.39272 12.6061 0.628906L15.2722 6.43293C10.2363 8.14147 7.69365 11.6088 7.64427 16.8349H14.1614V30.6289ZM36.9712 30.6289H23.4186V20.6792C23.4186 10.0259 27.4424 3.34247 35.49 0.628906L38.082 6.43293C33.0955 8.09122 30.5528 11.5586 30.4541 16.8349H36.9712V30.6289Z"/>
        </svg>
      </div>
      
      <!-- Testimonial Text -->
      <div class="text-sm leading-7 pb-5">
        {{ description }}
      </div>
    </div>
    
    <!-- Star Rating -->
    <div class="flex gap-1 px-4 pb-6" role="img" aria-label="{{ testimonial_rating }} out of 5 stars">
      {% for i in 1..5 %}
        {% if i <= testimonial_rating %}
          <svg class="text-[#FDCC0D] w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"/>
          </svg>
        {% else %}
          <svg class="text-gray-300 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"/>
          </svg>
        {% endif %}
      {% endfor %}
    </div>
  </blockquote>
  
  <!-- Author Profile -->
  <figcaption class="profile flex items-center gap-5 pt-10">
    {% if author_image %}
    <div class="image w-16 h-16 border-2 border-primary overflow-hidden flex-shrink-0">
      <img 
        src="{{ author_image }}" 
        alt="{{ name }}" 
        class="w-full h-full object-cover"
        loading="lazy"
      >
    </div>
    {% endif %}
    
    <div class="info">
      <h{{ author_heading }} class="text-xl font-bold leading-tight text-body">
        {{ name }}
      </h{{ author_heading }}>
      
      {% if subtitle %}
      <div class="text-sm text-gray-600 leading-relaxed">
        {{ subtitle }}
      </div>
      {% endif %}
    </div>
  </figcaption>
</figure>
