/**
 * Program.jsx - "Zo ziet je dag eruit" sectie
 *
 * Timeline/schedule layout met alle onderdelen van de workshop.
 * Lunch moment wordt visueel uitgelicht.
 */

import { WORKSHOP_CONFIG } from '../config/workshop';

const { timeStart, timeEnd } = WORKSHOP_CONFIG;

function Program() {
  // Programma onderdelen
  const schedule = [
    {
      time: "09:00",
      title: "Welkom en setup",
      description: "We zorgen dat iedereen een werkende Claude Code installatie heeft. Vastlopers lossen we direct samen op.",
      isBreak: false
    },
    {
      time: "09:30",
      title: "De basis begrijpen",
      description: "Je leert de interface, de belangrijkste commando's, en hoe Claude Code denkt. Geen droge theorie, maar direct toepassen.",
      isBreak: false
    },
    {
      time: "10:30",
      title: "Eerste hands-on oefening",
      description: "Je eerste echte project. Klein, overzichtelijk, en direct resultaat. Hier voel je hoe het werkt.",
      isBreak: false
    },
    {
      time: "11:30",
      title: "Lunch",
      description: "Wonders of Work heeft een heerlijke lunch voor ons klaarstaan. Tijd om bij te praten en te netwerken met de overige deelnemers.",
      isBreak: true
    },
    {
      time: "12:15",
      title: "Je eigen project starten",
      description: "Nu wordt het persoonlijk. Je werkt aan iets voor jouw business. Ik loop rond, help waar nodig, en zorg dat je niet vastloopt.",
      isBreak: false
    },
    {
      time: "13:15",
      title: "Agents en skills",
      description: "De krachtigere features. Hoe je Claude Code laat samenwerken met andere tools en hoe je complexere taken automatiseert.",
      isBreak: false
    },
    {
      time: "14:30",
      title: "Afronden en vervolgstappen",
      description: "We kijken naar wat je hebt gebouwd. Je krijgt concrete vervolgstappen die passen bij waar jij nu staat.",
      isBreak: false
    },
    {
      time: "15:00",
      title: "Einde",
      description: null,
      isBreak: false
    }
  ];

  return (
    <section className="section-alt">
      <div className="container-page">
        {/* Section title */}
        <h2 className="heading-2 text-center mb-4">
          Zo ziet je dag eruit
        </h2>
        <p className="text-warm-600 text-center mb-12 max-w-2xl mx-auto">
          Van {timeStart} tot {timeEnd} werk je stap voor stap naar je eigen werkende project.
        </p>

        {/* Timeline */}
        <div className="max-w-3xl mx-auto">
          {schedule.map((item, index) => (
            <div
              key={index}
              className={`relative flex gap-6 ${index !== schedule.length - 1 ? 'pb-8' : ''}`}
            >
              {/* Timeline line */}
              {index !== schedule.length - 1 && (
                <div
                  className={`absolute left-[39px] top-12 bottom-0 w-0.5 ${
                    item.isBreak ? 'bg-teal-200' : 'bg-coral-200'
                  }`}
                  aria-hidden="true"
                />
              )}

              {/* Time badge */}
              <div className="flex-shrink-0 w-20">
                <span className={`inline-block px-3 py-1 rounded-lg text-sm font-semibold ${
                  item.isBreak
                    ? 'bg-teal-100 text-teal-700'
                    : 'bg-coral-100 text-coral-700'
                }`}>
                  {item.time}
                </span>
              </div>

              {/* Content */}
              <div className={`flex-grow ${
                item.isBreak
                  ? 'bg-teal-50 border border-teal-200 rounded-xl p-4'
                  : ''
              }`}>
                <h3 className={`font-display font-semibold text-lg ${
                  item.isBreak ? 'text-teal-800' : 'text-warm-900'
                }`}>
                  {item.title}
                  {item.isBreak && (
                    <span className="ml-2 inline-flex items-center">
                      {/* Coffee icon */}
                      <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="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>
                    </span>
                  )}
                </h3>
                {item.description && (
                  <p className={`mt-1 leading-relaxed ${
                    item.isBreak ? 'text-teal-700' : 'text-warm-600'
                  }`}>
                    {item.description}
                  </p>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default Program;
