<script setup>
import ProfileSectionHeader from './ProfileSectionHeader.vue'
import companyCenter from '../static/companycenter.png'
import companyIdea from '../static/companyidea.png'
import companyCulture from '../static/companyculture.png'
import { profileIntro, profilePhilosophy, profileCulture } from '../data/site'
</script>

<template>
  <section class="section section-profile" id="profile">
    <div class="container">
      <ProfileSectionHeader />
      <div class="profile-grid">
        <div
          class="profile-main"
          :style="{ backgroundImage: `url(${companyCenter})` }"
        >
          <div class="profile-main-text">
            <h3>公司简介</h3>
            <p>{{ profileIntro }}</p>
          </div>
        </div>
        <div class="profile-side">
          <div
            class="profile-idea"
            :style="{ backgroundImage: `url(${companyIdea})` }"
          >
            <div class="profile-idea-text">
              <h3>企业理念</h3>
              <p>{{ profilePhilosophy }}</p>
            </div>
          </div>
          <div
            class="profile-culture-block"
            :style="{ backgroundImage: `url(${companyCulture})` }"
          >
            <div class="profile-culture-text">
              <h3>企业文化</h3>
              <p>{{ profileCulture }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
