@extends('layouts.app')

@section('title','Velo Vita — Duurzaam. Stijlvol. Zorgeloos op pad.')

@section('content')
  {{-- HERO --}}
  <section class="relative min-h-[50svh] sm:min-h-[55svh] bg-gray-900 overflow-hidden" id="about">
    <div class="absolute inset-0">
      {{-- Gebruik je eigen hero-foto; tijdelijk gebruiken we een lokale placeholder --}}
      <img src="{{ Vite::asset('resources/images/hero-bakfiets-urban-arrow-verhuur-zuidlaren.jpg') }}" alt="" class="h-[120%] w-full object-cover object-top opacity-90" id="hero-parallax">
      <div class="absolute inset-0 bg-gradient-to-b from-gray-900/0 via-gray-900/40 to-gray-900"></div>
    </div>

    <div class="relative max-w-[1100px] mx-auto px-4 pt-28 pb-16 sm:pt-32 sm:pb-24">
      <h1 class="max-w-2xl text-5xl sm:text-6xl md:text-7xl font-bold leading-[1.1] tracking-tight text-white">
        Duurzaam. Stijlvol.<br>
        <span class="text-purple-300">Zorgeloos op pad.</span>
      </h1>
      <p class="mt-6 max-w-lg text-lg sm:text-xl text-gray-100 leading-relaxed">
        Altijd een bakfiets klaar voor jouw plannen — per dag, weekend of maand.
      </p>

      <dl class="mt-8 grid grid-cols-3 gap-3 max-w-md text-xs">
        <div class="bg-white/5 backdrop-blur-sm rounded-lg p-2.5">
          <dt class="text-base font-semibold text-white mb-0.5">€7,50</dt>
          <dd class="text-white/60 text-[10px]">per dag</dd>
        </div>
        <div class="bg-white/5 backdrop-blur-sm rounded-lg p-2.5">
          <dt class="text-base font-semibold text-white mb-0.5">2 mnd</dt>
          <dd class="text-white/60 text-[10px]">minimaal</dd>
        </div>
        <div class="bg-white/5 backdrop-blur-sm rounded-lg p-2.5">
          <dt class="text-base font-semibold text-white mb-0.5">15 km</dt>
          <dd class="text-white/60 text-[10px]">bezorgstraal</dd>
        </div>
      </dl>

      <div class="mt-8 flex gap-4">
        <a href="#cta" class="inline-flex items-center justify-center gap-2 rounded-full bg-gradient-to-r from-fuchsia-500 to-purple-600 text-white px-8 py-4 font-bold text-base hover:from-fuchsia-600 hover:to-purple-700 transition-all shadow-lg shadow-purple-900/40">
          Reserveer nu
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
          </svg>
        </a>
        <a href="#bikes" class="inline-flex items-center justify-center rounded-full border-2 border-white text-white px-8 py-4 font-semibold text-base hover:bg-white/10 transition-colors">
          Bekijk fietsen
        </a>
      </div>
    </div>
  </section>

  {{-- TRUSTPILOT-STYLE REVIEWS BADGE --}}
  <section class="py-4 shadow-sm" style="background-color: #F0FDF4;">
    <div class="max-w-[1100px] mx-auto px-4">
      <div id="reviews-trustbadge" class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-8 hidden">
        <div class="flex items-center gap-3">
          <span class="text-2xl font-bold text-gray-900">Uitstekend</span>
          <div class="flex gap-1" id="trust-stars">
            <span class="text-green-600 text-2xl">★★★★★</span>
          </div>
        </div>
        <div class="flex items-center gap-2 text-gray-700">
          <span id="trust-rating" class="font-semibold text-lg">4.9</span>
          <span class="text-gray-500">van de 5 gebaseerd op</span>
          <span id="trust-total" class="font-semibold">123 reviews</span>
        </div>
        <a id="trust-link" href="#" target="_blank" rel="noopener" class="flex items-center gap-2 text-gray-600 hover:text-gray-900">
          <svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 0L15.708 8.165L24 9.27L18 15.135L19.416 23.73L12 19.635L4.584 23.73L6 15.135L0 9.27L8.292 8.165L12 0Z"/>
          </svg>
          <span class="font-medium">Google</span>
        </a>
      </div>
    </div>
  </section>

  {{-- BELEVENISSEN / EXPERIENCES --}}
  <section class="py-16 md:py-20 bg-white" id="services">
    <div class="max-w-[1100px] mx-auto px-4">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3 text-center">Jouw avonturen, zorgeloos geregeld</h2>
      <p class="text-center text-gray-600 max-w-2xl mx-auto mb-10">Ontdek Zuidlaren en omgeving met een premium bakfiets. Inclusief alles wat je nodig hebt.</p>

      <div class="grid gap-8 md:grid-cols-2">
        {{-- Storytelling blok 1: Rondje Zuidlaardermeer --}}
        <div class="group relative overflow-hidden rounded-3xl bg-gray-100 aspect-[4/3] cursor-pointer shadow-md hover:shadow-xl transition-shadow">
          <img src="{{ Vite::asset('resources/images/features-1.jpg') }}" alt="Picknick aan het meer" class="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
          <div class="absolute top-4 right-4">
            <div class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-white/20 backdrop-blur-sm rounded-full">
              <span class="text-sm">🌞</span>
              <span class="text-xs font-medium text-white">Rondje Zuidlaardermeer</span>
            </div>
          </div>
          <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
            <h3 class="text-2xl font-bold mb-2">Picknick aan het meer</h3>
            <p class="text-white/90 text-sm mb-4">Huur een dag en ontdek het Zuidlaardermeer op z'n groenst. Alles mee in de bakfiets, kinderen voorin, picknickmand achterop.</p>
            <a href="#cta" class="inline-flex items-center gap-2 px-6 py-3 text-white text-sm font-semibold rounded-full backdrop-blur-md hover:backdrop-blur-none hover:bg-opacity-60 transition-all duration-300" style="background-color: rgba(192, 132, 252, 0.3);">
              Huur voor een dag
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
              </svg>
            </a>
          </div>
        </div>

        {{-- Storytelling blok 2: Camping in Zuidlaren --}}
        <div class="group relative overflow-hidden rounded-3xl bg-gray-100 aspect-[4/3] cursor-pointer shadow-md hover:shadow-xl transition-shadow">
          <img src="{{ Vite::asset('resources/images/features-2.jpg') }}" alt="Vakantie zonder gedoe" class="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
          <div class="absolute top-4 right-4">
            <div class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-white/20 backdrop-blur-sm rounded-full">
              <span class="text-sm">🏕</span>
              <span class="text-xs font-medium text-white">Camping in Zuidlaren</span>
            </div>
          </div>
          <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
            <h3 class="text-2xl font-bold mb-2">Vakantie zonder gedoe</h3>
            <p class="text-white/90 text-sm mb-4">Geen zware fietsen mee op vakantie. Huur 1–2 weken een bakfiets bij ons en geniet van zorgeloos vervoer op de camping.</p>
            <a href="#cta" class="inline-flex items-center gap-2 px-6 py-3 text-white text-sm font-semibold rounded-full backdrop-blur-md hover:backdrop-blur-none hover:bg-opacity-60 transition-all duration-300" style="background-color: rgba(192, 132, 252, 0.3);">
              Reserveer voor je vakantie
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
              </svg>
            </a>
          </div>
              </div>

        {{-- Storytelling blok 3: Urban Arrow ervaren --}}
        <div class="group relative overflow-hidden rounded-3xl bg-gray-100 aspect-[4/3] cursor-pointer shadow-md hover:shadow-xl transition-shadow">
          <img src="{{ Vite::asset('resources/images/features-3.png') }}" alt="Eerst proberen, dan kopen" class="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
          <div class="absolute top-4 right-4">
            <div class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-white/20 backdrop-blur-sm rounded-full">
              <span class="text-sm">🚲</span>
              <span class="text-xs font-medium text-white">Urban Arrow ervaren</span>
            </div>
          </div>
          <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
            <h3 class="text-2xl font-bold mb-2">Eerst proberen, dan kopen</h3>
            <p class="text-white/90 text-sm mb-4">Overweeg je een Urban Arrow? Huur er één en ervaar het gemak in je dagelijks leven.</p>
            <a href="#cta" class="inline-flex items-center gap-2 px-6 py-3 text-white text-sm font-semibold rounded-full backdrop-blur-md hover:backdrop-blur-none hover:bg-opacity-60 transition-all duration-300" style="background-color: rgba(192, 132, 252, 0.3);">
              Test de Urban Arrow
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
              </svg>
            </a>
          </div>
            </div>

        {{-- Storytelling blok 4: Lang huren, slim besparen --}}
        <div class="group relative overflow-hidden rounded-3xl bg-gray-100 aspect-[4/3] cursor-pointer shadow-md hover:shadow-xl transition-shadow">
          <img src="{{ Vite::asset('resources/images/features-1.jpg') }}" alt="Flexibel en voordelig" class="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-gray-900/20 to-transparent"></div>
          <div class="absolute top-4 right-4">
            <div class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-white/20 backdrop-blur-sm rounded-full">
              <span class="text-sm">📅</span>
              <span class="text-xs font-medium text-white">Lang huren, slim besparen</span>
            </div>
          </div>
          <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
            <h3 class="text-2xl font-bold mb-2">Flexibel en voordelig</h3>
            <p class="text-white/90 text-sm mb-4">Voor langere periodes hanteren we scherpe tarieven. Ideaal voor gezinnen of tijdelijke vervanging.</p>
            <a href="#cta" class="inline-flex items-center gap-2 px-6 py-3 text-white text-sm font-semibold rounded-full backdrop-blur-md hover:backdrop-blur-none hover:bg-opacity-60 transition-all duration-300" style="background-color: rgba(192, 132, 252, 0.3);">
              Bekijk tarieven
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- PRICING & HOW IT WORKS --}}
  <section class="py-16 md:py-20" style="background-color: #FDF2F8;">
    <div class="max-w-[1100px] mx-auto px-4">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3 text-center">Reserveren? Simpeler kan niet</h2>
      <p class="text-center text-gray-600 mb-10">Transparant, veilig en volledig online geregeld</p>
      
      <div class="relative rounded-3xl bg-gray-50 p-8 md:p-12 shadow-lg">
        <div class="grid md:grid-cols-3 gap-8 md:gap-10 items-center">
            {{-- Left: 3 sections --}}
            <div class="space-y-8">
              <div class="text-center md:text-left">
                <h3 class="text-xl font-bold text-gray-900 mb-2 flex items-center justify-center md:justify-start gap-2">
                  <span class="text-2xl">💰</span> Transparante prijzen
                </h3>
                <p class="text-sm text-gray-600 leading-relaxed">Vanaf €50/dag. Week €45/dag, maand €40/dag. Hoe langer, hoe voordeliger.</p>
              </div>
              
              <div class="text-center md:text-left">
                <h3 class="text-xl font-bold text-gray-900 mb-2 flex items-center justify-center md:justify-start gap-2">
                  <span class="text-2xl">🚚</span> Gratis bezorgd
                </h3>
                <p class="text-sm text-gray-600 leading-relaxed">We brengen en halen de bakfiets. Binnen 10 km helemaal gratis.</p>
              </div>
              
              <div class="text-center md:text-left">
                <h3 class="text-xl font-bold text-gray-900 mb-2 flex items-center justify-center md:justify-start gap-2">
                  <span class="text-2xl">✅</span> Alles inclusief
                </h3>
                <p class="text-sm text-gray-600 leading-relaxed">Regenhoes, Maxi-Cosi adapter, verzekering en pechservice inbegrepen.</p>
              </div>
            </div>
            
            {{-- Center: Screenshot --}}
            <div class="flex items-center justify-center">
              <img src="{{ Vite::asset('resources/images/reservering.png') }}" alt="Online reserveren" class="w-full max-w-[320px] rounded-2xl shadow-2xl">
            </div>
            
            {{-- Right: 3 sections --}}
            <div class="space-y-8">
              <div class="text-center md:text-left">
                <h3 class="text-xl font-bold text-gray-900 mb-2 flex items-center justify-center md:justify-start gap-2">
                  <span class="text-2xl">📱</span> Online reserveren
                </h3>
                <p class="text-sm text-gray-600 leading-relaxed">Reserveer 24/7 via onze website. Kies datum, betaal veilig, en je bent klaar.</p>
              </div>
              
              <div class="text-center md:text-left">
                <h3 class="text-xl font-bold text-gray-900 mb-2 flex items-center justify-center md:justify-start gap-2">
                  <span class="text-2xl">🔐</span> Veilig & verzekerd
                </h3>
                <p class="text-sm text-gray-600 leading-relaxed">Alle fietsen volledig verzekerd. Check in/uit via app, ART-slot inbegrepen.</p>
              </div>
              
              <div class="text-center md:text-left">
                <h3 class="text-xl font-bold text-gray-900 mb-2 flex items-center justify-center md:justify-start gap-2">
                  <span class="text-2xl">🛠️</span> Pechservice
                </h3>
                <p class="text-sm text-gray-600 leading-relaxed">Pech onderweg? Bel direct en we komen langs voor reparatie of vervanging.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- REVIEWS --}}
  <section class="py-16 md:py-20 bg-white">
    <div class="max-w-[1100px] mx-auto px-4">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3 text-center">Wat mensen zeggen over Velo Vita</h2>
      <p class="text-center text-gray-600 mb-10">Echte ervaringen van tevreden klanten</p>

      <div id="reviews-slider" class="relative pb-8">
        <div id="reviews-viewport" class="overflow-hidden py-4">
          <div id="reviews-track" class="flex items-stretch gap-6 will-change-transform transition-transform duration-500"></div>
        </div>
        <div class="mt-6 flex justify-center">
          <div id="reviews-rail" class="relative h-2 w-36 sm:w-40 rounded-full bg-gray-200 overflow-hidden">
            <span id="reviews-thumb" class="absolute left-0 top-0 h-2 w-12 rounded-full bg-purple-700 transition-all duration-500"></span>
          </div>
        </div>
      </div>


      <template id="review-card-template">
        <div class="w-[88%] sm:w-[420px] shrink-0 rounded-3xl p-6 transition-all duration-500 min-h-[225px] sm:min-h-[240px]" style="background-color: #F8F4FE;">
          <div class="text-purple-700 mb-2 text-xl" data-stars>★★★★★</div>
          <p class="mt-2 text-base sm:text-lg font-semibold leading-7 text-gray-900 before:content-['"'] after:content-['"'] before:mr-1 after:ml-1" data-text></p>
          <div class="mt-3 text-xs text-gray-500" data-author></div>
        </div>
      </template>

      <script>
        document.addEventListener('DOMContentLoaded', async function () {
          const viewport = document.getElementById('reviews-viewport');
          const track = document.getElementById('reviews-track');
          const rail = document.getElementById('reviews-rail');
          const thumb = document.getElementById('reviews-thumb');
          const template = document.getElementById('review-card-template');
          if (!viewport || !track || !template) return;

          function renderFallback() {
            const fallback = [
              { author: 'Sarah & Tom', text: 'Perfect voor onze gezinsvakantie! De Urban Arrow was ruim en veilig. Reserveren ging super makkelijk.', rating: 5, date: '2 weken geleden' },
              { author: 'Annemarie', text: 'Fijne service, goede uitleg en de fiets was in topconditie.', rating: 5, date: '1 maand geleden' },
              { author: 'Jeroen', text: 'Praktisch alternatief voor de auto in het dorp – aanrader!', rating: 5, date: '3 maanden geleden' },
            ];
            // Fallback trustbadge
            const trustbadge = document.getElementById('reviews-trustbadge');
            const trustLink = document.getElementById('trust-link');
            const trustRating = document.getElementById('trust-rating');
            const trustTotal = document.getElementById('trust-total');
            if (trustbadge && trustLink && trustRating && trustTotal) {
              trustRating.textContent = '4.9';
              trustTotal.textContent = '123 reviews';
              trustLink.href = '#';
              trustbadge.classList.remove('hidden');
            }
            // Fallback old summary badge
            const summary = document.getElementById('reviews-summary');
            const link = document.getElementById('reviews-link');
            const ratingEl = document.getElementById('reviews-rating');
            const totalEl = document.getElementById('reviews-total');
            if (summary && link && ratingEl && totalEl) {
              ratingEl.textContent = '4.9';
              totalEl.textContent = '123 beoordelingen';
              link.href = '#';
              summary.classList.remove('hidden');
            }
            buildSlider(fallback);
          }

          function buildSlider(reviews) {
            const items = (reviews || []).slice(0, 3);
            if (items.length === 0) return;
            
            // Create infinite loop by triplicating items
            const loopedItems = [...items, ...items, ...items];
            track.innerHTML = '';
            
            const slides = loopedItems.map((r) => {
              const node = template.content.firstElementChild.cloneNode(true);
              node.querySelector('[data-text]').textContent = r.text || '';
              const name = r.author || 'Onbekend';
              const date = r.date ? ` · ${r.date}` : '';
              node.querySelector('[data-author]').textContent = '— ' + name + date;
              const stars = Math.max(0, Math.min(5, Number(r.rating) || 5));
              node.querySelector('[data-stars]').textContent = '★★★★★'.slice(0, stars) + '☆☆☆☆☆'.slice(0, 5 - stars);
              track.appendChild(node);
              return node;
            });

            const baseCount = items.length;
            let index = baseCount; // Start at middle set

            function centerTo(i, instant = false) {
              if (slides.length === 0) return;
              const vpWidth = viewport.clientWidth;
              const target = slides[i];
              const slideCenter = target.offsetLeft + target.offsetWidth / 2;
              const translateX = vpWidth / 2 - slideCenter;
              
              if (instant) {
                track.style.transition = 'none';
                track.style.transform = `translateX(${translateX}px)`;
                setTimeout(() => { track.style.transition = ''; }, 50);
              } else {
                track.style.transform = `translateX(${translateX}px)`;
              }
              
              slides.forEach((el, idx) => {
                el.style.transformOrigin = 'center center';
                el.style.transitionProperty = 'transform, opacity';
                el.style.transitionDuration = '500ms';
                const distance = Math.abs(idx - i);
                if (idx === i) {
                  el.classList.remove('opacity-60','scale-95');
                  el.classList.add('opacity-100','scale-100');
                  el.style.transform = 'rotate(0deg) translateY(0) scale(1)';
                } else if (idx === i - 1 || idx === i + baseCount - 1 || idx === i - baseCount - 1) {
                  el.classList.remove('opacity-100','scale-100');
                  el.classList.add('opacity-60','scale-95');
                  el.style.transform = 'rotate(-8deg) translateY(12px) scale(0.96)';
                } else if (idx === i + 1 || idx === i - baseCount + 1 || idx === i + baseCount + 1) {
                  el.classList.remove('opacity-100','scale-100');
                  el.classList.add('opacity-60','scale-95');
                  el.style.transform = 'rotate(8deg) translateY(12px) scale(0.96)';
                } else {
                  el.classList.add('opacity-60','scale-95');
                  el.style.transform = 'rotate(0deg) translateY(12px) scale(0.94)';
                }
              });

              // Update indicator (use modulo)
              if (rail && thumb) {
                const actualIdx = ((i - baseCount) % baseCount + baseCount) % baseCount;
                const railWidth = rail.clientWidth;
                const step = railWidth / baseCount;
                const thumbWidth = Math.max(36, step * 0.6);
                const left = step * actualIdx + (step - thumbWidth) / 2;
                thumb.style.width = `${thumbWidth}px`;
                thumb.style.left = `${left}px`;
              }
            }

            function next() {
              index++;
              if (index >= slides.length - baseCount) {
                centerTo(index, false);
                setTimeout(() => {
                  index = baseCount;
                  centerTo(index, true);
                }, 500);
              } else {
                centerTo(index, false);
              }
            }

            centerTo(index, true);
            let timer = setInterval(next, 5000);
            window.addEventListener('resize', () => centerTo(index, true));
            
            // swipe
            let startX = 0; let dx = 0;
            viewport.addEventListener('pointerdown', e => { startX = e.clientX; dx = 0; clearInterval(timer); });
            viewport.addEventListener('pointermove', e => { if (startX) dx = e.clientX - startX; });
            viewport.addEventListener('pointerup', () => { 
              if (Math.abs(dx) > 40) { 
                if (dx < 0) {
                  index++;
                  if (index >= slides.length - baseCount) {
                    centerTo(index, false);
                    setTimeout(() => { index = baseCount; centerTo(index, true); }, 500);
                  } else {
                    centerTo(index, false);
                  }
                } else {
                  index--;
                  if (index < baseCount) {
                    centerTo(index, false);
                    setTimeout(() => { index = slides.length - baseCount - 1; centerTo(index, true); }, 500);
                  } else {
                    centerTo(index, false);
                  }
                }
              }
              timer = setInterval(next, 5000); 
              startX = 0; 
            });
          }

          try {
            const res = await fetch('/api/reviews', { headers: { 'Accept': 'application/json' } });
            if (!res.ok) return renderFallback();
            const data = await res.json();
            if (!data || !Array.isArray(data.reviews) || data.reviews.length === 0) return renderFallback();

            // trustbadge + summary badges
            if (typeof data.rating === 'number' && typeof data.total === 'number' && data.place_url) {
              // Top trustbadge
              const trustbadge = document.getElementById('reviews-trustbadge');
              const trustLink = document.getElementById('trust-link');
              const trustRating = document.getElementById('trust-rating');
              const trustTotal = document.getElementById('trust-total');
              if (trustbadge && trustLink && trustRating && trustTotal) {
                trustRating.textContent = data.rating.toFixed(1);
                trustTotal.textContent = `${data.total} reviews`;
                trustLink.href = data.place_url;
                trustbadge.classList.remove('hidden');
              }
              // Bottom summary badge
              const summary = document.getElementById('reviews-summary');
              const link = document.getElementById('reviews-link');
              const ratingEl = document.getElementById('reviews-rating');
              const totalEl = document.getElementById('reviews-total');
              if (summary && link && ratingEl && totalEl) {
                ratingEl.textContent = data.rating.toFixed(1);
                totalEl.textContent = `${data.total} beoordelingen`;
                link.href = data.place_url;
                summary.classList.remove('hidden');
              }
            }
            buildSlider(data.reviews);
          } catch (e) {
            renderFallback();
          }
        });

        // Parallax effect for hero image
        const heroImage = document.getElementById('hero-parallax');
        if (heroImage) {
          // Set initial transform
          heroImage.style.transform = 'translateY(0px) scale(1.1)';
          
          window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const rate = scrolled * 0.3; // Positive rate to move down
            heroImage.style.transform = `translateY(${rate}px) scale(1.1)`;
          });
        }
      </script>
    </div>
  </section>

  {{-- FAQ --}}
  <section class="py-16 md:py-20" style="background-color: #F0F9FF;">
    <div class="max-w-[1100px] mx-auto px-4">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3 text-center">Veelgestelde vragen</h2>
      <p class="text-center text-gray-600 mb-10">Alles wat je moet weten over het huren van een bakfiets</p>

      <div class="space-y-4">
        <details class="group bg-white rounded-2xl shadow-md overflow-hidden">
            <summary class="flex items-center justify-between p-6 cursor-pointer transition-all">
            <span class="font-semibold text-gray-900">Hoe werkt de bezorgservice?</span>
            <svg class="w-5 h-5 text-purple-700 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </summary>
          <div class="px-6 pb-6 text-gray-700 text-sm leading-relaxed">
            We brengen de bakfiets op het afgesproken tijdstip naar je toe en geven een korte uitleg. Binnen 10 km van Zuidlaren is dit gratis. Na je huurperiode halen we de fiets weer op. Simpel en zonder gedoe.
          </div>
        </details>

        <details class="group bg-white rounded-2xl shadow-md overflow-hidden">
            <summary class="flex items-center justify-between p-6 cursor-pointer transition-all">
            <span class="font-semibold text-gray-900">Wat is de minimale huurtermijn?</span>
            <svg class="w-5 h-5 text-purple-700 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </summary>
          <div class="px-6 pb-6 text-gray-700 text-sm leading-relaxed">
            Je kunt vanaf 2 maanden huren. Voor kortere periodes (weekend of week), neem contact met ons op voor beschikbaarheid en speciale tarieven.
          </div>
        </details>

        <details class="group bg-white rounded-2xl shadow-md overflow-hidden">
            <summary class="flex items-center justify-between p-6 cursor-pointer transition-all">
            <span class="font-semibold text-gray-900">Is verzekering inbegrepen?</span>
            <svg class="w-5 h-5 text-purple-700 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </summary>
          <div class="px-6 pb-6 text-gray-700 text-sm leading-relaxed">
            Ja, alle bakfietsen zijn volledig verzekerd tegen diefstal en schade. Bij pech of problemen bieden we gratis pechservice aan.
          </div>
        </details>

        <details class="group bg-white rounded-2xl shadow-md overflow-hidden">
            <summary class="flex items-center justify-between p-6 cursor-pointer transition-all">
            <span class="font-semibold text-gray-900">Kunnen we de fiets met een baby gebruiken?</span>
            <svg class="w-5 h-5 text-purple-700 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </summary>
          <div class="px-6 pb-6 text-gray-700 text-sm leading-relaxed">
            Absoluut! Onze Urban Arrow FamilyNext heeft een Maxi-Cosi adapter inbegrepen. Perfect voor baby's vanaf 3 maanden. De bakfiets biedt ruimte voor 2-4 kinderen, afhankelijk van leeftijd.
          </div>
        </details>

        <details class="group bg-white rounded-2xl shadow-md overflow-hidden">
            <summary class="flex items-center justify-between p-6 cursor-pointer transition-all">
            <span class="font-semibold text-gray-900">Hoe werkt het online in- en uitchecken?</span>
            <svg class="w-5 h-5 text-purple-700 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </summary>
          <div class="px-6 pb-6 text-gray-700 text-sm leading-relaxed">
            Bij aflevering krijg je een link naar onze app. Check in met één klik, voer de kilometerstand in en je bent klaar. Bij teruggave doe je hetzelfde. Makkelijker kan niet.
          </div>
        </details>

        <details class="group bg-white rounded-2xl shadow-md overflow-hidden">
            <summary class="flex items-center justify-between p-6 cursor-pointer transition-all">
            <span class="font-semibold text-gray-900">Wat als er iets kapot gaat tijdens de huur?</span>
            <svg class="w-5 h-5 text-purple-700 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </summary>
          <div class="px-6 pb-6 text-gray-700 text-sm leading-relaxed">
            Bij pech bellen we direct en komen we langs voor reparatie of vervanging. Alle normale slijtage en schade is gedekt door de verzekering. Je betaalt alleen bij opzettelijke schade.
          </div>
        </details>

        <details class="group bg-white rounded-2xl shadow-md overflow-hidden">
            <summary class="flex items-center justify-between p-6 cursor-pointer transition-all">
            <span class="font-semibold text-gray-900">Krijg ik korting bij langere huur?</span>
            <svg class="w-5 h-5 text-purple-700 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </summary>
          <div class="px-6 pb-6 text-gray-700 text-sm leading-relaxed">
            Ja! Hoe langer je huurt, hoe lager de dagprijs. Weekverhuur vanaf €45/dag, maandverhuur vanaf €40/dag. Neem contact op voor exact maatwerk.
          </div>
        </details>
      </div>
    </div>
  </section>

  {{-- CTA FOOTER-KAART --}}

@endsection