export default function Home() {
  return (
    <section id="overview" className="mb-chorus-xxl">
      <div className="px-chorus-lg max-w-5xl mx-auto mb-chorus-lg">
        <h2 className="text-h2 mb-chorus-lg">Brand Overview</h2>
        
        <div className="py-chorus-lg space-y-chorus-lg">
          <div className="grid gap-chorus-md md:grid-cols-3">
            <div>
              <h3 className="text-h3 mb-chorus-md">Mission</h3>
              <p>CHORUS Services eliminates context loss, reduces hallucinations, and enables scalable multi-agent collaboration through intelligent context management and distributed reasoning.</p>
            </div>

            <div>
              <h3 className="text-h3 mb-chorus-md">Promise</h3>
              <p>Enterprise-ready distributed AI orchestration that delivers reliable, context-aware results for global teams building the future of intelligent software.</p>
            </div>

            <div>
              <h3 className="text-h3 mb-chorus-md">Position</h3>
              <p>CHORUS Services positions itself as the premium, enterprise-grade solution for distributed AI orchestration, combining technical sophistication with approachable design to serve global enterprise customers seeking reliable, scalable AI coordination.</p>
            </div>
          </div>

          <div>
            <h3 className="text-h3 mb-chorus-md">Audience</h3>
            
            <div className="grid gap-chorus-sm md:grid-cols-3">
              <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
                <h4 className="text-h4 mb-chorus-sm">Technical Decision Makers</h4>
                <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">CTOs, VP Engineering</p>
                <ul className="text-sm space-y-1">
                  <li>ROI justification</li>
                  <li>Technical depth</li>
                  <li>Security assurance</li>
                </ul>
              </div>
              
              <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
                <h4 className="text-h4 mb-chorus-sm">AI Research Leads</h4>
                <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">Principal Engineers</p>
                <ul className="text-sm space-y-1">
                  <li>Technical specifications</li>
                  <li>API documentation</li>
                  <li>Research validation</li>
                </ul>
              </div>
              
              <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
                <h4 className="text-h4 mb-chorus-sm">Business Stakeholders</h4>
                <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">Executives</p>
                <ul className="text-sm space-y-1">
                  <li>Business outcomes</li>
                  <li>Competitive positioning</li>
                  <li>Implementation support</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}