<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowRight, Compass, Shield, Award, Users } from 'lucide-vue-next'

const router = useRouter()

const activeTab = ref('seed')

const activities = {
  seed: {
    title: '수산종자 방류 사업',
    subtitle: '수산자원의 회복과 복원',
    desc: '고갈되어 가는 우리 바다의 어족 자원을 늘리고 어업인의 소득을 보장하기 위해, 지역 해역 특성에 맞는 우수한 품종의 치어를 방류합니다.',
    points: [
      '방류 효과 분석을 바탕으로 한 경제성 높은 어종 선정',
      '전국 연안 지자체 및 회원조합과 공동으로 매년 추진',
      '감성돔, 조피볼락, 꽃게 등 대표 고부가가치 품종 방류',
      '어업인의 수산 소득 증대 및 미래 생태 식량 확보'
    ],
    infographic: [
      { step: '01', title: '우량 종자 확보', desc: '질병 검사를 마친 건강한 수산 치어 선별' },
      { step: '02', title: '해역 적합도 평가', desc: '지역별 염도 및 온도에 알맞은 어종 연구' },
      { step: '03', title: '체계적 방류', desc: '수산 자원 고갈 지점에서 집중 방류 실시' },
      { step: '04', title: '추적 및 관리', desc: '방류된 치어의 생존율 및 자원조성 효과 모니터링' }
    ]
  },
  cleanup: {
    title: '해양 쓰레기 수거 사업',
    subtitle: '조업 중 쓰레기 수매 및 수거 지원',
    desc: '바다 밑에 침적된 폐어구, 플라스틱 등 어업 활동을 방해하고 해양 생태계를 오염시키는 해양 쓰레기를 신속히 수거하여 깨끗한 환경을 만듭니다.',
    points: [
      '어업인 참여 유도를 위한 조업 중 인양 쓰레기 수매 사업 진행',
      '시민단체 및 연안 해안가 집중 정화 운동 전개',
      '침적 폐그물 수거를 통해 해양 동물의 유령어업(Ghost Fishing) 방지',
      '해양 플라스틱 오염 방지를 통한 미세 플라스틱 먹이사슬 차단'
    ],
    infographic: [
      { step: '01', title: '인양 및 수집', desc: '조업 중 수거한 쓰레기를 항구로 반입' },
      { step: '02', title: '수협 수매 시스템', desc: '수협이 매입하여 쓰레기 회수율 극대화' },
      { step: '03', title: '친환경 처리', desc: '재활용 가능 플라스틱과 폐어구 분류 처리' },
      { step: '04', title: '바다 청정화', desc: '어장 환경의 개선과 선박 안전 운항 확보' }
    ]
  },
  restoration: {
    title: '바닷속 환경 정화 사업',
    subtitle: '갯녹음 치유 및 생태계 복원',
    desc: '지구 온난화와 환경 오염으로 바다가 하얗게 사막화되는 갯녹음 현상(백화현상)을 방지하고, 해조류가 자라는 풍요로운 바다 숲을 만듭니다.',
    points: [
      '갯녹음 해역의 해적생물(성게 등) 집중 구제 및 유해 유기물 제거',
      '어장 환경 개선을 위한 바닥갈이(경운) 및 물갈이 사업 지원',
      '미생물 및 친환경 공법을 활용한 바다 해저 토양 정화',
      '바다숲 조성을 통해 수산 생물의 산란장 및 서식지 제공'
    ],
    infographic: [
      { step: '01', title: '현황 정밀 조사', desc: '갯녹음 및 바다 바닥 황폐화 상태 과학적 진단' },
      { step: '02', title: '어장 바닥갈이', desc: '경운 작업을 통해 암반의 퇴적물과 유해물질 세척' },
      { step: '03', title: '해조류 이식 및 관리', desc: '다시마, 감태 등 해조류를 안착시켜 바다숲 형성' },
      { step: '04', title: '풍요로운 어장 복원', desc: '어패류가 산란하고 성장할 수 있는 보금자리 완성' }
    ]
  }
}
</script>

<template>
  <div class="about-container">
    <!-- Intro Hero -->
    <section class="about-hero">
      <div class="glow-bg"></div>
      <div class="hero-content">
        <h1 class="about-title">바다를 살리는 3가지 약속</h1>
        <p class="about-subtitle-text">
          수협중앙회는 2007년부터 전국의 어업인들과 힘을 합쳐,<br />
          바다의 수산 자원을 회복하고 해양 환경을 맑게 가꾸는 공익적 실천을 이어가고 있습니다.
        </p>
      </div>
    </section>

    <!-- Tabbed Activities Grid -->
    <section class="activities-section">
      <div class="tab-buttons">
        <button
          :class="['tab-btn', { active: activeTab === 'seed' }]"
          @click="activeTab = 'seed'"
        >
          <Compass class="tab-icon" />
          <span>수산종자 방류</span>
        </button>
        <button
          :class="['tab-btn', { active: activeTab === 'cleanup' }]"
          @click="activeTab = 'cleanup'"
        >
          <Shield class="tab-icon" />
          <span>쓰레기 수거</span>
        </button>
        <button
          :class="['tab-btn', { active: activeTab === 'restoration' }]"
          @click="activeTab = 'restoration'"
        >
          <Award class="tab-icon" />
          <span>바닷속 환경 정화</span>
        </button>
      </div>

      <!-- Tab Content Area -->
      <transition name="fade" mode="out-in">
        <div :key="activeTab" class="tab-content">
          <div class="content-left">
            <h2 class="content-title">{{ activities[activeTab].title }}</h2>
            <h3 class="content-subtitle">{{ activities[activeTab].subtitle }}</h3>
            <p class="content-desc">{{ activities[activeTab].desc }}</p>
            <ul class="point-list">
              <li v-for="(point, idx) in activities[activeTab].points" :key="idx" class="point-item">
                <span class="bullet"></span>
                <span>{{ point }}</span>
              </li>
            </ul>
          </div>

          <div class="content-right">
            <h4 class="right-title">추진 프로세스</h4>
            <div class="infographic-flow">
              <div
                v-for="step in activities[activeTab].infographic"
                :key="step.step"
                class="flow-step"
              >
                <div class="step-num">{{ step.step }}</div>
                <div class="step-info">
                  <h5 class="step-title">{{ step.title }}</h5>
                  <p class="step-desc">{{ step.desc }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </section>

    <!-- Citizen Campaign Info -->
    <section class="citizen-section">
      <div class="citizen-card">
        <div class="citizen-icon-wrapper">
          <Users class="citizen-icon" />
        </div>
        <div class="citizen-info">
          <span class="citizen-badge">국민 참여 프로그램</span>
          <h2 class="citizen-title">모두의 바다, 함께海 캠페인</h2>
          <p class="citizen-desc">
            해양 환경 정화에 관심이 있는 학생, 일반 시민 모임, 동호회가 바닷가 정화 활동을 실천할 수 있도록 수협중앙회가 활동 경비(최대 100만 원)를 지원합니다.
          </p>
          <div class="citizen-benefits">
            <div class="benefit-item">
              <div class="benefit-dot"></div>
              <span>전국 항·포구 및 해안가 정화 단체 지원</span>
            </div>
            <div class="benefit-item">
              <div class="benefit-dot"></div>
              <span>청소년 교육 및 환경 인식 제고</span>
            </div>
            <div class="benefit-item">
              <div class="benefit-dot"></div>
              <span>기금 기부를 통한 가상의 바다 정화 동참</span>
            </div>
          </div>
          <button class="btn btn-primary" @click="router.push('/donation')">
            <span>참여하고 바다 가꾸기</span>
            <ArrowRight class="btn-icon" />
          </button>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.about-container {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* About Hero */
.about-hero {
  position: relative;
  text-align: center;
  padding: 60px 20px;
  border-radius: 24px;
  background: rgba(6, 17, 38, 0.4);
  border: 1px solid rgba(0, 210, 255, 0.08);
  overflow: hidden;
}

.glow-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.15) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.about-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 16px 0;
  background: linear-gradient(to right, #ffffff, var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-subtitle-text {
  font-size: 1.1rem;
  color: #94a3b8;
  line-height: 1.6;
  max-width: 750px;
  margin: 0 auto;
}

/* Activities Section */
.activities-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.tab-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.tab-btn {
  background: rgba(6, 17, 38, 0.6);
  border: 1px solid rgba(0, 210, 255, 0.1);
  padding: 16px 30px;
  border-radius: 16px;
  color: #94a3b8;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.tab-btn:hover {
  border-color: rgba(0, 210, 255, 0.3);
  color: var(--primary-color);
  transform: translateY(-2px);
}

.tab-btn.active {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.15), rgba(0, 102, 255, 0.15));
  border-color: var(--primary-color);
  color: white;
  box-shadow: 0 5px 20px rgba(0, 210, 255, 0.15);
}

.tab-icon {
  width: 20px;
  height: 20px;
}

.tab-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  background: rgba(6, 17, 38, 0.4);
  border: 1px solid rgba(0, 210, 255, 0.08);
  border-radius: 24px;
  padding: 40px;
  backdrop-filter: blur(10px);
}

.content-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  margin: 0 0 8px 0;
}

.content-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color);
  margin: 0 0 20px 0;
}

.content-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: #94a3b8;
  margin-bottom: 25px;
}

.point-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.point-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #cbd5e1;
  font-size: 0.95rem;
  line-height: 1.4;
}

.bullet {
  width: 6px;
  height: 6px;
  background: var(--primary-color);
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--primary-color);
}

/* Right Column Infographic Flow */
.content-right {
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.right-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #94a3b8;
  margin: 0 0 20px 0;
  letter-spacing: 0.5px;
}

.infographic-flow {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.flow-step {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  position: relative;
}

.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 30px;
  left: 17px;
  width: 2px;
  height: calc(100% - 10px);
  background: linear-gradient(to bottom, var(--primary-color), rgba(0, 102, 255, 0.1));
}

.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
}

.step-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  margin: 0;
}

.step-desc {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* Citizen Campaign Info */
.citizen-section {
  width: 100%;
}

.citizen-card {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  background: radial-gradient(circle at bottom right, rgba(0, 102, 255, 0.1) 0%, rgba(3, 8, 20, 0.8) 80%);
  border: 1px solid rgba(0, 210, 255, 0.15);
  border-radius: 24px;
  padding: 50px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.citizen-icon-wrapper {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.1), rgba(0, 102, 255, 0.1));
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.citizen-icon {
  width: 80px;
  height: 80px;
  color: var(--primary-color);
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.2)); }
  100% { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(0, 210, 255, 0.5)); }
}

.citizen-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.citizen-badge {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.12);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.citizen-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  margin: 0;
}

.citizen-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}

.citizen-benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: 0.95rem;
}

.benefit-dot {
  width: 6px;
  height: 6px;
  background: #ff6b6b;
  border-radius: 50%;
}

.btn-icon {
  width: 16px;
  height: 16px;
}

/* Animations */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

/* Responsive */
@media (max-width: 992px) {
  .tab-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .content-right {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-left: 0;
    padding-top: 30px;
  }
  .citizen-card {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px;
  }
  .citizen-icon-wrapper {
    padding: 20px;
  }
  .citizen-icon {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 768px) {
  .tab-buttons {
    flex-direction: column;
    gap: 10px;
  }
  .tab-btn {
    width: 100%;
    justify-content: center;
  }
}
</style>
