'use client'

export default function About() {
  return (
    <section className="py-24 px-4 relative z-10">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-12 scroll-reveal">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4 tracking-tight">
            About
          </h2>
          <div className="w-24 h-1 bg-gradient-to-r from-primary via-secondary to-accent-purple mx-auto rounded-full" />
        </div>

        <div className="glass-card p-8 md:p-12 scroll-reveal subtle-gradient">
          <div className="prose prose-invert prose-lg max-w-none">
            <p className="text-lg md:text-xl leading-relaxed text-white/90">
              GeekBrain.io is a venture capital fund focused on backing{' '}
              <span className="text-white font-semibold">technical founders</span>{' '}
              building transformative technologies. We believe the best companies
              start with builders who understand the problem they're solving.
            </p>
            <p className="text-lg md:text-xl leading-relaxed text-white/90 mt-6">
              Our mission is to provide the{' '}
              <span className="text-white font-semibold">capital, network, and strategic support</span>{' '}
              these founders need to turn bold ideas into reality.
            </p>

            {/* Optional: decorative element */}
            <div className="mt-8 flex justify-center gap-4">
              <div className="w-12 h-12 rounded-full bg-primary/20 border border-primary/40 flex items-center justify-center">
                <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <div className="w-12 h-12 rounded-full bg-secondary/20 border border-secondary/40 flex items-center justify-center">
                <svg className="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
              </div>
              <div className="w-12 h-12 rounded-full bg-accent-purple/20 border border-accent-purple/40 flex items-center justify-center">
                <svg className="w-6 h-6 text-accent-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                </svg>
              </div>
            </div>

            {/* Founder section */}
            <div className="mt-12 scroll-reveal">
              <div className="glass-card p-6 md:p-8 text-center max-w-2xl mx-auto">
                <h3 className="text-2xl font-bold text-white mb-3">Founder & Lead Investor</h3>
                <p className="text-lg text-white/90 leading-relaxed mb-4">
                  <strong>Eric Chicoine</strong> - A seasoned entrepreneur and investor with a passion for
                  technical innovation. With deep expertise in AI, cloud infrastructure, and software engineering,
                  Eric works closely with founders to transform groundbreaking ideas into successful companies.
                </p>
                <a
                  href="https://www.linkedin.com/in/eric-chicoine-2440893b7"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-primary to-secondary rounded-lg text-white font-semibold hover:opacity-90 transition-opacity"
                >
                  <svg className="w-5 h-5" 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>
                  Connect on LinkedIn
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}