<script setup lang="ts">
function goToLogin(): void {
  window.location.href = 'https://inkpod.vip/user/login';
}
</script>

<template>
  <section class="hero w-full bg-inkreach-homepage-1 flex flex-col items-center gap-6 lg:gap-10 p-6 lg:p-10 relative overflow-hidden">
    <img
      src="/水洗T恤.png"
      alt=""
      class="hidden lg:block absolute left-[10%] top-2/6 -translate-y-1/2"
    />
    <img
      src="/帆布袋.png"
      alt=""
      class="hidden lg:block absolute right-[10%] top-1/4 -translate-y-2/3"
    />

    <div class="hero-copy flex flex-col items-center lg:items-start gap-3 mt-4 lg:mt-0">
      <div class="hero-title text-3xl md:text-5xl font-extrabold text-center lg:text-left">
        一站定制 链<span class="hero-gradient-text">通全球</span>
      </div>
      <p class="hero-subtitle font-thin text-xl md:text-2xl text-center lg:text-left">从定制设计至生产发货如此简单</p>
    </div>

    <div class="selling-points flex items-center gap-3 text-base lg:text-xl">
      <span>0库存</span>
      <span class="selling-point-separator" aria-hidden="true">|</span>
      <span>0关税</span>
      <span class="selling-point-separator" aria-hidden="true">|</span>
      <span>1件起订</span>
    </div>

    <div class="relative">
      <button
        type="button"
        @click="goToLogin"
        class="text-lg lg:text-xl text-white px-10 lg:px-14 py-3 lg:py-4 rounded-lg hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 pulse-animation bg-primary relative z-10"
      >
        免费试用
      </button>
      <img
        src="/鸭舌帽.png"
        alt=""
        class="hidden lg:block absolute left-full -ml-9 top-1/2 -translate-y-1/2"
      />
    </div>

    <img
      src="/主视觉.png"
      alt="InkReach 全球 POD 定制商品"
      width="800"
      height="400"
      class="hero-visual"
    />
  </section>
</template>

<style scoped>
@media (min-width: 1024px) {
  .hero { height: auto; min-height: 0; margin-top: 80px; padding-top: 52px; padding-bottom: 32px; gap: 18px; }
  .hero-copy { align-items: flex-start; }
  .hero-title { font-size: 80px; line-height: 1.25; }
  .hero-subtitle { font-size: 48px; line-height: 1.4; }
  .hero-visual { flex: 0 0 auto; width: min(100%, 800px); height: auto; object-fit: contain; }
}

.hero-visual { width: min(100%, 800px); height: auto; object-fit: contain; }
.hero-gradient-text {
  display: inline-block;
  background: linear-gradient(90deg, #111827 0%, #111827 28%, #ff6800 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.selling-point-separator { color: #9ca3af; }
</style>
