<template>
  <q-layout view="hHh LpR fFf">
    <!-- Header -->
    <q-page-container>
      <q-page>
        <!-- Hero Section -->
        <section id="home" class="hero-section">
          <div class="q-pa-md">
            <div
              class="row justify-center items-center"
              style="min-height: 100vh"
            ></div>
          </div>
        </section>
        <!-- <section id="overview" class="bg-grey-2">
          <div class="q-pa-md q-py-xl"></div>
          <div class="row justify-center q-col-gutter-lg">
            <div class="col-12 col-md-10">

            </div>
          </div>
        </section> -->
        <!-- About 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">
                <p class="text-body1">
                  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ệ,
                  <span
                    >"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"</span
                  >
                  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.
                </p>
                <p class="text-body1">
                  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ệ.
                </p>

                <q-card-section>
                  <div class="row q-col-gutter-md">
                    <div class="col-12" style="padding: 0px !important">
                      <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>
              </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 info-card" 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 info-card" 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 info-card" 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 info-card" 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>

        <!-- Schedule Section -->
        <section id="schedule">
          <div class="q-pa-md q-py-xl">
            <div class="text-center q-mb-xl">
              <h2 class="text-h3 text-weight-bold">Lịch trình</h2>
            </div>

            <div class="row justify-center">
              <div class="col-12 col-md-10">
                <q-tab-panels v-model="scheduleTab" animated>
                  <q-tab-panel name="day1">
                    <div class="q-gutter-y-md">
                      <q-card
                        v-for="(session, index) in day1Schedule"
                        :key="index"
                        flat
                        bordered
                      >
                        <q-card-section>
                          <div class="row items-center">
                            <div class="col-12 col-sm-3">
                              <div class="text-h6">{{ session.time }}</div>
                              <div class="text-grey-8">
                                {{ session.location }}
                              </div>
                            </div>
                            <div class="col-12 col-sm-9">
                              <div class="text-h6">{{ session.title }}</div>
                              <div class="text-grey-8">
                                {{ session.speaker }}
                              </div>
                              <p class="q-mt-sm">{{ session.description }}</p>
                            </div>
                          </div>
                        </q-card-section>
                      </q-card>
                    </div>
                  </q-tab-panel>

                  <q-tab-panel name="day2">
                    <div class="q-gutter-y-md">
                      <q-card
                        v-for="(session, index) in day2Schedule"
                        :key="index"
                        flat
                        bordered
                      >
                        <q-card-section>
                          <div class="row items-center">
                            <div class="col-12 col-sm-3">
                              <div class="text-h6">{{ session.time }}</div>
                              <div class="text-grey-8">
                                {{ session.location }}
                              </div>
                            </div>
                            <div class="col-12 col-sm-9">
                              <div class="text-h6">{{ session.title }}</div>
                              <div class="text-grey-8">
                                {{ session.speaker }}
                              </div>
                              <p class="q-mt-sm">{{ session.description }}</p>
                            </div>
                          </div>
                        </q-card-section>
                      </q-card>
                    </div>
                  </q-tab-panel>

                  <q-tab-panel name="day3">
                    <div class="q-gutter-y-md">
                      <q-card
                        v-for="(session, index) in day3Schedule"
                        :key="index"
                        flat
                        bordered
                      >
                        <q-card-section>
                          <div class="row items-center">
                            <div class="col-12 col-sm-3">
                              <div class="text-h6">{{ session.time }}</div>
                              <div class="text-grey-8">
                                {{ session.location }}
                              </div>
                            </div>
                            <div class="col-12 col-sm-9">
                              <div class="text-h6">{{ session.title }}</div>
                              <div class="text-grey-8">
                                {{ session.speaker }}
                              </div>
                              <p class="q-mt-sm">{{ session.description }}</p>
                            </div>
                          </div>
                        </q-card-section>
                      </q-card>
                    </div>
                  </q-tab-panel>
                </q-tab-panels>
              </div>
            </div>
          </div>
        </section>
        <!-- organizations -->
        <section id="organizations" 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">
                Thông tin tổ chức, doanh nghiệp
              </h2>
            </div>

            <div class="row justify-center q-col-gutter-lg">
              <!-- Ford Philanthropy Card -->
              <div class="col-12 col-md-6 col-lg-6">
                <q-card class="organization-card">
                  <q-card-section>
                    <div class="row items-center no-wrap">
                      <div class="col">
                        <div class="text-h5">Ford Philanthropy</div>
                      </div>
                    </div>
                  </q-card-section>
                  <q-separator />
                  <q-card-section>
                    <p>
                      {{
                        language === 'en'
                          ? fordPhilanthropyEn
                          : fordPhilanthropyVi
                      }}
                    </p>
                  </q-card-section>

                  <q-card-actions align="right">
                    <q-btn
                      flat
                      color="primary"
                      target="_blank"
                      href="https://www.fordphilanthropy.org"
                      icon="open_in_new"
                    />
                  </q-card-actions>
                </q-card>
              </div>

              <!-- Watson Institute Card -->
              <div class="col-12 col-md-6 col-lg-6">
                <q-card class="organization-card">
                  <q-card-section>
                    <div class="row items-center no-wrap">
                      <div class="col">
                        <div class="text-h5">Watson Institute</div>
                      </div>
                    </div>
                  </q-card-section>

                  <q-separator />

                  <q-card-section>
                    <p>
                      {{
                        language === 'en'
                          ? watsonInstituteEn
                          : watsonInstituteVi
                      }}
                    </p>
                  </q-card-section>

                  <q-card-actions align="right">
                    <q-btn
                      flat
                      color="primary"
                      target="_blank"
                      icon="open_in_new"
                      href="https://watson.is"
                    />
                  </q-card-actions>
                </q-card>
              </div>

              <!-- LACA CITY Card -->
              <div class="col-12 col-md-6 col-lg-6">
                <q-card class="organization-card">
                  <q-card-section>
                    <div class="row items-center no-wrap">
                      <div class="col">
                        <div class="text-h5">LACA CITY</div>
                      </div>
                    </div>
                  </q-card-section>

                  <q-separator />

                  <q-card-section>
                    <p>
                      {{ language === 'en' ? lacaCityEn : lacaCityVi }}
                    </p>
                  </q-card-section>

                  <q-card-actions align="right">
                    <q-btn
                      flat
                      color="primary"
                      target="_blank"
                      href="https://laca.city"
                      icon="open_in_new"
                    />
                  </q-card-actions>
                </q-card>
              </div>

              <!-- Ardor Green Card -->
              <div class="col-12 col-md-6 col-lg-6">
                <q-card class="organization-card">
                  <q-card-section>
                    <div class="row items-center no-wrap">
                      <div class="col">
                        <div class="text-h5">Ardor Green</div>
                      </div>
                    </div>
                  </q-card-section>

                  <q-separator />

                  <q-card-section>
                    <p>
                      {{ language === 'en' ? ardorGreenEn : ardorGreenVi }}
                    </p>
                  </q-card-section>

                  <q-card-actions align="right">
                    <q-btn
                      flat
                      color="primary"
                      target="_blank"
                      href="https://ardorgreen.com"
                      icon="open_in_new"
                    />
                  </q-card-actions>
                </q-card>
              </div>
              <!-- SGS  -->
              <div class="col-12 col-md-6 col-lg-6">
                <q-card class="organization-card">
                  <q-card-section>
                    <div class="row items-center no-wrap">
                      <div class="col">
                        <div class="text-h5">SGS</div>
                      </div>
                    </div>
                  </q-card-section>

                  <q-separator />

                  <q-card-section>
                    <p>
                      {{ sgsVi }}
                    </p>
                  </q-card-section>

                  <q-card-actions align="right">
                    <q-btn
                      flat
                      color="primary"
                      target="_blank"
                      href="https://www.sgs.com/en-vn"
                      icon="open_in_new"
                    />
                  </q-card-actions>
                </q-card>
              </div>

              <!-- Air City -->

              <div class="col-12 col-md-6 col-lg-6">
                <q-card class="organization-card">
                  <q-card-section>
                    <div class="row items-center no-wrap">
                      <div class="col">
                        <div class="text-h5">Air City</div>
                      </div>
                    </div>
                  </q-card-section>

                  <q-separator />

                  <q-card-section>
                    <p>
                      {{ airCityVi }}
                    </p>
                  </q-card-section>

                  <q-card-actions align="right">
                    <q-btn
                      flat
                      color="primary"
                      target="_blank"
                      href="https://www.aircity.network/"
                      icon="open_in_new"
                    />
                  </q-card-actions>
                </q-card>
              </div>
            </div>
          </div>
        </section>
      </q-page>
    </q-page-container>
  </q-layout>
  <!-- Footer -->
  <footer class="footer text-center q-py-lg">
    <div class="container">
      <p class="text-caption q-mb-none">© 2025 LACA. All rights reserved.</p>
    </div>
  </footer>
</template>

<script setup>
import { ref } from 'vue';

// Schedule tabs
const scheduleTab = ref('day1');
const language = ref('vi');
// Schedule data
const day1Schedule = [
  {
    time: '8:30 AM - 8:45 AM',
    location: 'Hội trường chính',
    title: 'Phát biểu chào mừng',
    speaker: 'Đại diện trường',
    description: 'Lời chào mừng và khai mạc sự kiện từ đại diện nhà trường.',
  },
  {
    time: '8:45 AM - 9:00 AM',
    location: 'Hội trường chính',
    title: 'Giới thiệu sự kiện và chương trình đổi mới sáng tạo',
    speaker: 'Ms. Mai Nguyễn - Đại diện LACA City, Quỹ Ford và Viện Watson',
    description:
      'Giới thiệu lý do tổ chức sự kiện và các chương trình hỗ trợ sinh viên từ Quỹ Ford, Viện Watson và các nguồn khác.',
  },
  {
    time: '9:00 AM - 9:30 AM',
    location: 'Hội trường chính',
    title: 'Công trình Xanh trên hành trình hướng đến Net Zero 2050',
    speaker: 'Mr. Vũ Linh Quang - Ardor Green',
    description:
      'Chia sẻ về các công trình xanh và mục tiêu đạt Net Zero vào năm 2050.',
  },
  {
    time: '9:30 AM - 10:00 AM',
    location: 'Hội trường chính',
    title: 'Công nghệ trong quản lý toà nhà',
    speaker: 'Mr. Steven Lê - AirCity',
    description:
      'AirCity là một công ty khởi nghiệp tại Việt Nam phát triển công nghệ trong lĩnh vực quản lý toà nhà.',
  },
  {
    time: '10:00 AM - 10:15 AM',
    location: 'Hội trường chính',
    title: 'Hỏi đáp với doanh nghiệp',
    speaker: 'Mr. Vũ Linh Quang & Mr. Steven Lê',
    description: 'Phần hỏi đáp giữa sinh viên và hai diễn giả doanh nghiệp.',
  },
  {
    time: '10:15 AM - 10:35 AM',
    location: 'Hội trường chính',
    title:
      'Lập kế hoạch du học: Hướng dẫn sử dụng bản đồ và trải nghiệm tại Đức',
    speaker: 'Mr. Đỗ Minh Phụng – Chuyên gia bản đồ',
    description:
      'Hướng dẫn sinh viên cách lập kế hoạch du học hiệu quả thông qua việc sử dụng bản đồ và chia sẻ trải nghiệm thực tế tại Đức.',
  },
  {
    time: '10:35 AM - 11:00 AM',
    location: 'Hội trường chính',
    title: 'Số hóa lịch sử Sài Gòn: Công nghệ và câu chuyện đô thị',
    speaker: 'Mr. Lê Quang Tuệ - Nhà báo',
    description:
      'Giới thiệu về cách nhà quy hoạch có thể sử dụng công nghệ để dẫn dắt câu chuyện phát triển đô thị thông qua số hóa lịch sử.',
  },
  {
    time: '11:00 AM - 11:15 AM',
    location: 'Hội trường chính',
    title: 'Hỏi đáp với diễn giả công nghệ',
    speaker: 'Mr. Đỗ Minh Phụng & Mr. Lê Quang Tuệ',
    description:
      'Phần hỏi đáp giữa sinh viên và hai diễn giả về công nghệ và quy hoạch đô thị.',
  },
  {
    time: '11:15 AM - 12:00 PM',
    location: 'Hội trường chính',
    title: 'Tư vấn tuyển dụng và cơ hội nghề nghiệp',
    speaker: 'Đại diện doanh nghiệp',
    description:
      'Sinh viên trao đổi trực tiếp với doanh nghiệp về cơ hội việc làm và phát triển nghề nghiệp.',
  },
];
// Content in Vietnamese (original)
const fordPhilanthropyEn =
  "Ford Philanthropy is the charitable arm of Ford Motor Company. Established in 1949 as the Ford Motor Company Fund, this organization collaborates with non-profit organizations and communities in over 30 countries to address specific community needs. Ford Philanthropy focuses on providing access to essential services, education for the future of work and entrepreneurship, leveraging Ford's expertise and resources in mobility.";
const fordPhilanthropyVi =
  'Ford Philanthropy là nhành từ thiện của Ford Motor Company. Được thành lập vào năm 1949 với tên gọi là Quỹ Ford Motor Company, tổ chức này hợp tác với các tổ chức phi lợi nhuận và cộng đồng tại hơn 30 quốc gia để giải quyết các nhu cầu riêng biệt của cộng đồng. Ford Philanthropy tập trung vào việc tiếp cận cộng bằng các dịch vụ thiết yếu, giáo dục cho tương lai của công việc và tinh thần kinh doanh, tận dụng chuyên môn và nguồn lực về khả năng di chuyển của Ford.';

const lacaCityVi =
  'LACA CITY do Mai Nguyễn sáng lập, cam kết thúc đẩy các giải pháp thành phố thông minh thông qua công nghệ mới. Nền tảng này tận dụng dữ liệu thời gian thực để tối ưu hóa bãi đậu xe, giảm tắc nghẽn và giành lại không gian công cộng, tạo ra một trường đô thị hiệu quả và bền vững hơn. LACA CITY hiện đang là thành viên của chương trình Ford Philanthropy và Viện Watson tại Việt Nam.';
const lacaCityEn =
  'LACA CITY, founded by Mai Nguyen, is committed to promoting smart city solutions through new technology. This platform utilizes real-time data to optimize parking, reduce congestion, and reclaim public space, creating a more efficient and sustainable urban environment. LACA CITY is currently a member of the Ford Philanthropy program and Watson Institute in Vietnam.';

// Content in English (translated)

const watsonInstituteEn =
  'The Watson Institute is where founders and leaders can find their community, discover their voice, and accelerate their careers. Through collaborations with leading corporations and investment funds, Watson Institute not only provides financial resources but also leverages partner brand power, expertise, along with a proven training model and global network built since 2013.';
const watsonInstituteVi =
  'Viện Watson là nơi các nhà sáng lập và nhà lãnh đạo có thể tìm thấy cộng đồng của mình, khám phá tiếng nói của mình và thúc đẩy sự nghiệp của họ. Thông qua việc hợp tác cùng các tập đoàn và quỹ đầu tư hàng đầu, Watson Institute không chỉ mang đến nguồn lực tài chính mà còn tận dụng sức mạnh thương hiệu, chuyên môn của các đối tác, cùng với mô hình đào tạo đã được chứng minh và mạng lưới toàn cầu được xây dựng từ năm 2013.';

const ardorGreenEn =
  "Established in 2017, ARDOR Green is proudly a member of ARDOR GROUP - a reputable architectural firm specializing in comprehensive services and sustainable design solutions since 2005. With a team of architects, engineers, and experts from both domestic and international backgrounds (USA, Australia, South Africa) who have extensive experience working with numerous Vietnamese and international clients to create world-class, sustainable, and environmentally friendly projects. ARDOR Green is a member of Vietnam Green programs and holds World Bank Group's EDGE certification in Vietnam, Sintali - SGS in regional markets such as Thailand and the Philippines.";
const ardorGreenVi =
  'Ardor Green được thành lập vào năm 2017, ARDOR Green tự hào là thành viên của ARDOR GROUP – đơn vị kiến trúc uy tín, chuyên cung cấp dịch các vụ trọn gói và giải pháp thiết kế bền vững từ năm 2005. Với đội ngũ kiến trúc sư, kỹ sư, và các chuyên gia trong và ngoài nước (Mỹ, Úc, Nam Phi) giàu kinh nghiệm làm việc với rất nhiều chủ đầu tư Việt Nam và quốc tế để kiến tạo những công trình đẳng cấp, bền vững và thân thiện với môi trường. ARDOR Green là thành viên của các chương trình Xanh Việt Nam và chứng chỉ World Bank Group phát triển EDGE tại Việt Nam, Sintali - SGS tại thị trường các nước trong khu vực như Thái Lan, Philippines.';

const scholarshipsEn =
  'Ford Philanthropy Scholarships is a program designed to equip entrepreneurs with the skills, resources, and experience to scale the impact projects they are building.';
const sgsVi =
  'SGS là công ty Kiểm tra, Kiểm định và Chứng nhận hàng đầu thế giới. Vận hành mạng lưới hơn 2.500 phòng thí nghiệm và cơ sở kinh doanh trên 115 quốc gia, được hỗ trợ bởi đội ngũ 99.500 chuyên gia. Với hơn 145 năm dịch vụ, SGS kết hợp độ chính xác và độ tin cậy vốn định hình nên các công ty Thụy Sĩ để giúp các tổ chức đạt được các tiêu chuẩn cao nhất về chất lượng, tuân thủ và tính bền vững. SGS đã cung cấp các dịch vụ quốc tế độc lập, uy tín, chất lượng tại Việt Nam từ năm 1989. Vào tháng 9 năm 1997, SGS đã trở thành công ty kiểm định độc lập quốc tế đầu tiên được cấp giấy phép công ty 100% vốn nước ngoài tại Việt Nam. SGS Vietnam Ltd hiện đang tuyển dụng hơn 600 chuyên gia chuyên ngành lâu năm có trụ sở tại các văn phòng ở các địa điểm chiến lược trên khắp Việt Nam. Họ có thể cung cấp trình độ chuyên môn cao trong lĩnh vực Kiểm tra, Chứng nhận và Thử nghiệm bằng cách sử dụng một số thiết bị phòng thí nghiệm tiên tiến nhất hiện có tại Việt Nam.';

const airCityVi =
  'AirCity là công ty công nghệ trong lĩnh vực bất động sản (Proptech). Chúng tôi tiên phong trong việc phát triển và ứng dụng công nghệ 4.0 như IoT và AI trong quản lý và vận hành bất động sản, cụ thể là các tòa nhà chung cư, văn phòng, tòa nhà cho thuê tại các thành phố lớn.';
</script>

<style scoped>
.hero-section {
  background-image: url('/landing/banner_2-1.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  .near-btn {
    position: absolute;
    right: 50px;
  }
}
@media (max-width: 599px) {
  .hero-section {
    background: url('/landing/smart_city_2.png') center no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    .near-btn {
      position: absolute;
      right: unset;
    }
  }
}

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

.speaker-card:hover {
  transform: translateY(-5px);
}
.organization-card {
  border-radius: 10px;
}
.info-card {
  border-radius: 10px;
  height: 250px;
}
</style>
