import React from 'react'
import { LearningStoryItems } from '@/data'
const LearningStory = () => {
  return (
    <section  id="learningstory">
    <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">
        My Learning <span className="text-purple">Story</span>
      </h1>

      {LearningStoryItems.map(({id, paragraph1, paragraph2, paragraph3, img, videoEvidence, imgEvidence}) => (
        <div key={id} 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">
            <p className="text-lg text-neutral-50 mb-6">{paragraph1}</p>
            <p className="text-lg text-neutral-50 mb-6">{paragraph2}</p>
            <p className="text-lg text-neutral-50">{paragraph3}</p>
          </div>
        </div>
      ))}

      {/* Evidence Section */}
      <div className="flex flex-wrap justify-center space-y-8 md:space-y-0 md:space-x-8 mt-12">
        {LearningStoryItems.map(({id, videoEvidence, imgEvidence}) => (
          <div key={id} className="w-full md:w-1/2 mb-6">
            {/* Displaying Video Evidence */}
            {videoEvidence && (
              <div className="mb-6">
                <h3 className="text-xl font-semibold mb-4">Video Evidence</h3>
                <video controls className="w-full h-auto rounded-lg shadow-lg">
                  <source src={videoEvidence} type="video/mp4" />
                  Your browser does not support the video tag.
                </video>
              </div>
            )}
            
            {/* Displaying Image Evidence */}
            {imgEvidence && (
              <div className="mb-6">
                <h3 className="text-xl font-semibold mb-4">Image Evidence</h3>
                <img
                  src={imgEvidence}
                  alt="Image evidence"
                  className="object-cover w-full h-auto rounded-lg shadow-lg"
                />
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
    </section>
  )
}

export default LearningStory