jalil.arfaoui.net/src/components/photo/ExploreSection.astro

---
import { getCollection } from 'astro:content';
import { t, getPhotoBlogPath, getPhotoAlbumsPath, type Locale } from '../../utils/i18n';

interface Props {
  lang?: Locale;
}

const { lang = 'fr' } = Astro.props;

// Récupérer les catégories filtrées par langue
const allCategories = await getCollection('photoCategories');
const langCategories = allCategories.filter(c => (c.data.lang ?? 'fr') === lang);
const effectiveCategories = langCategories.length > 0 ? langCategories : allCategories.filter(c => (c.data.lang ?? 'fr') === 'fr');
const sortedCategories = effectiveCategories.sort((a, b) => (a.data.order || 99) - (b.data.order || 99));
---

<section id="explore-section" class="explore-section">
  <div class="explore-content">
    <div class="explore-card">
      <h2 class="explore-card-title">{t('photo', 'categories', lang)}</h2>
      <p class="explore-card-desc">{t('photo', 'browseByTheme', lang)}</p>
      <ul class="category-list">
        {sortedCategories.map(cat => (
          <li>
            <a href={`${getPhotoAlbumsPath(lang)}/${cat.id.replace(/\.(en|ar)$/, '')}`} class="category-link">
              {cat.data.title}
            </a>
          </li>
        ))}
      </ul>
    </div>

    <div class="explore-card">
      <h2 class="explore-card-title">{t('photo', 'photoFeed', lang)}</h2>
      <p class="explore-card-desc">{t('photo', 'feedDescription', lang)}</p>
      <a href={getPhotoBlogPath(lang)} class="explore-cta">
        {t('photo', 'viewFeed', lang)}
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="5" y1="12" x2="19" y2="12"/>
          <polyline points="12 5 19 12 12 19"/>
        </svg>
      </a>
    </div>
  </div>
</section>

<style>
.explore-section {
  position: relative;
  background: #000;
  z-index: 20;
  padding: 4rem 2rem;
  padding-top: 8rem;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explore-section::before {
  content: '';
  position: absolute;
  top: -30vh;
  left: 0;
  right: 0;
  height: 30vh;
  background: linear-gradient(to bottom, transparent, #000);
  pointer-events: none;
}

.explore-content {
  display: flex;
  gap: 3rem;
  max-width: 900px;
  width: 100%;
}

.explore-card {
  flex: 1;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.explore-card-title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
}

.explore-card-desc {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-link {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.category-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.explore-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.2s ease;
}

.explore-cta:hover {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
  .explore-section {
    padding: 3rem 1.25rem;
  }

  .explore-content {
    flex-direction: column;
    gap: 2rem;
  }

  .explore-card {
    padding: 1.5rem;
  }
}
</style>