{% load wagtailimages_tags %}
<section class="saas-demo saas-demo--split saas-demo--{{ self.background_style }} mandelstudio-demo-split"
         data-width="{{ self.layout_width }}">
    <style>
      .mandelstudio-demo-split {
        position: relative;
        border-radius: 18px;
        overflow: hidden;
        background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
      }
      .mandelstudio-demo-split .saas-demo__container {
        max-width: 1200px;
        margin: 0 auto;
        padding: clamp(1.25rem, 2.2vw, 2.25rem);
        gap: clamp(1rem, 2vw, 2rem);
      }
      .mandelstudio-demo-split .saas-demo__title {
        font-size: clamp(1.9rem, 3vw, 3rem);
        line-height: 1.1;
        letter-spacing: -0.03em;
        margin-bottom: .8rem;
      }
      .mandelstudio-demo-split .saas-demo__subtitle {
        color: #556070;
        max-width: 54ch;
        margin-bottom: .9rem;
      }
      .mandelstudio-demo-split .saas-demo__benefits-list {
        margin-bottom: 1.15rem;
      }
      .mandelstudio-demo-split .saas-demo__benefit {
        color: #212b3a;
      }
      .mandelstudio-demo-split .saas-demo__visual {
        margin-top: .5rem;
      }
      .mandelstudio-demo-split .saas-demo__image {
        width: 100%;
        border-radius: 16px;
        border: 1px solid rgba(39, 66, 107, .14);
        box-shadow: 0 12px 28px rgba(20, 35, 68, .12);
      }
      .mandelstudio-demo-split .saas-demo__form-wrapper {
        border: 1px solid rgba(42, 72, 120, .15);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 14px 30px rgba(18, 38, 76, .09);
      }
      .mandelstudio-demo-split .saas-demo__form {
        padding: clamp(1rem, 2vw, 1.5rem);
      }
      .mandelstudio-demo-split .saas-demo__input,
      .mandelstudio-demo-split .saas-demo__select,
      .mandelstudio-demo-split .saas-demo__textarea {
        background: #fbfdff;
        border-color: #d8e1ec;
        transition: border-color .2s ease, box-shadow .2s ease;
      }
      .mandelstudio-demo-split .saas-demo__input:focus,
      .mandelstudio-demo-split .saas-demo__select:focus,
      .mandelstudio-demo-split .saas-demo__textarea:focus {
        border-color: #377dff;
        box-shadow: 0 0 0 .2rem rgba(55, 125, 255, .15);
      }
      .mandelstudio-demo-split .saas-demo__submit {
        box-shadow: 0 8px 18px rgba(40, 95, 214, .3);
      }
      @media (max-width: 991.98px) {
        .mandelstudio-demo-split .saas-demo__visual {
          display: none;
        }
      }
    </style>
    <div class="saas-demo__container">
        <div class="saas-demo__content">
            <h2 class="saas-demo__title">{{ self.section_title }}</h2>
            {% if self.section_subtitle %}
            <div class="saas-demo__subtitle">{{ self.section_subtitle }}</div>
            {% endif %}

            {% if self.benefits_title or self.benefits %}
            <div class="saas-demo__benefits">
                {% if self.benefits_title %}
                <h3 class="saas-demo__benefits-title">{{ self.benefits_title }}</h3>
                {% endif %}
                {% if self.benefits %}
                <ul class="saas-demo__benefits-list">
                    {% for benefit in self.benefits %}
                    <li class="saas-demo__benefit">
                        <svg class="saas-demo__check" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M4 10L8 14L16 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        {{ benefit }}
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </div>
            {% endif %}

            {% if self.side_image %}
            <div class="saas-demo__visual">
                {% image self.side_image width-640 class="saas-demo__image" %}
            </div>
            {% endif %}
        </div>

        <div class="saas-demo__form-wrapper">
            <form class="saas-demo__form" action="{% url "contact_form:contact-form-handler" %}" method="post">
                {% csrf_token %}
                <div class="saas-demo__fields">
                    {% for field in self.form_fields %}
                    <div class="saas-demo__field">
                        <label class="saas-demo__label" for="split-{{ field.field_type }}">
                            {{ field.label }}
                            {% if field.required %}<span class="saas-demo__required">*</span>{% endif %}
                        </label>
                        {% if field.field_type == 'message' %}
                        <textarea class="saas-demo__textarea"
                                  id="split-{{ field.field_type }}"
                                  name="{% if field.field_type == "email" %}email_from{% elif field.field_type == "phone" %}phonenumber{% elif field.field_type == "text" %}name{% else %}{{ field.field_type }}{% endif %}"
                                  placeholder="{{ field.placeholder }}"
                                  {% if field.required %}required{% endif %}></textarea>
                        {% elif field.field_type == 'company_size' %}
                        <select class="saas-demo__select"
                                id="split-{{ field.field_type }}"
                                name="{% if field.field_type == "email" %}email_from{% elif field.field_type == "phone" %}phonenumber{% elif field.field_type == "text" %}name{% else %}{{ field.field_type }}{% endif %}"
                                {% if field.required %}required{% endif %}>
                            <option value="">{{ field.placeholder|default:"Select company size" }}</option>
                            <option value="1-10">1-10 employees</option>
                            <option value="11-50">11-50 employees</option>
                            <option value="51-200">51-200 employees</option>
                            <option value="201-500">201-500 employees</option>
                            <option value="500+">500+ employees</option>
                        </select>
                        {% else %}
                        <input class="saas-demo__input"
                               type="{% if field.field_type == 'email' %}email{% elif field.field_type == 'phone' %}tel{% else %}text{% endif %}"
                               id="split-{{ field.field_type }}"
                               name="{% if field.field_type == "email" %}email_from{% elif field.field_type == "phone" %}phonenumber{% elif field.field_type == "text" %}name{% else %}{{ field.field_type }}{% endif %}"
                               placeholder="{{ field.placeholder }}"
                               {% if field.required %}required{% endif %}>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>

                <button type="submit" class="saas-demo__submit">{{ self.submit_button_text }}</button>

                {% if self.privacy_text %}
                <div class="saas-demo__privacy">{{ self.privacy_text }}</div>
                {% endif %}
            </form>
        </div>
    </div>
</section>