TextColumns text

---
interface Column {
  title?: string;
  body: string;
}

interface Props {
  eyebrow?: string;
  headline?: string;
  columns: Column[];
  columnCount?: 2 | 3;
  dropCap?: boolean;
  dividers?: boolean;
}

const {
  eyebrow,
  headline,
  columns,
  columnCount = 3,
  dropCap = false,
  dividers = false,
} = Astro.props;
---

<section class={`txc__section txc__cols-${columnCount} ${dropCap ? 'txc--dropcap' : ''} ${dividers ? 'txc--dividers' : ''}`}>
  {(eyebrow || headline) && (
    <header class="txc__header">
      {eyebrow && <p class="txc__eyebrow">{eyebrow}</p>}
      {headline && <h2 class="txc__headline">{headline}</h2>}
    </header>
  )}
  <div class="txc__grid">
    {columns.map((col) => (
      <div class="txc__col">
        {col.title && <h3 class="txc__col-title">{col.title}</h3>}
        <p class="txc__body">{col.body}</p>
      </div>
    ))}
  </div>
</section>

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

  .txc__section {
    padding: 5rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  .txc__header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .txc__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .txc__headline {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary);
    line-height: 1.15;
  }

  .txc__grid {
    display: grid;
    gap: 2.5rem;
  }

  .txc__cols-2 .txc__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .txc__cols-3 .txc__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Dividers */
  .txc--dividers .txc__col:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    padding-right: 2.5rem;
  }

  .txc--dividers .txc__col:not(:first-child) {
    padding-left: 0;
  }

  .txc__col-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.01em;
  }

  .txc__body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-muted);
  }

  /* Drop cap */
  .txc--dropcap .txc__col:first-child .txc__body::first-letter {
    font-size: 3.5em;
    font-weight: 900;
    float: left;
    line-height: 0.85;
    margin-right: 0.1em;
    color: var(--color-primary);
  }

  /* Responsive */
  @media (max-width: 768px) {
    .txc__cols-3 .txc__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .txc--dividers .txc__col:nth-child(2) {
      border-right: none;
      padding-right: 0;
    }
  }

  @media (max-width: 640px) {
    .txc__cols-2 .txc__grid,
    .txc__cols-3 .txc__grid {
      grid-template-columns: 1fr;
    }

    .txc--dividers .txc__col:not(:last-child) {
      border-right: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      padding-right: 0;
      padding-bottom: 2rem;
    }
  }

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