import { ImagePlaceholder } from '@/components/ImagePlaceholder'

export default function OurMission() {
  return (
    <div className="min-h-screen py-16 px-4">
      <div className="max-w-6xl mx-auto">
        {/* Hero Section */}
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-6xl font-bold mb-6 text-primary">
            Our Mission
          </h1>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Empowering individuals and communities to protect their digital access needs through open-source resources
          </p>
        </div>

        {/* Main Content */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
          <div className="space-y-6">
            <h2 className="text-3xl font-bold text-primary">Defending Access With Innovation</h2>
            <p className="text-lg text-muted-foreground leading-relaxed">
              Some may argue that mobile devices are a distraction, and with the rise of addictive apps such as TikTok,
              Instagram, and Twitter, for some that may be the case. However, for many, cell phones are tools for 
              efficient work, enhancing one's scheduling, communication, productivity, and more.
            </p>
            <p className="text-lg text-muted-foreground leading-relaxed">
              For students who struggle to focus in noisy or overwhelming settings, mobile access paired with tools like 
              noise-canceling headphones can be transformative. By filtering out background chatter, HVAC hum, or classroom 
              commotion, these headphones help students-particularly those with, autism, ADHD, Sensory Processing Disorder, or other auditory sensitivities-to
              concentrate more deeply, reduce stress, and stay engaged in learning tasks. Real-world reports and studies 
              have noted improved task performance, greater calm, and increased participation when noise-canceling headphones 
              are used as part of a sensory toolkit or personalized learning strategy.
              Placeholder Citation: https://learningheadphones.com/blogs/school-headphone-blog/the-impact-of-noise-cancelling-headphones-on-student-focus-and-learning-in-the-classroom will embed later
            </p>
            <p className="text-lg text-muted-foreground leading-relaxed">
              Most schools issue their own devices, however, these devices are often cheap, have limited functionality, 
              and are surveilled by the district. Often these devices come with strict content filters, blocking many 
              of the websites students may use to boost their mood/productivity, fight off anxiety, and increase focus. 
              Without access to tools such as Spotify, Apple Music, or Youtube, we will see a regression in many 
              students grades and overall wellbeing.
              Placeholder Citation: https://pmc.ncbi.nlm.nih.gov/articles/PMC9855069/ will embed later
            </p>
          </div>
          <ImagePlaceholder 
            height="h-96"
            text="Mission Statement Visual"
          />
        </div>

        {/* Image Gallery */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
          <ImagePlaceholder 
            height="h-64"
            text="Community Workshop"
          />
          <ImagePlaceholder 
            height="h-64"
            text="Technology Training"
          />
          <ImagePlaceholder 
            height="h-64"
            text="Digital Rights Event"
          />
          <ImagePlaceholder 
            height="h-64"
            text="Open Source Project"
          />
          <ImagePlaceholder 
            height="h-64"
            text="Accessibility Initiative"
          />
          <ImagePlaceholder 
            height="h-64"
            text="Team Collaboration"
          />
        </div>

        {/* Values Section */}
        <section className="bg-secondary/20 rounded-xl p-8 md:p-12">
          <h2 className="text-3xl font-bold text-center mb-12 text-primary">Our Core Values</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="text-center space-y-4">
              <div className="w-20 h-20 bg-primary/20 rounded-full mx-auto flex items-center justify-center">
                <span className="text-3xl">🛡️</span>
              </div>
              <h3 className="text-xl font-semibold">Protection</h3>
              <p className="text-muted-foreground">
                Safeguarding not just digital access rights, but online privacy for everyone.
              </p>
            </div>
            <div className="text-center space-y-4">
              <div className="w-20 h-20 bg-primary/20 rounded-full mx-auto flex items-center justify-center">
                <span className="text-3xl">🌐</span>
              </div>
              <h3 className="text-xl font-semibold">Accessibility</h3>
              <p className="text-muted-foreground">
                Ensuring technology is accessible and usable by people of all abilities.
              </p>
            </div>
            <div className="text-center space-y-4">
              <div className="w-20 h-20 bg-primary/20 rounded-full mx-auto flex items-center justify-center">
                <span className="text-3xl">🔓</span>
              </div>
              <h3 className="text-xl font-semibold">Openness</h3>
              <p className="text-muted-foreground">
                Promoting open source solutions and transparent practices.
              </p>
            </div>
            <div className="text-center space-y-4">
              <div className="w-20 h-20 bg-primary/20 rounded-full mx-auto flex items-center justify-center">
                <span className="text-3xl">🤝</span>
              </div>
              <h3 className="text-xl font-semibold">Community</h3>
              <p className="text-muted-foreground">
                Building strong communities through collaboration and shared knowledge.
              </p>
            </div>
          </div>
        </section>
      </div>
    </div>
  )
}