{% set title = title | default(value="Welcome") %}
{% set subtitle = subtitle | default(value="") %}
{% set button_text = button_text | default(value="") %}
{% set button_link = button_link | default(value="") %}
{% set bg_color = bg_color | default(value="bg-blue-700") %}
{% set text_color = text_color | default(value="text-white") %}
{% set image = image | default(value="") %}

<div class="relative {{ bg_color }} {{ text_color }} overflow-hidden my-12 lg:my-24">
  <div class="absolute inset-0 z-0 opacity-20 bg-pattern"></div>
  <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center">
      <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl">
        {{ title }}
      </h1>
      {% if subtitle %}
      <p class="mt-6 max-w-2xl mx-auto text-xl">
        {{ subtitle }}
      </p>
      {% endif %}
      {% if button_text and button_link %}
      <div class="mt-10">
        <a href="{{ button_link }}" class="inline-block px-8 py-3 border border-transparent text-base font-medium rounded-md shadow-sm bg-white text-blue-700 hover:bg-blue-50 sm:px-10">
          {{ button_text }}
        </a>
      </div>
      {% endif %}
    </div>
    {% if image %}
    <div class="mt-10 max-w-xl mx-auto">
      <img src="{{ image }}" alt="Hero image" class="rounded-lg shadow-xl">
    </div>
    {% endif %}
    {% if caller %}
      <div class="mt-8">
        {{ caller() }}
      </div>
    {% endif %}
  </div>
  
  <style>
    .bg-pattern {
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
  </style>
</div>
