'use client'

import React from 'react'
import { motion } from 'framer-motion'
import RegionMap from '@/components/biography/RegionMap'
import JourneyVisual from '@/components/biography/JourneyVisual'

export default function Biography() {
  const currentYear = new Date().getFullYear()
  const yearsOfAdvocacy = currentYear - 2010

  return (
    <motion.div 
      className="container mx-auto px-4 py-16"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      <div className="max-w-4xl mx-auto">
        <motion.h1 
          className="text-4xl md:text-5xl font-bold mb-8 bg-gradient-to-r from-blue-600 to-mcdi-maroon bg-clip-text text-transparent"
          initial={{ y: -20 }}
          animate={{ y: 0 }}
        >
          A Journey of Advocacy and Leadership
        </motion.h1>
        
        <div className="prose prose-lg max-w-none">
          <motion.div 
            className="space-y-6"
            initial={{ y: 20 }}
            animate={{ y: 0 }}
          >
            <p className="text-xl font-medium text-gray-700 leading-relaxed">
              My life's journey has been one of profound discovery and purposeful transformation, shaped by experiences that have forged me into an unwavering advocate for the Deaf community.
            </p>

            <div className="bg-gray-50 p-6 rounded-lg border-l-4 border-blue-600 my-8">
              <p className="italic text-gray-700">
                "When you daydream, you envision your authentic self. I've learned to use these visions as blueprints for building the person I want to become."
              </p>
            </div>

            <section className="my-12">
              <h2 className="text-2xl font-bold mb-4">Early Foundations</h2>
              <p>
                Growing up in Arkansas's river valley, I became Deaf at age one. My early years were uniquely shaped by being the only Deaf person in my family, navigating the hearing world while developing my identity. It wasn't until my teenage years that I encountered Deaf adults who would profoundly influence my understanding of Deaf culture and community.
              </p>
            </section>

            <section className="my-12">
              <h2 className="text-2xl font-bold mb-4">Professional Evolution</h2>
              <p>
                My professional journey began in 1998 in the technology sector. Starting as a PC technician, I ascended through the ranks to become an IT manager for a government agency by 2009. This decade-long experience in technology equipped me with valuable skills in problem-solving and systematic thinking that I now apply to advocacy.
              </p>
              <div className="my-8">
                <JourneyVisual />
              </div>
            </section>

            <section className="my-12">
              <h2 className="text-2xl font-bold mb-4">Global Awakening</h2>
              <p>
                In 2015, I embarked on a transformative journey that would reshape my understanding of Deaf culture and identity. Over two years, I traversed 47 countries, living with Deaf families and immersing myself in their unique sign languages and cultures. This wasn't merely travel – it was a profound exploration of global Deaf perspectives that transformed my approach to advocacy.
              </p>
              <p className="mt-4">
                It was during this journey, sitting on a cliff in the Himalayas, that I experienced a profound realization: for the first time, I felt truly proud of myself, not for others' approval, but for my own growth and authenticity.
              </p>
            </section>

            <section className="my-12">
              <h2 className="text-2xl font-bold mb-4">Leadership in Action</h2>
              <p>
                My dedication to advocacy has culminated in significant leadership roles that span from state to national levels. From 2021 to July 2025, I served the Kansas Association of the Deaf (KAD), first as an appointed board member and then as Vice President from 2023 to 2025. From July 2024 to January 2025, I served as Region II Board Representative for the National Association of the Deaf (NAD), where I developed strategies to champion the interests of Deaf communities across the Midwest heartland - a vibrant mosaic of eleven states stretching from the Great Lakes to the Great Plains.
              </p>
              <div className="my-8">
                <RegionMap />
              </div>
              <p className="mt-4">
                These leadership experiences with both KAD and NAD have provided invaluable insights and connections that continue to inform my advocacy work, allowing me to leverage the knowledge gained from serving at both state and national levels.
              </p>
            </section>

            <section className="my-12">
              <h2 className="text-2xl font-bold mb-4">Breaking Communication Barriers</h2>
              <p>
                For the past {yearsOfAdvocacy} years, I've dedicated myself to dismantling communication barriers within the Deaf community. My work involves advocating for those who cannot advocate for themselves and educating the broader community about Deaf history, arts, and culture. This mission is deeply personal – it's about creating the change I wish I had seen in my early years.
              </p>
            </section>

            <section className="my-12 bg-gradient-to-r from-blue-50 to-purple-50 p-8 rounded-xl">
              <h2 className="text-2xl font-bold mb-4">Building Tomorrow's Leaders</h2>
              <p>
                Today, I focus on nurturing and strengthening leadership within the Deaf community. Through mentorship, workshops, and advocacy training, I'm committed to developing the next generation of Deaf leaders. Like planting a tree whose shade will benefit future generations, I'm building a legacy of empowerment and leadership that will continue to grow and create positive change long into the future.
              </p>
            </section>
          </motion.div>
        </div>
      </div>
    </motion.div>
  )
}