---
// Three testimonial slots, attributed to models rather than human customers
// — see src/data/testimonials.ts, the single file a human edits to replace
// them. No star ratings, no avatars, no logo wall, no carousel: three
// quotes, sitting quietly in the site's own register rather than announced
// as social proof.
//
// Each quote is shown as a short, elided trim (`quote`) with the complete,
// verbatim original (`full`) reachable through a native <details> disclosure
// — no script required, so it degrades correctly with JS off: a reader just
// gets a working, un-scripted toggle rather than a stub that cannot open.
// This is the same fold/reveal gesture as ContextMeter's compaction and
// DocsLayout's provenance hover, applied to the site's own sources rather
// than hiding anything.
import { testimonials } from "../data/testimonials";
---
<ul class="testimonials">
  {testimonials.map((t) => (
    <li data-provisional={t.provisional ? "true" : undefined}>
      <blockquote>
        <p>{t.quote}</p>
        <details>
          <summary>read the full quote</summary>
          <p class="full-quote">{t.full}</p>
        </details>
      </blockquote>
      <cite>{t.attribution}</cite>
    </li>
  ))}
</ul>

<style>
  .testimonials {
    list-style: none;
    margin: 32px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .testimonials li {
    padding: 12px 0 12px 16px;
    border-left: 2px solid var(--line);
  }
  .testimonials blockquote {
    margin: 0;
    padding: 0;
    border: none;
    max-width: 40rem;
  }
  .testimonials blockquote p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink);
  }
  .testimonials details {
    margin-top: 8px;
  }
  .testimonials summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--ink-dim);
  }
  .testimonials summary:hover {
    color: var(--ink);
  }
  .testimonials .full-quote {
    margin-top: 8px;
    padding-left: 12px;
    border-left: 1px dotted var(--line);
  }
  .testimonials cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 12px;
    color: var(--ink-dim);
  }
  .testimonials cite::before {
    content: "— ";
  }
</style>