import { motion } from 'framer-motion'
import { FaGraduationCap, FaAward, FaHandsHelping } from 'react-icons/fa'
import SnowPeaks from '../components/SnowPeaks'

const About = () => {
  const elizaAchievements = [
    {
      icon: <FaGraduationCap />,
      title: "Education",
      details: "Master's in Human Resource Development - Rochester Institute of Technology"
    },
    {
      icon: <FaAward />,
      title: "Certifications",
      details: "Certified ADA Coordinator, Member of National Association of Parliamentarians"
    },
    {
      icon: <FaHandsHelping />,
      title: "Leadership",
      details: "President of Missoula Council of the Deaf, Founder of DeafGain LLC"
    }
  ]

  return (
    <div className="min-h-screen">
      <section className="relative py-20 bg-primary text-accent-snow">
        <div className="max-w-7xl mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-center"
          >
            <h1 className="text-4xl md:text-5xl font-bold mb-6">
              The Saga of DeafGain
            </h1>
          </motion.div>
        </div>
      </section>

      <SnowPeaks />

      <section className="py-8 bg-accent-snow">
        <div className="max-w-7xl mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-center mb-20"
          >
            <h2 className="text-3xl font-bold text-secondary mb-6">Our Vision</h2>
            <p className="text-xl text-accent-mountain max-w-4xl mx-auto mb-12">
              Creating a Deaf-designed nationwide hub promoting understanding, empowerment, and inclusivity. 
              From coast to coast, we're building a nationwide ecosystem of accessibility and empowerment 
              through strategic partnerships and innovative solutions.
            </p>
            <h3 className="text-xl font-semibold text-secondary">
              "Advocacy nudges the status quo, and we are here to shift paradigms."
            </h3>
          </motion.div>

          <div>
            <div className="grid md:grid-cols-2 gap-12 items-start">
              <div>
                <h2 className="text-3xl font-bold text-secondary mb-6 text-center">
                  Eliza Kragh
                </h2>
                <div className="w-48 h-48 mx-auto mb-8 rounded-full overflow-hidden bg-accent-lake border-4 border-primary">
                  <img src="/images/eliza.jpg" alt="Eliza Kragh" className="w-full h-full object-cover" />
                </div>
                <motion.div>
                  <p className="text-accent-mountain">
                    A proud Montana native, Eliza brings her passion for service and innovation to every aspect of DeafGain. Her journey reflects a deep commitment to transforming accessibility standards and empowering others. When not pioneering new solutions, you'll find her exploring Montana's breathtaking landscapes or engaging with local Deaf communities.
                  </p>
                </motion.div>
              </div>
              <motion.div className="grid grid-cols-1 gap-6">
                {elizaAchievements.map((item, index) => (
                  <div key={index} className="bg-white p-6 rounded-lg shadow-lg">
                    <div className="text-primary text-2xl mb-4">{item.icon}</div>
                    <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
                    <p className="text-accent-mountain">{item.details}</p>
                  </div>
                ))}
              </motion.div>
            </div>
          </div>

          <div className="max-w-4xl mx-auto mb-4 py-2">
            <div className="relative h-32">
              <svg viewBox="0 0 1440 120" className="w-full">
                <defs>
                  <linearGradient id="mountainGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" stopColor="#647C90" />
                    <stop offset="50%" stopColor="#A4C3D2" />
                    <stop offset="100%" stopColor="#2C4A3E" />
                  </linearGradient>
                </defs>
                <path 
                  fill="none"
                  stroke="url(#mountainGradient)"
                  strokeWidth="3"
                  d="M0,100 L360,20 L720,90 L1080,30 L1440,80"
                  className="path"
                />
              </svg>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}

export default About