<template>
  <section class="py-16 px-4 max-w-6xl mx-auto">
    <h1 class="text-3xl font-bold text-center mb-12">Our Film Productions</h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
      <div
        v-for="project in projects"
        :key="project.docId"
        class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow hover:shadow-xl transition duration-300 flex flex-col"
      >
        <img
          v-if="project.thumbnail?.url"
          :src="project.thumbnail.url"
          :alt="project.title"
          class="w-full h-64 object-cover"
        />
        <div class="p-6 flex flex-col justify-between flex-1">
          <h2 class="text-xl font-semibold mb-2">{{ project.title }}</h2>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
            {{ project.subtitle }}
          </p>
          <NuxtLink
            v-if="project.docId"
            :to="`/projects/${project.docId}`"
            class="text-blue-600 dark:text-blue-400 hover:underline mt-auto"
          >
            Learn more →
          </NuxtLink>
        </div>
      </div>
    </div>

    <div class="text-center mt-20">
      <h2 class="text-2xl font-bold mb-4">Have a project in mind?</h2>
      <p class="text-gray-600 dark:text-gray-300 mb-6">
        Let's bring your story to life. Contact us for a consultation or
        collaboration.
      </p>
      <NuxtLink
        to="/contact"
        class="inline-block bg-black text-white px-6 py-3 rounded-full hover:bg-gray-800 transition"
      >
        Get in Touch
      </NuxtLink>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import LoadingSection from '@/components/LoadingSection.vue';
import type { ProjectBoard } from '@/types';
import { fetchBoardsFromFunction } from '@/utils/api/fetchBoardsFromFunction';

const projects = ref<ProjectBoard[]>([]);
const isLoading = ref(false);

const fetchProjects = async () => {
  isLoading.value = true;
  try {
    const { items: boards } = await fetchBoardsFromFunction<ProjectBoard>(
      'projects',
      {
        access: 'public', // use new access‑control
        itemsPerPage: 100, // big enough to fetch them all
        sortOrder: 'desc',
        pageNumber: 1,
      }
    );

    // keep only announcement (or whatever client‑side filter you need)
    projects.value = boards.filter((p) => p.announcement);
  } catch (err) {
    console.error('Error fetching projects:', err);
  } finally {
    isLoading.value = false;
  }
};

onMounted(fetchProjects);
</script>
