<template>
  <div
    class="relative min-h-screen overflow-hidden bg-black bg-cover bg-center bg-no-repeat pb-[calc(4rem+env(safe-area-inset-bottom))] font-sans text-white md:flex md:flex-col"
  >
    <AppHeader />

    <!-- Main Content Container -->
    <div class="container mx-auto flex max-w-[1220px] flex-col">
      <main class="pt-10">
        <!--    module0    -->
        <div class="home-hero mb-[80px] flex flex-col justify-between md:flex-row">
          <div
            class="flex w-full items-center justify-between gap-4 md:w-auto md:flex-col md:justify-start md:gap-0"
          >
            <div class="min-w-0 md:mb-[20px] md:ml-[17px]">
              <h2 class="mb-2 text-2xl font-black md:text-8xl">
                <Logo class="h-[34px] md:h-[43px]" />
              </h2>
              <p
                class="font-600 text-[clamp(1.25rem,7vw,1.875rem)] leading-tight md:text-3xl md:leading-9"
              >
                网在我在, 网快我快
              </p>
            </div>
            <img
              src="./Group%20133.png"
              alt="Hi快VPN 手机应用"
              class="home-hero__product w-auto shrink-0"
            />
          </div>
          <!-- video           -->
          <button
            type="button"
            aria-label="播放介绍视频"
            class="block aspect-video w-full max-w-[800px] flex-1 cursor-pointer overflow-hidden rounded-[clamp(1.25rem,5vw,2.5rem)] p-0 text-left transition duration-300 hover:scale-[1.02]"
            @click="openVideoModal"
          >
            <img
              src="@/pages/Home/modules1/Group-236.png"
              class="h-full w-full object-cover object-center"
              alt="Video Cover"
            />
          </button>
        </div>
        <!-- modules1       -->
        <div class="mb-[80px] w-full">
          <img
            src="./modules1/module2-mobile.png"
            alt="高能合伙人权益"
            class="mx-auto h-auto w-full md:hidden"
            loading="lazy"
            decoding="async"
          />
          <img
            src="./modules1/Group%20235.png"
            alt="高能合伙人权益"
            class="mx-auto hidden h-auto w-full max-w-[1024px] md:block"
            loading="lazy"
            decoding="async"
          />
        </div>
        <!-- modules2       -->
        <div
          class="mb-[80px] w-full rounded-[40px] bg-[#ADFF5B] px-[clamp(1rem,5vw,2rem)] pt-8 pb-2 text-black md:p-8 md:pb-2"
        >
          <div
            class="text-left text-[clamp(1.75rem,9.6vw,2.25rem)] leading-tight font-black md:text-center md:text-4xl md:leading-10"
          >
            “超强产品力，<br class="md:hidden" />全面秒杀同级app”
          </div>
          <div class="mt-2 text-left md:text-center">
            为高能合伙人提供强力的的产品背书，每个点拿出去都能打。
          </div>
          <div class="el-style-scrollbar mt-8 flex gap-2 overflow-x-auto pb-4">
            <img
              :src="image"
              alt=""
              v-for="(image, index) in modules2Image"
              class="h-[432px] w-[200px] shrink-0 rounded-[30px] md:h-[600px] md:w-[277.5px]"
              :key="index"
            />
          </div>
        </div>
        <!-- modules3 + modules4 -->
        <section class="home-showcase text-black" aria-labelledby="home-showcase-description">
          <div class="home-showcase__heading text-center">
            <Group215Icon class="home-showcase__title mx-auto h-auto w-full" aria-hidden="true" />
          </div>
          <p id="home-showcase-description" class="home-showcase__description text-center">
            给您的客户提供专业视角的建议
          </p>
          <div class="home-showcase__content flex justify-center">
            <Carousel
              class="home-showcase__carousel relative w-full"
              :opts="{ loop: true }"
              aria-label="产品优势展示"
            >
              <div class="home-showcase__viewport aspect-square w-full overflow-hidden">
                <CarouselContent>
                  <CarouselItem v-for="(img, index) in modules4Images" :key="index">
                    <img
                      :src="img"
                      :alt="`产品优势展示 ${index + 1}`"
                      class="aspect-square h-auto w-full object-cover select-none"
                      draggable="false"
                      loading="lazy"
                    />
                  </CarouselItem>
                </CarouselContent>
              </div>
              <CarouselPrevious
                class="home-showcase__nav home-showcase__nav--previous"
                aria-label="上一张"
              />
              <CarouselNext
                class="home-showcase__nav home-showcase__nav--next"
                aria-label="下一张"
              />
            </Carousel>
          </div>
        </section>
      </main>
    </div>
    <div class="container flex flex-col items-center justify-center">
      <div class="mb-1 h-[20px] w-[352px] md:ml-[17px]">
        <img src="./image-1.png" alt="image" />
      </div>
      <div class="text-center text-[10px] leading-[14px] font-[300] md:ml-[17px] md:text-left">
        <span class="font-[600]">Hi快VPN™</span> &copy; All rights reserved.<br />
        <router-link to="/terms" class="underline">Terms of Service</router-link>
        <router-link to="/privacy" class="ml-2 underline">Privacy Policy</router-link>
      </div>
    </div>
    <!-- Video Modal -->
    <Dialog
      v-model:open="videoModalVisible"
      @update:open="(val) => !val && handleVideoModalClose()"
    >
      <DialogContent
        class="home-video-dialog overflow-hidden border-none bg-black/90 p-0 shadow-2xl"
      >
        <div class="aspect-video w-full overflow-hidden rounded-[inherit] bg-black">
          <video
            ref="videoRef"
            src="/fast-video.MP4"
            class="block h-full w-full object-contain"
            controls
            autoplay
          ></video>
        </div>
      </DialogContent>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AppHeader from '@/components/layout/AppHeader.vue'
import Logo from './logo.svg?component'
import Group215Icon from './modules3/Group 215.svg?component'
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import Frame98 from './modules2/Frame 98.png'
import Frame99 from './modules2/Frame 99.png'
import Frame100 from './modules2/Frame 100.png'
import Frame101 from './modules2/Frame 101.png'
import Frame104 from './modules2/Frame 104.png'
import Frame105 from './modules2/Frame 105.png'

import image1 from './modules4/image1.png'
import image2 from './modules4/image2.png'
import image3 from './modules4/image3.png'
import image4 from './modules4/image4.png'
import image5 from './modules4/image5.png'
import image6 from './modules4/image6.png'

const modules2Image = [Frame98, Frame99, Frame100, Frame101, Frame104, Frame105]
const modules4Images = [image1, image2, image3, image4, image5, image6]

const videoModalVisible = ref(false)
const videoRef = ref<HTMLVideoElement | null>(null)

const openVideoModal = () => {
  videoModalVisible.value = true
}
// console.log('11')
const handleVideoModalClose = () => {
  if (videoRef.value) {
    videoRef.value.pause()
    videoRef.value.currentTime = 0
  }
}
</script>

<style scoped>
.home-hero {
  gap: clamp(1.5rem, 6vw, 2.5rem);
}

.home-hero__product {
  block-size: clamp(4rem, 18.133vw, 4.25rem);
}

.home-video-dialog {
  inline-size: min(
    calc(100vw - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right)),
    calc((100dvh - 4rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)
  ) !important;
  max-inline-size: none !important;
  border-radius: clamp(0.75rem, 4vw, 1rem);
}

:deep(.home-video-dialog [data-slot='dialog-close']) {
  top: clamp(0.375rem, 2vw, 0.75rem);
  right: clamp(0.375rem, 2vw, 0.75rem);
  z-index: 10;
  display: grid;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  place-items: center;
  border-radius: 999px;
  color: white;
  background: rgb(0 0 0 / 55%);
}

:deep(.home-video-dialog [data-slot='dialog-close'] svg) {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

@media (width >= 48rem) {
  .home-hero {
    gap: clamp(2rem, 4vw, 4rem);
  }

  .home-hero__product {
    inline-size: 11.375rem;
    block-size: 17.9375rem;
    margin-block-start: 3.25rem;
  }

  .home-video-dialog {
    inline-size: min(
      60vw,
      calc((100dvh - 4rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)
    ) !important;
  }
}

.home-showcase {
  inline-size: min(100%, calc(100vw - 2.25rem));
  margin-block-end: clamp(2rem, 5vw, 4rem);
  padding-block-end: clamp(0.5rem, 1.5vw, 1rem);
  border-radius: clamp(1.25rem, 4vw, 2.5rem);
}

.home-showcase__heading {
  padding-inline: clamp(0.25rem, 2vw, 1rem);
}

.home-showcase__title {
  max-inline-size: min(20.625rem, 100%);
}

.home-showcase__description {
  margin-block-start: clamp(0.5rem, 1.5vw, 0.875rem);
  padding-inline: clamp(0.75rem, 3vw, 1.5rem);
  color: #999;
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  line-height: 1.6;
}

.home-showcase__content {
  margin-block-start: clamp(1rem, 3vw, 1.75rem);
}

.home-showcase__carousel {
  max-inline-size: min(43.75rem, 100%, 85dvh);
  touch-action: pan-y pinch-zoom;
}

.home-showcase__viewport {
  border-radius: clamp(1.25rem, 5vw, 2.5rem);
}

.home-showcase__nav {
  display: grid;
  inline-size: clamp(2.75rem, 10vw, 4rem);
  block-size: clamp(2.75rem, 10vw, 4rem);
  place-items: center;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 999px;
  background: rgb(0 0 0 / 48%);
  backdrop-filter: blur(0.5rem);
  transition:
    background-color 180ms ease,
    opacity 180ms ease;
}

.home-showcase__nav:hover,
.home-showcase__nav:focus-visible {
  background: rgb(0 0 0 / 68%);
}

.home-showcase__nav:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.home-showcase__nav--previous {
  left: clamp(0.5rem, 2.5vw, 1rem);
}

.home-showcase__nav--next {
  right: clamp(0.5rem, 2.5vw, 1rem);
}

.home-showcase__nav :deep(svg) {
  inline-size: auto;
  block-size: clamp(1.75rem, 7vw, 2.5rem);
  max-inline-size: 100%;
}

@media (width >= 64rem) {
  .home-showcase__nav {
    border-color: transparent;
    background: transparent;
    backdrop-filter: none;
  }

  .home-showcase__nav--previous {
    left: clamp(-6.25rem, -7vw, -4rem);
  }

  .home-showcase__nav--next {
    right: clamp(-6.25rem, -7vw, -4rem);
  }

  .home-showcase__nav :deep(svg) {
    inline-size: auto;
    block-size: clamp(4rem, 8vw, 7.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-showcase__nav {
    transition: none;
  }
}
</style>
