---
import type { Locale } from '../i18n/index.ts';
import { t } from '../i18n/index.ts';

interface Props { locale: Locale }
const { locale } = Astro.props;
const tr = t(locale);

const features = [
  {
    key: 'local',
    data: tr.how.local,
    icon: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
      <rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/>
      <line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>
    </svg>`,
  },
  {
    key: 'integrations',
    data: tr.how.integrations,
    icon: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
      <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
    </svg>`,
  },
  {
    key: 'human',
    data: tr.how.human,
    icon: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
      <circle cx="9" cy="7" r="4"/>
      <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
    </svg>`,
  },
] as const;
---

<section class="how-section" aria-labelledby="how-heading">
  <div class="container">
    <span class="section-label" aria-hidden="true">
      {locale === 'en' ? 'Our approach' : 'Nasze podejście'}
    </span>
    <h2 id="how-heading">{tr.how.h2}</h2>

    <div class="features-grid" role="list">
      {features.map(({ data, icon }) => (
        <article class="feature-card" role="listitem">
          <div class="feature-icon" aria-hidden="true" set:html={icon} />
          <h3>{data.title}</h3>
          <p>{data.body}</p>
        </article>
      ))}
    </div>
  </div>
</section>

<style>
  .how-section {
    background: var(--color-surface);
  }

  .how-section h2 {
    max-width: 40ch;
    margin-bottom: 3rem;
  }

  .features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  @media (min-width: 640px) {
    .features-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .feature-card {
    padding: 1.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .feature-icon {
    color: var(--color-accent);
    margin-bottom: 1rem;
    line-height: 0;
  }

  .feature-card h3 {
    margin-bottom: 0.6rem;
    font-size: 1rem;
  }

  .feature-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 32ch;
  }
</style>