<template>
  <section class="page page-contact">
    <div class="content-wrapper">
      <div class="text-side">
        <h2 class="section-title anim-item">
          Customize Keyboard<br />
          AI Reply .
        </h2>
        <p class="section-desc anim-item">
          Personalize your chat keyboard and get tailored, high-EQ responses for every conversation
        </p>
        <div class="download-btns anim-item">
          <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="store-btn-img" /></a>
          <a :href="APPLE_DOWNLOAD_URL"><img src="/src/assets/images/appStore.png" class="store-btn-img" /></a>
        </div>
      </div>
      <div class="image-side">
        <img src="/src/assets/images/four-phone.png" class="phone-img anim-item" />
      </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>
import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLinks'
</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%;
  margin-bottom: clamp(14px, 2.2vh, 32px);
}

.download-btns {
  display: flex;
  gap: clamp(10px, 2vw, 30px);
  align-items: center;
}

.store-btn-img {
  height: clamp(36px, 6.2vh, 110px);
  width: auto;
  display: block;
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-2px);
  }
}

.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 (min-width: 1921px) {
  .content-wrapper {
    max-width: min(1600px, 86vw);
    width: min(1600px, 86vw);
    gap: clamp(28px, 2.4vw, 56px);
    justify-content: center;
    padding: 0 clamp(40px, 3vw, 86px);
  }

  .text-side {
    flex: 0 1 min(42vw, 760px);
    max-width: min(42vw, 760px);
  }

  .section-title {
    font-size: clamp(48px, 2.7vw, 78px);
    line-height: 1.22;
    max-width: 16ch;
    margin-bottom: clamp(18px, 2vh, 34px);
  }

  .section-desc {
    max-width: 34ch;
    line-height: 1.9;
    font-size: clamp(18px, 1.05vw, 24px);
  }

  .download-btns {
    gap: clamp(12px, 1.4vw, 24px);
  }

  .store-btn-img {
    height: clamp(44px, 5.8vh, 92px);
  }

  .image-side {
    flex: 0 1 min(30vw, 520px);
    width: min(30vw, 520px);
    justify-content: center;
  }

  .phone-img {
    height: min(78vh, 860px);
  }
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
    gap: 32px;
    padding: 0 24px;
  }
  .section-title { text-align: center; }
  .section-desc { text-align: center; }
  .text-side {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .download-btns {
    justify-content: center;
  }
  .store-btn-img {
    height: clamp(34px, 6vh, 56px);
  }
  .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>
