'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-muted">
              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-muted 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>
          </div>
        </div>
      </div>
    </section>
  )
}