import { SITE } from '@/lib/config';

export default function About() {
  return (
    <section id="about" className="py-24 px-6" aria-labelledby="about-heading">
      <div className="max-w-5xl mx-auto grid md:grid-cols-[auto_1fr] gap-16 items-start">
        {/* Avatar */}
        <div className="flex-shrink-0">
          <div className="glass w-40 h-40 md:w-48 md:h-48 flex items-center justify-center rounded-2xl overflow-hidden">
            <span className="text-6xl font-black text-white/10 tracking-tighter select-none">WM</span>
          </div>
        </div>

        {/* Body */}
        <div className="flex flex-col gap-6">
          <div>
            <span className="label">About</span>
          </div>
          <p className="text-white/50 leading-relaxed max-w-[52ch]">{SITE.about1}</p>
          <p className="text-white/50 leading-relaxed max-w-[52ch]">{SITE.about2}</p>

          <div>
            <p className="text-xs font-semibold uppercase tracking-widest text-white/30 mb-3">Stack</p>
            <div className="flex flex-wrap gap-2">
              {SITE.skills.map(s => (
                <span key={s}
                  className="px-3 py-1 text-xs font-medium text-white/40 bg-white/[0.04]
                    border border-white/[0.07] rounded-full hover:text-white/60 hover:border-white/[0.12]
                    transition-colors duration-150 cursor-default">
                  {s}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}