import { Metadata } from 'next'
import { Navbar } from '@/components/blog/navbar'
import { setRequestLocale, getTranslations } from 'next-intl/server'

export const metadata: Metadata = {
  title: 'About',
  description: 'Learn more about me and this blog',
}

type Props = {
  params: Promise<{ locale: string }>
}

export default async function AboutPage({ params }: Props) {
  const { locale } = await params
  setRequestLocale(locale)
  const t = await getTranslations('About')
  return (
    <>
      <Navbar />
      <div className="min-h-screen bg-[rgb(var(--bg-primary))]">
        <div className="max-w-4xl mx-auto px-6 py-16">
          {/* Classification Header */}
          <div className="border-2 border-[rgb(var(--border-primary))] p-8 mb-10">
            <p className="text-[rgb(var(--text-muted))] font-mono text-xs uppercase tracking-widest mb-4">
              {t('classificationHeader')}
            </p>
            <h1 className="text-4xl md:text-5xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] tracking-tight">
              {t('mainTitle')}
            </h1>
          </div>

          {/* Main Content */}
          <div className="space-y-8">
            {/* Introduction Section */}
            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
              <div className="border-l-4 border-[var(--neon-cyan)] pl-6">
                <p className="font-mono text-base text-[rgb(var(--text-primary))] leading-relaxed mb-4">
                  {t('introParagraph1')}
                </p>
                <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider">
                  {t('introLabel')}
                </p>
              </div>
            </section>

            {/* Life & Values Section */}
            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
                {t('lifeValuesTitle')}
              </h2>
              <div className="space-y-4">
                <div className="border-l-4 border-[var(--neon-pink)] pl-6">
                  <h3 className="font-mono text-sm font-bold text-[var(--neon-pink)] uppercase mb-2">
                    {t('familyFirstTitle')}
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    {t('familyFirstText')}
                  </p>
                </div>
                <div className="border-l-4 border-[var(--neon-cyan)] pl-6">
                  <h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
                    {t('activeLifestyleTitle')}
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    {t('activeLifestyleText')}
                  </p>
                </div>
                <div className="border-l-4 border-[var(--neon-green)] pl-6">
                  <h3 className="font-mono text-sm font-bold text-[var(--neon-green)] uppercase mb-2">
                    {t('simpleThingsTitle')}
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    {t('simpleThingsText')}
                  </p>
                </div>
                <div className="border-l-4 border-[var(--neon-orange)] pl-6">
                  <h3 className="font-mono text-sm font-bold text-[var(--neon-orange)] uppercase mb-2">
                    {t('techPurposeTitle')}
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    {t('techPurposeText')}
                  </p>
                </div>
              </div>
            </section>

            {/* Content Section */}
            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
                {t('contentTitle')}
              </h2>
              <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
                {t('contentSubtitle')}
              </p>
              <ul className="space-y-3">
                <li className="flex items-start gap-3">
                  <span className="text-[var(--neon-pink)] font-mono font-bold">&gt;</span>
                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    <strong>{t('contentThoughts')}</strong> - {t('contentThoughtsDesc')}
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-[var(--neon-pink)] font-mono font-bold">&gt;</span>
                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    <strong>{t('contentLifeFamily')}</strong> - {t('contentLifeFamilyDesc')}
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    <strong>{t('contentTechResearch')}</strong> - {t('contentTechResearchDesc')}
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    <strong>{t('contentSysAdmin')}</strong> - {t('contentSysAdminDesc')}
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    <strong>{t('contentDevelopment')}</strong> - {t('contentDevelopmentDesc')}
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-[var(--neon-green)] font-mono font-bold">&gt;</span>
                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    <strong>{t('contentRandom')}</strong> - {t('contentRandomDesc')}
                  </span>
                </li>
              </ul>
            </section>

            {/* Areas of Focus Section */}
            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
                {t('focusTitle')}
              </h2>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="border border-[rgb(var(--border-primary))] p-4">
                  <h3 className="font-mono text-xs font-bold text-[var(--neon-pink)] uppercase mb-2">
                    {t('focusBeingDadTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    {t('focusBeingDadText')}
                  </p>
                </div>
                <div className="border border-[rgb(var(--border-primary))] p-4">
                  <h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
                    {t('focusStayingActiveTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    {t('focusStayingActiveText')}
                  </p>
                </div>
                <div className="border border-[rgb(var(--border-primary))] p-4">
                  <h3 className="font-mono text-xs font-bold text-[var(--neon-green)] uppercase mb-2">
                    {t('focusTechnologyTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    {t('focusTechnologyText')}
                  </p>
                </div>
                <div className="border border-[rgb(var(--border-primary))] p-4">
                  <h3 className="font-mono text-xs font-bold text-[var(--neon-orange)] uppercase mb-2">
                    {t('focusLifeBalanceTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    {t('focusLifeBalanceText')}
                  </p>
                </div>
              </div>
            </section>
            {/* Tech Stack Section */}
            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
                {t('techStackTitle')}
              </h2>
              <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
                {t('techStackSubtitle')}
              </p>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="border border-[rgb(var(--border-primary))] p-4">
                  <h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
                    {t('techStackDevelopmentTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    {t('techStackDevelopmentText')}
                  </p>
                </div>
                <div className="border border-[rgb(var(--border-primary))] p-4">
                  <h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
                    {t('techStackInfrastructureTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    {t('techStackInfrastructureText')}
                  </p>
                </div>
                <div className="border border-[rgb(var(--border-primary))] p-4">
                  <h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
                    {t('techStackDesignTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    {t('techStackDesignText')}
                  </p>
                </div>
                <div className="border border-[rgb(var(--border-primary))] p-4">
                  <h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
                    {t('techStackSelfHostingTitle')}
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    {t('techStackSelfHostingText')}
                  </p>
                </div>
              </div>
            </section>
            {/* Contact Section */}
            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
                {t('contactTitle')}
              </h2>
              <div className="border-l-4 border-[var(--neon-pink)] pl-6">
                {/* <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed mb-4">
                  You can reach me at{' '}
                  <a
                    href="mailto:email@example.com"
                    className="text-[var(--neon-cyan)] hover:text-[var(--neon-pink)] underline transition-colors"
                  >
                    email@example.com
                  </a>{' '}
                  or find me on social media.
                </p> */}
                {/* <p className="font-mono text-xs text-[rgb(var(--text-muted))] uppercase tracking-wider">
                  RESPONSE TIME: &lt; 24H // STATUS: MONITORED
                </p> */}
              </div>
            </section>
          </div>
        </div>
      </div>
    </>
  )
}