---
import Base from '~/layouts/Base.astro';
import { designer, projects } from '~/data/designer';

const BASE = import.meta.env.BASE_URL.replace(/\/$/, '');
---
<Base
  title={`About — ${designer.name}`}
  description={`About ${designer.name}, ${designer.title}. ${designer.about[0]}`}
  ogTitle={`About ${designer.name}`}
>
  <!-- Page header -->
  <section class="py-20 lg:py-28 border-b border-cream-200">
    <div class="max-w-wide mx-auto px-6 lg:px-8">
      <p class="eyebrow text-terracotta-400 mb-6">About</p>
      <h1 class="heading-display text-ink text-2xl sm:text-4xl lg:text-6xl leading-none">
        {designer.name}
      </h1>
    </div>
  </section>

  <!-- About body -->
  <section class="py-20 lg:py-28">
    <div class="max-w-wide mx-auto px-6 lg:px-8">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
        <!-- Text -->
        <div>
          <p class="body-serif text-ink text-xl lg:text-2xl mb-6">{designer.title}</p>
          <span class="accent-rule mb-8" aria-hidden="true"></span>
          {designer.about.map((paragraph) => (
            <p class="body-serif text-ink-muted mb-6 max-w-prose">
              {paragraph}
            </p>
          ))}
          <div class="flex gap-4 mt-10">
            <a href={`${BASE}/contact/`} class="btn-primary">
              Work Together &rarr;
            </a>
          </div>
        </div>

        <!-- Photo + detail -->
        <div>
          <div class="aspect-[3/4] overflow-hidden mb-8">
            <img
              src={`${BASE}/images/work/about-portrait.jpg`}
              alt="Mara Voss in her Amsterdam studio, working on a brand identity project at a light table"
              width="600"
              height="800"
              loading="lazy"
              decoding="async"
              class="w-full h-full object-cover"
            />
          </div>

          <!-- Stats -->
          <dl class="grid grid-cols-2 gap-6 border-t border-cream-200 pt-8">
            <div>
              <dt class="eyebrow text-ink-light mb-1">Based in</dt>
              <dd class="heading-display text-ink text-sm">{designer.location}</dd>
            </div>
            <div>
              <dt class="eyebrow text-ink-light mb-1">Experience</dt>
              <dd class="heading-display text-ink text-sm">8 Years</dd>
            </div>
            <div>
              <dt class="eyebrow text-ink-light mb-1">Projects</dt>
              <dd class="heading-display text-ink text-sm">{projects.length} Selected</dd>
            </div>
            <div>
              <dt class="eyebrow text-ink-light mb-1">Availability</dt>
              <dd class="heading-display text-terracotta-400 text-sm">Open</dd>
            </div>
          </dl>
        </div>
      </div>
    </div>
  </section>

  <!-- Approach -->
  <section
    aria-labelledby="approach-about-heading"
    class="py-20 lg:py-28 bg-parchment border-t border-b border-cream-200"
  >
    <div class="max-w-wide mx-auto px-6 lg:px-8">
      <p class="eyebrow text-terracotta-400 mb-6">Process</p>
      <h2 id="approach-about-heading" class="heading-display text-ink text-3xl lg:text-4xl mb-16">
        How I Think About Design
      </h2>
      <div class="space-y-12">
        {designer.approach.map((item) => (
          <div class="fade-up grid grid-cols-1 md:grid-cols-3 gap-6 border-b border-cream-200 pb-12">
            <div class="flex items-start gap-4">
              <span class="heading-display text-terracotta-400 text-3xl" aria-hidden="true">{item.number}</span>
              <h3 class="heading-display text-ink text-base mt-1">{item.label}</h3>
            </div>
            <div class="md:col-span-2">
              <p class="body-serif text-ink-muted text-lg">{item.body}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- Services list -->
  <section
    aria-labelledby="services-about-heading"
    class="py-20 lg:py-28"
  >
    <div class="max-w-wide mx-auto px-6 lg:px-8">
      <p class="eyebrow text-terracotta-400 mb-6">Services</p>
      <h2 id="services-about-heading" class="heading-display text-ink text-3xl lg:text-4xl mb-16">
        What I Do
      </h2>
      <ul class="list-none m-0 p-0 divide-y divide-cream-200">
        {designer.services.map((service) => (
          <li class="fade-up py-8 grid grid-cols-1 md:grid-cols-3 gap-4">
            <h3 class="heading-display text-ink text-sm">{service.label}</h3>
            <p class="body-serif text-ink-muted md:col-span-2">{service.description}</p>
          </li>
        ))}
      </ul>
    </div>
  </section>
</Base>
