import type { Component } from 'solid-js'
import { lazy, createSignal, onMount, onCleanup, createEffect, createMemo } from 'solid-js'
import './styles/critical.css'
import { weather, currentLocation } from './stores/weatherStore'
import { getCurrentLocation } from './lib/supabaseOperations'

// Import font optimization utilities
import { initializeFontLoading } from './utils/fontLoader'
import { initializeFontPerformanceMonitoring } from './utils/fontPerformance'

// Import CV data and i18n
import {
  personalInfo,
  languages,
  skills
} from './data/cv'
import { t, getEducation, getSportsCareer, getPersonalInfo, getCurrentLanguage } from './i18n'

// Lazy load components for optimal performance
const CVSection = lazy(() => import('./components/CVSection'))
const SportsCard = lazy(() => import('./components/SportsCard'))
const SkillBar = lazy(() => import('./components/SkillBar'))
const LanguageCard = lazy(() => import('./components/LanguageCard'))
const ClickSpark = lazy(() => import('./components/ClickSpark'))
const CustomCursor = lazy(() => import('./components/CustomCursor'))
const CandlestickChart = lazy(() => import('./components/StaticChart'))

const App: Component = () => {
  const [currentTime, setCurrentTime] = createSignal('')
  const [currentTimezone, setCurrentTimezone] = createSignal('Asia/Bangkok')
  const [isMobile, setIsMobile] = createSignal(window.innerWidth <= 576)
  const [isVerySmallScreen, setIsVerySmallScreen] = createSignal(window.innerWidth < 401)
  const [isTablet, setIsTablet] = createSignal(window.innerWidth >= 577 && window.innerWidth <= 770)

  const updateTime = () => {
    const now = new Date()
    
    const timeString = now.toLocaleTimeString('en-US', {
      timeZone: currentTimezone(),
      hour12: false,
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
    setCurrentTime(timeString)
  }

  // Fetch timezone from Supabase on mount and when location changes
  const fetchTimezone = async () => {
    try {
      const { data, success } = await getCurrentLocation()
      if (success && data) {
        console.log('🌍 Fetched timezone from Supabase:', data.timezone)
        setCurrentTimezone(data.timezone)
      } else {
        // Fallback to localStorage if Supabase fails
        const adminSettings = localStorage.getItem('admin_site_settings')
        if (adminSettings) {
          const settings = JSON.parse(adminSettings)
          if (settings.currentLocation?.timezone) {
            console.log('🌍 Using timezone from localStorage:', settings.currentLocation.timezone)
            setCurrentTimezone(settings.currentLocation.timezone)
          }
        }
      }
    } catch (error) {
      console.log('Using default timezone')
    }
  }



  // Handle responsive detection
  const handleResize = () => {
    setIsMobile(window.innerWidth <= 576)
    setIsVerySmallScreen(window.innerWidth < 401)
    setIsTablet(window.innerWidth >= 577 && window.innerWidth <= 770)
  }
  
  onMount(() => {
    window.addEventListener('resize', handleResize)

    // Initialize optimized font loading
    initializeFontLoading().then(() => {
      console.log('✅ Fonts loaded and optimized')
    }).catch((error) => {
      console.warn('⚠️ Font loading fallback activated:', error)
    })

    // Initialize font performance monitoring
    initializeFontPerformanceMonitoring()

    // Fetch timezone from Supabase
    fetchTimezone()

    // Listen for location changes from admin panel
    const handleLocationChange = (event: any) => {
      console.log('📍 Location changed event:', event.detail)
      // Immediately update timezone if provided in event
      if (event.detail?.timezone) {
        setCurrentTimezone(event.detail.timezone)
      }
      // Also fetch from database for consistency
      fetchTimezone()
    }
    window.addEventListener('locationChanged', handleLocationChange)

    // Initialize time
    updateTime()

    // Update time every second
    const timeInterval = setInterval(updateTime, 1000)

    // Refresh timezone every 30 seconds in case location changes
    const timezoneInterval = setInterval(fetchTimezone, 30000)

    onCleanup(() => {
      clearInterval(timeInterval)
      clearInterval(timezoneInterval)
      window.removeEventListener('resize', handleResize)
      window.removeEventListener('locationChanged', handleLocationChange)
    })
  })

  const skillsByCategory = () => {
    return skills.reduce((acc, skill) => {
      if (!acc[skill.category]) acc[skill.category] = []
      acc[skill.category].push(skill)
      return acc
    }, {} as Record<string, typeof skills>)
  }

  return (
    <>
      <CustomCursor />
      <ClickSpark
        sparkSize={10}
        sparkRadius={15}
        sparkCount={8}
        duration={400}
      >
        <div id="app" class="min-h-screen" style="background-color: var(--bg); color: var(--text); font-family: 'Noto Mono', monospace;">
      {/* Terminal Header Background Extension */}
      <div style="position: absolute; top: 0; left: 0; width: 100%; height: 60px; background: var(--bg); z-index: -1;"></div>
      
      {/* Terminal Header */}
      <div style="position: relative; padding: 12px 0px 0px 0px; border-bottom: 1px solid var(--border); background: var(--bg); font-size: 14px; color: var(--text-secondary); overflow: hidden;">
        {/* Running Banner Background - Hidden on mobile */}
        <div style={`
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          display: ${isMobile() ? 'none' : 'block'};
        `}>
          <div 
            style="
              position: absolute;
              top: 18px;
              transform: translateY(0);
              white-space: nowrap;
              font-size: 12px;
              color: rgba(var(--text-secondary-rgb, 115, 115, 115), 0.3);
              font-family: 'Noto Mono', monospace;
              animation: scroll-right-to-left 180s linear infinite;
              line-height: 14px;
            "
          >
"It is better to be feared than loved, if you cannot be both"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"The lion cannot protect himself from traps, and the fox cannot defend himself from wolves"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"Everyone sees what you appear to be, few experience what you really are"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"Men judge generally more by the eye than by the hand"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"Since love and fear can hardly exist together, if we must choose between them, it is far safer to be feared than loved"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"The first method for estimating the intelligence of a ruler is to look at the men he has around him"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"He who neglects what is done for what ought to be done, sooner effects his ruin than his preservation"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"It is not titles that honor men, but men that honor titles"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"A wise ruler ought never to keep faith when by doing so it would be against his interests"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"Politics have no relation to morals"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"The vulgar crowd always is taken by appearances, and the world consists chiefly of the vulgar"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"Never was anything great achieved without danger"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"A prince never lacks legitimate reasons to break his promise"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"The promise given was a necessity of the past: the word broken is a necessity of the present"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
        </div>
        
        {/* Main Header Content */}
        <div style="display: flex; justify-content: center; align-items: center; padding: 0 1cm; position: relative; z-index: 2;">
          <div style="text-align: center; background: var(--bg); padding: 0 20px;">
            {isMobile() ? (
              <>
                <div>{currentLocation()} {currentTime()}</div>
                <div>{weather()}</div>
              </>
            ) : (
              <>{currentLocation()} {currentTime()} | {weather()}</>
            )}
          </div>
        </div>
      </div>


      <main style={`padding: ${isTablet() ? '4cm' : '1cm 3cm 40px 3cm'}; max-width: 1048px; margin: 0 auto;`}>
        {/* Terminal-style Hero Section */}
        <div id="hero" style={`margin-bottom: 40px; ${isMobile() ? 'padding-top: 1cm;' : ''}`}>
          {isVerySmallScreen() ? (
            <div style="margin-bottom: 8px; margin-left: -0.5cm;">
              <h1 style={`color: #8b5cf6; font-size: 18px; font-weight: 700; margin: 0; font-family: 'Noto Mono', monospace; display: flex; align-items: center; gap: 8px;`}>
                <span style="white-space: nowrap; transform: scale(1.6); transform-origin: left center; display: inline-block; padding-right: 10px;">{t('personal.name')}</span>
                <span style="display: flex; gap: 2px; transform: scale(0.8); transform-origin: left center; margin-left: 50px;">
                  {/* Blog button disabled for now
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      window.location.href = '/blog'
                    }}
                    style="background: #8b5cf6; color: white; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-family: 'Noto Mono', monospace; font-size: 11px; font-weight: 600;"
                  >
                    {t('navigation.blog')}
                  </button>
                  */}
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      const lang = getCurrentLanguage()
                      window.location.href = lang === 'en' ? '/booking' : `/booking#${lang}`
                    }}
                    style="background: #3b82f6; color: white; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-family: 'Noto Mono', monospace; font-size: 11px; font-weight: 600;"
                  >
                    {t('navigation.booking')}
                  </button>
                </span>
              </h1>
            </div>
          ) : (
            <div style={`display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; margin-left: -0.5cm;`}>
              <h1 style={`color: #8b5cf6; font-size: ${isMobile() ? '20px' : '28px'}; font-weight: 700; margin: 0; font-family: 'Noto Mono', monospace;`}>
                {t('personal.name')}
              </h1>
              <div style={`display: flex; gap: 8px; flex-wrap: nowrap;`}>
                {/* Blog button disabled for now
                <button
                  onClick={() => window.location.href = '/blog'}
                  style={`background: #8b5cf6; color: white; padding: ${isMobile() ? '4px 8px' : '6px 12px'}; border: none; border-radius: 4px; cursor: pointer; font-family: 'Noto Mono', monospace; font-size: ${isMobile() ? '11px' : '12px'}; transition: all 0.2s; font-weight: 600;`}
                  onMouseOver={(e) => {
                    e.target.style.background = '#7c3aed'
                    e.target.style.transform = 'translateY(-1px)'
                  }}
                  onMouseOut={(e) => {
                    e.target.style.background = '#8b5cf6'
                    e.target.style.transform = 'translateY(0)'
                  }}
                >
                  {t('navigation.blog')}
                </button>
                */}
                <button
                  onClick={() => {
                    const lang = getCurrentLanguage()
                    window.location.href = lang === 'en' ? '/booking' : `/booking#${lang}`
                  }}
                  style={`background: #3b82f6; color: white; padding: ${isMobile() ? '4px 8px' : '6px 12px'}; border: none; border-radius: 4px; cursor: pointer; font-family: 'Noto Mono', monospace; font-size: ${isMobile() ? '11px' : '12px'}; transition: all 0.2s; font-weight: 600;`}
                  onMouseOver={(e) => {
                    e.target.style.background = '#2563eb'
                    e.target.style.transform = 'translateY(-1px)'
                  }}
                  onMouseOut={(e) => {
                    e.target.style.background = '#3b82f6'
                    e.target.style.transform = 'translateY(0)'
                  }}
                >
                  {t('navigation.booking')}{isMobile() ? '' : ' →'}
                </button>
              </div>
            </div>
          )}
          
          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 16px; font-family: 'Noto Mono', monospace; font-size: 14px;">
            {t('personal.aboutMe')}
          </p>
          
          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 16px; font-family: 'Noto Mono', monospace; font-size: 14px;">
            {t('personal.aboutMeExpanded1')}
          </p>
          
          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 16px; font-family: 'Noto Mono', monospace; font-size: 14px;">
            {t('personal.aboutMeExpanded2')}
          </p>
          
          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 16px; font-family: 'Noto Mono', monospace; font-size: 14px;">
            {t('personal.aboutMeExpanded3')}
          </p>
          
          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 24px; font-family: 'Noto Mono', monospace; font-size: 14px;">
            {t('personal.aboutMeExpanded4')}
          </p>
          
          <h4 style="color: var(--text-secondary); font-size: 16px; font-weight: 700; margin-bottom: 16px; margin-top: 32px; font-family: 'Noto Mono', monospace;">
            {t('labels.currentFocus')}
          </h4>
          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 16px; font-family: 'Noto Mono', monospace; font-size: 14px;">
            {t('personal.currentFocusExpanded1')}
          </p>
          
          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 24px; font-family: 'Noto Mono', monospace; font-size: 14px;">
            {t('personal.currentFocusExpanded2')}
          </p>
        </div>

        {/* In the Press Section */}
        <div id="press" style="margin-bottom: 40px; text-align: center;">
          <h4 style="color: var(--text-quaternary); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; font-family: 'Noto Mono', monospace;">
            {t('sections.inThePress')}
          </h4>
          <div class="press-row">
            <a href="https://finance.yahoo.com/markets/options/articles/dxfeed-retail-expands-partner-ecosystem-123600295.html" target="_blank" rel="noopener noreferrer" aria-label="Yahoo Finance" style="display: inline-flex;">
              <span class="press-logo" style="aspect-ratio: 1284 / 181; height: 22px; --press-brand: #7E1FFF; -webkit-mask-image: url('/logos/press-yahoo.svg'); mask-image: url('/logos/press-yahoo.svg');" />
            </a>
            <a href="https://www.prnewswire.com/news-releases/dxfeed-retail-expands-its-partner-ecosystem-with-xflow-trading-302797765.html" target="_blank" rel="noopener noreferrer" aria-label="PR Newswire" style="display: inline-flex;">
              <span class="press-logo" style="aspect-ratio: 352 / 42; height: 22px; --press-brand: #0096D6; -webkit-mask-image: url('/logos/press-prnewswire-clean.svg'); mask-image: url('/logos/press-prnewswire-clean.svg');" />
            </a>
            <a href="https://www.morningstar.com/news/pr-newswire/20260611ph80821/dxfeed-retail-expands-its-partner-ecosystem-with-xflow-trading" target="_blank" rel="noopener noreferrer" aria-label="Morningstar" style="display: inline-flex;">
              <span class="press-logo" style="aspect-ratio: 190 / 45; height: 22px; --press-brand: #E01F26; -webkit-mask-image: url('/logos/press-morningstar-real.svg'); mask-image: url('/logos/press-morningstar-real.svg');" />
            </a>
            <a href="https://financefeeds.com/dxfeed-pushes-institutional-grade-order-flow-data-to-retail-traders-as-trading-education-arms-race-accelerates/" target="_blank" rel="noopener noreferrer" aria-label="FinanceFeeds" style="display: inline-flex;">
              <span class="press-logo" style="aspect-ratio: 1078 / 113; height: 22px; --press-brand: #15A6A0; -webkit-mask-image: url('/logos/press-financefeeds-real.png'); mask-image: url('/logos/press-financefeeds-real.png');" />
            </a>
            <a href="https://fxnewsgroup.com/forex-news/platforms/dxfeed-announces-new-partnership-with-xflow-trading/" target="_blank" rel="noopener noreferrer" aria-label="FX News Group" style="display: inline-flex;">
              <span class="press-logo" style="aspect-ratio: 1480 / 979; height: 40px; --press-brand: #2EB872; -webkit-mask-image: url('/logos/press-fxng-real.png'); mask-image: url('/logos/press-fxng-real.png');" />
            </a>
            <a href="https://globalfintechseries.com/trading/dxfeed-retail-expands-its-partner-ecosystem-with-xflow-trading/" target="_blank" rel="noopener noreferrer" aria-label="Global Fintech Series" style="display: inline-flex;">
              <span class="press-logo" style="aspect-ratio: 400 / 46; height: 22px; --press-brand: #20A4C9; -webkit-mask-image: url('/logos/press-gfs-real.png'); mask-image: url('/logos/press-gfs-real.png');" />
            </a>
            <a href="https://www.ainvest.com/news/dxfeed-xflow-partnership-strong-growth-story-stock-buy-2606/" target="_blank" rel="noopener noreferrer" aria-label="AInvest" style="display: inline-flex;">
              <span class="press-logo" style="aspect-ratio: 450 / 96; height: 24px; --press-brand: #1E90FF; -webkit-mask-image: url('/logos/press-ainvest-real.png'); mask-image: url('/logos/press-ainvest-real.png');" />
            </a>
            <a href="https://tabbforum.com/channels/fixed-income/" target="_blank" rel="noopener noreferrer" aria-label="TabbFORUM" style="display: inline-flex;">
              <span class="press-logo" style="aspect-ratio: 302 / 95; height: 26px; --press-brand: #2F86D6; -webkit-mask-image: url('/logos/press-tabbforum-real.png'); mask-image: url('/logos/press-tabbforum-real.png');" />
            </a>
          </div>
        </div>

        {/* Tech Stack Section */}
        <div id="tech-stack" style="margin-bottom: 40px;">
          <h3 style="color: #8b5cf6; font-size: 20px; font-weight: 700; margin-bottom: 24px; margin-left: -0.5cm; font-family: 'Noto Mono', monospace;">
            {t('sections.techStack')}
          </h3>
          
          {/* Frontend Development */}
          <div style="margin-bottom: 24px;">
            <h4 style="color: var(--text-secondary); font-size: 16px; font-weight: 700; margin-bottom: 12px; font-family: 'Noto Mono', monospace;">
              {t('sections.frontendDevelopment')}
            </h4>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#e34c26">
                  <path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z"/>
                </svg>
                <span style="color: #e34c26;">HTML</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#1572b6">
                  <path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z"/>
                </svg>
                <span style="color: #1572b6;">CSS</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#f7df1e">
                  <path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/>
                </svg>
                <span style="color: #f7df1e;">JavaScript</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#3178c6">
                  <path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"/>
                </svg>
                <span style="color: #3178c6;">TypeScript</span>
              </span>
            </p>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#61dafb">
                  <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.36-.034-.47 0-.92.01-1.36.034.44-.572.895-1.096 1.36-1.564zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.36.034.47 0 .92-.01 1.36-.034-.44.572-.895 1.095-1.36 1.56-.455-.42-.91-.94-1.36-1.56z"/>
                </svg>
                <span style="color: #61dafb;">React</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z"/>
                </svg>
                <span style="color: var(--text);">Next.js</span>
              </span>
            </p>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#38bdf8">
                  <path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C7.666,17.818,9.027,19.2,12.001,19.2c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"/>
                </svg>
                <span style="color: #38bdf8;">Tailwind CSS</span>
              </span>
            </p>
          </div>

          {/* Backend Development */}
          <div style="margin-bottom: 24px;">
            <h4 style="color: var(--text-secondary); font-size: 16px; font-weight: 700; margin-bottom: 12px; font-family: 'Noto Mono', monospace;">
              {t('sections.backendDevelopment')}
            </h4>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#3776ab">
                  <path d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z"/>
                </svg>
                <span style="color: #3776ab;">Python</span>
              </span>
              with 
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#009688">
                  <path d="M12 0C5.375 0 0 5.375 0 12c0 6.627 5.375 12 12 12 6.626 0 12-5.373 12-12 0-6.625-5.373-12-12-12zm-.624 21.62v-7.528H7.19L13.203 2.38v7.528h4.029L11.376 21.62z"/>
                </svg>
                <span style="color: #009688;">FastAPI</span>
              </span>
            </p>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#68a063">
                  <path d="M11.998,24c-0.321,0-0.641-0.084-0.922-0.247l-2.936-1.737c-0.438-0.245-0.224-0.332-0.08-0.383 c0.585-0.203,0.703-0.25,1.328-0.604c0.065-0.037,0.151-0.023,0.218,0.017l2.256,1.339c0.082,0.045,0.197,0.045,0.272,0l8.795-5.076 c0.082-0.047,0.134-0.141,0.134-0.238V6.921c0-0.099-0.053-0.192-0.137-0.242l-8.791-5.072c-0.081-0.047-0.189-0.047-0.271,0 L2.46,6.681C2.376,6.729,2.322,6.825,2.322,6.921v10.15c0,0.097,0.054,0.189,0.137,0.235l2.409,1.392 c1.307,0.654,2.108-0.116,2.108-0.89V7.787c0-0.142,0.114-0.253,0.256-0.253h1.115c0.139,0,0.255,0.112,0.255,0.253v10.021 c0,1.745-0.95,2.745-2.604,2.745c-0.508,0-0.909,0-2.026-0.551L2.28,18.675c-0.57-0.329-0.922-0.945-0.922-1.604V6.921 c0-0.659,0.353-1.275,0.922-1.603l8.795-5.082c0.557-0.315,1.296-0.315,1.848,0l8.794,5.082c0.57,0.329,0.924,0.944,0.924,1.603 v10.15c0,0.659-0.354,1.273-0.924,1.604l-8.794,5.078C12.643,23.916,12.324,24,11.998,24z M19.099,13.993 c0-1.9-1.284-2.406-3.987-2.763c-2.731-0.361-3.009-0.548-3.009-1.187c0-0.528,0.235-1.233,2.258-1.233 c1.807,0,2.473,0.389,2.747,1.607c0.024,0.115,0.129,0.199,0.247,0.199h1.141c0.071,0,0.138-0.031,0.186-0.081 c0.048-0.054,0.074-0.123,0.067-0.196c-0.177-2.098-1.571-3.076-4.388-3.076c-2.508,0-4.004,1.058-4.004,2.833 c0,1.925,1.488,2.457,3.895,2.695c2.88,0.282,3.103,0.703,3.103,1.269c0,0.983-0.789,1.402-2.642,1.402 c-2.327,0-2.839-0.584-3.011-1.742c-0.02-0.124-0.126-0.215-0.253-0.215h-1.137c-0.141,0-0.254,0.112-0.254,0.253 c0,1.482,0.806,3.248,4.655,3.248C17.501,17.007,19.099,15.91,19.099,13.993z"/>
                </svg>
                <span style="color: #68a063;">Node.js</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M24 18.588a1.529 1.529 0 0 1-1.895-.72l-3.45-4.771-.5-.667-4.003 5.444a1.466 1.466 0 0 1-1.802.708l5.158-6.92-4.798-6.251a1.595 1.595 0 0 1 1.9-.666l3.576 4.83 3.596-4.81a1.435 1.435 0 0 1 1.788-.668L21.708 7.9l-2.522 3.283a.666.666 0 0 0 0 .994l4.804 6.412zM.002 11.576l.42-2.075c1.154-4.103 5.858-5.81 9.094-3.27 1.895 1.489 2.368 3.597 2.275 5.973H1.116C.943 16.447 4.005 19.009 7.92 17.7a4.078 4.078 0 0 0 2.582-2.876c.207-.666.548-.78 1.174-.588a5.417 5.417 0 0 1-2.589 3.957c-6.454 3.7-14.436-1.687-9.085-7.617z"/>
                </svg>
                <span style="color: var(--text);">Express</span>
              </span>
            </p>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
              <span style="color: #ce422b;">Rust</span>
              <span style="color: #00add8;">Go</span>
              <span style="color: #00599c;">C/C++</span>
              <span style="color: #512bd4;">C#</span>
            </p>
          </div>


          {/* Database & Storage */}
          <div style="margin-bottom: 24px;">
            <h4 style="color: var(--text-secondary); font-size: 16px; font-weight: 700; margin-bottom: 12px; font-family: 'Noto Mono', monospace;">
              {t('sections.databaseStorage')}
            </h4>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#336791">
                  <path d="M23.5594 14.7228a.5269.5269 0 0 0-.0563-.1191c-.139-.2632-.4768-.3418-1.0074-.2321-1.6533.3411-2.2935.1312-2.5256-.0191 1.342-2.0482 2.445-4.522 3.0411-6.8297.2714-1.0507.7982-3.5237.1222-4.7316a1.5641 1.5641 0 0 0-.1509-.235C21.6931.9086 19.8007.0248 17.5099.0005c-1.4947-.0158-2.7705.3461-3.1161.4794a9.449 9.449 0 0 0-.5159-.0816 8.044 8.044 0 0 0-1.3114-.1278c-1.1822-.0184-2.2038.2642-3.0498.8406-.8573-.3211-4.7888-1.645-7.2219.0788C.9359 2.1526.3086 3.8733.4302 6.3043c.0409.818.5069 3.334 1.2423 5.7436.4598 1.5065.9387 2.7019 1.4334 3.582.553.9942 1.1259 1.5933 1.7143 1.7895.4474.1491 1.1327.1441 1.8581-.7279.8012-.9635 1.5903-1.8258 1.9446-2.2069.4351.2355.9064.3625 1.39.3772a.0569.0569 0 0 0 .0004.0041 11.0312 11.0312 0 0 0-.2472.3054c-.3389.4302-.4094.5197-1.5002.7443-.3102.064-1.1344.2339-1.1464.8115-.0025.1224.0329.2309.0919.3268.2269.4231.9216.6097 1.015.6331 1.3345.3335 2.5044.092 3.3714-.6787-.017 2.231.0775 4.4174.3454 5.0874.2212.5529.7618 1.9045 2.4692 1.9043.2505 0 .5263-.0291.8296-.0941 1.7819-.3821 2.5557-1.1696 2.855-2.9059.1503-.8707.4016-2.8753.5388-4.1012.0169-.0703.0357-.1207.057-.1362.0007-.0005.0697-.0471.4272.0307a.3673.3673 0 0 0 .0443.0068l.2539.0223.0149.001c.8468.0384 1.9114-.1426 2.5312-.4308.6438-.2988 1.8057-1.0323 1.5951-1.6698z"/>
                </svg>
                <span style="color: #336791;">PostgreSQL</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#47a248">
                  <path d="M17.193 9.555c-1.264-5.58-4.252-7.414-4.573-8.115-.28-.394-.53-.954-.735-1.44-.036.495-.055.685-.523 1.184-.723.566-4.438 3.682-4.74 10.02-.282 5.912 4.27 9.435 4.888 9.884l.07.05A73.49 73.49 0 0111.91 24h.481c.114-1.032.284-2.056.51-3.07.417-.296.604-.463.85-.693a11.342 11.342 0 003.639-8.464c.01-.814-.103-1.662-.197-2.218zm-5.336 8.195s0-8.291.275-8.29c.213 0 .49 10.695.49 10.695-.381-.045-.765-1.76-.765-2.405z"/>
                </svg>
                <span style="color: #47a248;">MongoDB</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#3ecf8e">
                  <path d="M11.9 1.036c-.015-.986-1.26-1.41-1.874-.637L.764 12.05C-.33 13.427.65 15.455 2.409 15.455h9.579l.113 7.51c.014.985 1.259 1.408 1.873.636l9.262-11.653c1.093-1.375.113-3.403-1.645-3.403h-9.642z"/>
                </svg>
                <span style="color: #3ecf8e;">Supabase</span>
              </span>
            </p>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#DD2C00">
                  <path d="M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14a.54.54 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z"/>
                </svg>
                <span style="color: #DD2C00;">Firebase</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 304 182" fill="#FF9900">
                  <g>
                    <path d="M86.4 66.4c0 3.7.4 6.7 1.1 8.9.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3l-6.3 4.2c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2s-7.4-11.2-7.4-19.2c0-8.5 3-15.4 9.1-20.6s14.2-7.8 24.5-7.8c3.4 0 6.9.3 10.6.8s7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3s-7.3 2-10.8 3.4c-1.6.7-2.8 1.1-3.5 1.3s-1.2.3-1.6.3c-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5s1.4-1.4 2.8-2.1c3.5-1.8 7.7-3.3 12.6-4.5 4.9-1.3 10.1-1.9 15.6-1.9 11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6v32.4zm-33.3 12.5c3.3 0 6.7-.6 10.3-1.8 3.6-1.2 6.8-3.4 9.5-6.4 1.6-1.9 2.8-4 3.4-6.4s1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.5s-6.3-.4-9.4-.4c-6.7 0-11.6 1.3-14.9 4s-4.9 6.5-4.9 11.4c0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.5 10.5 3.5zm80.4 10.8c-1.8 0-3-.3-3.7-1s-1.4-2-1.9-3.6l-21.3-70.1c-.5-1.8-.8-3-.8-3.7 0-1.5.7-2.3 2.2-2.3h9.1c1.9 0 3.2.3 3.8 1 .7.6 1.2 2 1.7 3.6L140 98.9l18.6-58.4c.4-1.6 1-2.9 1.6-3.6.7-.6 2-1 3.8-1h7.5c1.9 0 3.2.3 3.8 1s1.2 2 1.6 3.6l18.8 59.1L214.4 41c.5-1.6 1.1-2.9 1.7-3.6s2-1 3.8-1h8.6c1.5 0 2.2.8 2.2 2.3 0 .5-.1 1-.2 1.6s-.3 1.4-.6 2.2l-21.8 70.1c-.5 1.6-1.1 2.9-1.9 3.6s-1.9 1-3.7 1h-8.1c-1.9 0-3.2-.3-3.8-1s-1.2-2-1.6-3.6L173.3 56l-18.6 55.3c-.4 1.6-1 2.9-1.6 3.6s-1.9 1-3.8 1l-8.1.1zm140.1 2.5c-5.5 0-11-.6-16.5-1.9-5.5-1.3-9.8-2.7-12.9-4.3-1.7-.9-2.9-2-3.3-3.1-.4-1.1-.6-2.3-.6-3.2v-5.4c0-2.2.8-3.3 2.4-3.3.6 0 1.3.1 1.9.3s1.6.6 2.7 1.1c3.7 1.7 7.7 3 12.1 3.8 4.4.8 8.6 1.3 12.8 1.3 6.8 0 12.1-1.1 15.7-3.3 3.7-2.2 5.5-5.4 5.5-9.6 0-2.8-.9-5.3-2.6-7.2-1.7-1.9-5-3.7-9.6-5.5l-15.4-4.4c-7-2-12.1-5.5-15.4-9.9-3.3-4.5-4.8-9.3-4.8-14.7 0-4.3 1-8.1 2.9-11.4 1.9-3.4 4.5-6.2 7.7-8.6 3.2-2.3 7-4.1 11.6-5.3 4.6-1.2 9.2-1.8 14.2-1.8 2.4 0 4.9.2 7.5.5s5 .8 7.5 1.3c2.4.5 4.6 1.2 6.7 1.9 2.1.8 3.8 1.5 5.1 2.2 1.5.9 2.6 1.9 3.1 2.7.6.9.8 2.1.8 3.5v5c0 2.2-.8 3.4-2.4 3.4-.8 0-2.2-.4-4-1.2-5.9-2.7-12.5-4-19.7-4-6.2 0-11.1 1-14.5 2.9-3.4 1.9-5.2 4.9-5.2 8.9 0 2.8 1 5.2 2.9 7.2s5.3 3.9 10.2 5.8l15.1 4.3c6.9 1.9 11.9 4.7 15.1 8.3 3.2 3.7 4.8 8.1 4.8 13.2 0 4.4-.9 8.4-2.6 11.9-1.8 3.5-4.2 6.5-7.3 8.9s-6.8 4.3-11.2 5.6c-4.4 1.4-9.3 2-14.5 2z"/>
                    <path d="M273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.3 10.2 3.6 4.8 7.6z"/>
                    <path d="M287.2 128.1c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.2 1.1-4.1-1.9 4.5-11.4 14.6-36.9 8.7-37.5z"/>
                  </g>
                </svg>
                <span style="color: #ff9900;">AWS</span>
              </span>
            </p>
          </div>

          {/* DevOps & Cloud */}
          <div style="margin-bottom: 24px;">
            <h4 style="color: var(--text-secondary); font-size: 16px; font-weight: 700; margin-bottom: 12px; font-family: 'Noto Mono', monospace;">
              {t('sections.devopsCloud')}
            </h4>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#2496ed">
                  <path d="M13.983 11.078h2.119a.186.186 0 0 0 .186-.185V9.006a.186.186 0 0 0-.186-.186h-2.119a.185.185 0 0 0-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 0 0 .186-.186V3.574a.186.186 0 0 0-.186-.185h-2.118a.185.185 0 0 0-.185.185v1.888c0 .102.082.185.185.186m0 2.716h2.118a.187.187 0 0 0 .186-.186V6.29a.186.186 0 0 0-.186-.185h-2.118a.185.185 0 0 0-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 0 0 .184-.186V6.29a.185.185 0 0 0-.185-.185H8.1a.185.185 0 0 0-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 0 0 .185-.186V6.29a.185.185 0 0 0-.185-.185H5.136a.186.186 0 0 0-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 0 0 .186-.185V9.006a.186.186 0 0 0-.186-.186h-2.118a.185.185 0 0 0-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 0 0 .184-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.185.185 0 0 0-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 0 0 .185-.185V9.006a.185.185 0 0 0-.184-.186H5.136a.186.186 0 0 0-.186.186v1.887a.186.186 0 0 0 .186.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338 0-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 0 0-.75.748 11.376 11.376 0 0 0 .692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137.983 0 1.981-.104 2.961-.31a12.858 12.858 0 0 0 3.58-1.464 13.818 13.818 0 0 0 2.358-2.137c1.252-1.418 1.913-2.827 2.267-3.424h.27c1.056 0 1.717-.4 2.115-.742.24-.205.434-.46.565-.761l.063-.16-.162-.126z"/>
                </svg>
                <span style="color: #2496ed;">Docker</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.300 24 12c0-6.627-5.373-12-12-12z"/>
                </svg>
                <span style="color: var(--text);">GitHub Actions</span>
              </span>
            </p>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="m12 1.608 12 20.784H0Z"/>
                </svg>
                <span style="color: var(--text);">Vercel</span>
              </span>
            </p>
          </div>

          {/* Tools & Services */}
          <div style="margin-bottom: 24px;">
            <h4 style="color: var(--text-secondary); font-size: 16px; font-weight: 700; margin-bottom: 12px; font-family: 'Noto Mono', monospace;">
              {t('sections.toolsServices')}
            </h4>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#635bff">
                  <path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.274 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z"/>
                </svg>
                <span style="color: #635bff;">Stripe</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#6c47ff">
                  <path d="m21.47 20.829-2.881-2.881a.572.572 0 0 0-.7-.084 6.854 6.854 0 0 1-7.081 0 .576.576 0 0 0-.7.084l-2.881 2.881a.576.576 0 0 0-.103.69.57.57 0 0 0 .166.186 12 12 0 0 0 14.113 0 .58.58 0 0 0 .239-.423.576.576 0 0 0-.172-.453Zm.002-17.668-2.88 2.88a.569.569 0 0 1-.701.084A6.857 6.857 0 0 0 8.724 8.08a6.862 6.862 0 0 0-1.222 3.692 6.86 6.86 0 0 0 .978 3.764.573.573 0 0 1-.083.699l-2.881 2.88a.567.567 0 0 1-.864-.063A11.993 11.993 0 0 1 6.771 2.7a11.99 11.99 0 0 1 14.637-.405.566.566 0 0 1 .232.418.57.57 0 0 1-.168.448Zm-7.118 12.261a3.427 3.427 0 1 0 0-6.854 3.427 3.427 0 0 0 0 6.854Z"/>
                </svg>
                <span style="color: #6c47ff;">Clerk</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ff6b35">
                  <path d="M7.5 12L12 7.5 16.5 12 12 16.5 7.5 12zM12 2L2 12l10 10 10-10L12 2z"/>
                </svg>
                <span style="color: #ff6b35;">MCP Servers</span>
              </span>
            </p>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#f05032">
                  <path d="M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189L10.929 23.55c.603.604 1.582.604 2.188 0l10.43-10.42c.603-.603.603-1.582-.001-2.187"/>
                </svg>
                <span style="color: #f05032;">Git</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#ff6b35">
                  <path d="M12 2L2 7l10 6 10-6-10-5zM2 17l10 6 10-6M2 12l10 6 10-6"/>
                </svg>
                <span style="color: #ff6b35;">Analytics</span>
              </span>
              <span style="display: flex; align-items: center; gap: 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#4285f4">
                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                </svg>
                <span style="color: #4285f4;">SEO Tools</span>
              </span>
            </p>
            
            {/* AI & Automation subsection */}
            <h5 style="color: var(--text-secondary); font-size: 14px; font-weight: 600; margin: 16px 0 8px 0; font-family: 'Noto Mono', monospace;">
              {t('sections.aiAutomation')}
            </h5>
            <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px; margin-bottom: 8px;">
              {t('techStack.aiAutomationDescription')}
            </p>
          </div>

          <p style="color: var(--text-tertiary); font-family: 'Noto Mono', monospace; font-size: 14px;">
            {t('sections.andManyMore')}
          </p>
        </div>

        {/* Experience Section */}
        <div id="experience" style="margin-bottom: 40px;">
          <h3 style="color: #8b5cf6; font-size: 20px; font-weight: 700; margin-bottom: 24px; margin-left: -0.5cm; font-family: 'Noto Mono', monospace;">
            {t('sections.experience')}
          </h3>
          
          {/* Independent Trader, Orderflow & Options Flow */}
          <div style="margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border);">
            <h4 style="color: var(--text); font-size: 18px; font-weight: 700; margin-bottom: 16px; font-family: 'Noto Mono', monospace;">
              {t('experience.trading.title')}
            </h4>
            <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 12px; font-family: 'Noto Mono', monospace; font-size: 14px;">
              {t('experience.trading.p1')}
            </p>
            <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 12px; font-family: 'Noto Mono', monospace; font-size: 14px;">
              {t('experience.trading.p2')}
            </p>
          </div>

          {/* Founder & Full-Stack Developer, XFlowTrading.com */}
          <div style="margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border);">
            <h4 style="color: var(--text); font-size: 18px; font-weight: 700; margin-bottom: 16px; font-family: 'Noto Mono', monospace;">
              {t('experience.xflowtrading.title')}
            </h4>
            <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 12px; font-family: 'Noto Mono', monospace; font-size: 14px;">
              {t('experience.xflowtrading.p1')}
            </p>
            <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 12px; font-family: 'Noto Mono', monospace; font-size: 14px;">
              {t('experience.xflowtrading.p2')}
            </p>
            <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 12px; font-family: 'Noto Mono', monospace; font-size: 14px;">
              {t('experience.xflowtrading.p3')}
            </p>
            <div style="margin-top: 4px;">
              <a href="https://xflowtrading.com" target="_blank" rel="noopener noreferrer" style="color: #8b5cf6; text-decoration: underline; text-underline-offset: 3px; font-family: 'Noto Mono', monospace; font-size: 14px;">xflowtrading.com</a>
            </div>
          </div>

          {/* Founder, XF Charts */}
          <div style="margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border);">
            <h4 style="color: var(--text); font-size: 18px; font-weight: 700; margin-bottom: 16px; font-family: 'Noto Mono', monospace;">
              {t('experience.xfcharts.title')}
            </h4>
            <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 12px; font-family: 'Noto Mono', monospace; font-size: 14px;">
              {t('experience.xfcharts.p1')}
            </p>
            <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 12px; font-family: 'Noto Mono', monospace; font-size: 14px;">
              {t('experience.xfcharts.p2')}
            </p>
            <div style="margin-top: 4px;">
              <a href="https://xflowcharts.com" target="_blank" rel="noopener noreferrer" style="color: #8b5cf6; text-decoration: underline; text-underline-offset: 3px; font-family: 'Noto Mono', monospace; font-size: 14px;">xflowcharts.com</a>
            </div>
          </div>

          {/* Founder, XF Terminal */}
          <div style="margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border);">
            <h4 style="color: var(--text); font-size: 18px; font-weight: 700; margin-bottom: 16px; font-family: 'Noto Mono', monospace;">
              {t('experience.xfterminal.title')}
            </h4>
            <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 12px; font-family: 'Noto Mono', monospace; font-size: 14px;">
              {t('experience.xfterminal.p1')}
            </p>
            <div style="margin-top: 4px;">
              <a href="https://xflowterminal.com" target="_blank" rel="noopener noreferrer" style="color: #8b5cf6; text-decoration: underline; text-underline-offset: 3px; font-family: 'Noto Mono', monospace; font-size: 14px;">xflowterminal.com</a>
            </div>
          </div>

          {/* Founder, XF Network */}
          <div style="margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border);">
            <h4 style="color: var(--text); font-size: 18px; font-weight: 700; margin-bottom: 16px; font-family: 'Noto Mono', monospace;">
              {t('experience.xfnetwork.title')}
            </h4>
            <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 12px; font-family: 'Noto Mono', monospace; font-size: 14px;">
              {t('experience.xfnetwork.p1')}
            </p>
            <div style="margin-top: 4px;">
              <a href="https://xflownetwork.com" target="_blank" rel="noopener noreferrer" style="color: #8b5cf6; text-decoration: underline; text-underline-offset: 3px; font-family: 'Noto Mono', monospace; font-size: 14px;">xflownetwork.com</a>
            </div>
          </div>

          {/* Other Ventures & Side Projects */}
          <div style="margin-bottom: 32px;">
            <h4 style="color: var(--text); font-size: 18px; font-weight: 700; margin-bottom: 16px; font-family: 'Noto Mono', monospace;">
              {t('experience.ventures.title')}
            </h4>
            <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 12px; font-family: 'Noto Mono', monospace; font-size: 14px;">
              {t('experience.ventures.p1')}
            </p>
          </div>
        </div>

        {/* Education Section */}
        <div id="education" style="margin-bottom: 40px;">
          <h3 style="color: #8b5cf6; font-size: 20px; font-weight: 700; margin-bottom: 24px; margin-left: -0.5cm; font-family: 'Noto Mono', monospace;">
            {t('sections.education')}
          </h3>
          {getEducation().map((edu, index) => (
            <div style="margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border);">
              <h4 style="color: var(--text); font-size: 18px; font-weight: 700; margin-bottom: 4px; font-family: 'Noto Mono', monospace;">
                {edu.institution}
              </h4>
              <h5 style="color: var(--text-secondary); font-size: 16px; margin-bottom: 8px; font-family: 'Noto Mono', monospace;">
                {edu.degree} in {edu.field}
              </h5>
              <p style="color: var(--text-quaternary); font-size: 14px; margin-bottom: 8px; font-family: 'Noto Mono', monospace;">
                {edu.year}
              </p>
              {edu.status && (
                <p style="color: #3b82f6; font-size: 14px; font-family: 'Noto Mono', monospace;">
                  {edu.status}
                </p>
              )}
            </div>
          ))}
        </div>

        {/* Languages Section */}
        <div id="languages" style="margin-bottom: 40px;">
          <h3 style="color: #8b5cf6; font-size: 20px; font-weight: 700; margin-bottom: 24px; margin-left: -0.5cm; font-family: 'Noto Mono', monospace;">
            {t('sections.languages')}
          </h3>
          
          {languages.map((lang, index) => {
            // Function to get CEFR level dots (6 levels + Native)
            const getLevelDots = (level: string, certification?: string) => {
              if (level.toLowerCase() === 'native') return 7;
              
              // Use certification if available, otherwise map level
              const certLevel = certification?.toUpperCase();
              if (certLevel === 'A1') return 1;
              if (certLevel === 'A2') return 2;
              if (certLevel === 'B1') return 3;
              if (certLevel === 'B2') return 4;
              if (certLevel === 'C1') return 5;
              if (certLevel === 'C2') return 6;
              
              // Fallback to level mapping
              switch (level.toLowerCase()) {
                case 'fluent': return 5; // C1 equivalent
                case 'intermediate': return 3; // B1 equivalent
                case 'basic': return 1; // A1 equivalent
                default: return 3;
              }
            };
            
            const levelDots = getLevelDots(lang.level, lang.certification);
            
            return (
              <div style={`margin-bottom: 20px; padding-bottom: 16px; ${index < languages.length - 1 ? 'border-bottom: 1px solid var(--border);' : ''}`}>
                <div style="display: flex; justify-content: space-between; align-items: center;">
                  <h4 style="color: var(--text); font-size: 16px; font-weight: 600; margin: 0; font-family: 'Noto Mono', monospace;">
                    {lang.name}
                  </h4>
                  
                  {/* CEFR Progress Dots on right */}
                  <div style="text-align: center;">
                    <div style="display: flex; gap: 6px; margin-bottom: 4px;">
                      {[1, 2, 3, 4, 5, 6].map((level) => (
                        <div 
                          style={`
                            width: 10px; 
                            height: 10px; 
                            border-radius: 50%; 
                            background: ${level <= (levelDots === 7 ? 6 : levelDots) ? 'var(--text)' : (document.body.classList.contains('light-theme') ? 'rgba(0, 0, 0, 0.2)' : 'var(--border)')};
                            border: ${document.body.classList.contains('light-theme') ? '1px solid black' : 'none'};
                            transition: all 0.2s ease;
                          `}
                        />
                      ))}
                    </div>
                    
                    {/* Level labels underneath dots */}
                    <div style="display: flex; gap: 5px; font-size: 9px; color: var(--text-quaternary); font-family: 'Noto Mono', monospace;">
                      <span>A1</span><span>A2</span><span>B1</span><span>B2</span><span>C1</span><span>C2</span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Sports Section */}
        <div id="sports" style="margin-bottom: 40px; margin-top: 1cm;">
          <h3 style="color: #8b5cf6; font-size: 20px; font-weight: 700; margin-bottom: 24px; margin-left: -0.5cm; font-family: 'Noto Mono', monospace;">
            {t('sports.title')}
          </h3>
          
          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 24px; font-family: 'Noto Mono', monospace; font-size: 14px;">
            {t('sports.p1')}
          </p>
          
          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 24px; font-family: 'Noto Mono', monospace; font-size: 14px;">
            {t('sports.p2')}
          </p>
          
          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 24px; font-family: 'Noto Mono', monospace; font-size: 14px;">
            {t('sports.p3')}
          </p>
          
          {/* Sports Career - Two Column Layout (stacks on mobile) */}
          <div style={`display: grid; grid-template-columns: ${isMobile() ? '1fr' : '1fr 1fr'}; gap: 32px; margin-bottom: 40px;`}>
            
            {/* Football Career - Left Column */}
            <div>
              <h4
                style="color: var(--text-secondary); font-size: 16px; font-weight: 700; margin-bottom: 24px; font-family: 'Noto Mono', monospace; border-bottom: 1px solid var(--border); padding-bottom: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;"
                onClick={() => {
                  const content = document.getElementById('football-career-content');
                  const arrow = document.getElementById('football-career-arrow');
                  if (content && arrow) {
                    const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';

                    if (isOpen) {
                      // Closing
                      content.style.maxHeight = '0px';
                      content.style.opacity = '0';
                      arrow.style.transform = 'rotate(0deg)';
                    } else {
                      // Opening
                      content.style.maxHeight = content.scrollHeight + 'px';
                      content.style.opacity = '1';
                      arrow.style.transform = 'rotate(90deg)';
                    }
                  }
                }}
              >
                <span
                  id="football-career-arrow"
                  style="transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: rotate(0deg); color: var(--text-quaternary); font-size: 12px;"
                >
                  ▶
                </span>
                {t('sports.footballCareer')}
              </h4>
              <div
                id="football-career-content"
                style="max-height: 0px; opacity: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);"
              >
              <div style="position: relative; padding-left: 24px;">
                {/* Timeline line */}
                <div style="position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--border); z-index: 0;" />
                
{createMemo(() => getSportsCareer().filter(sport => sport.id?.startsWith('football')))().map((club, index) => (
                  <>
                    <div style="position: relative; margin-bottom: 24px; padding-bottom: 16px;">
                      {/* Timeline dot */}
                      <div style="position: absolute; left: -19px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); z-index: 2;" />
                      
                      {/* Content */}
                      <div>
                        <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px;">
                          <h5 style="color: var(--text); font-size: 15px; font-weight: 600; margin: 0; font-family: 'Noto Mono', monospace;">
                            {club.club}
                          </h5>
                          <span style="color: var(--text-quaternary); font-size: 12px; font-family: 'Noto Mono', monospace; opacity: 0.8;">
                            {club.period}
                          </span>
                        </div>
                        {club.position && (
                          <p style="color: var(--text-secondary); font-size: 13px; margin: 0 0 8px 0; font-family: 'Noto Mono', monospace; font-style: italic;">
                            {club.position}
                          </p>
                        )}
                        <div style="color: var(--text-tertiary); font-size: 13px; font-family: 'Noto Mono', monospace; line-height: 1.5;">
                          {club.achievements.map((achievement, i) => (
                            <div style="margin-bottom: 4px; padding-left: 12px; position: relative;">
                              <span style="position: absolute; left: 0; color: var(--text-quaternary);">•</span>
                              {achievement}
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                    
                    {/* Injury period marker - show after FK Vinoř 1928 (chronologically between Vinoř and Meteor) */}
                    {club.id === 'football-1' && (
                      <div style="position: relative; margin-bottom: 24px; padding-bottom: 16px; opacity: 0.6;">
                        {/* Dashed timeline segment for injury */}
                        <div style="position: absolute; left: -19px; top: 8px; width: 8px; height: 8px; background: var(--text-quaternary); border-radius: 50%; opacity: 0.5; z-index: 2;" />
                        
                        <div>
                          <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px;">
                            <h5 style="color: var(--text-quaternary); font-size: 15px; font-weight: 400; margin: 0; font-family: 'Noto Mono', monospace; font-style: italic;">
                              {t('sports.injuryPeriod')}
                            </h5>
                            <span style="color: var(--text-quaternary); font-size: 12px; font-family: 'Noto Mono', monospace; opacity: 0.6;">
                              2021-2023
                            </span>
                          </div>
                        </div>
                      </div>
                    )}
                  </>
                ))}
              </div>
              </div>
            </div>

            {/* Athletics Career - Right Column */}
            <div>
              <h4
                style="color: var(--text-secondary); font-size: 16px; font-weight: 700; margin-bottom: 24px; font-family: 'Noto Mono', monospace; border-bottom: 1px solid var(--border); padding-bottom: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;"
                onClick={() => {
                  const content = document.getElementById('athletics-career-content');
                  const arrow = document.getElementById('athletics-career-arrow');
                  if (content && arrow) {
                    const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';

                    if (isOpen) {
                      // Closing
                      content.style.maxHeight = '0px';
                      content.style.opacity = '0';
                      arrow.style.transform = 'rotate(0deg)';
                    } else {
                      // Opening
                      content.style.maxHeight = content.scrollHeight + 'px';
                      content.style.opacity = '1';
                      arrow.style.transform = 'rotate(90deg)';
                    }
                  }
                }}
              >
                <span
                  id="athletics-career-arrow"
                  style="transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: rotate(0deg); color: var(--text-quaternary); font-size: 12px;"
                >
                  ▶
                </span>
                {t('sections.athleticsCareer')}
              </h4>
              <div
                id="athletics-career-content"
                style="max-height: 0px; opacity: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);"
              >
              <div style="position: relative; padding-left: 24px;">
                {/* Timeline line */}
                <div style="position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--border); z-index: 0;" />
                
                {createMemo(() => getSportsCareer().filter(sport => sport.id?.startsWith('athletics')))().map((event, index) => (
                  <div style="position: relative; margin-bottom: 24px; padding-bottom: 16px;">
                    {/* Timeline dot */}
                    <div style="position: absolute; left: -19px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); z-index: 1;" />
                    
                    {/* Content */}
                    <div>
                      <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px;">
                        <h5 style="color: var(--text); font-size: 15px; font-weight: 600; margin: 0; font-family: 'Noto Mono', monospace;">
                          {event.club}
                        </h5>
                        <span style="color: var(--text-quaternary); font-size: 12px; font-family: 'Noto Mono', monospace; opacity: 0.8;">
                          {event.period}
                        </span>
                      </div>
                      <p style="color: var(--text-secondary); font-size: 13px; margin: 0 0 8px 0; font-family: 'Noto Mono', monospace; font-style: italic;">
                        {event.sport}
                      </p>
                      <div style="color: var(--text-tertiary); font-size: 13px; font-family: 'Noto Mono', monospace; line-height: 1.5;">
                        {event.achievements.map((achievement, i) => (
                          <div style="margin-bottom: 4px; padding-left: 12px; position: relative;">
                            <span style="position: absolute; left: 0; color: var(--text-quaternary);">•</span>
                            {achievement}
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              {/* Personal Best Records - Under Athletics */}
              <div style="margin-top: 32px;">
                <h5 style="color: var(--text-secondary); font-size: 14px; font-weight: 700; margin-bottom: 20px; font-family: 'Noto Mono', monospace; border-bottom: 1px solid var(--border); padding-bottom: 6px;">
                  {t('sections.personalBestRecords')}
                </h5>
                <div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-family: 'Noto Mono', monospace; font-size: 12px;">
                  
                  {/* Sprint Events */}
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>60m</span><span style="color: var(--text-secondary);">8.26</span>
                  </div>
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>150m</span><span style="color: var(--text-secondary);">21.60</span>
                  </div>
                  
                  {/* Middle Distance */}
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>300m (h)</span><span style="color: var(--text-secondary);">47.42</span>
                  </div>
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>600m</span><span style="color: var(--text-secondary);">1:55.11</span>
                  </div>
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>800m</span><span style="color: var(--text-secondary);">2:30.08</span>
                  </div>
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>800m (h)</span><span style="color: var(--text-secondary);">2:21.34</span>
                  </div>
                  
                  {/* Long Distance */}
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>1000m</span><span style="color: var(--text-secondary);">3:27.48</span>
                  </div>
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>1000m (h)</span><span style="color: var(--text-secondary);">3:19.59</span>
                  </div>
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>1500m</span><span style="color: var(--text-secondary);">4:54.25</span>
                  </div>
                  
                  {/* Hurdles */}
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>60m Hurdles</span><span style="color: var(--text-secondary);">10.8</span>
                  </div>
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>1500m Hurdles</span><span style="color: var(--text-secondary);">5:07.68</span>
                  </div>
                  
                  {/* Field Events */}
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>High Jump</span><span style="color: var(--text-secondary);">1.46m</span>
                  </div>
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>Long Jump</span><span style="color: var(--text-secondary);">5.25m</span>
                  </div>
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>Cricket Ball Throw</span><span style="color: var(--text-secondary);">41.45m</span>
                  </div>
                  
                  {/* Combined Events */}
                  <div style="color: var(--text-tertiary); display: flex; justify-content: space-between;">
                    <span>Pentathlon</span><span style="color: var(--text-secondary);">1567 pts</span>
                  </div>

                </div>
              </div>
              </div>
            </div>

          </div>
        </div>

        {/* Socials Section */}
        <div id="socials" style="margin-bottom: 40px;">
          <h3 style="color: #8b5cf6; font-size: 20px; font-weight: 700; margin-bottom: 24px; margin-left: -0.5cm; font-family: 'Noto Mono', monospace;">
            {t('sections.socials')}
          </h3>
          
          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 16px; font-family: 'Noto Mono', monospace; font-size: 14px;">
{t('socials.followMeOn')} 📸 <a href="https://www.instagram.com/dlaby23/" target="_blank" rel="noopener" style="color: #e4405f; text-decoration: none;">Instagram</a> or 💬 <a href="https://discordapp.com/users/453924327377600533" target="_blank" rel="noopener" style="color: #5865f2; text-decoration: none;">Discord</a> {t('socials.toChat')}.
          </p>
          
          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 16px; font-family: 'Noto Mono', monospace; font-size: 14px;">
{t('socials.checkOutMyProfiles')} 🔴 <a href="https://github.com/Dlaby23" target="_blank" rel="noopener" style="color: #ff4500; text-decoration: none;">GitHub</a>
            &nbsp;&nbsp;<a href="https://github.com/Dlaby23?tab=repositories" target="_blank" rel="noopener" style="color: var(--text-tertiary); text-decoration: underline;">📧 {t('socials.browseRepositories')}</a>
          </p>

          <p style="color: var(--text-tertiary); line-height: 1.6; margin-bottom: 16px; font-family: 'Noto Mono', monospace; font-size: 14px;">
{t('socials.email')} 📧 <a href="mailto:cabaldvalcav@gmail.com" style="color: var(--text-secondary); text-decoration: none;">cabaldvalcav@gmail.com</a>
          </p>
        </div>

        {/* Trading Section */}
        <div style="margin-top: 3cm;">
          <Suspense fallback={
            <div style="margin-bottom: 40px; text-align: center; color: var(--text-secondary); font-family: 'Noto Mono', monospace;">
              Loading trading chart...
            </div>
          }>
            <CandlestickChart />
          </Suspense>
        </div>
      </main>
      
      {/* Footer - Sticky on desktop, normal on mobile */}
      <footer style={`position: ${isMobile() ? 'relative' : 'sticky'}; bottom: 0; background: var(--bg); border-top: 1px solid var(--border); padding: 0.5rem 1rem; display: flex; justify-content: space-between; align-items: center; z-index: 100;`}>
        <div style="color: var(--text-secondary); font-family: 'Noto Mono', monospace; font-size: 12px;">
          © 2018-2025 Dlaby23
        </div>
        <div style="display: flex; gap: 16px;">
          <a href="/terms-of-service.html" style="color: var(--text-secondary); text-decoration: none; font-family: 'Noto Mono', monospace; font-size: 12px; transition: color 0.2s ease;">
            Terms of Service
          </a>
          <a href="/privacy-policy.html" style="color: var(--text-secondary); text-decoration: none; font-family: 'Noto Mono', monospace; font-size: 12px; transition: color 0.2s ease;">
            Privacy Policy
          </a>
        </div>
      </footer>
        </div>
      </ClickSpark>
    </>
  )
}

export default App