chorus-ping-blog/components/BlogFooter.tsx

import Link from 'next/link'
import ThreeLogo from './ThreeLogo'

export default function BlogFooter() {
  return (
    <footer className="bg-white/80 dark:bg-carbon-950/80 backdrop-blur-md border-t border-carbon-200/50 dark:border-carbon-800/50 mt-24">
      <div className="blog-container py-12">
        {/* Centered Masthead Footer */}
        <div className="flex flex-col items-center text-center space-y-8">
          {/* Logo Group - Centered */}
          <div className="flex items-center space-x-4">
            <div className="w-12 h-12">
              <ThreeLogo className="w-full h-full" />
            </div>
            <div className="flex flex-col">
              <span className="font-logo font-thin text-2xl leading-none text-carbon-900 dark:text-carbon-100 text-center">CHORUS</span>
              <span className="text-carbon-600 dark:text-carbon-500 text-sm font-bold tracking-wider text-left">PING!</span>
            </div>
          </div>

          {/* Description */}
          <p className="text-carbon-600 dark:text-carbon-400 text-sm leading-relaxed max-w-2xl">
            Insights and deep dives into Context Engineering for Agentic AI and Orchestration, Agent Collaboration, 
            and the future of intelligent systems.
          </p>

          {/* Navigation Links */}
          <div className="flex items-center justify-center space-x-6 border-t border-b border-carbon-200 dark:border-carbon-800 py-4 w-full max-w-xl">
            <Link href="/" className="text-carbon-600 dark:text-carbon-400 hover:text-carbon-800 dark:hover:text-carbon-200 transition-colors text-sm font-medium uppercase tracking-wide">
              All Posts
            </Link>
            <span className="text-carbon-300 dark:text-carbon-700">•</span>
            <Link href="https://chorus.services" className="text-carbon-600 dark:text-carbon-400 hover:text-carbon-800 dark:hover:text-carbon-200 transition-colors text-sm font-medium uppercase tracking-wide">
              Platform
            </Link>
            <span className="text-carbon-300 dark:text-carbon-700">•</span>
            <Link href="/rss.xml" className="text-carbon-600 dark:text-carbon-400 hover:text-carbon-800 dark:hover:text-carbon-200 transition-colors text-sm font-medium uppercase tracking-wide">
              RSS
            </Link>
          </div>

          {/* Social Links */}
          <div className="flex space-x-4">
            <Link 
              href="https://www.linkedin.com/in/anthonylewisrawlins"
              className="text-carbon-600 dark:text-carbon-500 hover:text-carbon-800 dark:hover:text-carbon-300 transition-colors"
            >
              <span className="sr-only">LinkedIn</span>
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clipRule="evenodd"/>
              </svg>
            </Link>
          </div>
        </div>

        <div className="border-t border-carbon-200 dark:border-carbon-800 mt-8 pt-8 text-center">
          <p className="text-carbon-600 dark:text-carbon-500 text-xxs">
            © {new Date().getFullYear()} CHORUS Services. Built with care by{' '}
            <Link href="https://deepblack.cloud" className="text-carbon-700 dark:text-carbon-400 hover:text-carbon-900 dark:hover:text-carbon-200 transition-colors">
              Deep Black Cloud
            </Link>
            .
          </p>
        </div>
      </div>
    </footer>
  )
}