// ============================================================
// About Section Component
// ============================================================
const About = () => {
  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('visible'); }),
      { threshold: 0.15 }
    );
    document.querySelectorAll('#about .reveal').forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  const stats = [
    { value: '2025', label: 'Bachelor\'s Graduate' },
    { value: '3+',   label: 'Years of Experience' },
    { value: '10+',  label: 'Technologies' },
    { value: 'B',    label: 'Driver\'s License' },
  ];

  return (
    <section id="about" className="py-24 md:py-32 px-6" aria-label="About Me">
      <div className="max-w-6xl mx-auto">
        <div className="grid lg:grid-cols-2 gap-16 items-center">

          {/* Left: Text */}
          <div>
            <p className="reveal section-tag mb-2">Get to know me</p>
            <h2 className="reveal section-title text-gray-900 dark:text-white">
              About Me
            </h2>
            <div className="reveal section-divider" />

            <div className="reveal space-y-4 text-gray-500 dark:text-gray-400 leading-relaxed text-base md:text-lg">
              <p>
                My passion for technology started long before my studies. Building computers and gaming sparked a curiosity that eventually became my career. I hold a Professional Bachelor's degree in Applied Computer Science from AP University of Applied Sciences in Antwerp, where I specialised in IT &amp; Software development. My studies gave me a solid foundation across the full stack, covering backend systems, frontend frameworks, software architecture, and DevOps.
              </p>
              <p>
                I'm a problem-solver at heart. When I hit a wall, I don't step back. I dig in. I genuinely enjoy researching unfamiliar topics, understanding them from the ground up, and turning that knowledge into clean, robust code. Alongside my studies, I worked at Skillz IT Camps, where I taught kids aged 8-14 the fundamentals of programming. I grew from coach to head coach, eventually taking on a team lead role and contributing to the development of the Skillz website itself. Those years taught me as much about communication, responsibility, and teamwork as they did about technology.
              </p>
              <p>
                I'm currently looking for a full-stack or backend developer role where I can keep growing, take on real challenges, and contribute to a team that values clean code and thoughtful engineering. I'm available immediately and ready to get started.
              </p>
            </div>

            <div className="reveal mt-8">
              <a
                href="CV_Rob_Willemsen.pdf"
                id="about-download-cv"
                className="btn-outline text-sm inline-flex"
                onClick={(e) => e.preventDefault()}
              >
                <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                Download CV
              </a>
            </div>
          </div>

          {/* Right: Photo + Stats */}
          <div className="reveal flex flex-col gap-8">
            {/* Profile photo */}
            <div className="relative mx-auto w-64 h-64 lg:w-72 lg:h-72">
              {/* Decorative border ring */}
              <div className="absolute inset-0 rounded-2xl border-2 border-bordeaux/30 translate-x-3 translate-y-3" />
              {/* Photo */}
              <div className="relative w-full h-full rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700 shadow-xl">
                <img
                  src="Rob_Willemsen.jpeg"
                  alt="Rob Willemsen"
                  className="w-full h-full object-cover object-top"
                />
              </div>
            </div>

            {/* Stats grid */}
            <div className="grid grid-cols-2 gap-4">
              {stats.map(({ value, label }) => (
                <div
                  key={label}
                  className="p-5 rounded-2xl bg-gray-50 dark:bg-gray-800/60 border border-gray-100 dark:border-gray-700 text-center"
                >
                  <div
                    className="text-3xl font-black mb-1"
                    style={{
                      background: 'linear-gradient(135deg, #800020, #9a0026)',
                      WebkitBackgroundClip: 'text',
                      WebkitTextFillColor: 'transparent',
                      backgroundClip: 'text',
                    }}
                  >
                    {value}
                  </div>
                  <p className="text-xs font-medium text-gray-500 dark:text-gray-400">{label}</p>
                </div>
              ))}
            </div>
          </div>

        </div>
      </div>
    </section>
  );
};