<div class="min-h-screen ds-bg-page">

  <section class="py-20 ds-container">
    <div class="mx-auto max-w-4xl text-center">
      <div class="mb-8">
        <div class="flex items-center justify-center gap-8 mb-6">
          <img src="/images/logos/site-logo-b.png" alt="Site logo" class="lg:h-20 h-15" />
          <img src="/images/JesusPerez_f.jpg" alt="Jesús Pérez Profile Picture" class="lg:w-40 rounded-full w-32 object-cover border-2 ds-border" />
        </div>
        <h1 class="text-balance text-4xl font-bold tracking-tight ds-text sm:text-6xl">
          {{ texts["about-page-title"] }}
        </h1>
        <p class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto">
          {{ texts["about-page-subtitle"] }}
        </p>
      </div>
    </div>
  </section>

  <section class="py-16 ds-bg">
    <div class="ds-container-lg ds-container">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <div>
          <h2 class="text-3xl font-bold ds-text mb-6">
            {{ texts["about-my-journey"] }}
          </h2>
          <div class="space-y-4 ds-text-secondary">
            <p>{{ texts["about-journey-paragraph-1"] }}</p>
            <p>{{ texts["about-journey-paragraph-2"] }}</p>
            <p>{{ texts["about-journey-paragraph-3"] }}</p>
          </div>
        </div>

        <div class="p-8 ds-rounded-lg">
          <h3 class="ds-heading-4 ds-text mb-ds-4">
            {{ texts["about-philosophy-approach"] }}
          </h3>
          <ul class="space-y-3 ds-text-secondary">
            <li class="flex items-start gap-3">
              <span class="text-green-500 mt-1">✓</span>
              <span>{{ texts["about-open-source-first"] }}</span>
            </li>
            <li class="flex items-start gap-3">
              <span class="text-green-500 mt-1">✓</span>
              <span>{{ texts["about-self-hosted-solutions"] }}</span>
            </li>
            <li class="flex items-start gap-3">
              <span class="text-green-500 mt-1">✓</span>
              <span>{{ texts["about-performance-security-design"] }}</span>
            </li>
            <li class="flex items-start gap-3">
              <span class="text-green-500 mt-1">✓</span>
              <span>{{ texts["about-pragmatic-solutions"] }}</span>
            </li>
            <li class="flex items-start gap-3">
              <span class="text-green-500 mt-1">✓</span>
              <span>{{ texts["about-knowledge-transfer-empowerment"] }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="py-16 ds-bg-page">
    <div class="ds-container-lg ds-container">
      <div class="text-center mb-ds-12">
        <h2 class="text-3xl font-bold ds-text">{{ texts["about-technical-expertise"] }}</h2>
        <p class="mt-4 ds-text-secondary">{{ texts["about-technologies-work-with"] }}</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm">
          <div class="text-center mb-ds-4">
            <span class="text-4xl">🦀</span>
          </div>
          <h3 class="ds-heading-4 ds-text mb-3 text-center">{{ texts["about-rust-development-title"] }}</h3>
          <ul class="space-y-ds-2 ds-caption ds-text-secondary">
            <li>{{ texts["about-systems-programming-item"] }}</li>
            <li>{{ texts["about-web-applications-item"] }}</li>
            <li>{{ texts["about-cli-tools-automation"] }}</li>
            <li>{{ texts["about-performance-optimization-item"] }}</li>
            <li>{{ texts["about-memory-safety-concurrency"] }}</li>
          </ul>
        </div>

        <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm">
          <div class="text-center mb-ds-4">
            <span class="text-4xl">🏗️</span>
          </div>
          <h3 class="ds-heading-4 ds-text mb-3 text-center">{{ texts["about-infrastructure-title"] }}</h3>
          <ul class="space-y-ds-2 ds-caption ds-text-secondary">
            <li>{{ texts["about-kubernetes-container"] }}</li>
            <li>{{ texts["about-cicd-pipeline-design"] }}</li>
            <li>{{ texts["about-monitoring-observability"] }}</li>
            <li>{{ texts["about-self-hosted-alternatives"] }}</li>
            <li>{{ texts["about-security-compliance"] }}</li>
          </ul>
        </div>

        <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm">
          <div class="text-center mb-ds-4">
            <span class="text-4xl">🌐</span>
          </div>
          <h3 class="ds-heading-4 ds-text mb-3 text-center">{{ texts["about-web3-blockchain-title"] }}</h3>
          <ul class="space-y-ds-2 ds-caption ds-text-secondary">
            <li>{{ texts["about-polkadot-ecosystem-dev"] }}</li>
            <li>{{ texts["about-substrate-blockchain"] }}</li>
            <li>{{ texts["about-smart-contract-dev"] }}</li>
            <li>{{ texts["about-dapp-architecture"] }}</li>
            <li>{{ texts["about-cross-chain-communication"] }}</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="py-16 ds-bg">
    <div class="ds-container-lg ds-container">
      <div class="text-center mb-ds-12">
        <h2 class="text-3xl font-bold ds-text">{{ texts["about-why-self-hosted-open-source"] }}</h2>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-ds-8">
        <div class="space-y-6">
          <div>
            <h3 class="ds-body font-semibold ds-text mb-2">{{ texts["about-control-privacy"] }}</h3>
            <p class="ds-text-secondary">{{ texts["about-control-privacy-desc"] }}</p>
          </div>
          <div>
            <h3 class="ds-body font-semibold ds-text mb-2">{{ texts["about-cost-effectiveness"] }}</h3>
            <p class="ds-text-secondary">{{ texts["about-cost-effectiveness-desc"] }}</p>
          </div>
          <div>
            <h3 class="ds-body font-semibold ds-text mb-2">{{ texts["about-resilience"] }}</h3>
            <p class="ds-text-secondary">{{ texts["about-resilience-desc"] }}</p>
          </div>
        </div>

        <div class="space-y-6">
          <div>
            <h3 class="ds-body font-semibold ds-text mb-2">{{ texts["about-performance"] }}</h3>
            <p class="ds-text-secondary">{{ texts["about-performance-desc"] }}</p>
          </div>
          <div>
            <h3 class="ds-body font-semibold ds-text mb-2">{{ texts["about-customization"] }}</h3>
            <p class="ds-text-secondary">{{ texts["about-customization-desc"] }}</p>
          </div>
          <div>
            <h3 class="ds-body font-semibold ds-text mb-2">{{ texts["about-community"] }}</h3>
            <p class="ds-text-secondary">{{ texts["about-community-desc"] }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="py-16">
    <div class="mx-auto max-w-4xl ds-container text-center">
      <h2 class="text-3xl font-bold ds-text mb-ds-4">{{ texts["about-lets-work-together"] }}</h2>
      <p class="ds-text-secondary mb-8 ds-body">{{ texts["about-work-together-desc"] }}</p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="{{ texts['about-contact-url'] | default('/contact') }}" class="no-underline ds-btn-secondary">
          {{ texts["about-get-in-touch"] }}
        </a>
        <a href="{{ texts['about-work-request-url'] | default('/work-request') }}" class="no-underline ds-btn-secondary">
          {{ texts["about-start-project"] }}
        </a>
      </div>
    </div>
  </section>

</div>
