HowItWorks Sections

---
/**
 * HowItWorks
 * "Hoe het werkt" sectie met genummerde stappen, iconen en beschrijvingen
 */
interface Step {
  number: string;
  icon?: string;
  title: string;
  desc: string;
}
interface Props {
  headline?: string;
  sub?: string;
  steps?: Step[];
}
const { headline = 'Hoe het werkt', sub = 'In vier stappen van kennismaking naar aantoonbare groei — helder, snel en transparant.', steps = [
  { number: '01', icon: '🔍', title: 'Strategiegesprek', desc: 'In een gratis gesprek van 45 minuten bespreken we jouw situatie, ambities en huidige marketingaanpak. We stellen de juiste vragen en luisteren goed — geen verkooppraatje.' },
  { number: '02', icon: '📋', title: 'Groeiplan op maat', desc: 'Op basis van het gesprek maken we een concreet voorstel: welke kanalen, welke aanpak, welke KPI\'s en welk budget. Inclusief een realistische verwachting van de resultaten.' },
  { number: '03', icon: '🚀', title: 'Lancering & uitvoering', desc: 'Na goedkeuring starten we direct. Campagnes live, content online, tracking ingericht. Van briefing tot live campagne gemiddeld twee weken.' },
  { number: '04', icon: '📈', title: 'Optimaliseren & rapporteren', desc: 'Elke maand ontvang je een helder rapport. We bespreken de resultaten, trekken lessen en passen de koers aan waar nodig — continu beter.' },
] } = Astro.props;
---

<section class="hiw-section">
  <div class="hiw-head">
    <h2 class="hiw-headline">{headline}</h2>
    {sub && <p class="hiw-sub">{sub}</p>}
  </div>

  <div class="hiw-steps">
    {steps.map((step, i) => (
      <div class="hiw-step">
        <div class="hiw-step-top">
          <div class="hiw-step-num">{step.number}</div>
          {i < steps.length - 1 && <div class="hiw-connector"></div>}
        </div>
        <div class="hiw-step-body">
          {step.icon && <span class="hiw-step-icon">{step.icon}</span>}
          <h3 class="hiw-step-title">{step.title}</h3>
          <p class="hiw-step-desc">{step.desc}</p>
        </div>
      </div>
    ))}
  </div>
</section>

<style>
  .hiw-section {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    padding: 72px 24px;
    font-family: system-ui, sans-serif;
    max-width: 1100px;
    margin: 0 auto;
  }
  .hiw-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 56px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hiw-headline {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: -0.025em;
  }
  .hiw-sub {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: #6b7280;
  }
  .hiw-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  @media (max-width: 900px) {
    .hiw-steps { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 540px) {
    .hiw-steps { grid-template-columns: 1fr; }
  }
  .hiw-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .hiw-step-top {
    display: flex;
    align-items: center;
    gap: 0;
  }
  .hiw-step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
  }
  .hiw-connector {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent), #e5e7eb);
    margin-left: 4px;
  }
  @media (max-width: 900px) {
    .hiw-connector { display: none; }
  }
  .hiw-step-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .hiw-step-icon {
    font-size: 1.5rem;
  }
  .hiw-step-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .hiw-step-desc {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.65;
    color: #6b7280;
  }
</style>