/**
 * 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
  const totalSpots = 8;
  const availableSpots = 7;

  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>
                <span className="line-through opacity-60">{totalSpots}</span>{' '}{availableSpots} plekken - kleine groep, persoonlijke aandacht
              </span>
            </div>

            {/* Headline */}
            <h1 className="heading-hero mb-4">
              Maak zelf de tools waar je nu nog voor betaalt
            </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 snapt hoe AI werkt. Je gebruikt Claude of ChatGPT voor teksten en research.
              Maar je weet: er zit meer in. Claude Code werkt rechtstreeks op je computer - het
              leest bestanden, maakt tools en regelt dingen die jij nu handmatig doet.
              In deze <em>hands-on workshop</em> van een halve dag ga je van nul naar een werkend
              project. Geen theorie. Gewoon doen.
            </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={`${import.meta.env.BASE_URL}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;