---
import Layout from "../layouts/Layout.astro";
---

<Layout title="Ryan Kazokas">
  <main>
    <!-- Hero Section -->
    <div class="flex flex-col items-center justify-center min-h-[70vh] px-4">
      <h1 class="text-5xl md:text-7xl font-bold text-center matrix-glow mb-8 typing-text">
        Hi! I'm Ryan, a software engineer.
      </h1>

      <!-- Terminal Window -->
      <div class="terminal-container mt-8 w-full max-w-3xl">
        <div class="terminal-window">
          <!-- Terminal Header -->
          <div class="terminal-header">
            <div class="terminal-buttons">
              <span class="terminal-button close"></span>
              <span class="terminal-button minimize"></span>
              <span class="terminal-button maximize"></span>
            </div>
            <div class="terminal-title">ryan@localhost:~</div>
          </div>

          <!-- Terminal Body -->
          <div class="terminal-body">
            <div class="terminal-line">
              <span class="prompt">$</span> whoami
            </div>
            <div class="terminal-output">Ryan Kazokas - Senior Software Engineer</div>

            <div class="terminal-line">
              <span class="prompt">$</span> pwd
            </div>
            <div class="terminal-output">/home/ryan/shopify/core-inventory</div>

            <div class="terminal-line">
              <span class="prompt">$</span> echo $ROLE
            </div>
            <div class="terminal-output">Senior Software Engineer @ Shopify</div>

            <div class="terminal-line">
              <span class="prompt">$</span> ls ~/skills/
            </div>
            <div class="terminal-output">typescript  react  node  kubernetes  docker  ruby  rails  python  graphql</div>

            <div class="terminal-line">
              <span class="prompt">$</span> ping family.local
            </div>
            <div class="terminal-output">PING family.local (192.168.1.1): 56 data bytes</div>
            <div class="terminal-output">64 bytes from family: wife=Sam kids=[Auden, Cooper, Nolan, Niko]</div>
            <div class="terminal-output">All systems operational! ✓</div>

            <div class="terminal-line">
              <span class="prompt">$</span> git status
            </div>
            <div class="terminal-output">On branch main</div>
            <div class="terminal-output">Nothing to commit, working tree clean</div>

            <div class="terminal-line">
              <span class="prompt blinking-cursor">$</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- About Section -->
    <div class="max-w-3xl mx-auto p-6 bg-black border border-green-500 mt-10 shadow-lg shadow-green-500/50">
      <div class="mt-8 flex flex-col p-12 text-left w-full justify-center">
        <p class="text-4xl matrix-glow mb-4">&gt; About</p>
        <div class="flex justify-center mb-6">
          <img
            src="/images/ryan.jpg"
            alt="Ryan Kazokas"
            class="profile-photo"
          />
        </div>
        <p class="mt-2 text-green-400">
          I'm Ryan Kazokas, a Senior Software Engineer at Shopify working on the Core Inventory Team,
          where I build solutions to help merchants manage their inventory at scale.
        </p>
        <p class="mt-2 text-green-400">
          Outside of work, I love tinkering with technology—I run my own Kubernetes cluster on my own
          servers (KazCloud) where I host personal projects and experiment with new tech. I'm also an
          avid video game collector, which led me to build TurboVault, a cataloging app for my collection.
        </p>
        <p class="mt-2 text-green-400">
          Most importantly, I'm a husband to my wife Sam and a father to our four kids: Auden, Cooper,
          Nolan, and Niko.
        </p>
      </div>
    </div>

    <!-- Socials Section -->
    <div class="mt-10 flex sm:space-x-16 flex-col sm:flex-row justify-center items-center pb-10">
      <div class="p-10 flex flex-col justify-center items-center">
        <a href="https://github.com/ryankazokas" target="_blank" class="text-social-link">
          <div class="text-4xl font-bold mb-4">[ GitHub ]</div>
        </a>
        <p class="mt-5 text-green-400 text-center max-w-xs">Check out my github contributions and work</p>
      </div>

      <div class="p-10 flex flex-col justify-center items-center">
        <a href="https://www.linkedin.com/in/ryankazokas/" target="_blank" class="text-social-link">
          <div class="text-4xl font-bold mb-4">[ LinkedIn ]</div>
        </a>
        <p class="mt-5 text-green-400 text-center max-w-xs">View my work history and achievements</p>
      </div>
      <div class="p-10 flex flex-col justify-center items-center">
        <a href="mailto:ryan.kazokas@gmail.com" target="_blank" class="text-social-link">
          <div class="text-4xl font-bold mb-4">[ Email ]</div>
        </a>
        <p class="mt-5 text-green-400 text-center max-w-xs">Contact me directly via email</p>
      </div>
    </div>
  </main>
</Layout>

<style>
  /* Terminal Styling */
  .terminal-container {
    padding: 0 20px;
  }

  .terminal-window {
    background: #000;
    border: 2px solid #00ff41;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.4), inset 0 0 20px rgba(0, 255, 65, 0.05);
    overflow: hidden;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
  }

  .terminal-header {
    background: linear-gradient(180deg, #001a00 0%, #000 100%);
    border-bottom: 1px solid #00ff41;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .terminal-buttons {
    display: flex;
    gap: 8px;
  }

  .terminal-button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #00ff41;
  }

  .terminal-button.close {
    background: #ff0000;
    box-shadow: 0 0 5px #ff0000;
  }

  .terminal-button.minimize {
    background: #ffff00;
    box-shadow: 0 0 5px #ffff00;
  }

  .terminal-button.maximize {
    background: #00ff00;
    box-shadow: 0 0 5px #00ff00;
  }

  .terminal-title {
    color: #00ff41;
    font-size: 0.9rem;
    font-weight: bold;
  }

  .terminal-body {
    padding: 20px;
    color: #00ff41;
    font-size: 0.9rem;
    line-height: 1.6;
    min-height: 400px;
  }

  .terminal-line {
    margin-top: 15px;
  }

  .terminal-line:first-child {
    margin-top: 0;
  }

  .prompt {
    color: #00ff41;
    font-weight: bold;
    margin-right: 8px;
  }

  .terminal-output {
    color: #00cc33;
    margin-left: 20px;
    margin-top: 4px;
  }

  .blinking-cursor::after {
    content: '▋';
    animation: blink 1s step-end infinite;
    margin-left: 4px;
  }

  @keyframes blink {
    0%, 50% {
      opacity: 1;
    }
    51%, 100% {
      opacity: 0;
    }
  }

  /* Responsive terminal */
  @media (max-width: 768px) {
    .terminal-body {
      font-size: 0.75rem;
      padding: 15px;
      min-height: 350px;
    }

    .terminal-output {
      margin-left: 10px;
    }
  }

  /* Profile Photo */
  .profile-photo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px solid #00ff41;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.4), 0 0 40px rgba(0, 255, 65, 0.1);
    object-fit: cover;
    transition: all 0.3s ease;
  }

  .profile-photo:hover {
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.6), 0 0 60px rgba(0, 255, 65, 0.2);
    transform: scale(1.05);
  }

  /* Text-based social links */
  .text-social-link {
    color: #00ff41;
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
  }

  .text-social-link div {
    transition: all 0.3s ease;
    border: 2px solid #00ff41;
    padding: 20px 30px;
    border-radius: 8px;
    background: rgba(0, 255, 65, 0.05);
  }

  .text-social-link:hover div {
    background: rgba(0, 255, 65, 0.15);
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.5), inset 0 0 10px rgba(0, 255, 65, 0.1);
    transform: translateY(-5px);
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.8);
  }

  .text-social-link:active div {
    transform: translateY(-2px);
  }
</style>
