workshopclaudecode/src/components/Hero.jsx

/**
 * Hero.jsx - De eerste sectie die bezoekers zien
 *
 * Bevat de hoofdboodschap, subheadline, intro tekst en primaire CTA.
 * Gebruikt coral accent kleuren en een decoratieve blob op de achtergrond.
 */

function Hero() {
  // Aantal beschikbare plaatsen - later dynamisch te maken
  const availableSpots = 8;

  return (
    <section className="section relative overflow-hidden">
      {/* Decoratieve blob op achtergrond */}
      <div
        className="absolute -top-40 -right-40 w-96 h-96 bg-coral-100 rounded-full blur-3xl opacity-60"
        aria-hidden="true"
      />
      <div
        className="absolute -bottom-20 -left-20 w-64 h-64 bg-teal-100 rounded-full blur-3xl opacity-40"
        aria-hidden="true"
      />

      <div className="container-page relative">
        {/* Twee-kolommen layout: tekst links, afbeelding rechts */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Linker kolom: tekst content */}
          <div>
            {/* Urgency badge */}
            <div className="mb-6">
              <span className="inline-flex items-center gap-2 px-4 py-2 bg-coral-100 text-coral-700 rounded-full text-sm font-medium">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-coral-500 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-coral-500"></span>
                </span>
                Maximaal {availableSpots} plaatsen
              </span>
            </div>

            {/* Headline */}
            <h1 className="heading-hero mb-4">
              Bouw zelf wat je nu huurt — met Claude Code
            </h1>

            {/* Subheadline */}
            <p className="text-xl md:text-2xl font-medium text-warm-500 mb-6">
              Van{' '}
              <span className="text-coral-500">"dit moet ik uitzoeken"</span>
              {' '}naar{' '}
              <span className="text-teal-600">"dit werkt gewoon"</span>
            </p>

            {/* Subheadline */}
            <p className="text-xl md:text-2xl text-warm-600 mb-6 leading-relaxed">
              In 1 ochtend van nieuwsgierig naar praktisch aan de slag met Claude Code.
              Je gaat naar huis met je eigen werkende project.
            </p>

            {/* Intro tekst */}
            <p className="text-lg text-warm-600 mb-8 leading-relaxed">
              Je gebruikt Claude of een ander AI model voor research en teksten schrijven.
              Je snapt hoe prompts werken. Maar wat als Claude niet alleen in je browser werkt,
              maar rechtstreeks op je computer? Dan kan het bestanden lezen, code aanpassen en
              tools installeren zonder dat jij hoeft te kopiëren en plakken. Misschien heb je al
              eens met Claude Code geëxperimenteerd. Maar ergens tussen de installatie en dat
              eerste echte resultaat ben je blijven hangen. Herkenbaar voor je? In deze{' '}
              <em>hands-on workshop</em> stap je over die drempel. Samen met maximaal 7 andere
              ondernemers ga je van nul naar een werkend project dat je direct kunt gebruiken in
              je business. En je loopt naar buiten met een fundamenteel ander idee hoe je
              onderneming en je team kan werken met software en AI.
            </p>

            {/* Workshop details - prominent weergave */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-10 p-4 sm:p-5 bg-white/70 backdrop-blur-sm rounded-2xl border border-warm-200 shadow-sm">
              <div className="flex items-center gap-3">
                {/* Calendar icon */}
                <div className="flex-shrink-0 w-10 h-10 bg-coral-100 rounded-lg flex items-center justify-center">
                  <svg className="w-5 h-5 text-coral-600" 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>
                </div>
                <div>
                  <p className="text-xs text-warm-500 font-medium uppercase tracking-wide">Datum</p>
                  <p className="text-base font-semibold text-warm-800 whitespace-nowrap">Vrijdag 6 maart</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                {/* Clock icon */}
                <div className="flex-shrink-0 w-10 h-10 bg-teal-100 rounded-lg flex items-center justify-center">
                  <svg className="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <div>
                  <p className="text-xs text-warm-500 font-medium uppercase tracking-wide">Tijd</p>
                  <p className="text-base font-semibold text-warm-800 whitespace-nowrap">9:00 - 14:00</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                {/* Location icon */}
                <div className="flex-shrink-0 w-10 h-10 bg-coral-100 rounded-lg flex items-center justify-center">
                  <svg className="w-5 h-5 text-coral-600" 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>
                </div>
                <div>
                  <p className="text-xs text-warm-500 font-medium uppercase tracking-wide">Locatie</p>
                  <p className="text-base font-semibold text-warm-800 whitespace-nowrap">Utrecht</p>
                </div>
              </div>
            </div>

            {/* CTA Button */}
            <a
              href="#inschrijven"
              className="btn-primary inline-flex items-center gap-2"
            >
              Schrijf je in
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </a>
          </div>

          {/* Rechter kolom: workshop foto */}
          <div className="hidden lg:block">
            <div className="relative">
              <img
                src="/frank-workshop-claude-code.jpg"
                alt="Frank Meeuwsen geeft een workshop over Claude Code"
                className="rounded-2xl shadow-lg w-full"
                style={{ filter: 'brightness(1.12) contrast(1.05) saturate(0.95)' }}
              />
              {/* Decoratieve elementen */}
              <div className="absolute -top-4 -right-4 w-24 h-24 bg-coral-200 rounded-full blur-2xl opacity-50" />
              <div className="absolute -bottom-4 -left-4 w-20 h-20 bg-teal-200 rounded-full blur-2xl opacity-50" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Hero;