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

export const metadata: Metadata = {
  title: 'About',
  description: 'Learn more about me and this 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; _DOC://PUBLIC_ACCESS
            </p>
            <h1 className="text-4xl md:text-5xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] tracking-tight">
              ABOUT ME_
            </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">
                  Welcome to my corner of the internet! This is where I share my thoughts, opinions,
                  and experiences - from tech adventures to life as a family man. Yes, I love
                  technology, but there&apos;s so much more to life than just code and servers.
                </p>
                <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider">
                  STATUS: ACTIVE // ROLE: DAD + DEV + LIFE ENTHUSIAST
                </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))]">
                &gt; LIFE & VALUES
              </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">
                    [FAMILY FIRST]
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    Being a dad to an amazing toddler is my most important role. Family time is
                    sacred - whether it&apos;s building block towers, exploring parks, or just
                    enjoying the chaos of everyday life together. Tech can wait; these moments
                    can&apos;t.
                  </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">
                    [ACTIVE LIFESTYLE]
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    I believe in keeping the body active. Whether it&apos;s hitting the gym, playing
                    sports, or just staying on the move - physical activity keeps me sharp,
                    balanced, and ready for whatever life throws my way.
                  </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">
                    [ENJOYING THE SIMPLE THINGS]
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    Life&apos;s too short not to enjoy it. A good drink, a relaxing
                    evening after a long day, or just not doing anything a blowing some steam off.
                  </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">
                    [TECH WITH PURPOSE]
                  </h3>
                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
                    Yes, I love tech - self-hosting, privacy, tinkering with hardware. But it&apos;s
                    a tool, not a lifestyle. Tech should serve life, not the other way around.
                  </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))]">
                &gt; WHAT YOU&apos;LL FIND HERE
              </h2>
              <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
                CONTENT SCOPE // EVERYTHING FROM TECH TO LIFE
              </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>Thoughts & Opinions</strong> - My take on life, work, and everything in
                    between
                  </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>Life & Family</strong> - Adventures in parenting, sports, and enjoying
                    the simple things
                  </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>Tech Research</strong> - When I dive into interesting technologies and
                    experiments
                  </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>System Administration</strong> - Self-hosting, infrastructure, and
                    DevOps adventures
                  </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>Development Insights</strong> - Lessons learned from building software
                  </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>Random Stuff</strong> - Because life doesn&apos;t fit into neat
                    categories!
                  </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))]">
                &gt; AREAS OF FOCUS
              </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">
                    [BEING A DAD]
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    Playing with my boy, teaching moments, watching him grow, building memories
                    together
                  </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">
                    [STAYING ACTIVE]
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    Gym sessions, sports, keeping fit, maintaining energy for life&apos;s demands
                  </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">
                    [TECHNOLOGY & SYSTEMS]
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    Software development, infrastructure, DevOps, self-hosting adventures
                  </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">
                    [LIFE BALANCE]
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    Relaxing with good company, enjoying downtime, appreciating the simple moments
                  </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))]">
                &gt; TECH STACK
              </h2>
              <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
                TOOLS I USE // WHEN NEEDED
              </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">
                    [DEVELOPMENT]
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    .NET, Golang, TypeScript, Next.js, React
                  </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">
                    [INFRASTRUCTURE]
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    Windows Server, Linux, Docker, Hyper-V
                  </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">
                    [DESIGN]
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    Tailwind CSS, Markdown, Terminal aesthetics
                  </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">
                    [SELF-HOSTING]
                  </h3>
                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
                    Home lab, privacy-focused services, full control, Git server
                  </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">
                  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>
    </>
  )
}