---
import Icon from './Icon.astro';
import type { HighlightItem } from '../i18n/content/_type';

interface Props {
  eyebrow: string;
  title: string;
  items: HighlightItem[];
}
const { eyebrow, title, items } = Astro.props;
---
<div class="container">
  <header class="hl__head">
    <p class="eyebrow">{eyebrow}</p>
    <h2>{title}</h2>
  </header>

  <ul class="hl__grid" role="list">
    {items.map((item) => (
      <li class="hl">
        <span class="hl__icon" aria-hidden="true"><Icon name={item.icon} /></span>
        <h3 class="hl__title">{item.title}</h3>
        <p class="hl__body">{item.body}</p>
      </li>
    ))}
  </ul>
</div>

<style>
  .hl__head {
    margin-block-end: var(--space-l);
  }
  /* two-line title with the break forced after the comma; still wraps
     further on very narrow screens */
  .hl__head h2 { white-space: pre-line; }

  .hl__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-l) var(--space-m);
    grid-template-columns: 1fr;
  }

  @media (min-width: 600px) {
    .hl__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 980px) {
    .hl__grid { grid-template-columns: repeat(3, 1fr); }
  }

  .hl {
    padding-block-start: var(--space-m);
    border-block-start: 1px solid color-mix(in oklab, var(--c-gold) 50%, var(--c-line));
  }

  .hl__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 999px;
    color: var(--c-coral-700);
    background: color-mix(in oklab, var(--c-coral) 9%, transparent);
    margin-block-end: var(--space-s);
  }

  .hl__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 440;
    line-height: 1.15;
    margin-block: 0 .4rem;
  }

  .hl__body {
    margin: 0;
    color: var(--c-muted);
    font-size: var(--step--1);
    line-height: 1.6;
  }
</style>