<template>
  <v-container fluid>
    <!-- Hero Section -->
    <v-row justify="center" class="text-center my-16">
      <v-col cols="12" md="8">
        <h1 class="text-h3 font-weight-bold mb-4">
          Inspire Emotion and Evoke Storytelling through the Art of Photography.
        </h1>
        <p class="text-body-1">
          Explore my photography portfolio and see the world through my creative lens.
          Contact me if you would like to hire me.
        </p>
      </v-col>
    </v-row>

    <!-- Hero Image Grid -->
    <v-row dense class="mb-16">
      <v-col
        v-for="(image, index) in heroImages"
        :key="index"
        cols="12"
        sm="6"
        md="4"
      >
        <v-img
          :src="image.src"
          :alt="image.alt"
          :width="image.width"
          :height="image.height"
          class="rounded-lg elevation-2"
          cover
        />
      </v-col>
    </v-row>

    <!-- About Me Section -->
    <v-row class="align-center my-16">
      <v-col cols="12" md="5">
        <v-img
          src="/img/home/personal-photo.webp"
          alt="Oscar Mattern"
          width="100%"
          height="auto"
          class="rounded-lg"
          cover
        />
      </v-col>
      <v-col cols="12" md="7">
        <h2 class="text-h4 font-weight-bold mb-4">About Me</h2>
        <p class="text-body-1 mb-4">
          I am a photographer based in New York City. I specialize in
          <strong>landscape, travel, and portrait photography</strong>. I have been
          photographing for over 10 years and have been published in many magazines and
          newspapers. I am available for hire for weddings, events, and portraits.
        </p>
        <p class="text-body-1">
          I am a passionate photographer with a keen eye for capturing the beauty of life
          through the art of photography.
        </p>
      </v-col>
    </v-row>

    <!-- Awards Section -->
    <v-row class="my-12">
      <v-col cols="12">
        <h2 class="text-h5 font-weight-bold mb-6">Awards</h2>
        <v-timeline side="end" dense>
          <v-timeline-item
            v-for="(award, index) in awards"
            :key="index"
            dot-color="primary"
            size="small"
          >
            <strong>{{ award.title }} ({{ award.year }})</strong><br />
            <span class="text-body-2">{{ award.description }}</span>
          </v-timeline-item>
        </v-timeline>
      </v-col>
    </v-row>

    <!-- CTA Hire Me Section -->
    <v-row justify="center" class="text-center mt-16">
      <v-col cols="12" md="8">
        <h2 class="text-h4 font-weight-bold mb-4">Questions or collaboration ideas?</h2>
        <p class="text-body-1 mb-6">
          I would love to hear from you! Whether you have <strong>questions</strong> about
          my work, have <strong>collaboration ideas</strong>, or are interested in
          <strong>hiring me</strong> for a project, don't hesitate to reach out.
        </p>
        <p class="text-body-1">I usually respond within hours!</p>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
const heroImages = [
  { src: '/img/home/hero-grid-01.webp', alt: 'Image 1', width: 1600, height: 2400 },
  { src: '/img/home/hero-grid-02.webp', alt: 'Image 2', width: 1600, height: 2199 },
  { src: '/img/home/hero-grid-03.webp', alt: 'Image 3', width: 1600, height: 2400 },
  { src: '/img/home/hero-grid-07.webp', alt: 'Image 4', width: 1600, height: 2400 },
  { src: '/img/home/hero-grid-05.webp', alt: 'Image 5', width: 1600, height: 2000 },
  { src: '/img/home/hero-grid-06.webp', alt: 'Image 6', width: 1600, height: 2400 },
  { src: '/img/home/hero-grid-04.webp', alt: 'Image 7', width: 1600, height: 2400 },
]

const awards = [
  {
    title: 'Best Landscape Photographer',
    year: '2019',
    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.',
  },
  {
    title: 'Best Portrait Photographer',
    year: '2018',
    description: 'Lorem ipsum dolor sit amet.',
  },
  {
    title: 'Best Travel Photographer',
    year: '2017',
    description: 'Lorem ipsum dolor sit amet.',
  },
]
</script>
