<!-- components/SectionLayouts/OurMethodLayout.vue -->
<template>
  <div class="our-method-layout">
    <!-- Main Heading -->
    <div v-if="section.fields.mainHeading" class="heading-field">
      <SectionField
        :field="section.fields.mainHeading"
        field-key="mainHeading"
        :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>

    <!-- Paragraphs Container -->
    <div class="paragraphs-container">
      <div v-if="section.fields.paragraph1" class="paragraph-field">
        <SectionField
          :field="section.fields.paragraph1"
          field-key="paragraph1"
          :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.paragraph2" class="paragraph-field">
        <SectionField
          :field="section.fields.paragraph2"
          field-key="paragraph2"
          :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.paragraph3" class="paragraph-field">
        <SectionField
          :field="section.fields.paragraph3"
          field-key="paragraph3"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
        />
      </div>
    </div>

    <!-- CTA Button Text -->
    <div v-if="section.fields.ctaButtonText" class="cta-field">
      <SectionField
        :field="section.fields.ctaButtonText"
        field-key="ctaButtonText"
        :section-key="sectionKey"
        :section-model="sectionModel"
        :model-value="sectionModel"
        :user-role="userRole"
        :disabled="disabled"
        :is-super-admin="isSuperAdmin"
        @update-field="emitUpdate"
      />
    </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"]);

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

<style scoped>
.our-method-layout {
  background: #ffffff;
  padding: 4px;
}

.heading-field {
  margin-bottom: 24px;
  width: 100%;
}

.paragraphs-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.paragraph-field {
  width: 100%;
}

.cta-field {
  width: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

@media (max-width: 768px) {
  .our-method-layout {
    padding: 4px;
  }

  .heading-field {
    margin-bottom: 16px;
  }

  .paragraphs-container {
    gap: 12px;
    margin-bottom: 16px;
  }
}
</style>
