<template>
  <section class="page page-contact">
    <div class="content-wrapper">
      <div class="text-side">
        <h2 class="section-title">
          Customize Keyboard<br />
          AI Reply .
        </h2>
        <p class="section-desc">
          Personalize your chat keyboard and get tailored, high-EQ responses for every conversation
        </p>
      </div>
      <div class="image-side">
        <img src="/src/assets/images/four-phone.png" class="phone-img" />
      </div>
    </div>

    <img src="/src/assets/images/four-left.png" class="four-left" />
    <img src="/src/assets/images/four-right.png" class="four-right" />
    <footer class="footer">
      <p>© 2026 Key of Love. All Rights Reserved.</p>
    </footer>
  </section>
</template>

<script setup>
</script>

<style scoped lang="less">

.page-contact {
  width: 100%;
  height: 100vh;
  background: #F9F9F9;
  color: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 48px);
  max-width: @content-max;
  width: 100%;
  padding: 0 @gap-content;
}

.text-side { flex: 5; max-width: clamp(320px, 60vw, 1000px); }

.section-title {
  font-size: clamp(34px, 3.2vw, 72px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: clamp(12px, 1.2vh, 28px);
  color: #1a1a1a;
}

.section-desc {
  font-size: clamp(15px, 1.2vw, 26px);
  line-height: 1.8;
  color: #888;
  max-width: 90%;
}

.image-side {
  flex: 4;
  display: flex;
  justify-content: center;
}

.phone-img {
  height: clamp(320px, 75vh, 800px);
  width: auto;
  display: block;
}

.phone-placeholder {
  width: @phone-w-main;
  height: @phone-h-main;
  border: 2px dashed #ddd;
  border-radius: clamp(16px, 1.5vw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: @font-small;
  background: #fafafa;
}

.bottom-character {
  position: absolute;
  bottom: clamp(24px, 3vh, 60px);
  right: clamp(24px, 3vw, 80px);
}

.character-placeholder {
  width: clamp(80px, 8vw, 180px);
  height: clamp(90px, 9.5vw, 210px);
  border: 2px dashed #ddd;
  border-radius: clamp(10px, 1vw, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: @font-small;
  background: #fafafa;
}

.four-left {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(120px, 10vw, 380px);
  height: auto;
  pointer-events: none;
}

.four-right {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(120px, 10vw, 380px);
  height: auto;
  pointer-events: none;
}

.footer {
  position: absolute;
  bottom: clamp(10px, 1.2vh, 24px);
  left: 0;
  width: 100%;
  text-align: center;
  p {
    font-size: @font-small;
    color: #ccc;
  }
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
    gap: 32px;
    padding: 0 24px;
  }
  .section-title { text-align: center; }
  .section-desc { text-align: center; }
  .phone-img {
    height: clamp(220px, 38vh, 420px);
    width: auto;
    display: block;
  }
  .bottom-character { right: 16px; bottom: 40px; }
  .character-placeholder { width: 70px; height: 82px; }
  .four-left,
  .four-right {
    width: clamp(70px, 20vw, 140px);
  }
}
</style>
