<template>
  <q-layout view="hHh LpR fFf">
    <!-- Header -->
    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-toolbar-title class="text-center text-h6 gt-xs">
          Giải pháp cho Thành phố Thông minh và Giao thông Đô thị
        </q-toolbar-title>
        <q-toolbar-title class="text-center text-subtitle1 lt-sm">
          Thành phố Thông minh & Giao thông Đô thị
        </q-toolbar-title>

        <q-space />

        <!-- Language toggle -->
        <q-btn-toggle
          v-model="language"
          flat
          toggle-color="white"
          :options="[
            {label: 'VI', value: 'vi'},
            {label: 'EN', value: 'en'}
          ]"
        />
      </q-toolbar>

      <q-tabs
        v-model="tab"
        dense
        class="bg-primary text-white"
        align="center"
        narrow-indicator
      >
        <q-tab name="overview" :label="language === 'vi' ? 'Tổng quan' : 'Overview'" />
        <q-tab name="speakers" :label="language === 'vi' ? 'Diễn giả' : 'Speakers'" />
        <q-tab name="schedule" :label="language === 'vi' ? 'Lịch trình' : 'Schedule'" />
        <q-tab name="venue" :label="language === 'vi' ? 'Địa điểm' : 'Venue'" />
        <q-tab name="register" :label="language === 'vi' ? 'Đăng ký' : 'Register'" />
      </q-tabs>
    </q-header>

    <q-page-container>
      <q-page>
        <!-- Hero Section -->
        <section id="top" class="hero-section">
          <div class="q-pa-md">
            <div class="row justify-center items-center" style="min-height: 60vh">
              <div class="col-12 col-md-8 text-center q-pa-md">
                <h1 class="text-h3 text-weight-bold q-mb-md">
                  {{ language === 'vi' ? 'Giải pháp cho Thành phố Thông minh và Giao thông Đô thị' : 'Solutions for Smart Cities and Urban Transportation' }}
                </h1>
                <h2 class="text-h5 q-mb-lg">
                  {{ language === 'vi' ? 'trong Kỷ nguyên Trí tuệ Nhân tạo' : 'in the Age of Artificial Intelligence' }}
                </h2>
                <div class="text-h6 q-mb-xl">
                  <q-icon name="event" class="q-mr-sm" />
                  {{ language === 'vi' ? 'Thứ Sáu, ngày 9 tháng 5 năm 2025, từ 8h-12h sáng' : 'Friday, May 9, 2025, from 8am-12pm' }}
                </div>
                <div class="text-h6 q-mb-xl">
                  <q-icon name="location_on" class="q-mr-sm" />
                  {{ language === 'vi' ? 'Trường Đại học Kiến trúc TP HCM' : 'Ho Chi Minh City University of Architecture' }}
                </div>
                <div>
                  <q-btn
                    size="lg"
                    color="secondary"
                    :label="language === 'vi' ? 'Đăng ký ngay' : 'Register Now'"
                    class="q-mr-sm"
                    href="https://forms.gle/rqs5HMwNn87p3amm8"
                    target="_blank"
                  />
                  <q-btn
                    size="lg"
                    outline
                    color="white"
                    :label="language === 'vi' ? 'Tìm hiểu thêm' : 'Learn More'"
                    @click="scrollToSection('overview')"
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- Overview Section -->
        <section id="overview" class="bg-grey-2">
          <div class="q-pa-md q-py-xl">
            <div class="text-center q-mb-xl">
              <h2 class="text-h3 text-weight-bold">{{ language === 'vi' ? 'Tổng quan Sự kiện' : 'Event Overview' }}</h2>
              <div class="q-mt-md text-grey-8">{{ language === 'vi' ? 'Cầu nối giữa các chuyên gia, doanh nghiệp và sinh viên' : 'Connecting experts, businesses, and students' }}</div>
            </div>

            <div class="row justify-center q-col-gutter-lg">
              <div class="col-12 col-md-10">
                <!-- Event Details Card -->
                <q-card flat bordered class="q-mb-md">
                  <q-card-section class="bg-primary text-white">
                    <div class="text-h6">{{ language === 'vi' ? 'Thông tin sự kiện' : 'Event Information' }}</div>
                  </q-card-section>
                  <q-card-section>
                    <div class="row q-col-gutter-md">
                      <div class="col-12">
                        <div class="text-weight-bold">{{ language === 'vi' ? 'Tên sự kiện:' : 'Event Name:' }}</div>
                        <div class="q-mb-md">{{ language === 'vi' ? 'Giải pháp cho Thành phố Thông minh và Giao thông Đô thị trong Kỷ nguyên Trí tuệ Nhân tạo' : 'Solutions for Smart Cities and Urban Transportation in the Age of Artificial Intelligence' }}</div>

                        <div class="text-weight-bold">{{ language === 'vi' ? 'Địa điểm:' : 'Venue:' }}</div>
                        <div class="q-mb-md">{{ language === 'vi' ? 'Trường Đại học Kiến trúc TP HCM' : 'Ho Chi Minh City University of Architecture' }}</div>

                        <div class="text-weight-bold">{{ language === 'vi' ? 'Thời gian:' : 'Date & Time:' }}</div>
                        <div class="q-mb-md">{{ language === 'vi' ? 'Thứ Sáu, ngày 9 tháng 5 năm 2025, từ 8h-12h sáng' : 'Friday, May 9, 2025, from 8am-12pm' }}</div>

                        <div class="text-weight-bold">{{ language === 'vi' ? 'Đăng ký:' : 'Registration:' }}</div>
                        <div>
                          <a href="https://forms.gle/rqs5HMwNn87p3amm8" target="_blank" class="text-primary">
                            https://forms.gle/rqs5HMwNn87p3amm8
                          </a>
                        </div>
                      </div>
                    </div>
                  </q-card-section>
                </q-card>

                <!-- Overview Content Card -->
                <q-card flat bordered>
                  <q-card-section>
                    <p class="text-body1">
                      {{ language === 'vi' ? 'Trong bối cảnh đô thị hóa nhanh chóng và sự phát triển vượt bậc của công nghệ, "Giải pháp cho Thành phố Thông minh và Giao thông Đô thị trong Kỷ nguyên Trí tuệ Nhân tạo" là sự kiện đặc biệt, đóng vai trò như một cầu nối giữa các chuyên gia, doanh nghiệp và sinh viên, nhằm cùng nhau khám phá những hướng đi đổi mới cho đô thị thông minh và giao thông hiện đại trong thời đại AI.' : 'In the context of rapid urbanization and technological advancement, "Solutions for Smart Cities and Urban Transportation in the Age of Artificial Intelligence" is a special event that serves as a bridge between experts, businesses, and students, aiming to explore innovative directions for smart cities and modern transportation in the AI era.' }}
                    </p>
                    <p class="text-body1">
                      {{ language === 'vi' ? 'Sự kiện không chỉ là diễn đàn để chia sẻ kiến thức mà còn mở ra nhiều cơ hội thực tiễn cho người tham dự, đặc biệt là các bạn trẻ đam mê đổi mới sáng tạo và công nghệ.' : 'The event is not just a forum for knowledge sharing but also opens up many practical opportunities for participants, especially young people passionate about innovation and technology.' }}
                    </p>
                  </q-card-section>
                </q-card>
              </div>
            </div>

            <div class="row justify-center q-col-gutter-md q-mt-xl">
              <div class="col-12 col-sm-6 col-md-3">
                <q-card class="text-center q-pa-md" flat bordered>
                  <q-card-section>
                    <q-icon name="lightbulb" color="primary" size="4rem" />
                    <h3 class="text-h5 q-mt-md">{{ language === 'vi' ? 'Đổi mới' : 'Innovation' }}</h3>
                    <p>{{ language === 'vi' ? 'Khám phá các giải pháp đột phá cho thành phố thông minh' : 'Discover breakthrough solutions for smart cities' }}</p>
                  </q-card-section>
                </q-card>
              </div>

              <div class="col-12 col-sm-6 col-md-3">
                <q-card class="text-center q-pa-md" flat bordered>
                  <q-card-section>
                    <q-icon name="groups" color="primary" size="4rem" />
                    <h3 class="text-h5 q-mt-md">{{ language === 'vi' ? 'Kết nối' : 'Networking' }}</h3>
                    <p>{{ language === 'vi' ? 'Gặp gỡ các chuyên gia hàng đầu và đồng nghiệp trong ngành' : 'Meet industry leaders and like-minded professionals' }}</p>
                  </q-card-section>
                </q-card>
              </div>

              <div class="col-12 col-sm-6 col-md-3">
                <q-card class="text-center q-pa-md" flat bordered>
                  <q-card-section>
                    <q-icon name="school" color="primary" size="4rem" />
                    <h3 class="text-h5 q-mt-md">{{ language === 'vi' ? 'Học hỏi' : 'Learning' }}</h3>
                    <p>{{ language === 'vi' ? 'Tiếp cận kiến thức mới nhất về AI và đô thị thông minh' : 'Access the latest knowledge on AI and smart cities' }}</p>
                  </q-card-section>
                </q-card>
              </div>

              <div class="col-12 col-sm-6 col-md-3">
                <q-card class="text-center q-pa-md" flat bordered>
                  <q-card-section>
                    <q-icon name="handshake" color="primary" size="4rem" />
                    <h3 class="text-h5 q-mt-md">{{ language === 'vi' ? 'Hợp tác' : 'Collaboration' }}</h3>
                    <p>{{ language === 'vi' ? 'Tìm kiếm cơ hội hợp tác và phát triển dự án' : 'Find collaboration opportunities and develop projects' }}</p>
                  </q-card-section>
                </q-card>
              </div>
            </div>
          </div>
        </section>

        <!-- Speakers Section -->
        <section id="speakers">
          <div class="q-pa-md q-py-xl">
            <div class="text-center q-mb-xl">
              <h2 class="text-h3 text-weight-bold">{{ language === 'vi' ? 'Diễn giả' : 'Speakers' }}</h2>
              <div class="q-mt-md text-grey-8">{{ language === 'vi' ? 'Các chuyên gia hàng đầu trong lĩnh vực' : 'Leading experts in the field' }}</div>
            </div>

            <div class="row justify-center q-col-gutter-lg">
              <div class="col-12 col-sm-6 col-md-3" v-for="(speaker, index) in speakers" :key="index">
                <q-card class="speaker-card">
                  <q-img :src="speaker.image" :ratio="1" />
                  <q-card-section class="text-center">
                    <div class="text-h6">{{ speaker.name }}</div>
                    <div class="text-subtitle2 text-primary">{{ language === 'vi' ? speaker.titleVi : speaker.titleEn }}</div>
                    <p class="q-mt-sm">{{ language === 'vi' ? speaker.bioVi : speaker.bioEn }}</p>
                  </q-card-section>
                  <q-card-actions align="center">
                    <q-btn flat round color="primary" icon="fab fa-linkedin" />
                    <q-btn flat round color="primary" icon="language" />
                  </q-card-actions>
                </q-card>
              </div>
            </div>
          </div>
        </section>

        <!-- Schedule Section -->
        <section id="schedule" class="bg-grey-2">
          <div class="q-pa-md q-py-xl">
            <div class="text-center q-mb-xl">
              <h2 class="text-h3 text-weight-bold">{{ language === 'vi' ? 'Lịch trình' : 'Schedule' }}</h2>
              <div class="q-mt-md text-grey-8">{{ language === 'vi' ? 'Thứ Sáu, ngày 9 tháng 5 năm 2025' : 'Friday, May 9, 2025' }}</div>
            </div>

            <div class="row justify-center">
              <div class="col-12 col-md-10">
                <q-timeline color="secondary">
                  <q-timeline-entry
                    title="8:00 - 8:30"
                    :subtitle="language === 'vi' ? 'Đăng ký và Giao lưu' : 'Registration & Networking'"
                    icon="how_to_reg"
                    color="primary"
                  >
                    <div>
                      {{ language === 'vi' ? 'Đăng ký tham dự và giao lưu với các đại biểu khác' : 'Check-in and network with other attendees' }}
                    </div>
                  </q-timeline-entry>

                  <q-timeline-entry
                    title="8:30 - 9:00"
                    :subtitle="language === 'vi' ? 'Khai mạc' : 'Opening Ceremony'"
                    icon="celebration"
                    color="secondary"
                  >
                    <div>
                      {{ language === 'vi' ? 'Phát biểu khai mạc và giới thiệu tổng quan về sự kiện' : 'Welcome speech and event overview' }}
                    </div>
                  </q-timeline-entry>

                  <q-timeline-entry
                    title="9:00 - 10:00"
                    :subtitle="language === 'vi' ? 'Phiên thảo luận 1: AI và Thành phố Thông minh' : 'Session 1: AI and Smart Cities'"
                    icon="smart_city"
                    color="primary"
                  >
                    <div>
                      {{ language === 'vi' ? 'Các chuyên gia thảo luận về vai trò của AI trong phát triển thành phố thông minh' : 'Experts discuss the role of AI in smart city development' }}
                    </div>
                  </q-timeline-entry>

                  <q-timeline-entry
                    title="10:00 - 10:15"
                    :subtitle="language === 'vi' ? 'Giải lao' : 'Coffee Break'"
                    icon="coffee"
                    color="secondary"
                  >
                    <div>
                      {{ language === 'vi' ? 'Thời gian nghỉ giải lao và giao lưu' : 'Break time and networking' }}
                    </div>
                  </q-timeline-entry>

                  <q-timeline-entry
                    title="10:15 - 11:15"
                    :subtitle="language === 'vi' ? 'Phiên thảo luận 2: Giao thông Đô thị Thông minh' : 'Session 2: Smart Urban Transportation'"
                    icon="commute"
                    color="primary"
                  >
                    <div>
                      {{ language === 'vi' ? 'Thảo luận về các giải pháp giao thông thông minh và vai trò của AI' : 'Discussion on smart transportation solutions and the role of AI' }}
                    </div>
                  </q-timeline-entry>

                  <q-timeline-entry
                    title="11:15 - 12:00"
                    :subtitle="language === 'vi' ? 'Hỏi đáp và Kết luận' : 'Q&A and Conclusion'"
                    icon="question_answer"
                    color="secondary"
                  >
                    <div>
                      {{ language === 'vi' ? 'Phiên hỏi đáp với các diễn giả và tổng kết sự kiện' : 'Q&A session with speakers and event conclusion' }}
                    </div>
                  </q-timeline-entry>
                </q-timeline>
              </div>
            </div>
          </div>
        </section>

        <!-- Venue Section -->
        <section id="venue">
          <div class="q-pa-md q-py-xl">
            <div class="text-center q-mb-xl">
              <h2 class="text-h3 text-weight-bold">{{ language === 'vi' ? 'Địa điểm' : 'Venue' }}</h2>
              <div class="q-mt-md text-grey-8">{{ language === 'vi' ? 'Trường Đại học Kiến trúc TP HCM' : 'Ho Chi Minh City University of Architecture' }}</div>
            </div>

            <div class="row justify-center q-col-gutter-md">
              <div class="col-12 col-md-6">
                <q-card flat bordered>
                  <q-card-section>
                    <div class="text-h6">{{ language === 'vi' ? 'Thông tin địa điểm' : 'Venue Information' }}</div>
                  </q-card-section>
                  <q-separator />
                  <q-card-section>
                    <div class="row items-center q-mb-md">
                      <div class="col-auto">
                        <q-icon name="location_on" color="primary" size="2rem" />
                      </div>
                      <div class="col q-ml-sm">
                        <div class="text-body1">{{ language === 'vi' ? 'Địa chỉ' : 'Address' }}:</div>
                        <div>{{ language === 'vi' ? '196 Pasteur, Phường Võ Thị Sáu, Quận 3, TP HCM' : '196 Pasteur, Ward Vo Thi Sau, District 3, Ho Chi Minh City' }}</div>
                      </div>
                    </div>

                    <div class="row items-center q-mb-md">
                      <div class="col-auto">
                        <q-icon name="directions_bus" color="primary" size="2rem" />
                      </div>
                      <div class="col q-ml-sm">
                        <div class="text-body1">{{ language === 'vi' ? 'Phương tiện công cộng' : 'Public Transportation' }}:</div>
                        <div>{{ language === 'vi' ? 'Các tuyến xe buýt: 14, 28, 45, 53' : 'Bus routes: 14, 28, 45, 53' }}</div>
                      </div>
                    </div>

                    <div class="row items-center">
                      <div class="col-auto">
                        <q-icon name="local_parking" color="primary" size="2rem" />
                      </div>
                      <div class="col q-ml-sm">
                        <div class="text-body1">{{ language === 'vi' ? 'Bãi đậu xe' : 'Parking' }}:</div>
                        <div>{{ language === 'vi' ? 'Có bãi đậu xe trong khuôn viên trường' : 'Parking available on campus' }}</div>
                      </div>
                    </div>
                  </q-card-section>
                </q-card>
              </div>

              <div class="col-12 col-md-6">
                <q-card flat bordered>
                  <q-card-section class="q-pa-none">
                    <div class="map-container">
                      <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.4241674197667!2d106.68739731471872!3d10.779723992319444!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752f3a9d8d1bb3%3A0x41e0c1a70e0e0d1c!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBLaeG6v24gdHLDumMgVFAuSENNIChVQSkg4oCTIEPGoSBz4bufIDE5NiBQYXN0ZXVy!5e0!3m2!1svi!2s!4v1651123456789!5m2!1svi!2s"
                        width="100%"
                        height="300"
                        style="border:0;"
                        allowfullscreen=""
                        loading="lazy"
                      ></iframe>
                    </div>
                  </q-card-section>
                </q-card>
              </div>
            </div>
          </div>
        </section>

        <!-- Registration Section -->
        <section id="register" class="bg-primary text-white">
          <div class="q-pa-md q-py-xl">
            <div class="text-center q-mb-xl">
              <h2 class="text-h3 text-weight-bold">{{ language === 'vi' ? 'Đăng ký tham dự' : 'Register to Attend' }}</h2>
              <div class="q-mt-md">{{ language === 'vi' ? 'Đăng ký ngay để đảm bảo chỗ của bạn' : 'Register now to secure your spot' }}</div>
            </div>

            <div class="row justify-center">
              <div class="col-12 col-md-8 text-center">
                <p class="text-h6 q-mb-lg">
                  {{ language === 'vi' ? 'Sự kiện miễn phí nhưng yêu cầu đăng ký trước' : 'The event is free but registration is required' }}
                </p>

                <q-btn
                  size="lg"
                  color="white"
                  text-color="primary"
                  :label="language === 'vi' ? 'Đăng ký ngay' : 'Register Now'"
                  href="https://forms.gle/rqs5HMwNn87p3amm8"
                  target="_blank"
                  class="q-py-sm q-px-xl"
                />

                <p class="q-mt-lg">
                  {{ language === 'vi' ? 'Link đăng ký sự kiện' : 'Event registration link' }}:
                  <a href="https://forms.gle/rqs5HMwNn87p3amm8" target="_blank" class="text-white">https://forms.gle/rqs5HMwNn87p3amm8</a>
                </p>
              </div>
            </div>
          </div>
        </section>

        <!-- Organizers Section -->
        <section id="organizers">
          <div class="q-pa-md q-py-xl">
            <div class="text-center q-mb-xl">
              <h2 class="text-h3 text-weight-bold">{{ language === 'vi' ? 'Đơn vị tổ chức' : 'Organizers' }}</h2>
              <div class="q-mt-md text-grey-8">{{ language === 'vi' ? 'Sự kiện được tổ chức bởi' : 'Event organized by' }}</div>
            </div>

            <div class="row justify-center q-col-gutter-lg">
              <div class="col-6 col-sm-4 col-md-3">
                <q-card flat bordered class="text-center">
                  <q-card-section>
                    <img src="https://placehold.co/150x150/primary/white?text=UAH" class="q-mb-md" style="max-width: 100px" />
                    <div class="text-body1">{{ language === 'vi' ? 'Trường Đại học Kiến trúc TP HCM' : 'HCMC University of Architecture' }}</div>
                  </q-card-section>
                </q-card>
              </div>

              <div class="col-6 col-sm-4 col-md-3">
                <q-card flat bordered class="text-center">
                  <q-card-section>
                    <img src="https://placehold.co/150x150/secondary/white?text=AI" class="q-mb-md" style="max-width: 100px" />
                    <div class="text-body1">{{ language === 'vi' ? 'Viện Nghiên cứu AI' : 'AI Research Institute' }}</div>
                  </q-card-section>
                </q-card>
              </div>

              <div class="col-6 col-sm-4 col-md-3">
                <q-card flat bordered class="text-center">
                  <q-card-section>
                    <img src="https://placehold.co/150x150/accent/white?text=SC" class="q-mb-md" style="max-width: 100px" />
                    <div class="text-body1">{{ language === 'vi' ? 'Hiệp hội Thành phố Thông minh Việt Nam' : 'Vietnam Smart Cities Association' }}</div>
                  </q-card-section>
                </q-card>
              </div>
            </div>
          </div>
        </section>

        <!-- Go to Top Button -->
        <q-page-sticky position="bottom-right" :offset="[18, 18]">
          <q-btn
            v-show="showGoToTop"
            fab
            icon="keyboard_arrow_up"
            color="primary"
            @click="scrollToTop"
            aria-label="Go to top"
          >
            <q-tooltip>
              {{ language === 'vi' ? 'Lên đầu trang' : 'Go to top' }}
            </q-tooltip>
          </q-btn>
        </q-page-sticky>
      </q-page>
    </q-page-container>

    <!-- Footer -->
    <q-footer class="bg-dark text-white">
      <q-toolbar>
        <q-toolbar-title>
          <div class="row items-center justify-between">
            <div>
              <div class="text-h6">{{ language === 'vi' ? 'Giải pháp cho Thành phố Thông minh' : 'Smart Cities Solutions' }}</div>
              <div class="text-caption">{{ language === 'vi' ? 'Sự kiện 2025' : '2025 Event' }}</div>
            </div>
            <div class="row q-gutter-sm">
              <q-btn flat round icon="fab fa-facebook" />
              <q-btn flat round icon="fab fa-twitter" />
              <q-btn flat round icon="fab fa-linkedin" />
              <q-btn flat round icon="email" />
            </div>
          </div>
        </q-toolbar-title>
      </q-toolbar>
      <div class="q-pa-md text-center">
        &copy; 2025 {{ language === 'vi' ? 'Mọi quyền được bảo lưu' : 'All rights reserved' }}
      </div>
    </q-footer>
  </q-layout>
</template>

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

// UI State
const tab = ref('overview')
const language = ref('vi') // Default to Vietnamese
const showGoToTop = ref(false)

// Scroll to section function
const scrollToSection = (sectionId) => {
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

// Scroll to top function
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// Check scroll position and show/hide the Go to Top button
const checkScroll = () => {
  showGoToTop.value = window.scrollY > 500
}

// Add scroll event listener
onMounted(() => {
  window.addEventListener('scroll', checkScroll)
})

// Remove scroll event listener when component is unmounted
onUnmounted(() => {
  window.removeEventListener('scroll', checkScroll)
})

// Speakers data
const speakers = [
  {
    name: 'TS. Nguyễn Văn A',
    titleVi: 'Giám đốc Viện Nghiên cứu AI',
    titleEn: 'Director of AI Research Institute',
    bioVi: 'Chuyên gia hàng đầu về trí tuệ nhân tạo với hơn 15 năm kinh nghiệm trong lĩnh vực nghiên cứu và ứng dụng AI.',
    bioEn: 'Leading expert in artificial intelligence with over 15 years of experience in AI research and applications.',
    image: 'https://placehold.co/300x300/primary/white?text=Dr.A'
  },
  {
    name: 'PGS.TS. Trần Thị B',
    titleVi: 'Trưởng khoa Quy hoạch Đô thị',
    titleEn: 'Head of Urban Planning Department',
    bioVi: 'Nhà nghiên cứu và giảng viên với chuyên môn về quy hoạch đô thị thông minh và phát triển bền vững.',
    bioEn: 'Researcher and lecturer specializing in smart urban planning and sustainable development.',
    image: 'https://placehold.co/300x300/secondary/white?text=Dr.B'
  },
  {
    name: 'KTS. Lê Văn C',
    titleVi: 'Giám đốc Công nghệ, Smart City Solutions',
    titleEn: 'CTO, Smart City Solutions',
    bioVi: 'Kiến trúc sư công nghệ với kinh nghiệm triển khai các dự án thành phố thông minh tại nhiều quốc gia.',
    bioEn: 'Technology architect with experience implementing smart city projects in multiple countries.',
    image: 'https://placehold.co/300x300/accent/white?text=Arch.C'
  },
  {
    name: 'ThS. Phạm Thị D',
    titleVi: 'Chuyên gia Giao thông Đô thị',
    titleEn: 'Urban Transportation Expert',
    bioVi: 'Chuyên gia về hệ thống giao thông thông minh và giải pháp di chuyển bền vững trong đô thị.',
    bioEn: 'Expert in intelligent transportation systems and sustainable mobility solutions in urban areas.',
    image: 'https://placehold.co/300x300/primary/white?text=Ms.D'
  }
]
</script>

<style scoped>
.hero-section {
  background: linear-gradient(135deg, #1976D2 0%, #0D47A1 100%);
  color: white;
}

.speaker-card {
  transition: transform 0.3s ease;
}

.speaker-card:hover {
  transform: translateY(-5px);
}

.q-timeline__content {
  padding-bottom: 1.5rem;
}
</style>
