<script setup>
import Section from '~/components/layout/Section.vue'
</script>

<template>
  <!-- Basic section -->
  <Section 
    id="about" 
    heading="INTRODUCTION" 
    title="About Me"
    description="Learn more about my background and experience"
  >
    <p>Section content goes here</p>
  </Section>

  <!-- Section with background -->
  <Section
    id="projects"
    title="My Projects"
    :hasBackground="true"
    :hasBlobBackground="true"
  >
    <div class="grid grid-cols-3 gap-4">
      <!-- Project cards -->
    </div>
  </Section>

  <!-- Full-height section -->
  <Section
    id="hero"
    :fullSize="true"
  >
    <div class="flex items-center justify-center h-full">
      <!-- Hero content -->
    </div>
  </Section>
</template>

.background {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23f1f5f9' fill-opacity='0.07' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

<script setup>
import Container from '~/components/layout/Container.vue'
</script>

<template>
  <Container>
    <h1>Page Content</h1>
    <p>This content is centered and constrained.</p>
  </Container>
</template>

<template>
  <div class="m-auto w-10/12 overflow-hidden xl:w-8/12">
    <slot></slot>
  </div>
</template>

<script setup>
import Stack from '~/components/layout/Stack.vue'
</script>

<template>
  <!-- Default spacing -->
  <Stack>
    <h2>Title</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </Stack>

  <!-- Custom spacing -->
  <Stack :spacing="8">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </Stack>
</template>

const size = computed(() => {
  return `space-y-${props.spacing} gap-y-${props.spacing}`
})

<template>
  <section :class="size">
    <slot />
  </section>
</template>

<script setup>
import Navbar from '~/components/layout/Navbar.vue'
</script>

<template>
  <Navbar />
</template>

const items = [
  { url: '#introduction', text: 'À propos' },
  { url: '#experiences', text: 'Expériences' },
  { url: '#competences', text: 'Compétences' },
  { url: '#projets', text: 'Projets' },
  { url: '#contact', text: 'Contact' },
]

const menuMobileVisible = ref(false)

const toggleNavbar = () => {
  menuMobileVisible.value = !menuMobileVisible.value
}

<button
  @click="$colorMode.preference = $colorMode.value === 'light' ? 'dark' : 'light'"
>
  <Icon v-if="$colorMode.value === 'light'" name="moon" :outline="false" />
  <Icon v-else name="sunny" :outline="false" />
</button>

<script setup>
import Footer from '~/components/layout/Footer.vue'
</script>

<template>
  <!-- Standard footer -->
  <Footer />

  <!-- Footer with background -->
  <Footer :hasBackground="true" />
</template>

<NuxtLink target="_blank" to="https://www.linkedin.com/in/guillaume-cazin/">
  <Icon class="text-xl" name="logo-linkedin" :outline="false" />
</NuxtLink>
<NuxtLink target="_blank" to="http://github.com/gcazin">
  <Icon class="text-xl" name="logo-github" :outline="false" />
</NuxtLink>
<NuxtLink target="_blank" to="https://codepen.io/gcazin">
  <Icon class="text-xl" name="logo-codepen" :outline="false" />
</NuxtLink>

<script setup>
import Col from '~/components/layout/Col.vue'
</script>

<template>
  <!-- Two columns -->
  <Col :number="2">
    <template #1>
      <div>Column 1 content</div>
    </template>
    <template #2>
      <div>Column 2 content</div>
    </template>
  </Col>

  <!-- Three columns -->
  <Col :number="3">
    <template #1>
      <div>First</div>
    </template>
    <template #2>
      <div>Second</div>
    </template>
    <template #3>
      <div>Third</div>
    </template>
  </Col>
</template>

<template>
  <div class="flex flex-col">
    <div v-for="(n, index) in number" :key="index" class="flex-1">
      <slot :name="n"></slot>
    </div>
  </div>
</template>