<template>
    <div class="features-section">
        <h2 class="section-title">核心能力</h2>
        <p class="section-subtitle">为校园乐跑场景打造的全流程自助服务</p>
        <div
            v-for="(card, index) in cards"
            :key="index"
            :ref="el => cardRefs[index] = el"
            class="card"
            :class="[{ 'in-view': inView[index] }, { reverse: card.reverse }]"
        >
            <div class="content">
                <div class="title">
                    <img :src="card.icon" alt="" />
                    {{ card.title }}
                </div>
                <div class="dec">{{ card.dec }}</div>
            </div>
            <div class="img">
                <img :src="card.img" alt="" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const cards = [
    {
        title: '全自动乐跑体验',
        icon: new URL('@/assets/img/homePage/icons/visualization.svg', import.meta.url).href,
        dec: '自动上传跑步数据，无需手动操作，轻松完成乐跑任务',
        img: new URL('https://lepao-cloud.xxoo365.top/view.php/f9192f9d310b16a7e8e4ef2f71ac8629.png').href,
        reverse: false
    },
    {
        title: '智能成绩上传系统',
        icon: new URL('@/assets/img/homePage/icons/ai.svg', import.meta.url).href,
        dec: '支持夜间上传与异常修复，忘跑也能及时补救，成绩无忧',
        img: new URL('https://lepao-cloud.xxoo365.top/view.php/6cf4d3d8f5d9e6b41c525541c8949329.png').href,
        reverse: true
    },
    {
        title: '自由跑区与贴心服务',
        icon: new URL('@/assets/img/homePage/icons/quality.svg', import.meta.url).href,
        dec: '支持自定义跑步区域与乐跑时段，体验便捷又人性化',
        img: new URL('https://lepao-cloud.xxoo365.top/view.php/3132165c9476e659c710114f963e6814.png').href,
        reverse: false
    }
]

const cardRefs = ref([])
const inView = ref(cards.map(() => false))

let observers = []

onMounted(() => {
    cardRefs.value.forEach((el, index) => {
        const observer = new IntersectionObserver(
            ([entry]) => {
                if (entry.isIntersecting) {
                    inView.value[index] = true
                    observer.disconnect()
                }
            },
            { threshold: 0.4 }
        )
        if (el) observer.observe(el)
        observers.push(observer)
    })
})

onUnmounted(() => {
    observers.forEach(observer => observer.disconnect())
})
</script>

<style lang="less" scoped>
@import '../theme.less';
@import '@/styles/store-theme.less';

.features-section {
    position: relative;
    padding: clamp(52px, 9vh, 88px) @store-page-padding-x clamp(64px, 9vh, 108px);
    display: flex;
    gap: clamp(18px, 3.6vh, 34px);
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.section-title {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: @home-primary;
    font-family: Alimama ShuHeiTi, -apple-system, BlinkMacSystemFont, sans-serif;
    text-align: center;
}

.section-subtitle {
    margin: -4px 0 20px;
    font-size: clamp(0.95rem, 2.3vw, 1.08rem);
    color: @home-text-muted;
    text-align: center;
    max-width: 38rem;
}

.card {
    width: min(1160px, 100%);
    display: flex;
    gap: clamp(20px, 3vw, 44px);
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, fade(#fff, 95%) 0%, fade(#f2fbf6, 88%) 100%);
    border: 1px solid fade(@home-card-border, 92%);
    border-radius: 22px;
    box-shadow: 0 16px 40px fade(@home-primary, 9%);
    padding: clamp(18px, 2.4vw, 34px);
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;

    &.in-view {
        opacity: 1;
        transform: translateY(0);
    }

    &.reverse {
        flex-direction: row-reverse;
    }

    .content {
        flex: 1;
        max-width: 500px;
        min-width: 0;

        .title {
            font-weight: 700;
            font-size: clamp(1.24rem, 3.2vw, 1.7rem);
            color: @home-primary;
            font-family: Alimama ShuHeiTi, -apple-system, BlinkMacSystemFont, sans-serif;
            display: flex;
            align-items: center;
            gap: 10px;
            line-height: 1.35;

            img {
                width: 34px;
                height: 34px;
            }
        }

        .dec {
            margin-top: 16px;
            font-size: clamp(0.94rem, 2.2vw, 1.02rem);
            line-height: 1.75;
            color: @home-text-muted;
            max-width: 34ch;
        }
    }

    .img {
        padding: clamp(10px, 1.4vw, 16px);
        border-radius: 18px;
        background: fade(#fff, 85%);
        border: 1px solid fade(@home-card-border, 86%);

        img {
            max-width: min(420px, 38vw);
            max-height: 280px;
            user-select: none;
            object-fit: contain;
        }
    }
}

@media (max-width: @app-breakpoint-lg) {
    .card,
    .card.reverse {
        flex-direction: column;
        text-align: center;
    }

    .card .content .title {
        justify-content: center;
    }

    .card .content .dec {
        margin-left: auto;
        margin-right: auto;
        max-width: 32ch;
    }

    .card .img img {
        max-width: min(100%, 340px);
    }
}
</style>
