{% set image_src = image_src | default(value="/images/mycel_1.png") %}
{% set image_alt = image_alt | default(value="Mycelium Network Graphic") %}
{% set title = title | default(value="MYCELIUM") %}
{% set subtitle = subtitle | default(value="Unleashing the Power of Decentralized Networks") %}
{% set description = description | default(value="Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.") %}
{% set highlight = highlight | default(value="Coming Soon: New Decentralized Features") %}
{% set button_text = button_text | default(value="Get Mycelium") %}
{% set button_link = button_link | default(value="/download") %}

<div class="flex flex-col lg:flex-row-reverse items-center overflow-hidden bg-white h-screen">

  <!-- Image first on mobile, right on desktop -->
  <div class="w-full lg:w-1/2 h-80 lg:h-full">
    <img src="{{ image_src }}" 
         alt="{{ image_alt }}" 
         class="w-full h-4/5 object-cover object-center" />
  </div>

  <!-- Text Content -->
  <div class="w-full lg:w-1/2 max-w-3xl max-auto px-6 py-12 lg:px-16 lg:py-10">
    <div>
      <h1 class="text-4xl font-semibold tracking-tight lg:text-6xl">
        {{ title }}
      </h1>
      <h2 class="fade-in text-3xl lg:text-4xl font-normal tracking-tight mt-4 leading-9">
        {{ subtitle_1 }}<br>{{ subtitle_2 }}
      </h2>
      <p class="mt-8 text-lg lg:text-xl font-light">
        {{ description }} <br><br> 
        <b>{{ highlight }}</b>
      </p>
      <div class="mt-10">
        <a href="{{ button_link }}" class="rounded-2xl bg-black px-4 py-2 text-sm font-semibold text-white shadow hover:bg-gray-700 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-gray-300">
          {{ button_text }}
        </a>
      </div>
    </div>
  </div>

</div>