import React from 'react';
import { MentorshipItems } from '@/data/';

const Mentorship = () => {
  return (
    <section id="mentorship">
      <div className="relative w-full max-w-5xl mx-auto py-20 px-4">
        <h1 className="heading text-4xl font-bold text-center mb-8">
          This is my <span className="text-purple">Mentor</span>
        </h1>

        {MentorshipItems.map(({ id, title, paragraph1, paragraph2, img, video1, video1Title, video2, video2Title }) => (
          <div key={id}>
            <div className="flex flex-col md:flex-row items-center md:items-start space-y-8 md:space-y-0 md:space-x-8 mb-12">
              <div className="w-full md:w-1/3 flex justify-center md:justify-start">
                <img
                  src={img}
                  alt={img}
                  className="object-cover w-64 h-64 rounded-full shadow-lg"
                />
              </div>

              <div className="w-full md:w-2/3 text-center">
                <p className="text-lg text-neutral-50 mx-auto max-w-lg">{paragraph1}</p>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> {/* Added margin-bottom here */}
              {video1 && (
                <div className="flex flex-col items-center">
                  {video1Title && (
                    <h2 className="text-xl font-semibold text-neutral-50 mb-2">{video1Title}</h2>
                  )}
                  <video controls className="w-full h-auto rounded-lg shadow-lg">
                    <source src={video1} type="video/mp4" />
                    Your browser does not support the video tag.
                  </video>
                </div>
              )}

              {video2 && (
                <div className="flex flex-col items-center mb-8"> {/* Added extra margin-bottom here */}
                  {video2Title && (
                    <h2 className="text-xl font-semibold text-neutral-50 mb-2">{video2Title}</h2>
                  )}
                  <video controls className="w-full h-auto rounded-lg shadow-lg">
                    <source src={video2} type="video/mp4" />
                    Your browser does not support the video tag.
                  </video>
                </div>
              )}
            </div>

            <div className="text-center mb-8">
              <h2 className="text-xl font-semibold text-neutral-50 mb-2">{title}</h2>
              <p className="text-lg text-neutral-50 mx-auto mb-6 max-w-2xl">{paragraph2}</p> {/* Increased max width to max-w-2xl */}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

export default Mentorship;