---
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,
    accent: '#0b9688',
    icon: `<svg width="24" height="24" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
      <rect x="4" y="6"  width="40" height="16" rx="3"/>
      <rect x="4" y="26" width="40" height="16" rx="3"/>
      <circle cx="12" cy="14" r="2.5" fill="currentColor" opacity="0.5"/>
      <circle cx="12" cy="34" r="2.5" fill="currentColor" opacity="0.5"/>
      <line x1="20" y1="14" x2="36" y2="14" stroke-width="1.2" opacity="0.4"/>
      <line x1="20" y1="34" x2="30" y2="34" stroke-width="1.2" opacity="0.4"/>
    </svg>`,
  },
  {
    key: 'integrations',
    data: tr.how.integrations,
    accent: '#3d35c0',
    icon: `<svg width="24" height="24" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="24" cy="10" r="5"/>
      <circle cx="8"  cy="38" r="5"/>
      <circle cx="40" cy="38" r="5"/>
      <line x1="24" y1="15" x2="8"  y2="33"/>
      <line x1="24" y1="15" x2="40" y2="33"/>
      <line x1="13" y1="38" x2="35" y2="38"/>
    </svg>`,
  },
  {
    key: 'human',
    data: tr.how.human,
    accent: '#7b39eb',
    icon: `<svg width="24" height="24" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="18" cy="14" r="7"/>
      <path d="M4 42v-3a10 10 0 0 1 10-10h8a10 10 0 0 1 10 10v3"/>
      <path d="M32 8a7 7 0 0 1 0 12"/>
      <path d="M44 42v-2a10 10 0 0 0-6-9.1"/>
    </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(({ key, data, accent, icon }) => (
        <article
          class={`feature-card ${key === 'human' ? 'feature-human' : ''}`}
          role="listitem"
          style={`--fa: ${accent}`}
        >
          <div class="feature-icon-wrap">
            <div class="feature-icon" aria-hidden="true" set:html={icon} />
          </div>
          <h3>{data.title}</h3>
          <p>{data.body}</p>
          {key === 'human' && (
            <p class="human-tagline" role="note">
              <span class="tagline-dash" aria-hidden="true">—</span>
              {tr.how.human.tagline}
            </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-top: 2.5px solid var(--fa);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .feature-human {
    background: linear-gradient(
      160deg,
      rgba(123,57,235,.04) 0%,
      rgba(255,255,255,0) 60%
    );
  }

  .feature-icon-wrap {
    width: 48px; height: 48px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--fa) 10%, transparent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.1rem;
  }

  .feature-icon { color: var(--fa); line-height: 0; }

  .feature-card h3 { margin-bottom: 0.55rem; font-size: 1rem; }
  .feature-card > p { font-size: 0.9rem; line-height: 1.6; max-width: 32ch; }

  .human-tagline {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-violet) !important;
    max-width: none;
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
  }
  .tagline-dash { opacity: 0.5; }
</style>