import React from 'react';
import { SECTION_IDS, OUR_MISSION_CONTENT } from '../constants';
import { BookOpenIcon } from './icons'; // A fitting icon for a manifesto

const MissionSectionItem: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => (
  <div className="mb-10">
    <h2 className="font-quicksand text-2xl sm:text-3xl font-bold text-slate-800 mb-4">{title}</h2>
    <div className="prose prose-lg max-w-none font-inter text-slate-700">
      {typeof children === 'string' ? <p>{children}</p> : children}
    </div>
  </div>
);

const OurMissionSection: React.FC = () => {
  return (
    <section 
      id={SECTION_IDS.ourMissionPage} 
      className="py-16 md:py-24 bg-white min-h-screen"
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
        <header className="mb-12 md:mb-16 text-center">
          <BookOpenIcon className="w-16 h-16 mx-auto text-slate-400 mb-4" />
          <h1 className="font-quicksand text-4xl sm:text-5xl md:text-6xl font-bold text-slate-900">
            {OUR_MISSION_CONTENT.title}
          </h1>
        </header>
        
        <div className="prose prose-xl max-w-none font-inter text-slate-700 mb-12">
           {typeof OUR_MISSION_CONTENT.preamble === 'string' 
             ? <p>{OUR_MISSION_CONTENT.preamble}</p> 
             : OUR_MISSION_CONTENT.preamble
           }
        </div>
        
        <div className="mt-12">
          {OUR_MISSION_CONTENT.sections.map((section, index) => (
            <MissionSectionItem key={index} title={section.title}>
              {section.content}
            </MissionSectionItem>
          ))}
        </div>
        
        <footer className="mt-12 pt-8 border-t border-slate-200">
           <div className="prose prose-lg max-w-none font-inter text-slate-700">
            <p className="font-semibold">{OUR_MISSION_CONTENT.closingStatement}</p>
          </div>
        </footer>

      </div>
    </section>
  );
};

export default OurMissionSection;