---
import PageShell from '../components/PageShell.astro';
import { portfolio } from '../data/site.js';
---

<PageShell
  title="ผลงาน | MoreminiMore"
  description="ผลงานเว็บไซต์และเคสธุรกิจจริงของ MoreminiMore สำหรับ SME ที่ต้องการตัดสินใจจากงานจริง"
>
  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
    <p class="eyebrow">ผลงาน</p>
    <h1>ผลงานจริงของเรา</h1>
    <p class="hero-lead">
      ผลงานที่แสดงเป็นส่วนที่เปิดเผยได้ — บางโปรเจกต์มีข้อมูลลับของลูกค้า จึงไม่สามารถนำมาโชว์ได้
    </p>
  </section>

  <section class="portfolio-section scene scene-light portfolio-page" data-scene="light">
    <div class="section-heading">
      <p class="eyebrow">ผลงานทั้งหมด</p>
      <h2>ผลงานเน้นการตอบโจทย์ธุรกิจ</h2>
      <p class="portfolio-design-note">เราออกแบบตามวัตถุประสงค์ของลูกค้า ไม่ใช่แค่ความสวยหรือเทคโนโลยี — เพราะกลุ่มเป้าหมายต่างกัน ประสบการณ์ที่ดีสำคัญกว่าเทคนิคที่หวือหวา</p>
    </div>
    <div class="portfolio-grid">
      {portfolio.map((item) => (
        <a class={`portfolio-card ${item.featured ? 'featured' : ''} liquid-glass liquidGlass-wrapper`} href={item.href} target="_blank" rel="noopener noreferrer">
          <div class="liquidGlass-effect" aria-hidden="true"></div>
          <div class="liquidGlass-tint" aria-hidden="true"></div>
          <div class="liquidGlass-shine" aria-hidden="true"></div>
          <img src={item.image} alt={`${item.name} website screenshot`} loading="lazy" />
          <div>
            <span>{item.tag}</span>
            <h3>{item.name}</h3>
            <p>{item.description}</p>
          </div>
        </a>
      ))}
    </div>
  </section>
</PageShell>

<style>
  .portfolio-page {
    color: var(--ink);
  }

  .portfolio-hero-lead {
    max-width: 52ch;
    margin: 16px auto 0;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1.6;
  }

  .portfolio-page .eyebrow {
    color: var(--muted);
    border-color: rgb(19 18 13 / .10);
    background: rgb(255 255 255 / .52);
  }

  .portfolio-page .section-heading {
    color: var(--ink);
  }

  .portfolio-page .section-heading h2 {
    color: var(--ink);
  }

  .section-heading .portfolio-design-note {
    grid-column: 2;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .portfolio-page .portfolio-card,
  .portfolio-page .portfolio-card.featured {
    grid-column: span 4;
    border: 1px solid rgb(19 18 13 / .10);
  }

  .portfolio-page .portfolio-card h3 {
    color: var(--ink);
  }

  .portfolio-page .portfolio-card p {
    color: var(--muted);
  }

  .portfolio-page .portfolio-card span {
    color: var(--muted);
    -webkit-text-stroke: 0;
    paint-order: normal;
  }

  @media (max-width: 920px) {
    .portfolio-page .section-heading {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
    }

    .section-heading .portfolio-design-note {
      grid-column: 1 / -1;
      width: 100%;
      max-width: 58ch;
      margin-inline: auto;
      text-align: center;
    }

    .portfolio-page .portfolio-card,
    .portfolio-page .portfolio-card.featured {
      grid-column: span 6;
    }
  }

  @media (max-width: 620px) {
    .page-hero.hero-oversized {
      align-items: center;
      text-align: center;
    }

    .page-hero.hero-oversized h1,
    .page-hero.hero-oversized .hero-lead {
      margin-inline: auto;
      text-align: center;
    }

    .page-hero.hero-oversized h1 {
      max-width: 100%;
    }

    .page-hero.hero-oversized .hero-lead {
      max-width: 34ch;
    }

    .portfolio-page .section-heading h2 {
      width: 100%;
      max-width: 100%;
      margin-inline: auto;
    }

    .section-heading .portfolio-design-note {
      max-width: 34ch;
    }

    .portfolio-page .portfolio-card,
    .portfolio-page .portfolio-card.featured {
      grid-column: span 12;
      border-radius: 22px;
    }

    .portfolio-page .portfolio-card img {
      aspect-ratio: 16 / 9;
      object-position: top center;
    }

    .portfolio-page .portfolio-card div {
      text-align: center;
    }
  }
</style>
