{# @description One quotation, large and centred, across the full width of the page. For the one thing somebody said that you want read. #}
{# @prop name:text | description:"Who said it" #}
{# @prop role:text | description:"What they do and where" #}
{# @prop source:text | description:"The work it comes from" #}
{# @prop href:text | description:"Where the source can be read" #}
{# @prop src:text | description:"A portrait of the person" #}
{# @prop invert:boolean | default:False | description:"Light copy, for a dark background. Each background says whether it wants this." #}
{# @prop size:select['sm', 'md', 'lg'] | default:"md" | description:"How much vertical room the block takes" #}
{# @prop class:text | description:"Extra classes on the outer section. A plain surface colour goes here: bg-base-200." #}
{# @slot Good tools get out of the way. — What was said. Write the quotation marks if you want them. #}
{# @slot:background — A background block, rendered into a layer behind the words #}
{# @slot:logo — Above the words. The mark of the company the person speaks for. #}
<c-vars name role source href src invert size="md" class />
<c-section flush :invert="invert" class="{% if size == 'sm' %}dce:py-12 dce:md:py-16{% elif size == 'lg' %}dce:py-24 dce:md:py-32{% else %}dce:py-16 dce:md:py-24{% endif %} {{ class }}" :attrs="attrs" only>
  {% if background %}<c-slot name="background">{{ background }}</c-slot>{% endif %}
  <figure class="dce:mx-auto dce:flex dce:max-w-4xl dce:flex-col dce:items-center dce:gap-8 dce:text-center">
    {% if logo %}<div>{{ logo }}</div>{% endif %}
    <blockquote {% if href %}cite="{{ href }}"{% endif %}
                class="dce:text-2xl dce:leading-snug dce:font-semibold dce:tracking-tight dce:text-balance dce:sm:text-3xl dce:lg:text-4xl">
      {{ slot }}
    </blockquote>
    {% if name or role or source %}
      <c-quote.byline name="{{ name }}" role="{{ role }}" source="{{ source }}" href="{{ href }}" src="{{ src }}" align="centre" size="lg" :invert="invert" only />
    {% endif %}
  </figure>
</c-section>