import { useTranslation } from 'react-i18next'
import { Code2, Palette, Zap } from 'lucide-react'
import type { FC } from 'react'

const highlights = [
  { icon: Code2, key: 'clean' },
  { icon: Palette, key: 'design' },
  { icon: Zap, key: 'performance' },
] as const

export const AboutSection: FC = () => {
  const { t } = useTranslation()

  return (
    <section id="about" className="scroll-mt-20 px-6 py-24">
      <div className="mx-auto max-w-4xl">
        <header className="text-center">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
            {t('about.title')}
          </h2>
          <p className="mt-2 text-muted-foreground">{t('about.subtitle')}</p>
        </header>

        <div className="mt-12 grid gap-8 md:grid-cols-2">
          <article className="space-y-4">
            <p className="leading-relaxed text-muted-foreground">
              {t('about.description')}
            </p>
            <p className="leading-relaxed text-muted-foreground">
              {t('about.paragraph2')}
            </p>
          </article>

          <aside className="space-y-4">
            {highlights.map(({ icon: Icon, key }) => (
              <div
                key={key}
                className="flex items-start gap-4 rounded-lg border border-border/50 bg-card p-4 transition-colors hover:border-primary/30"
              >
                <div className="rounded-md bg-primary/10 p-2 text-primary">
                  <Icon className="h-5 w-5" />
                </div>
                <div>
                  <h3 className="font-medium">
                    {t(`about.highlights.${key}.title`)}
                  </h3>
                  <p className="mt-1 text-sm text-muted-foreground">
                    {t(`about.highlights.${key}.description`)}
                  </p>
                </div>
              </div>
            ))}
          </aside>
        </div>
      </div>
    </section>
  )
}