<template>
  <div class="laca-app">
    <!-- Main Content -->
    <div class="container q-py-xl">
      <!-- About Content -->
      <section class="about-section text-center">
        <h2 class="text-h2 q-mb-sm">About Us</h2>
        <h3 class="text-subtitle1 q-mb-lg">Park Easy, Move Breezy</h3>

        <p class="about-text q-mx-auto">
          Laca City is a smart, scalable platform that connects drivers with
          available parking spaces in real time, reducing congestion and
          optimizing urban mobility, thus lowering transportation emissions. By
          making parking effortless and reclaiming sidewalks for pedestrians, it
          helps cities become more efficient, sustainable, and prepared for the
          future of autonomous vehicles and low-emission urban environments.
        </p>
      </section>
    </div>

    <!-- Bikes Image -->
    <div class="bikes-image">
      <img src="/about/Bicycle.jpeg" alt="Bicycles parked at a railing" />
    </div>

    <!-- Our Story Section -->
    <div class="container q-py-xl">
      <section class="our-story-section text-center">
        <div class="underline-centered q-mb-lg">
          <span class="q-mb-md">Our Story</span>
        </div>

        <p class="story-text q-mx-auto q-mb-md">
          In the heart of every growing city, parking has become a daily
          struggle—wasting time, increasing congestion, and turning sidewalks
          into makeshift parking lots. <span>Laca City</span> was born from a
          simple yet urgent question: How can we make parking effortless while
          creating smarter, more sustainable cities? After years of living
          abroad, our founder, Mai Nguyen, returned to Vietnam and immediately
          noticed how urban spaces were being overtaken by parked vehicles,
          forcing pedestrians onto busy streets. Meanwhile, drivers—especially
          taxi and gig workers—spent hours circling in search of a spot, burning
          fuel and contributing to pollution. The problem was clear: cities
          needed a better way to manage parking.
        </p>

        <p class="story-text q-mx-auto q-mb-md">
          <span>Laca City</span> is our answer. We’ve built a real-time, smart
          parking platform that seamlessly connects drivers with available
          spaces, reducing congestion and reclaiming sidewalks for people. But
          our vision goes beyond parking—we aim to equip cities with the digital
          infrastructure needed for the future of smart, connected mobility and
          autonomous vehicles.
        </p>

        <p class="story-text q-mx-auto">
          As self-driving technology advances, parking will become a critical
          challenge. Without dedicated solutions, autonomous vehicles may
          endlessly circle cities, worsening congestion and emissions.
          <span>Laca City</span>
          is building the foundation for seamless self-parking, ensuring cities
          are prepared for the next wave of transportation innovation.
        </p>
      </section>

      <!-- Meet The Team Section -->
      <div class="team-section q-py-xl">
        <div class="text-center q-mb-xl">
          <div class="underline-centered q-mb-lg">
          <span class="q-mb-md">Meet The Team</span>
        </div>
          <div class="divider"></div>
        </div>

        <div class="row q-col-gutter-lg justify-center">
          <!-- Team Member 1 -->
          <div class="col-12 col-md-5">
            <q-card flat bordered class="team-card">
              <q-img
                src="/about/Mai_Nguyen.jpeg"
                :ratio="1"
                class="team-image"
                style="object-position: 0% 25%"
              />
              <q-card-section class="text-center q-pt-md">
                <div class="text-h5 q-mb-xs">Mai Nguyen</div>
                <div class="text-subtitle1 text-grey-7">Founder & CEO</div>
                <div class="q-mt-sm">
                  <q-btn
                    flat
                    round
                    color="black"
                    icon="fab fa-twitter"
                    size="sm"
                  />
                  <q-btn
                    flat
                    round
                    color="black"
                    icon="fab fa-spotify"
                    size="sm"
                  />
                  <q-btn
                    flat
                    round
                    color="black"
                    icon="fab fa-linkedin"
                    size="sm"
                  />
                </div>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>

      <!-- Sponsors Section -->
      <section class="sponsors-section text-center q-mt-xl q-pb-xl">
        <h2 class="text-h5 q-mb-xl">Supported & Powered by</h2>

        <div class="row justify-center q-col-gutter-lg items-center">
          <div class="col-4 col-md-3 sponsor">
            <img
              src="/about/Ford_Philanthropy_Logo.jpeg"
              alt="Ford Philanthropy"
              class="sponsor-logo"
            />
          </div>
          <div class="col-4 col-md-3 sponsor">
            <img src="/about/watson.png" alt="Watson" class="sponsor-logo" />
          </div>
          <div class="col-4 col-md-3 sponsor">
            <img
              src="/about/GIST_logo_445_1.jpeg"
              alt="GST"
              class="sponsor-logo"
            />
          </div>
        </div>
        <div class="row justify-center q-col-gutter-lg items-center">
          <div class="laca-footer-logo q-mb-md">
            <img src="/about/laca.png" alt="LACA Logo" />
          </div>
        </div>
      </section>
    </div>

    <!-- 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>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'DashBoard',
});
</script>

<style scoped>
/* Global Styles */
body {
  margin: 0;
  padding: 0;
  /* font-family: 'Helvetica', 'Arial', sans-serif; */
  color: #333;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Wix Banner */
.wix-banner {
  background-color: white;
  padding: 8px 0;
  font-size: 14px;
}

.wix-banner .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.start-now-btn {
  border-radius: 20px;
  font-weight: normal;
}

/* Purple Divider */
.purple-divider {
  height: 4px;
  background-color: #8e24aa;
  width: 100%;
}

/* Header */
header {
  padding-top: 40px;
}

.header-divider {
  height: 1px;
  background-color: #ddd;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Navigation */
.nav-links {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 32px;
}

.nav-link {
  color: #333;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #8e24aa;
}

/* About Section */
.about-section {
  max-width: 800px;
  margin: 0 auto;
}

.about-text,
.story-text {
  font-size: 16px;
  line-height: 1.6;
  max-width: 720px;
  span {
    font-weight: bold;
  }
}

/* Bikes Image */
.bikes-image {
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin-top: 40px;
}

.bikes-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Team Section */
.team-photo {
  width: 200px;
  height: 200px;
  border-radius: 4px;
  object-fit: cover;
}

/* Sponsors Section */
.sponsor-logo {
  max-width: 100%;
  height: auto;
}



/* Responsive Adjustments */
@media (max-width: 599px) {
  .nav-links {
    flex-direction: column;
    gap: 16px;
  }

  .about-text,
  .story-text {
    font-size: 14px;
    padding: 0 16px;
  }

  .bikes-image {
    height: 300px;
  }

  .team-photo {
    width: 150px;
    height: 150px;
  }
}

.underline-centered {
    display: inline-block;
    position: relative;
    padding-bottom: 8px;
    &::after{
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 5px;
      background-color: rgb(6, 6, 6);
    }
    span {
      font-size: 38px;
    }
  }
</style>
