IconTabs icon

---
/**
 * IconTabs
 * CSS-only tabs met icoon per tab
 */
interface TabItem {
  icon: string;
  label: string;
  content: string;
}
interface Props {
  tabs?: TabItem[];
}
const { tabs = [
  { icon: '🎯', label: 'Strategie', content: 'We starten met een diepgaande analyse van jouw markt en doelgroep. Op basis hiervan bouwen we een strategie die aansluit op jouw groeifase — met duidelijke prioriteiten en meetbare doelen.' },
  { icon: '📢', label: 'Advertenties', content: 'Wij beheren jouw betaalde kanalen op Google, Meta en LinkedIn. Van campagne-opzet tot dagelijkse optimalisatie — we zorgen dat elk budgeteuro zo hard mogelijk werkt.' },
  { icon: '📈', label: 'SEO', content: 'Organisch groeien begint met een sterke technische basis. We combineren technische SEO, contentstrategie en linkbuilding voor duurzame, kostenefficiënte groei in zoekresultaten.' },
  { icon: '📊', label: 'Rapportage', content: 'Elke maand ontvang je een helder rapport met de resultaten, inzichten en aanbevelingen voor de volgende periode. Geen spreadsheets maar concrete conclusies.' },
] } = Astro.props;
---

<div class="itabs-wrap">
  {tabs.map((tab, i) => (
    <>
      <input class="itabs-radio" type="radio" name="itabs" id={`itab-${i}`} checked={i === 0} />
    </>
  ))}
  <div class="itabs-bar">
    {tabs.map((tab, i) => (
      <label class="itabs-label" for={`itab-${i}`}>
        <span class="itabs-icon">{tab.icon}</span>
        <span class="itabs-text">{tab.label}</span>
      </label>
    ))}
  </div>
  <div class="itabs-panels">
    {tabs.map((tab, i) => (
      <div class={`itabs-panel itabs-panel--${i}`}>
        <p>{tab.content}</p>
      </div>
    ))}
  </div>
</div>

<style>
  .itabs-wrap {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    font-family: system-ui, sans-serif;
    max-width: 680px;
  }
  .itabs-radio { display: none; }
  .itabs-bar {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    gap: 0;
  }
  .itabs-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s;
    white-space: nowrap;
  }
  .itabs-label:hover { color: var(--color-primary); }
  .itabs-icon { font-size: 1rem; }
  .itabs-panels { padding: 24px 0; }
  .itabs-panel {
    display: none;
    font-size: 0.925rem;
    line-height: 1.7;
    color: #374151;
  }
  .itabs-panel p { margin: 0; }
  /* Tab activation via adjacent sibling */
  #itab-0:checked ~ .itabs-bar label[for="itab-0"],
  #itab-1:checked ~ .itabs-bar label[for="itab-1"],
  #itab-2:checked ~ .itabs-bar label[for="itab-2"],
  #itab-3:checked ~ .itabs-bar label[for="itab-3"] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
  #itab-0:checked ~ .itabs-panels .itabs-panel--0,
  #itab-1:checked ~ .itabs-panels .itabs-panel--1,
  #itab-2:checked ~ .itabs-panels .itabs-panel--2,
  #itab-3:checked ~ .itabs-panels .itabs-panel--3 {
    display: block;
    animation: itabs-fade 0.2s ease;
  }
  @keyframes itabs-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>