---
/**
 * "Deep dives" block for a pillar page: links down to the best blog posts in
 * its topic cluster, so the pillar-to-spoke links mirror the spoke-to-pillar
 * links the posts already carry. Keeps the cluster reciprocal.
 */
import Icon from './Icon.astro';

interface Item {
  href: string;
  title: string;
  kicker?: string;
}
interface Props {
  title?: string;
  items: Item[];
}
const { title = 'From the blog', items } = Astro.props;
---
<section class="border-t border-[color:var(--border)] py-16 md:py-20">
  <div class="container-page">
    <div class="flex items-end justify-between gap-4 mb-8">
      <div>
        <div class="text-[11px] uppercase tracking-[0.18em] text-muted-foreground font-mono mb-3">Deep dives</div>
        <h2 class="text-[26px] md:text-[34px] font-semibold tracking-[-0.025em] text-heading leading-[1.08]">{title}</h2>
      </div>
      <a href="/blog/" class="hidden sm:inline-flex items-center gap-1.5 text-[13px] font-medium text-[#0369a1] hover:text-[#075985] shrink-0">
        All posts <Icon name="arrowRight" size={12} />
      </a>
    </div>
    <div class="grid sm:grid-cols-3 gap-3">
      {items.map((it) => (
        <a href={it.href} class="group flex flex-col p-5 rounded-[12px] bg-white ring-1 ring-[color:var(--border)] hover:ring-[#0284c7]/40 transition-all min-h-[132px]">
          {it.kicker && <div class="text-[10.5px] uppercase tracking-[0.16em] font-mono text-muted-foreground mb-2">{it.kicker}</div>}
          <div class="text-[15px] font-semibold text-heading group-hover:text-[#0369a1] transition-colors leading-snug">{it.title}</div>
          <div class="mt-auto pt-4 inline-flex items-center gap-1 text-[12px] font-medium text-foreground/45 group-hover:text-[#0369a1] transition-colors">
            Read <Icon name="arrowRight" size={11} />
          </div>
        </a>
      ))}
    </div>
  </div>
</section>
