'use client'

import GlowButton from './GlowButton'

export default function Contact() {
  return (
    <section className="py-24 px-4 relative z-10">
      <div className="max-w-2xl mx-auto text-center">
        <h2 className="text-3xl md:text-4xl font-bold text-white mb-6 scroll-reveal">
          Connect
        </h2>

        <div className="mb-12 scroll-reveal stagger-1">
          <p className="text-xl text-white/90 leading-relaxed">
            Ready to build something extraordinary?
            <br className="hidden sm:block" />
            Let's start the conversation.
          </p>
        </div>

        <div className="flex flex-col sm:flex-row items-center justify-center gap-6 scroll-reveal stagger-2">
          <GlowButton
            href="https://www.linkedin.com/in/eric-chicoine-2440893b7"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Connect with Eric Chicoine on LinkedIn"
            className="group inline-flex items-center gap-3 px-8 py-4 text-lg"
          >
            <svg
              className="w-6 h-6 transition-transform group-hover:scale-110"
              fill="currentColor"
              viewBox="0 0 24 24"
              aria-hidden="true"
            >
              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
            </svg>
            <span className="font-semibold">Eric Chicoine - LinkedIn</span>
            <svg
              className="w-4 h-4 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </GlowButton>

          <GlowButton
            href="https://linkedin.com/company/geekbrainio"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Connect with GeekBrain.io on LinkedIn"
            className="group inline-flex items-center gap-3 px-8 py-4 text-lg"
          >
            <svg
              className="w-6 h-6 transition-transform group-hover:scale-110"
              fill="currentColor"
              viewBox="0 0 24 24"
              aria-hidden="true"
            >
              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
            </svg>
            <span className="font-semibold">GeekBrain.io - LinkedIn</span>
            <svg
              className="w-4 h-4 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </GlowButton>

          <p className="text-sm text-muted mt-6 scroll-reveal stagger-3 opacity-90">
            Follow us for updates on our investments and insights
          </p>
        </div>
      </div>
    </section>
  )
}