<template>
  <section class="section section--gray">
    <div class="container">
      <CommonSectionTitle :title="`${subsidiaries.length}家集团企业`" subtitle="各司其职，共同为您的旅行保驾护航" />

      <!-- 集团母公司 -->
      <div v-if="parent" class="sub-parent">
        <span class="sub-parent-tag">集团母公司</span>
        <h3 class="sub-parent-name">{{ parent.name }}</h3>
        <p class="sub-parent-role">{{ parent.role }}</p>
        <p v-if="parent.established" class="sub-parent-date">成立于{{ formatDate(parent.established) }}</p>
      </div>

      <!-- 子公司网格 -->
      <div class="sub-grid">
        <div v-for="sub in children" :key="sub.name" class="sub-item">
          <h3 class="sub-name">{{ sub.name }}</h3>
          <p class="sub-role">{{ sub.role }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const props = defineProps({ subsidiaries: { type: Array, required: true } })

const parent = props.subsidiaries.find(s => s.role.includes('集团母公司') || s.role.includes('母公司'))
const children = props.subsidiaries.filter(s => s !== parent)

function formatDate(dateStr) {
  const [year, month] = dateStr.split('-')
  return `${year}年${parseInt(month)}月`
}
</script>

<style lang="less" scoped>
.sub-parent {
  max-width: 900px;
  margin: 0 auto @space-xl;
  padding: @space-xl @space-2xl;
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.sub-parent-tag {
  display: inline-block;
  font-size: @font-size-xs;
  color: @color-bg-white;
  background: @color-primary;
  padding: 2px 12px;
  border-radius: 20px;
  margin-bottom: @space-sm;
}

.sub-parent-name {
  font-size: @font-size-lg;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
  margin-bottom: @space-xs;
}

.sub-parent-role {
  font-size: @font-size-base;
  color: @color-text-secondary;
  margin-bottom: @space-xs;
}

.sub-parent-date {
  font-size: @font-size-xs;
  color: @color-text-muted;
  margin: 0;
}

.sub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: @space-md;

  .respond-md({ grid-template-columns: repeat(2, 1fr); });
  .respond-lg({ grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; });
}

.sub-item {
  padding: @space-lg;
  background: @color-bg-white;
  border-radius: @border-radius-md;
  border: 1px solid @color-border;
}

.sub-name {
  font-size: @font-size-base;
  color: @color-primary;
  margin-bottom: @space-xs;
}

.sub-role {
  font-size: @font-size-sm;
  color: @color-text-secondary;
}
</style>
