chorus-services/modules/teaser/components/MissionStatement.tsx

'use client'

import ScrollReveal from './ScrollReveal'

export default function MissionStatement() {
  return (
    <section className="py-chorus-xxl px-chorus-lg bg-gradient-to-b from-sand-200 via-sand-100 to-white dark:from-mulberry-950 dark:via-carbon-950 dark:to-mulberry-950 text-center">
      <div className="max-w-4xl mx-auto">
        
        {/* Section Title */}
        <ScrollReveal delay={200} duration={600} direction="up">
          <h3 className="text-h2 font-bold text-carbon-950 dark:text-white mb-chorus-xl">
            Our Mission
          </h3>
        </ScrollReveal>

        {/* Mission Statement */}
        <ScrollReveal delay={300} duration={600} direction="up">
          <p className="text-xl md:text-2xl leading-relaxed mb-chorus-xl text-carbon-700 dark:text-mulberry-100 font-light">
            We are creating a distributed, semantic and temporal knowledge fabric, 
            for humans and AI, to share reasoning, context and intent, not just files.
          </p>
        </ScrollReveal>
        
        <ScrollReveal delay={400} duration={600} direction="up">
          <div className="w-16 h-px bg-gradient-to-r from-transparent via-carbon-400 dark:via-mulberry-400 to-transparent mx-auto my-chorus-xxl" />
        </ScrollReveal>
        
        <ScrollReveal delay={500} duration={600} direction="up">
          <p className="text-lg md:text-xl leading-relaxed mb-chorus-xxl text-carbon-600 dark:text-mulberry-200 font-light max-w-3xl mx-auto">
            CHORUS transforms how organizations orchestrate AI agents, 
            ensuring every decision is informed by the right context, 
            delivered to the right agent, at precisely the right moment.
          </p>
        </ScrollReveal>

        {/* Supporting Points */}
        <ScrollReveal delay={600} duration={600} direction="up">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-chorus-xl mt-chorus-xxl">
            {[
              {
                title: "Contextual Intelligence",
                description: "Beyond data sharing—intelligent context that understands meaning, relationships, and temporal significance.",
                color: "ocean"
              },
              {
                title: "Agent Orchestration", 
                description: "Seamless coordination between human teams and AI agents through sophisticated workflow intelligence.",
                color: "eucalyptus"
              },
              {
                title: "Temporal Knowledge",
                description: "Understanding not just what happened, but when it mattered and why it influenced subsequent decisions.",
                color: "coral"
              }
            ].map((point, index) => (
              <div 
                key={index} 
                className="text-center p-chorus-lg rounded-lg bg-sand-50/80 dark:bg-mulberry-900/30 border border-sand-200/60 dark:border-mulberry-800/40 backdrop-blur-sm hover:bg-sand-100/90 dark:hover:bg-mulberry-900/50 transition-all duration-500 ease-out"
              >
                <div className={`w-20 h-20 mx-auto mb-chorus-md rounded-full bg-gradient-to-br from-${point.color}-500 to-${point.color}-700 flex items-center justify-center`}>
                  {index === 0 && (
                    // Navigation/Compass Icon
                    <svg className={`w-12 h-12 text-${point.color}-100`} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m-6 3l6-3" />
                    </svg>
                  )}
                  {index === 1 && (
                    // Communication/Chat_Conversation Icon
                    <svg className={`w-12 h-12 text-${point.color}-100`} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                    </svg>
                  )}
                  {index === 2 && (
                    // Calendar/Clock Icon
                    <svg className={`w-12 h-12 text-${point.color}-100`} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  )}
                </div>
                <h4 className="text-lg font-semibold text-carbon-950 dark:text-white mb-chorus-sm">
                  {point.title}
                </h4>
                <p className="text-sm leading-relaxed text-carbon-600 dark:text-mulberry-300 font-light">
                  {point.description}
                </p>
              </div>
            ))}
          </div>
        </ScrollReveal>
      </div>
    </section>
  )
}