workshopclaudecode/src/components/StickyBar.jsx

/**
 * StickyBar.jsx - Sticky call-to-action bar
 *
 * Fixed aan onderkant (mobile) of bovenkant (desktop).
 * Compacte info: prijs + datum + CTA.
 * Verschijnt na scroll voorbij hero sectie.
 */

import { useState, useEffect } from 'react';

function StickyBar() {
  // State om te bepalen of de bar zichtbaar moet zijn
  const [isVisible, setIsVisible] = useState(false);

  // Effect om scroll positie te monitoren
  useEffect(() => {
    const handleScroll = () => {
      // Toon de bar na 600px scroll (ongeveer voorbij de hero)
      const scrollThreshold = 600;
      setIsVisible(window.scrollY > scrollThreshold);
    };

    // Event listener toevoegen
    window.addEventListener('scroll', handleScroll);

    // Cleanup bij unmount
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Als niet zichtbaar, render niets
  if (!isVisible) return null;

  return (
    <>
      {/* Desktop versie - bovenkant */}
      <div className="hidden md:block fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-warm-200 shadow-sm">
        <div className="container-page py-3">
          <div className="flex items-center justify-between">
            {/* Left: Info */}
            <div className="flex items-center gap-6">
              <span className="font-display font-semibold text-warm-900">
                Claude Code Workshop
              </span>
              <div className="flex items-center gap-4 text-sm text-warm-600">
                <span className="flex items-center gap-1">
                  <svg className="w-4 h-4 text-coral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                  6 maart 2026
                </span>
                <span className="flex items-center gap-1">
                  <svg className="w-4 h-4 text-coral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                  Utrecht
                </span>
              </div>
            </div>

            {/* Right: Price + CTA */}
            <div className="flex items-center gap-4">
              <span className="font-display font-bold text-xl text-warm-900">
                €399
              </span>
              <a
                href="#inschrijven"
                className="px-6 py-2 bg-coral-500 text-white font-semibold rounded-lg shadow-sm hover:bg-coral-600 transition-colors"
              >
                Inschrijven
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* Mobile versie - onderkant */}
      <div className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-t border-warm-200 shadow-lg">
        <div className="px-4 py-3">
          <div className="flex items-center justify-between gap-4">
            {/* Left: Prijs en datum */}
            <div>
              <div className="font-display font-bold text-lg text-warm-900">
                €399
              </div>
              <div className="text-xs text-warm-500">
                6 maart 2026 | Utrecht
              </div>
            </div>

            {/* Right: CTA */}
            <a
              href="#inschrijven"
              className="flex-shrink-0 px-6 py-3 bg-coral-500 text-white font-semibold rounded-lg shadow-sm hover:bg-coral-600 transition-colors"
            >
              Inschrijven
            </a>
          </div>
        </div>
      </div>

      {/* Spacer voor mobile om content niet te verbergen achter sticky bar */}
      <div className="md:hidden h-20" aria-hidden="true" />
    </>
  );
}

export default StickyBar;