import { siteConfig } from '@/site.config';
import { ExternalLinkIcon } from 'lucide-react';
import Link from 'next/link';

const AboutPage = async () => {
    return (
        <div className='container mx-auto w-full flex-1 px-4 py-12 md:py-16'>
            <div className='mb-10 border-b border-border pb-8'>
                <p className='mb-1 font-mono text-xs font-medium uppercase tracking-widest text-muted-foreground'>
                    Dev Blog
                </p>
                <h1 className='text-3xl font-bold tracking-tight md:text-4xl'>
                    About
                </h1>
            </div>

            <div className='max-w-2xl'>
                <p className='mb-8 text-xl leading-snug'>
                    Hi, I&apos;m{' '}
                    <span className='font-semibold'>
                        {siteConfig.author.name}
                    </span>
                    .
                </p>

                <div className='space-y-4 leading-relaxed text-muted-foreground'>
                    <p>
                        I&apos;m a software developer and I&apos;ve always
                        enjoyed programming. Over the years, I&apos;ve worked on
                        all kinds of projects — from infrastructure tools and
                        data modeling systems to computational physics
                        simulations and agent-based AI tools.
                    </p>
                    <p>
                        For me, programming is more than work. It&apos;s
                        something I like to explore, improve, and keep
                        experimenting with.
                    </p>
                    <p>
                        I&apos;m especially drawn to building things that are
                        simple, practical, and useful. I care about continuous
                        improvement, both in the systems I build and in the way
                        I approach problems.
                    </p>
                    <p>
                        This blog is where I share what I learn along the way —
                        ideas, experiments, and lessons from real projects. Hope
                        we can learn and grow together.
                    </p>
                </div>

                <div className='mt-10 flex items-center gap-5 border-t border-border pt-8'>
                    <span className='text-sm text-muted-foreground'>
                        Find me on
                    </span>
                    <Link
                        href={siteConfig.author.links.github}
                        target='_blank'
                        rel='noreferrer'
                        className='flex items-center gap-1.5 text-sm font-medium transition-colors hover:text-primary'
                    >
                        <ExternalLinkIcon className='size-3.5' />
                        GitHub
                    </Link>
                    <Link
                        href={siteConfig.author.links.twitter}
                        target='_blank'
                        rel='noreferrer'
                        className='flex items-center gap-1.5 text-sm font-medium transition-colors hover:text-primary'
                    >
                        <ExternalLinkIcon className='size-3.5' />
                        Twitter
                    </Link>
                </div>
            </div>
        </div>
    );
};

export default AboutPage;