script.js

// Smooth anchor nav is handled by CSS. Focus on charts and form handling.

document.addEventListener('DOMContentLoaded', () => {
  // Voor/Na Chart
  const ctx = document.getElementById('voorNaChart');
  if (ctx && window.Chart) {
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Boekingen/maand', 'Gem. order (€)', 'Google-reviews', 'Agenda vol (weken)'],
        datasets: [
          {
            label: 'Voor',
            data: [0, 0, 2, 1],
            backgroundColor: '#D1D5DB',
            borderRadius: 6,
          },
          {
            label: 'Na (60 dagen)',
            data: [15, 115, 25, 5],
            backgroundColor: '#EF4444',
            borderRadius: 6,
          },
        ]
      },
      options: {
        responsive: true,
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: (context) => `${context.dataset.label}: ${context.parsed.y}`
            }
          }
        },
        scales: {
          y: { beginAtZero: true, ticks: { precision: 0 } }
        }
      }
    });
  }

  // Timeline bars (indicatief)
  const timeline = document.getElementById('timeline');
  if (timeline) {
    // Week 1 -> 12 indicatieve data
    const data = [0,1,2,2,3,4,5,7,8,10,12,15];
    const max = Math.max(...data);
    data.forEach((val, idx) => {
      const bar = document.createElement('div');
      bar.className = 'w-6 bg-primary rounded-t';
      const height = (val / (max || 1)) * 100;
      bar.style.height = Math.max(8, height) + '%';
      bar.title = `Week ${idx + 1}: ${val} boekingen`;
      timeline.appendChild(bar);
    });
  }

  // Lead form handler
  const leadForm = document.getElementById('leadForm');
  if (leadForm) {
    leadForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(leadForm);
      const payload = Object.fromEntries(formData.entries());

      // Demo: store in localStorage and show success. Replace with your backend endpoint.
      try {
        const leads = JSON.parse(localStorage.getItem('leads') || '[]');
        leads.push({ ...payload, ts: new Date().toISOString() });
        localStorage.setItem('leads', JSON.stringify(leads));

        // UI feedback
        leadForm.innerHTML = `
          <div class="p-4 border border-green-200 bg-green-50 rounded-md">
            <div class="flex items-center gap-2 text-green-700 font-semibold">
              <i data-feather="check-circle" class="w-5 h-5"></i> Bedankt!
            </div>
            <p class="mt-2 text-green-800">We nemen binnen 48 uur contact met je op met jouw groeirapport.</p>
          </div>
        `;
        if (window.feather) feather.replace();
      } catch (err) {
        alert('Er ging iets mis. Probeer opnieuw.');
      }
    });
  }
});