---
import type { ImageMetadata } from 'astro';
import { methodSteps } from '../../data/method';
import T from '../content/T.astro';
import TImg from '../content/TImg.astro';
const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/method-*.{jpg,png}', { eager: true });
const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1].default;
---
<section class="section section--alt">
  <div class="container">
    <div class="section-heading" data-reveal>
      <T tag="home.method.title" as="h2" />
      <T tag="method.intro" as="p" />
    </div>
    <T tag="method.extra-note" as="p" class="method__note" />
    <div class="method__row">
      {methodSteps.map((s, i) => (
        <div class:list={['method__step', { 'method__step--extra': s.extra }]} data-reveal style={`--reveal-delay:${(i * 0.15).toFixed(2)}s`}>
          <div class="method__circle">
            {imgOf(s.image) && <TImg tag={`method.step.${s.n}.image`} src={imgOf(s.image)!} alt="" widths={[220]} sizes="220px" />}
            <span>{s.n}</span>
          </div>
          <T tag={`method.step.${s.n}.title`} as="h3" />
          <T tag={`method.step.${s.n}.text`} as="p" />
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .method__note { text-align: right; font-size: .8rem; color: var(--c-text-light); max-width: 260px; margin-left: auto; }
  .method__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; position: relative; }
  .method__circle { position: relative; width: 150px; height: 150px; margin: 0 auto 20px; border: 1px dashed var(--c-accent-dark); border-radius: 50%; padding: 8px; }
  .method__circle img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }
  .method__circle span { position: absolute; top: -6px; left: -6px; font-family: var(--font-heading); font-size: 2.4rem; color: var(--c-heading); background: var(--c-bg-alt); padding: 0 8px; }
  .method__step h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; }
  .method__step p { font-size: .85rem; color: var(--c-text-light); }
  @media (max-width: 767px) { .method__row { grid-template-columns: 1fr 1fr; } }
</style>