---
import Layout from '../../layouts/Layout.astro';

export async function getStaticPaths() {
  // Portfolio slugs from sitemap
  const slugs = [
    'web-design-project-2',
    'web-design-project-3',
    'web-design-project-4',
    'web-design-project-5'
  ];

  return slugs.map(slug => ({
    params: { slug },
    props: { slug }
  }));
}

const { slug } = Astro.props;

// Placeholder content
const project = {
  title: 'Web Design Project',
  description: 'Project description...',
  images: []
};
---

<Layout>
  <section class="project-section">
    <div class="container">
      <h1>{project.title}</h1>
      <p>{project.description}</p>
      <!-- Images and details -->
    </div>
  </section>
</Layout>

<style>
  .project-section {
    padding: 40px 0;
  }
  .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
  }
  h1 {
    text-align: center;
    margin-bottom: 30px;
  }
</style>