export default function Components() {
  return (
    <section id="components" className="py-chorus-xxl bg-gradient-to-b dark:from-walnut-950 dark:to-carbon-950 from-sand-200 to-white">
      <div className="px-chorus-lg max-w-5xl mx-auto mb-chorus-lg">
        <h2 className="text-h2 mb-chorus-lg">Components</h2>
        
        <div className="py-chorus-lg space-y-chorus-lg">
          <div className="mb-chorus-lg">
            <p className="text-lg mb-chorus-md">
              Component system and design patterns for the CHORUS brand.
            </p>
            <p className="text-carbon-600 dark:text-mulberry-300">
              This section will contain reusable UI components, design patterns, and component specifications for consistent brand implementation.
            </p>
          </div>

          <div className="grid gap-chorus-lg md:grid-cols-2">
            <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
              <h3 className="text-h3 mb-chorus-md">UI Components</h3>
              <p className="text-sm text-carbon-600 dark:text-mulberry-300">
                Standardized UI components including buttons, forms, cards, and navigation elements.
              </p>
            </div>
            
            <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
              <h3 className="text-h3 mb-chorus-md">Layout Patterns</h3>
              <p className="text-sm text-carbon-600 dark:text-mulberry-300">
                Grid systems, spacing conventions, and responsive layout patterns.
              </p>
            </div>
          </div>

          <div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg  border border-sand-200 dark:border-mulberry-800">
            <h3 className="text-h3 mb-chorus-md">Coming Soon</h3>
            <p className="text-carbon-600 dark:text-mulberry-300">
              Detailed component specifications, code examples, and implementation guidelines will be available soon.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}