---
interface FeatureItem {
  title: string;
  description: string;
  icon?: string;
}
interface Props {
  title: string;
  items: FeatureItem[];
}
const { title, items } = Astro.props;
---
<section class="features">
  <div class="container">
    <h2>{title}</h2>
    <div class="features-grid">
      {items.map((item) => (
        <div class="feature-card">
          <h3>{item.title}</h3>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .features h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--color-primary-dark);
    margin-bottom: 2rem;
  }
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
  }
  .feature-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 6px;
  }
  .feature-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
  }
  .feature-card p {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    font-weight: 300;
  }
</style>