---
// Faq — answer-first Q&A. Answers are always visible (no accordion to hide
// them) so they're readable, crawlable and AI-citable. Each question is a
// real <h3>; answers sit directly beneath.
import type { FaqItem } from '../i18n/content/_type';

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

  <dl class="faq__list">
    {items.map((item) => (
      <div class="faq__item">
        <dt class="faq__q">{item.question}</dt>
        <dd class="faq__a">{item.answer}</dd>
      </div>
    ))}
  </dl>
</div>

<style>
  .faq__head {
    margin-block-end: var(--space-l);
  }
  .faq__head h2 { white-space: pre-line; }

  .faq__list {
    margin: 0;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
  }

  @media (min-width: 860px) {
    .faq__list {
      grid-template-columns: 1fr 1fr;
      column-gap: var(--space-xl);
    }
  }

  .faq__item {
    padding-block: var(--space-m);
    border-block-start: 1px solid var(--c-line);
  }

  /* gold tick of a hairline at the top of the first row(s) */
  .faq__item:first-child {
    border-block-start-color: color-mix(in oklab, var(--c-gold) 60%, var(--c-line));
  }

  @media (min-width: 860px) {
    /* the second column's first item should also read as a top row */
    .faq__item:nth-child(2) {
      border-block-start-color: color-mix(in oklab, var(--c-gold) 60%, var(--c-line));
    }
  }

  .faq__q {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 440;
    line-height: 1.18;
    color: var(--c-ink);
    margin-block-end: .5rem;
  }

  .faq__a {
    margin: 0;
    color: var(--c-muted);
    line-height: 1.6;
    max-inline-size: 60ch;
  }
</style>