<!-- components/SectionLayouts/BannerSectionLayout.vue -->
<template>
  <div class="banner-layout">
    <!-- Main heading -->
    <div v-if="section.fields.heading" class="banner-hero-field">
      <SectionField
        :field="section.fields.heading"
        field-key="heading"
        :section-key="sectionKey"
        :section-model="sectionModel"
        :model-value="sectionModel"
        :user-role="userRole"
        :disabled="disabled"
        :is-super-admin="isSuperAdmin"
        :is-hero-field="true"
        @update-field="emitUpdate"
      />
    </div>

    <!-- Welcome message -->
    <div v-if="section.fields.welcome_text" class="banner-text-field">
      <SectionField
        :field="section.fields.welcome_text"
        field-key="welcome_text"
        :section-key="sectionKey"
        :section-model="sectionModel"
        :model-value="sectionModel"
        :user-role="userRole"
        :disabled="disabled"
        :is-super-admin="isSuperAdmin"
        @update-field="emitUpdate"
      />
    </div>

    <!-- Territory + CTA text -->
    <div class="banner-text-row">
      <div v-if="section.fields.territory_name" class="banner-text-field">
        <SectionField
          :field="section.fields.territory_name"
          field-key="territory_name"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
        />
      </div>

      <div v-if="section.fields.ctaText" class="banner-text-field">
        <SectionField
          :field="section.fields.ctaText"
          field-key="ctaText"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
        />
      </div>
    </div>

    <!-- CTA link -->
    <div v-if="section.fields.ctaLink" class="banner-cta-link">
      <SectionField
        :field="section.fields.ctaLink"
        field-key="ctaLink"
        :section-key="sectionKey"
        :section-model="sectionModel"
        :model-value="sectionModel"
        :user-role="userRole"
        :disabled="disabled"
        :is-super-admin="isSuperAdmin"
        @update-field="emitUpdate"
      />
    </div>

    <!-- Images row -->
    <div class="banner-images-row">
      <div v-if="section.fields.desktopImage" class="banner-image-field">
        <SectionField
          :field="section.fields.desktopImage"
          field-key="desktopImage"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
          @open-media-picker="emitMedia"
        />
      </div>

      <div
        v-if="section.fields.mobileImage"
        class="banner-image-field banner-mobile-image"
      >
        <SectionField
          :field="section.fields.mobileImage"
          field-key="mobileImage"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
          @open-media-picker="emitMedia"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import SectionField from "../SectionField.vue";

const props = defineProps({
  section: Object,
  sectionKey: String,
  sectionModel: Object,
  userRole: String,
  disabled: Boolean,
  isSuperAdmin: Boolean,
});

const emit = defineEmits(["update-field", "open-media-picker"]);

const emitUpdate = (sectionKey, fieldKey, value) => {
  emit("update-field", sectionKey, fieldKey, value);
};

const emitMedia = (payload) => emit("open-media-picker", payload);
</script>

<style scoped>
.banner-layout {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.banner-text-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.banner-text-field,
.banner-image-field,
.banner-cta-link {
  width: 100%;
}

.banner-images-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  align-items: flex-start;
}

.banner-mobile-image {
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .banner-layout {
    padding: 18px;
    gap: 16px;
  }
  .banner-text-row,
  .banner-images-row {
    grid-template-columns: 1fr;
  }
}
</style>
