{% extends "marketing/index.html" %}
{% load static %}
{% block content %}
<main class="bg-[url({% static 'marketing/background.png' %})] bg-no-repeat bg-cover bg-black bg-center text-white">
        <div class="backdrop-blur-sm">
          <div class="flex flex-col lg:flex-row p-10 relative">
            <div class="absolute top-0 left-0 w-full h-full bg-black opacity-40 -z-10"></div>
            <article class="flex-1 flex flex-col items-center  pb-8">
              <div class="lg:sticky lg:top-1/2 lg:translate-y-[-50%] text-center">
                <div class="flex flex-col gap-2">
                  <img
                    class="w-[40%]  mx-auto"
                    src="{% static 'marketing/w_solo.png' %}"
                  ></img>
                </div>
                <h1 class="text-6xl font-extralight block pb-3 ">
                  Welcome to
                  <br /> Wisconsin Windrows
                </h1>
              </div>
            </article>
            <article class="flex-1">
              <section class="h-[50lvh] lg:h-lvh lg:flex lg:flex-col lg:items-center lg:justify-center">
                <section class="text-3xl py-4">
                  <b>Introducing Proboscus:</b> the remote temperature
                  monitoring solution that will transform your monitoring
                  process after a mass mortality event.
                </section>
                <section class="text-lg text-center p-8">
                    <a
                     href="{% url 'livedemo' %}"
                     class="p-4 text-2xl rounded-2xl text-black bg-blue-400 cursor-pointer hover:bg-blue-300 mr-4"
                     >
                          See it in action
                     </a>
                  <span class="inline-block">or read on to learn more</span>
                </section>
              </section>

              <section class="text-lg">
                <h2 class="text-3xl">Goodbye, manual measurement</h2>
                <div>
                  Proboscus offers several critical improvements over the manual
                  windrow measurement techniques used today.
                </div>
                <div>
                  <ul>
                      {% for item in bullet_items_measurement %}
                      <li>
                          <span class="font-bold pr-3">{{item.key}}:</span>
                          <span>{{item.value}}</span>
                      </li>
                      {% endfor %}
                  </ul>
                </div>
                <h2 class="text-3xl mt-3">Hello, no-click insights</h2>
                <div>
                  <ul>
                      {% for item in bullet_items_comfort %}
                      <li>
                          <span class="font-bold pr-3">{{item.key}}:</span>
                          <span>{{item.value}}</span>
                      </li>
                      {% endfor %}
                    </ul>
                </div>

                <div>
                  <h2 class="text-3xl mt-3">Additional Features:</h2>
                  <ul>

                      {% for item in bullet_items_additional %}
                      <li>
                        <span class="font-bold pr-3">{{item.key}}:</span>
                        <span>{{item.value}}</span>
                      </li>
                      {% endfor %}
                 </ul>
                </div>
              </section>
              <section class="text-xl flex gap-2 items-center justify-center pt-4">
                <span>Interested?</span>
                <CallToActionButton onClick={props.onLogin} />
              </section>
              <section class="py-3">
                <div class="pb-3">
                  Join our mailing list for updates! We'll keep you appraised of
                  the latest developments and opportunities for deployment.
                </div>
                <input
                  class="bg-gray-200 p-4 text-black"
                  placeholder="joe@example.com"
                  type="email"
                ></input>
                <button class="p-4 text-black cursor-pointer bg-gray-200 hover:bg-gray-100">
                  Submit
                </button>
              </section>
            </article>
          </div>
          <footer class="py-1 text-white text-center bg-black">
            Contact us at
            <a href="mailto:info@wisconsinwindrow.com" class="">
              info@wisconsinwindrow.com
            </a>
          </footer>
        </div>
      </main>
{% endblock content %}
