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';
import { Link } from 'react-router-dom';
import { PAYMENT_CONFIG } from '../config/payment';
import { WORKSHOP_CONFIG } from '../config/workshop';

function StickyBar() {
  const { availableSpots, isSoldOut } = WORKSHOP_CONFIG;

  // 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>
                <span className="flex items-center gap-1 text-coral-600 font-medium">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                  Nog {availableSpots} {availableSpots === 1 ? 'plek' : 'plekken'} beschikbaar
                </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 className="text-sm font-normal text-warm-500">excl. BTW</span>
              </span>
              <Link
                to={isSoldOut ? PAYMENT_CONFIG.WAITLIST_URL : PAYMENT_CONFIG.SIGNUP_URL}
                className="px-6 py-2 bg-coral-500 text-white font-semibold rounded-lg shadow-sm hover:bg-coral-600 transition-colors"
              >
                {isSoldOut ? 'Wachtlijst' : 'Inschrijven'}
              </Link>
            </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 <span className="text-xs font-normal text-warm-500">excl. BTW</span>
              </div>
              <div className="text-xs text-warm-500">
                6 maart 2026 | Utrecht
              </div>
              <div className="text-xs text-coral-600 font-medium">
                {isSoldOut ? 'Volgeboekt' : `Nog ${availableSpots} ${availableSpots === 1 ? 'plek' : 'plekken'} beschikbaar`}
              </div>
            </div>

            {/* Right: CTA */}
            <Link
              to={isSoldOut ? PAYMENT_CONFIG.WAITLIST_URL : PAYMENT_CONFIG.SIGNUP_URL}
              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"
            >
              {isSoldOut ? 'Wachtlijst' : 'Inschrijven'}
            </Link>
          </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;