{{ define "main" }}
<!-- Hero Section -->
<div class="relative bg-background overflow-hidden">
  <div class="max-w-7xl mx-auto">
    <div class="relative z-10 pb-8 bg-background sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
      <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
        <div class="sm:text-center lg:text-left">
          <h1 class="text-4xl tracking-tight font-extrabold text-gray-100 sm:text-5xl md:text-6xl">
            <span class="block xl:inline">Unlock the Power of</span>
            <span class="block text-primary">Sterile Hydroponics</span>
          </h1>
          <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
            Disease-free roots, accelerated growth, and maximum yields. Learn how a clinical approach to gardening transforms your harvest.
          </p>
          <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
            <div class="rounded-md shadow">
              <a href="/services/" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-emerald-700 md:py-4 md:text-lg md:px-10">
                Start Mentorship
              </a>
            </div>
            <div class="mt-3 sm:mt-0 sm:ml-3">
              <a href="/library/" class="w-full flex items-center justify-center px-8 py-3 border border-primary text-base font-medium rounded-md text-primary bg-gray-800 hover:bg-gray-700 md:py-4 md:text-lg md:px-10">
                Free Guide
              </a>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
  <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
    <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="/images/IMG_1767.jpeg" alt="Sterile Hydroponics Setup">
  </div>
</div>

<!-- Benefits Section -->
<div class="py-12 bg-gray-900">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="lg:text-center">
      <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Why Sterile?</h2>
      <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-100 sm:text-4xl">
        A Better Way to Grow
      </p>
      <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto">
        Eliminate pathogens before they start. Our sterile methodology ensures your plants spend energy on growth, not fighting disease.
      </p>
    </div>

    <div class="mt-10">
      <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
        <div class="relative">
            <dt>
                <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
                    <!-- Icon -->
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <p class="ml-16 text-lg leading-6 font-medium text-gray-100">Zero Pathogens</p>
            </dt>
            <dd class="mt-2 ml-16 text-base text-gray-300">
                By maintaining a sterile reservoir, you prevent Pythium (root rot) and other fungal issues completely.
            </dd>
        </div>

        <div class="relative">
            <dt>
                <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                </div>
                <p class="ml-16 text-lg leading-6 font-medium text-gray-100">Maximum Uptake</p>
            </dt>
            <dd class="mt-2 ml-16 text-base text-gray-300">
                Clean water allows for optimal nutrient absorption without biofilm interference.
            </dd>
        </div>

        <div class="relative">
            <dt>
                <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                    </svg>
                </div>
                <p class="ml-16 text-lg leading-6 font-medium text-gray-100">Clinical Precision</p>
            </dt>
            <dd class="mt-2 ml-16 text-base text-gray-300">
                Data-driven gardening using precise measurements and sterile tools for predictable success.
            </dd>
        </div>
      </dl>
    </div>
  </div>
</div>

<!-- Recent Posts (Placeholder) -->
<div class="py-12 bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <h2 class="text-3xl font-extrabold text-gray-100">Recent from the Journal</h2>
     <div class="mt-6 grid gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
        {{ range first 3 (where .Site.RegularPages "Section" "blog") }}
        <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
            <div class="flex-shrink-0">
                <img class="h-48 w-full object-cover" src="{{ with .Params.image }}{{ . }}{{ else }}/images/IMG_0599.jpeg{{ end }}" alt="{{ .Title }}">
            </div>
            <div class="flex-1 bg-gray-900 p-6 flex flex-col justify-between">
                <div class="flex-1">
                    <a href="{{ .RelPermalink }}" class="block mt-2">
                        <p class="text-xl font-semibold text-gray-100">{{ .Title }}</p>
                        <p class="mt-3 text-base text-gray-300">{{ .Summary | truncate 100 }}</p>
                    </a>
                </div>
            </div>
        </div>
        {{ end }}
     </div>
  </div>
</div>
{{ end }}