---
import BaseLayout from '../layouts/BaseLayout.astro';
import ProjectCard from '../components/ProjectCard.astro';
import { getMockFeaturedProjects } from '../lib/mock-data';

const featured = getMockFeaturedProjects();
const events = featured.filter(p => p.category === 'event');
const perennes = featured.filter(p => p.category === 'perenne');
---

<BaseLayout>
  <!-- Hero Section -->
  <section class="hero">
    <div class="container">
      <div class="hero__content">
        <h1 class="hero__title">
          <span class="hero__title-line">Design</span>
          <span class="hero__title-line hero__title-accent">d'expérience</span>
        </h1>
        <p class="hero__subtitle">
          Aurélie Barré — Directrice artistique & designeuse d'intérieur.<br />
          Du concept à la réalisation, chaque espace raconte une histoire.
        </p>
        <div class="hero__cta">
          <a href="/processus" class="hero__link">
            Découvrir mon processus
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-left: 8px;">
              <path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.2"/>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Featured Events -->
  <section class="section">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-label">Sélection</span>
        <h2>Créations Événement</h2>
        <a href="/creations-evenement" class="section-link">
          Voir tous les projets
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
            <path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.2"/>
          </svg>
        </a>
      </div>

      <div class="projects-grid">
        {events.slice(0, 4).map((project, index) => (
          <ProjectCard
            title={project.title}
            client={project.client}
            slug={project.slug.current}
            category={project.category}
            heroImage={project.heroImage}
            description={project.description}
            tags={project.tags}
            index={index}
          />
        ))}
      </div>
    </div>
  </section>

  <!-- Featured Pérennes -->
  {perennes.length > 0 && (
    <section class="section" style="background-color: var(--color-bg-alt);">
      <div class="container">
        <div class="section-header reveal">
          <span class="section-label">Sélection</span>
          <h2>Réalisations Pérennes</h2>
          <a href="/realisations-perennes" class="section-link">
            Voir tous les projets
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.2"/>
            </svg>
          </a>
        </div>

        <div class="projects-grid">
          {perennes.map((project, index) => (
            <ProjectCard
              title={project.title}
              client={project.client}
              slug={project.slug.current}
              category={project.category}
              heroImage={project.heroImage}
              description={project.description}
              tags={project.tags}
              index={index}
            />
          ))}
        </div>
      </div>
    </section>
  )}

  <!-- Process Teaser -->
  <section class="section process-teaser">
    <div class="container">
      <div class="process-teaser__inner reveal">
        <span class="section-label">Processus</span>
        <h2>Comment je travaille</h2>
        <p class="process-teaser__text text-secondary">
          De la prise de contact à la livraison, chaque projet suit un processus créatif rigoureux
          qui garantit un résultat à la hauteur de vos ambitions.
        </p>
        <div class="process-teaser__steps">
          <span class="process-teaser__step">01 — Prise de contact</span>
          <span class="process-teaser__step">02 — Conception & Moodboard</span>
          <span class="process-teaser__step">03 — Sélection & Sourcing</span>
          <span class="process-teaser__step">04 — Réalisation</span>
          <span class="process-teaser__step">05 — Livraison & Retour</span>
        </div>
        <a href="/processus" class="hero__link" style="margin-top: 2rem; display: inline-flex;">
          Découvrir en détail
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-left: 8px;">
            <path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.2"/>
          </svg>
        </a>
      </div>
    </div>
  </section>
</BaseLayout>

<style>
  /* Hero */
  .hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding-top: var(--header-height);
  }

  .hero__content {
    max-width: 800px;
  }

  .hero__title {
    margin-bottom: var(--space-lg);
  }

  .hero__title-line {
    display: block;
  }

  .hero__title-accent {
    font-style: italic;
    color: var(--color-accent);
  }

  .hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-xl);
  }

  .hero__link {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  .hero__link:hover {
    color: var(--color-accent-hover);
  }

  /* Section Headers */
  .section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
  }

  .section-label {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-light);
    width: 100%;
  }

  .section-header h2 {
    margin-right: auto;
  }

  .section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--color-accent);
    text-decoration: none;
  }

  .section-link:hover {
    color: var(--color-accent-hover);
  }

  /* Projects Grid */
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl) var(--space-lg);
  }

  @media (max-width: 768px) {
    .projects-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Process Teaser */
  .process-teaser__inner {
    max-width: 700px;
  }

  .process-teaser__text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: var(--space-md);
    margin-bottom: var(--space-xl);
  }

  .process-teaser__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .process-teaser__step {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
  }
</style>