---
import type { SiteConfig } from '../../utils/configLoader';

interface Props {
  config: SiteConfig['bento'];
}

const { config } = Astro.props;
---

<section id="services" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative">
  <div class="text-center max-w-3xl mx-auto mb-16 space-y-3">
    <h2 class="text-3xl font-extrabold text-white tracking-tight uppercase">{config.sectionTitle}</h2>
    <p class="text-slate-400 text-xs sm:text-sm">{config.sectionSubtitle}</p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    {config.cards.map((card) => (
      <div class={`relative glass-panel glass-panel-hover rounded-2xl p-8 flex flex-col justify-between overflow-hidden group ${card.colSpan === 2 ? 'md:col-span-2' : 'md:col-span-1'}`}>
        <div class="space-y-4 relative z-10">
          {card.badge && (
            <span class="inline-block text-[10px] font-mono uppercase tracking-wider text-sky-400 bg-sky-400/10 px-2.5 py-1 rounded border border-sky-400/20">
              {card.badge}
            </span>
          )}
          <h3 class="text-xl font-bold text-white tracking-tight">{card.title}</h3>
          <p class="text-slate-400 text-xs sm:text-sm leading-relaxed">{card.description}</p>
        </div>

        <div class="mt-8 flex justify-end items-center opacity-40 group-hover:opacity-100 transition-opacity">
          <span class="text-xs font-mono text-sky-400">Details &rarr;</span>
        </div>
      </div>
    ))}
  </div>
</section>