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

export default function About() {
  return (
    <section
      id="about"
      className="py-24 px-6 bg-[var(--bg)]"
      aria-labelledby="about-heading"
    >
      <div className="max-w-5xl mx-auto">
        <div className="flex flex-col gap-6">

          <p className="text-slate-700 leading-relaxed max-w-[52ch]">
            {SITE.about1}
          </p>
          <p className="text-slate-700 leading-relaxed max-w-[52ch]">
            {SITE.about2}
          </p>

          <div>
            <p className="text-xs font-semibold uppercase tracking-widest text-slate-400 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-slate-600 bg-white/80
                    border border-slate-200 rounded-full
                    hover:text-slate-900 hover:border-slate-300
                    transition-colors duration-150 cursor-default"
                >
                  {s}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}