<style>
@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Old+Standard+TT&display=swap');
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const startPhotobooth = () => {
  router.push('/frame')
}

// ตัวอย่างรูปถ่าย (จะถูกแทนที่ด้วยรูปจริงในอนาคต)
const examplePhotos = ref([
  '/placeholder-photo1.svg',
  '/placeholder-photo2.svg',
  '/placeholder-photo3.svg',
  '/placeholder-photo4.svg'
])
</script>

<template>
  <div class="home-container">
    <header class="hero-section">
      <img src="/assets/bg_home.png" alt="DekThai Photobooth" style="max-width: 100%;" @click="startPhotobooth"/>
    </header>

    <section class="cta-section">
      <button @click="startPhotobooth" class="start-button">
        <span class="camera-icon">📸</span> เริ่มสร้างรูปถ่าย
      </button>
    </section>

    <section class="examples-section" style="margin-top: 1rem; display: none;">
      <!-- <h2>ตัวอย่างผลงาน</h2> -->
      <div class="photo-examples">
        <div class="example-strip">
          <img v-for="photo in examplePhotos" :key="photo" :src="photo" alt="Example photo" class="example-photo" />
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  background: #fdfaf6; /* Light vintage paper color */
  color: #3e2723; /* Dark brown for text */
  font-family: 'Old Standard TT', serif;
}

.hero-section {
  text-align: center;
  margin-bottom: 3rem;
  background: none; /* Remove background for image */
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero-section img {
  cursor: pointer;
}

.hero-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px; /* Optional: add some rounded corners to the image */
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}

.title {
  /* Remove or adjust if not needed, as it's replaced by an image */
  font-family: 'Crete Round', serif;
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  color: #5d4037; /* Darker brown for title */
}

.subtitle {
  /* Remove or adjust if not needed, as it's replaced by an image */
  font-size: 1.4rem;
  opacity: 0.8;
  color: #6d4c41;
}

.examples-section {
  margin-bottom: 3rem;
  text-align: center;
  color: #3e2723;
}

.photo-examples {
  margin-top: 2rem;
}

.example-strip {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.example-photo {
  width: 150px;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  border: 3px solid #bcaaa4; /* Muted border */

}

.cta-section {
  margin-top: 0rem;
}

.start-button {
  background: #8d6e63; /* Vintage brown button */
  color: #fdfaf6;
  border: none;
  padding: 1.2rem 2.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
}

.start-button:hover {
  background: #795548;
  margin-right: 0.5rem;
  transform: translateY(-1px);
  font-size: 1.2rem;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.camera-icon {
  background: #795548;
  font-size: 1.8rem; /* Adjust icon size */
  transform: translateY(-2px);
  line-height: 1; /* Ensure icon aligns well with text */ ;
}

@media (max-width: 768px) {

  .title {
    font-size: 2.5rem;
  }

  .subtitle {
    font-size: 1.1rem;
  }

  .example-photo {
    width: 100px;
    height: 140px;
  }

}








</style>