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

---
import { Image } from 'astro:assets';
import { getLocalizedCollection } from '../../utils/content-i18n';
import { t, getPhotoBlogPath, getPhotoAlbumsPath, type Locale } from '../../utils/i18n';
import exhibitionImage from '../../assets/images/a-nous-les-chemins.jpg';

interface Props {
  lang?: Locale;
}

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

// Récupérer les catégories filtrées par langue
const sortedCategories = (await getLocalizedCollection('photoCategories', lang))
  .sort((a, b) => (a.data.order || 99) - (b.data.order || 99));

const exhibition = {
  fr: {
    label: "Exposition en cours",
    title: "« À nous les chemins ! »",
    description: "Exposition collective itinérante de photographies avec l'association Albi Tadam, dans le cadre de « En 2026, la culture sillonne le Tarn ».",
    venues: [
      { dates: "4 avril – 25 mai", place: "Musée-mine départemental, Cagnac-les-Mines" },
      { dates: "1er – 26 juin", place: "Mairie de Pampelonne" },
      { dates: "1er – 31 juillet", place: "Communauté de Communes Sor et Agout, Saïx" },
      { dates: "4 – 28 août", place: "Musée de la vie paysanne, Rieumontagné" },
      { dates: "3 – 30 sept.", place: "Pan'art, Castres" },
      { dates: "6 – 31 oct.", place: "Médiathèque, Saint-Sulpice" },
      { dates: "4 – 28 nov.", place: "Espace Reynès, Albi" },
      { dates: "1er – 24 déc.", place: "Archives départementales du Tarn, Albi" },
    ],
    vernissage: "Vernissage le samedi 18 avril à 17h au Musée-mine départemental, Cagnac-les-Mines.",
    free: "Entrée libre",
    imageAlt: "Affiche de l'exposition « À nous les chemins ! » par Albi Tadam — escalier illuminé aux couleurs bleu, blanc, rouge, photo de Candic Clavel-Deandington",
  },
  en: {
    label: "Current exhibition",
    title: '"The Paths Are Ours!"',
    description: "Itinerant collective photography exhibition with the Albi Tadam association, as part of 'In 2026, culture travels through the Tarn'.",
    venues: [
      { dates: "April 4 – May 25", place: "Musée-mine départemental, Cagnac-les-Mines" },
      { dates: "June 1 – 26", place: "Mairie de Pampelonne" },
      { dates: "July 1 – 31", place: "Communauté de Communes Sor et Agout, Saïx" },
      { dates: "Aug. 4 – 28", place: "Musée de la vie paysanne, Rieumontagné" },
      { dates: "Sept. 3 – 30", place: "Pan'art, Castres" },
      { dates: "Oct. 6 – 31", place: "Médiathèque, Saint-Sulpice" },
      { dates: "Nov. 4 – 28", place: "Espace Reynès, Albi" },
      { dates: "Dec. 1 – 24", place: "Archives départementales du Tarn, Albi" },
    ],
    vernissage: "Opening reception: Saturday, April 18 at 5 PM, Musée-mine départemental, Cagnac-les-Mines.",
    free: "Free admission",
    imageAlt: "Exhibition poster 'The Paths Are Ours!' by Albi Tadam — stairway lit in blue, white and red, photo by Candic Clavel-Deandington",
  },
  ar: {
    label: "معرض جارٍ",
    title: "« !الدروب لنا »",
    description: "معرض تصوير جماعي متنقل مع جمعية ألبي تادام، ضمن برنامج « في 2026، الثقافة تجوب التارن ».",
    venues: [
      { dates: "4 أبريل – 25 مايو", place: "متحف المنجم الإقليمي، كانياك لي مين" },
      { dates: "1 – 26 يونيو", place: "بلدية بامبلون" },
      { dates: "1 – 31 يوليو", place: "مجموعة بلديات سور وأغو، سايكس" },
      { dates: "4 – 28 أغسطس", place: "متحف الحياة الريفية، ريومونتانيي" },
      { dates: "3 – 30 سبتمبر", place: "بان آر، كاستر" },
      { dates: "6 – 31 أكتوبر", place: "المكتبة الوسائطية، سان سولبيس" },
      { dates: "4 – 28 نوفمبر", place: "فضاء رينيس، ألبي" },
      { dates: "1 – 24 ديسمبر", place: "الأرشيف الإقليمي للتارن، ألبي" },
    ],
    vernissage: "حفل الافتتاح: السبت 18 أبريل الساعة 17:00، متحف المنجم الإقليمي، كانياك لي مين.",
    free: "الدخول مجاني",
    imageAlt: "ملصق معرض « !الدروب لنا » من ألبي تادام — درج مضاء بالأزرق والأبيض والأحمر",
  },
};

const exh = exhibition[lang];
---

<section id="explore-section" class="explore-section">
  <div class="explore-content">
    <div class="exhibition-banner">
      <div class="exhibition-layout">
        <a href="https://rdvculturels.tarn.fr/ressources/les-expositions-et-conferences/exposition-itinerante-a-nous-les-chemins" target="_blank" rel="noopener noreferrer" class="exhibition-image">
          <Image
            src={exhibitionImage}
            alt={exh.imageAlt}
            width={240}
            class="exhibition-img"
          />
        </a>
        <div class="exhibition-info">
          <span class="exhibition-label">{exh.label}</span>
          <h2 class="explore-card-title">{exh.title}</h2>
          <p class="explore-card-desc">{exh.description}</p>
          <ul class="venue-list">
            {exh.venues.map((v) => (
              <li class="venue-item">
                <span class="venue-dates">{v.dates}</span>
                <span class="venue-place">{v.place}</span>
              </li>
            ))}
          </ul>
          <p class="exhibition-vernissage">{exh.vernissage}</p>
          <p class="exhibition-free">{exh.free}</p>
        </div>
      </div>
    </div>

    <div class="explore-row">
      <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>
  </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;
  flex-direction: column;
  gap: 3rem;
  max-width: 900px;
  width: 100%;
}

.explore-row {
  display: flex;
  gap: 3rem;
}

.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;
}

/* Exhibition banner */
.exhibition-banner {
  padding: 2rem;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
}

.exhibition-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.exhibition-image {
  flex-shrink: 0;
}

.exhibition-img {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.exhibition-info {
  flex: 1;
}

.exhibition-label {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(16, 185, 129, 0.9);
  background: rgba(16, 185, 129, 0.15);
  border-radius: 20px;
}

.venue-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 2rem;
}

.venue-item {
  font-size: 0.85rem;
}

.venue-dates {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.venue-place {
  color: rgba(255, 255, 255, 0.5);
}

.exhibition-vernissage {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(16, 185, 129, 0.7);
}

.exhibition-free {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(16, 185, 129, 0.9);
}

.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-row {
    flex-direction: column;
    gap: 2rem;
  }

  .explore-card {
    padding: 1.5rem;
  }

  .exhibition-layout {
    flex-direction: column;
    gap: 1.5rem;
  }

  .exhibition-image {
    display: flex;
    justify-content: center;
  }

  .exhibition-banner {
    padding: 1.5rem;
  }

  .venue-list {
    grid-template-columns: 1fr;
  }
}
</style>