import { Metadata } from 'next'
import { Navbar } from '@/components/blog/navbar'

export const metadata: Metadata = {
  title: 'Despre',
  description: 'Află mai multe despre mine și acest blog',
}

export default function AboutPage() {
  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">
              &gt;&gt; CLASSIFIED_DOC://PUBLIC_ACCESS
            </p>
            <h1 className="text-4xl md:text-5xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] tracking-tight">
              DESPRE MINE_
            </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">
                  Bun venit pe blogul meu! Sunt un dezvoltator pasionat de tehnologie, specializat
                  în dezvoltarea web modernă cu Next.js, React și TypeScript.
                </p>
                <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider">
                  STATUS: ACTIVE // LEVEL: SENIOR DEV
                </p>
              </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))]">
                &gt; CE VEI GĂSI AICI
              </h2>
              <ul className="space-y-3">
                <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">
                    Tutoriale despre dezvoltare web
                  </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">
                    Ghiduri practice pentru Next.js și React
                  </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">
                    Sfaturi despre design și UX
                  </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">
                    Experiențe din proiecte reale
                  </span>
                </li>
              </ul>
            </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))]">
                &gt; TEHNOLOGII FOLOSITE
              </h2>
              <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
                SYSTEM STACK // VERSION 2.0
              </p>
              <div className="grid gap-4">
                <div className="border border-[rgb(var(--border-primary))] p-4">
                  <h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
                    [FRAMEWORK]
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))]">
                    <strong>Next.js 16</strong> - Framework React pentru producție
                  </p>
                </div>
                <div className="border border-[rgb(var(--border-primary))] p-4">
                  <h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
                    [LANGUAGE]
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))]">
                    <strong>TypeScript</strong> - Pentru type safety
                  </p>
                </div>
                <div className="border border-[rgb(var(--border-primary))] p-4">
                  <h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
                    [STYLING]
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))]">
                    <strong>Tailwind CSS</strong> - Pentru stilizare rapidă
                  </p>
                </div>
                <div className="border border-[rgb(var(--border-primary))] p-4">
                  <h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
                    [CONTENT]
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))]">
                    <strong>Markdown</strong> - Pentru conținut
                  </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))]">
                &gt; CONTACT
              </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">
                  Mă poți contacta pe{' '}
                  <a
                    href="mailto:email@example.com"
                    className="text-[var(--neon-cyan)] hover:text-[var(--neon-pink)] underline transition-colors"
                  >
                    email@example.com
                  </a>{' '}
                  sau mă poți găsi pe rețelele sociale.
                </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>
    </>
  )
}