Blockquote text

---
interface Props {
  quote: string;
  author?: string;
  role?: string;
  company?: string;
  avatar?: string;
  source?: string;
  variant?: 'default' | 'large' | 'card' | 'sidebar';
  accentColor?: string;
}

const {
  quote,
  author,
  role,
  company,
  avatar,
  source,
  variant = 'default',
  accentColor,
} = Astro.props;

const accentStyle = accentColor ? `--bq-accent: ${accentColor};` : '';
---

<div class={`bq__wrap bq__variant-${variant}`} style={accentStyle}>
  {variant === 'large' && (
    <span class="bq__open-quote" aria-hidden="true">&ldquo;</span>
  )}
  <blockquote class="bq__quote">
    <p class="bq__text">{quote}</p>
    {source && <cite class="bq__source">{source}</cite>}
    {(author || role || company) && (
      <footer class="bq__author">
        {avatar && (
          <img class="bq__avatar" src={avatar} alt={author ?? ''} width="40" height="40" loading="lazy" />
        )}
        <div class="bq__author-meta">
          {author && <span class="bq__author-name">{author}</span>}
          {(role || company) && (
            <span class="bq__author-sub">
              {role}{role && company ? ' · ' : ''}{company}
            </span>
          )}
        </div>
      </footer>
    )}
  </blockquote>
  {variant === 'large' && (
    <span class="bq__close-quote" aria-hidden="true">&rdquo;</span>
  )}
</div>

<script>
  const wraps = document.querySelectorAll<HTMLElement>('.bq__wrap');
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('bq--visible');
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.15 }
  );
  wraps.forEach((el) => observer.observe(el));
</script>

<style>
  :root {
    --color-primary: #0a0a0a;
    --color-accent: #6366f1;
    --color-bg: #fff;
    --color-muted: #6b7280;
    --radius: 0.5rem;
    --bq-accent: var(--color-accent);
  }

  .bq__wrap {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .bq__wrap.bq--visible {
    opacity: 1;
    transform: translateY(0);
  }

  .bq__quote {
    margin: 0;
  }

  .bq__text {
    margin: 0;
    font-style: italic;
    color: var(--color-primary);
    line-height: 1.6;
  }

  .bq__source {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-style: normal;
    color: var(--color-muted);
  }

  /* --- Variant: default --- */
  .bq__variant-default {
    padding-left: 1.25rem;
    border-left: 4px solid var(--bq-accent);
  }

  .bq__variant-default .bq__text {
    font-size: 1.0625rem;
  }

  /* --- Variant: large --- */
  .bq__variant-large {
    text-align: center;
    padding: 3rem 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .bq__variant-large .bq__text {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-style: italic;
  }

  .bq__open-quote,
  .bq__close-quote {
    font-size: 5rem;
    line-height: 1;
    font-weight: 900;
    color: var(--bq-accent);
    opacity: 0.25;
    user-select: none;
  }

  .bq__close-quote {
    align-self: flex-end;
  }

  .bq__variant-large .bq__author {
    justify-content: center;
  }

  /* --- Variant: card --- */
  .bq__variant-card {
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 2rem;
  }

  .bq__variant-card .bq__text {
    font-size: 1.0625rem;
    font-style: normal;
  }

  /* --- Variant: sidebar --- */
  .bq__variant-sidebar {
    padding: 1rem 0 1rem 1rem;
    border-left: 3px solid var(--bq-accent);
    font-size: 0.9375rem;
  }

  .bq__variant-sidebar .bq__text {
    font-size: 0.9375rem;
  }

  /* Author */
  .bq__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }

  .bq__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .bq__author-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .bq__author-name {
    font-size: 0.9375rem;
    font-weight: 700;
    font-style: normal;
    color: var(--color-primary);
  }

  .bq__author-sub {
    font-size: 0.8125rem;
    font-style: normal;
    color: var(--color-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
</style>