<template>
  <div class="award-page">
    <div class="banner">
      <div class="submit-btn flex flex-center" @click="handleSubmitApplication">
        <div>Submit your Application</div>
        <img src="@/assets/images/award/arrow_right.png" alt="" class="arrow" />
        <div class="ddl">Application Deadline:15th March 2026</div>
      </div>
    </div>
    <div class="blocks-list flex">
      <div
        class="block-item flex flex-col flex-center"
        v-for="item in blocksList"
        :key="item.number"
      >
        <div class="number">{{ item.number }}</div>
        <div class="label">{{ item.label }}</div>
        <div class="line"></div>
      </div>
      <div class="block-item flex flex-col flex-center">
        <div class="number">
          <img src="@/assets/images/award/∞.png" alt="" class="infinity" />
        </div>
        <div class="label">Possibilites</div>
      </div>
    </div>
    <div class="bloom container flex flex-col align-center">
      <div class="title">Bloom Your Creativity</div>
      <img src="@/assets/images/award/bloom_logo.png" class="logo" />
      <div class="season">Theme of 2026</div>
      <div class="desc">
        Where imagination meets innovation, creativity blooms. This theme celebrates AI as
        a catalyst for fashion design, allowing your vision to flourish beyond traditional
        boundaries. Let your ideas blossom into extraordinary designs that merge human
        artistry with artificial intelligence.
      </div>
    </div>
    <div class="design-container container">
      <div class="design-title limit">Design Without Borders</div>
      <div class="limit">
        <img src="@/assets/images/award/bloom_logo.png" class="logo" />
      </div>
      <div class="global limit">Global Opportunity</div>
      <div class="desc">
        Open to visionary designers across the globe. From Seoul to Singapore, New York to
        Shanghai, we're seeking the next generation of fashion innovators who dare to
        reimagine the future of design.
      </div>
    </div>
    <div class="timeline-container container flex flex-col align-center">
      <div class="timeline-title">Competition Timeline</div>
      <img src="@/assets/images/award/bloom_logo.png" alt="" class="logo" />
      <div class="desc">Shaping the Future</div>
      <div class="timeline-point">
        <img src="@/assets/images/award/timeline_line.png" class="line-bg" />
        <div class="labels-row flex align-center">
          <div
            class="item-label flex flex-col"
            v-for="item in points"
            :key="'label-' + item.time"
          >
            <div class="main-label">{{ item.label }}</div>
            <div class="sub-label" v-if="item.subLabel">{{ item.subLabel }}</div>
          </div>
        </div>
        <!-- Icons row -->
        <div class="icons-row flex align-center">
          <div class="timeline-line"></div>
          <img
            src="@/assets/images/award/point.png"
            class="point-icon"
            v-for="item in points"
            :key="'icon-' + item.time"
          />
        </div>

        <!-- Times row -->
        <div class="times-row flex align-center">
          <div class="item-time" v-for="item in points" :key="'time-' + item.time">
            {{ item.time }}
          </div>
        </div>
        <!-- Descriptions row -->
        <div class="descs-row flex align-center">
          <div
            class="item-desc flex justify-center"
            v-for="item in points"
            :key="'desc-' + item.time"
          >
            <div class="txt">
              {{ item.desc }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="prizes-container container flex align-center">
      <div class="left flex flex-col flex-center">
        <div class="title">Award & Prizes</div>
        <img src="@/assets/images/award/bloom_logo.png" class="logo" />
        <div class="desc">Recongnition</div>
      </div>
      <div class="right">
        <div
          class="prize-item flex flex-col flex-center"
          v-for="item in prizes"
          :key="item.name"
        >
          <div class="prize-money">{{ item.money }}</div>
          <div class="prize-name">{{ item.name }}</div>
          <div class="prize-desc flex flex-col flex-center">
            <div class="desc-item" v-for="el in item.desc">{{ el }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="apply-container container flex flex-col">
      <div class="title">How to Apply</div>
      <div class="sub-title">Requirments</div>
      <div class="requirments-list flex">
        <div class="left flex flex-col space-between">
          <div class="item-box" v-for="item in leftRequirment" :key="item.type">
            <div class="item-header flex align-center">
              <img src="@/assets/images/award/bloom_logo.png" class="logo" />
              <div class="item-title">{{ item.type }}</div>
            </div>
            <div class="context" v-for="el in item.desc">{{ el }}</div>
          </div>
        </div>
        <div class="right">
          <div class="item-box">
            <div class="item-box">
              <div class="item-header flex align-center">
                <img src="@/assets/images/award/bloom_logo.png" class="logo" />
                <div class="item-title">{{ rightRequirment.type }}</div>
              </div>
              <div class="context" v-for="el in rightRequirment.desc">{{ el }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="selection-container container flex flex-col align-center">
      <div class="title">Selection Criteria</div>
      <img src="@/assets/images/award/bloom_logo.png" class="logo" />
      <div class="sub-title">Evaluation</div>
      <div class="criteria-list flex">
        <div
          class="item flex flex-col align-center"
          v-for="item in criteriaList"
          :key="item.name"
        >
          <img :src="item.icon" class="icon" :style="item.style" />
          <div class="name">{{ item.name }}</div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
    <div class="judges-container flex flex-col align-center">
      <div class="title">Panel of Judges</div>
      <img src="@/assets/images/award/bloom_logo.png" class="logo" />
      <div class="sub-title">Expertise</div>
      <div class="judgement-list">
        <div
          class="judgement-item flex flex-col align-center"
          v-for="item in judgements"
          :key="item.name"
        >
          <img :src="item.picture" class="picture" />
          <div class="name">{{ item.name }}</div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import criteria1 from '@/assets/images/award/criteria_1.png'
import criteria2 from '@/assets/images/award/criteria_2.png'
import criteria3 from '@/assets/images/award/criteria_3.png'
import criteria4 from '@/assets/images/award/criteria_4.png'

import jae from '@/assets/images/award/jae.png'
import diego from '@/assets/images/award/diego.png'
import gregory from '@/assets/images/award/gregory.png'
import vincenzo from '@/assets/images/award/vincenzo.png'
import tim from '@/assets/images/award/tim.png'
import desmond from '@/assets/images/award/desmond.png'

const router = useRouter()

const handleSubmitApplication = () => {
  router.push('/award/apply')
}

const blocksList = ref([
  {
    number: '100',
    label: 'Semi-finalists'
  },
  {
    number: '20',
    label: 'Finalists'
  },
  {
    number: '3',
    label: 'Winners'
  }
])

const points = ref([
  {
    label: 'Select Top 20',
    time: 'May',
    desc: 'Submit your design concept, mood board, and initial sketch.'
  },
  {
    label: `Top 20`,
    subLabel: 'Collections  Finalize',
    time: 'June',
    desc: 'Complete collections, physical garments, and AiDA process videos due.'
  },
  {
    label: `Top 3`,
    subLabel: 'Finalists Select',
    time: 'August',
    desc: 'Complete collections, physical garments, and AiDA process videos due.'
  },
  {
    label: 'Award  Ceremony',
    time: 'November',
    desc: 'Winners revealed with media coverage and live showcase.'
  }
])

const prizes = ref([
  {
    money: '$3000',
    name: 'First Runner-Up',
    desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
  },
  {
    money: '$2000',
    name: 'Second Runner-Up',
    desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
  },
  {
    money: '$5000',
    name: 'Grand Prize',
    desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
  },
  {
    money: 'Certification',
    name: 'Finalists',
    desc: ['Award Ceritificate', 'Global Media Exposure']
  }
])

const leftRequirment = ref([
  {
    type: 'Video',
    desc: ['The process of doing design']
  },
  {
    type: 'Design',
    desc: [
      'Structure: design title, moodboard and elaboration (how will you use AiDA to design)',
      'Design sketch: Maximum 4 outfit design with proposed materials'
    ]
  }
])
const rightRequirment = ref({
  type: 'Submission Format',
  desc: [
    'Naming as “AiDA global award 2026_applicantname”',
    'Mp4\n(1080x1920pixels/20mb within 1min)',
    'Single PDF file\n(within 15 pages, maximum 20mb)',
    'English or native language\nwith English translation'
  ]
})

const criteriaList = ref([
  {
    icon: criteria1,
    name: 'Originality',
    desc: 'Unique perspective and innovative approach to fashion design',
    style: { width: '13rem', height: '17rem' }
  },
  {
    icon: criteria2,
    name: 'Creativity',
    desc: 'Artistic vision and exceptional design excellence',
    style: { width: '16rem', height: '18rem' }
  },
  {
    icon: criteria3,
    name: 'AiDA Integration',
    desc: 'Effective application of AI design tools and functions',
    style: { width: '16rem', height: '18rem' }
  },
  {
    icon: criteria4,
    name: 'Execution',
    desc: 'Quality of presentation and technical craftsmanship',
    style: { width: '18.8rem', height: '18rem' }
  }
])

const judgements = [
  {
    picture: jae,
    name: 'Jae Hyuk Lim',
    desc: 'Code-create\nKorea Branch Director\nBesfxxk creative director'
  },
  {
    picture: diego,
    name: 'Diego Dultzin Lacoste',
    desc: 'Co-founder & Chief Father\nOfficer of OnTheList\n(Hong Kong)'
  },
  {
    picture: gregory,
    name: 'Gregory de la Hogue Moran',
    desc: 'Senior Designer at\nGabriela Heasrst (Italy)'
  },
  {
    picture: vincenzo,
    name: 'Vincenzo La Torre',
    desc: 'Cheif Editor of SCMP Style\n(Hong Kong)'
  },
  {
    picture: tim,
    name: 'Tim Lim',
    desc: 'Group Fashion Direction of\n Modern Media Group\n(Shanghai)'
  },
  {
    picture: desmond,
    name: 'Desmond Lim',
    desc: 'Cheif Editor of Vogue\n(Singapore)'
  }
]
</script>

<style lang="less" scoped>

.container {
  height: 97rem;
}
// .header {
//   height: 8rem;
//   background-color: #232323;
//   padding-left: 21.5rem;
//   padding-right: 8.6rem;
//   .header-left {
//     .logo {
//       width: 13rem;
//       height: 5rem;
//     }
//   }
//   .header-right {
//     column-gap: 1rem;
//     .text {
//       font-size: 1.6rem;
//       color: #fff;
//     }
//     .arrow {
//       width: 2.4rem;
//       height: 2.4rem;
//     }
//   }
// }
.logo {
  width: 2.4rem;
  height: 2.4rem;
}
.banner {
  height: 108rem;
  background: url('@/assets/images/award/banner.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  .submit-btn {
    width: 41rem;
    height: 6.394rem;
    line-height: 6.394rem;
    text-align: center;
    border-radius: 3.2rem;
    box-shadow: inset 0 0 1119px 0 rgba(255, 255, 255, 0.3),
      inset -0.8px -2.4px 1.6px 0.4px rgba(255, 255, 255, 0.1),
      inset 0.8px 2.4px 1.6px 0 rgba(255, 255, 255, 0.3);
    color: #fff;
    font-family: 'PoppinsBold';
    font-weight: 600;
    font-size: 2.4rem;
    column-gap: 3.2rem;
    position: absolute;
    top: 23.88rem;
    left: 51rem;
    backdrop-filter: blur(5px);
    cursor: pointer;
    .arrow {
      width: 3.83rem;
      height: 3.83rem;
    }
    .ddl {
      position: absolute;
      bottom: -4rem;
      left: 0;
      text-align: center;
      width: 41rem;
      font-family: 'Arial';
      font-weight: 400;
      font-size: 2rem;
      line-height: 2.2rem;
    }
  }
}
.blocks-list {
  height: 31.4rem;
  background: linear-gradient(98.55deg, #232323 18.22%, #898989 101.1%);

  .block-item {
    flex: 1;
    height: 100%;
    color: #fff;
    position: relative;
    .number {
      font-size: 6rem;
      font-family: 'Poppins';
    }
    .label {
      font-size: 2.8rem;
      font-family: 'Arial';
      letter-spacing: 0.05em;
    }
    .line {
      position: absolute;
      bottom: 50%;
      right: 0;
      transform: translate(0, 50%);
      width: 0.1rem;
      height: 27.4rem;
      background-color: #8d8d8d;
    }
  }
}
.bloom {
  padding-top: 12.8rem;
  font-family: 'Poppins';
  background: url('@/assets/images/award/bloom_bg.png') no-repeat;
  background-size: 100% 100%;
  .title {
    font-size: 4rem;
    color: #232323;
    margin-bottom: 2.4rem;
  }
  .logo {
    margin-bottom: 2.2rem;
  }
  .season {
    font-size: 3rem;
    color: #c7342c;
    margin-bottom: 6.6rem;
  }
  .desc {
    font-family: 'Arial';
    font-size: 2.8rem;
    color: #585858;
    text-align: center;
    padding: 0 21.5rem;
    line-height: 4.5rem;
    margin-bottom: 12.3rem;
  }
}
.design-container {
  background: url('@/assets/images/award/design_bg.png') no-repeat;
  background-size: 100% 100%;
  padding-left: 21.5rem;
  padding-top: 16rem;
  .limit {
    width: 48.4rem;
    text-align: center;
  }
  .design-title {
    color: #fff;
    font-size: 4rem;
    font-weight: 600;
    font-family: 'Poppins';
    font-style: SemiBold;
    vertical-align: middle;
    text-transform: capitalize;
  }
  .logo {
    margin-top: 2.4rem;
    margin-bottom: 2.1rem;
  }
  .global {
    font-family: 'Poppins';
    font-size: 3rem;
    color: #f95750;
    margin-bottom: 19.8rem;
  }
  .desc {
    font-family: 'Arial';
    font-weight: 400;
    font-size: 2.8rem;
    color: #e0e0e0;
    width: 54rem;
  }
}
.timeline-container {
  background: url('@/assets/images/award/timeline_bg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding-top: 12.8rem;
  width: 100%;
  .line-bg {
    position: absolute;
    width: 148.7rem;
    height: 27.58rem;
    left: 24rem;
    bottom: 22.8rem;
    z-index: 0;
  }
  .timeline-title {
    font-family: 'PoppinsBold';
    font-weight: 600;
    font-size: 4rem;
    text-align: center;
    vertical-align: middle;
  }
  .logo {
    margin: 2.4rem 0 2.2rem 0;
  }
  .desc {
    font-family: 'Arial';
    font-size: 3rem;
    font-weight: 400;
    color: #b10000;
  }
  .timeline-point {
    flex: 1;
    width: 100%;
    margin-top: 12rem;
    padding: 0 21.2rem 0 22rem;
    position: relative;
    z-index: 2;

    .labels-row {
      position: relative;
      z-index: 2;
      margin-bottom: 8rem;
      .item-label {
        flex: 1;
        color: #232323;
        font-family: 'PoppinsBold';
        font-weight: 600;
        font-size: 2.8rem;
        text-align: center;
        white-space: pre-line;
        height: 6rem;
        justify-content: center;
      }
    }

    .icons-row {
      margin-bottom: 1.6rem;
      position: relative;
      z-index: 2;
      .point-icon {
        width: 6.4rem;
        height: 6.4rem;
        display: block;
        margin: 0 auto;
        z-index: 2;
      }
      .timeline-line {
        width: calc(100% + 22rem + 21.2rem);
        left: -22rem;
        height: 0.15rem;
        background: linear-gradient(
          90deg,
          rgba(199, 52, 44, 0) 0%,
          rgba(199, 52, 44, 0.719626) 25.96%,
          #c7342c 51.44%,
          rgba(199, 52, 44, 0.762376) 75.96%,
          rgba(199, 52, 44, 0) 100%
        );
        position: absolute;
        bottom: 50%;
        transform: translateY(-50%);
        z-index: 1;
      }
    }

    .times-row {
      margin-bottom: 6rem;
      z-index: 2;
      position: relative;
      .item-time {
        flex: 1;
        color: #b10000;
        font-family: 'Arial';
        font-weight: 400;
        font-size: 2.8rem;
        line-height: 4.5rem;
        text-align: center;
      }
    }

    .descs-row {
      .item-desc {
        flex: 1;
        .txt {
          font-family: 'Arial';
          font-weight: 400;
          font-size: 2rem;
          text-align: center;
          color: #585858;
          width: 31.2rem;
          height: 10.2rem;
        }
      }
    }
  }
}
.prizes-container {
  background: url('@/assets/images/award/prizes_bg.png') no-repeat;
  background-size: 100% 100%;
  padding: 0 21.4rem 0 33.4rem;

  .left {
    width: 36.2rem;
    row-gap: 2.3rem;
    margin-right: 27rem;
    .title {
      font-family: 'PoppinsBold';
      font-weight: 600;
      font-size: 4rem;
      text-align: center;
      color: #fff;
    }
    .desc {
      font-family: 'Poppins';
      font-weight: 400;
      font-size: 3rem;
      text-align: center;
      color: #f95750;
    }
  }
  .right {
    display: grid;
    grid-template-columns: repeat(2, 35.5rem);
    grid-template-rows: repeat(2, 32.8rem);
    gap: 4.2rem;
    .prize-item {
      width: 35.5rem;
      height: 32.8rem;
      color: #fff;
      padding: 4.5rem 0 4.8rem 0;
      justify-content: space-between;
      background: url('@/assets/images/award/first_bg.png') no-repeat;
      background-size: 100% 100%;
      &:nth-of-type(2) {
        background: url('@/assets/images/award/second_bg.png') no-repeat;
        background-size: 100% 100%;
      }
      &:nth-of-type(3) {
        background: url('@/assets/images/award/grand_bg.png') no-repeat;
        background-size: 100% 100%;
      }
      &:nth-of-type(4) {
        background: url('@/assets/images/award/certification_bg.png') no-repeat;
        background-size: 100% 100%;
      }
      .prize-money {
        font-family: 'PoppinsBold';
        font-weight: bold;
        font-size: 4rem;
      }
      .prize-name {
        font-family: 'PoppinsMedium';
        font-weight: 500;
        font-size: 2.8rem;
      }
      .prize-desc {
        color: #e0e0e0;
        font-family: 'Arial';
        font-weight: 400;
        font-size: 2rem;
        line-height: 3rem;
        height: 8.9rem;
      }
    }
  }
}
.apply-container {
  flex: 1;
  background: url('@/assets/images/award/timeline_bg.png') no-repeat;
  background-size: 100% 100%;
  padding: 12.7rem 0 16.9rem;
  .title {
    text-align: center;
    color: #232323;
    font-family: 'PoppinsBold';
    font-weight: 600;
    font-size: 4rem;
    margin-bottom: 3rem;
  }
  .sub-title {
    text-align: center;
    color: #b10000;
    font-size: 3rem;
    font-family: 'Arial';
    font-weight: 400;
  }
  .requirments-list {
    flex: 1;
    padding-left: 41.4rem;
    column-gap: 17.7rem;
    margin-top: 12rem;
    .left {
      color: #232323;
      height: 100%;
    }
    .item-box {
      .item-header {
        column-gap: 3.2rem;
        .item-title {
          color: #232323;
          font-family: 'PoppinsBold';
          font-weight: 600;
          font-size: 2.8rem;
        }
      }
      .context {
        margin-top: 4rem;
        width: 46.8rem;
        color: #585858;
        font-family: 'Arial';
        font-weight: 400;
        line-height: 3rem;
        font-size: 2.4rem;
        padding-left: 5.6rem;
        white-space: pre-line;
      }
    }
  }
}
.selection-container {
  background: url('@/assets/images/award/selection_bg.png') no-repeat;
  background-size: 100% 100%;
  padding-top: 9.3rem;
  .title {
    color: #fff;
    font-family: 'PoppinsBold';
    font-weight: 600;
    font-size: 4rem;
  }
  .logo {
    margin: 2.3rem 0 2.3rem;
  }
  .sub-title {
    color: #f95750;
    font-family: 'Popins';
    font-weight: 400;
    font-size: 3rem;
    margin-bottom: 11.8rem;
  }
  .criteria-list {
    column-gap: 6rem;
    .item {
      height: 44rem;
      width: 32.2rem;
      box-sizing: border-box;
      &:nth-of-type(3) {
        background: url('@/assets/images/award/criteria_bg.png') no-repeat;
        background-size: 100% 100%;
      }
      .icon {
        width: 18.8rem;
        height: 18rem;
      }
      .name {
        font-family: 'PoppinsMedium';
        font-weight: 500;
        font-size: 2.8rem;
        color: #fff;
        margin: 2rem 0 5rem;
      }
      .desc {
        font-family: 'Arial';
        font-weight: 400;
        font-size: 2.4rem;
        color: #e0e0e0;
        text-align: center;
      }
    }
  }
}
.judges-container {
  height: 147.4rem;
  background: url('@/assets/images/award/judges_bg.png') no-repeat;
  background-size: 100% 100%;
  padding-top: 12.8rem;
  .title {
    color: #232323;
    font-family: 'PoppinsBold';
    font-weight: 600;
    font-size: 4rem;
  }
  .logo {
    margin: 2.4rem 0 2.2rem;
  }
  .sub-title {
    color: #b10000;
    font-family: 'Arial';
    font-weight: 400;
    font-size: 3rem;
    margin-bottom: 12rem;
  }
  .judgement-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 23.22rem;
    row-gap: 8rem;
    padding: 0 25rem 0 26.6rem;
    .judgement-item {
      .picture {
        width: 20.2rem;
        height: 26rem;
        border-radius: 0.8rem;
      }
      .name {
        margin: 3rem 0 2.4rem;
        color: #232323;
        font-family: 'PoppinsBold';
        font-weight: 600;
        font-size: 2.4rem;
      }
      .desc {
        color: #585858;
        font-family: 'Arial';
        font-weight: 400;
        font-size: 2rem;
        white-space: pre-line;
        text-align: center;
      }
    }
  }
}
.footer {
  height: 10rem;
  padding-left: 21.5rem;
  padding-right: 22rem;
  background-color: #232323;
  .social-list {
    column-gap: 2rem;
    img {
      width: 2rem;
      height: 2rem;
    }
  }
  .copyright {
    color: #fff;
    font-family: 'Arial';
    font-weight: 400;
    font-size: 1.2rem;
  }
}
</style>
