/**
 * Trainer.jsx - "Je trainer" sectie
 *
 * Bevat foto placeholder, naam en bio van Frank Meeuwsen.
 * Bio tekst is placeholder - moet nog ingevuld worden.
 */

function Trainer() {
  return (
    <section className="section-alt">
      <div className="container-page">
        {/* Section title */}
        <h2 className="heading-2 text-center mb-12">
          Je trainer
        </h2>

        {/* Trainer card */}
        <div className="max-w-4xl mx-auto">
          <div className="card flex flex-col md:flex-row gap-8 items-center md:items-start">
            {/* Foto */}
            <div className="flex-shrink-0">
              <img
                src="https://frankmeeuwsen.com/wp-content/uploads/2025/10/Frank-ava-clean.png"
                alt="Frank Meeuwsen"
                className="w-48 h-48 rounded-2xl object-cover"
              />
            </div>

            {/* Bio content */}
            <div className="flex-grow text-center md:text-left">
              <h3 className="heading-3 mb-4">
                Frank Meeuwsen
              </h3>

              <div className="space-y-4 text-warm-600">
                <p className="leading-relaxed">
                  Al 30 jaar help ik ondernemers om slimmer te werken met technologie. Ik schreef Bloghelden toen bloggen nog nieuw was. Nu help ik ZZP'ers en teams om AI in te zetten in hun dagelijkse werk.
                </p>

                <p className="leading-relaxed">
                  Met Claude Code maak ik mijn eigen websites (zoals deze), projectoverzichten, rekenmodellen en trainingsmaterialen. Niet omdat ik kan programmeren - want dat kan ik niet - maar omdat Claude Code het programmeren doet terwijl ik de opdrachten geef.
                </p>

                <p className="leading-relaxed">
                  Ik leer je zonder hype en bullshit wat de mogelijkheden van AI zijn. In normale spreektaal, zonder IT-jargon. AI lijkt magisch. Maar dat valt reuze mee. In deze workshop laat ik je zien wat er kan en doen we het samen.
                </p>
              </div>

              {/* Social links */}
              <div className="mt-6 flex gap-4 justify-center md:justify-start">
                <a
                  href="https://www.linkedin.com/in/frankmeeuwsen"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-warm-400 hover:text-coral-500 transition-colors"
                  aria-label="LinkedIn profiel"
                >
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                  </svg>
                </a>
                <a
                  href="https://frankmeeuwsen.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-warm-400 hover:text-coral-500 transition-colors"
                  aria-label="Website"
                >
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Trainer;
