<script>
  import { imageBaseUrl } from '$lib/config/imageCdn.js';
  import { locale, t } from '$lib/translations';

  /** Career start year for experience calculation. */
  const START_YEAR = 2018;

  /** Full calendar years elapsed since `START_YEAR` (e.g. 2026 − 2018 → 8). */
  const years = $derived(Math.max(0, new Date().getFullYear() - START_YEAR));

  const yearNoun = $derived(
    years === 1
      ? $locale === 'pt-BR'
        ? 'ano'
        : 'year'
      : $locale === 'pt-BR'
        ? 'anos'
        : 'years',
  );

  const aboutPayload = $derived({ years, sinceYear: START_YEAR, yearNoun });

  /** Portrait for the About section (add `leomurca/leonardo-about.webp` to your image CDN). */
  const portraitSrc = `${imageBaseUrl}/t/f_webp,w_960,h_1200,c_fill/leomurca/me.webp`;
</script>

<section id="about" class="about" aria-labelledby="about-title">
  <div class="about__decor" aria-hidden="true">
    <!-- Very light motifs: mobile / BLE / streaming / UI layers / code -->
    <svg
      class="about__deco about__deco--phone"
      viewBox="0 0 64 64"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="14"
        y="6"
        width="36"
        height="52"
        rx="5"
        stroke="currentColor"
        stroke-width="1.5"
      />
      <path
        d="M24 10h16"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
      />
      <circle cx="32" cy="52" r="2.5" fill="currentColor" />
    </svg>
    <svg
      class="about__deco about__deco--ble"
      viewBox="0 0 64 64"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M32 12 L44 24 36 32 44 40 32 52 M32 12 L20 24 28 32 20 40 32 52"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
    <svg
      class="about__deco about__deco--stream"
      viewBox="0 0 64 64"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8 40c10-18 38-18 48 0M14 32c8-12 28-12 36 0M20 24c6-8 22-8 28 0"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
      />
      <polygon points="30,22 38,28 30,34" fill="currentColor" opacity="0.35" />
    </svg>
    <svg
      class="about__deco about__deco--layers"
      viewBox="0 0 64 64"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="10"
        y="36"
        width="44"
        height="10"
        rx="2"
        stroke="currentColor"
        stroke-width="1.5"
      />
      <rect
        x="16"
        y="22"
        width="32"
        height="10"
        rx="2"
        stroke="currentColor"
        stroke-width="1.5"
      />
      <rect
        x="22"
        y="8"
        width="20"
        height="10"
        rx="2"
        stroke="currentColor"
        stroke-width="1.5"
      />
    </svg>
    <svg
      class="about__deco about__deco--code"
      viewBox="0 0 64 64"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M22 20 L12 32 22 44"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <path
        d="M42 20 L52 32 42 44"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <path
        d="M36 16 L28 48"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        opacity="0.5"
      />
    </svg>
    <svg
      class="about__deco about__deco--web"
      viewBox="0 0 64 64"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <ellipse
        cx="32"
        cy="34"
        rx="22"
        ry="14"
        stroke="currentColor"
        stroke-width="1.5"
      />
      <path d="M10 34h44" stroke="currentColor" stroke-width="1.5" />
      <path
        d="M32 20v28"
        stroke="currentColor"
        stroke-width="1.5"
        opacity="0.45"
      />
    </svg>
  </div>

  <div class="about__inner">
    <div class="about__copy">
      <p class="about__eyebrow">{$t('about.eyebrow')}</p>
      <h2 id="about-title" class="about__title">{$t('about.title')}</h2>
      <p class="about__subtitle">{$t('about.subtitle', aboutPayload)}</p>
      <p class="about__body">{$t('about.p1', aboutPayload)}</p>
      <p class="about__body">{$t('about.p2')}</p>
      <p class="about__body">{$t('about.p3')}</p>
      <p class="about__skills">{$t('about.skills')}</p>
    </div>

    <figure class="about__figure">
      <div class="about__frame">
        <img
          class="about__photo"
          src={portraitSrc}
          alt={$t('about.imageAlt')}
          width="640"
          height="800"
          loading="lazy"
          decoding="async"
        />
      </div>
    </figure>
  </div>
</section>

<style>
  .about {
    position: relative;
    padding: clamp(3.5rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 5rem);
    background: var(--color-light-background);
    color: var(--color-font-dark);
    overflow: hidden;
    z-index: 0;
  }

  .about__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    color: var(--color-dark-background);
    opacity: 0.055;
  }

  .about__deco {
    position: absolute;
    display: block;
  }

  .about__deco--phone {
    top: 6%;
    right: 6%;
    width: min(140px, 22vw);
    height: min(140px, 22vw);
    transform: rotate(-11deg);
  }

  .about__deco--ble {
    bottom: 12%;
    left: 4%;
    width: min(100px, 16vw);
    height: min(100px, 16vw);
    transform: rotate(8deg);
  }

  .about__deco--stream {
    top: 38%;
    right: 2%;
    width: min(180px, 28vw);
    height: min(180px, 28vw);
    transform: rotate(4deg);
  }

  .about__deco--layers {
    top: 18%;
    left: 8%;
    width: min(120px, 18vw);
    height: min(120px, 18vw);
    transform: rotate(-6deg);
  }

  .about__deco--code {
    bottom: 6%;
    right: 22%;
    width: min(110px, 17vw);
    height: min(110px, 17vw);
    transform: rotate(7deg);
  }

  .about__deco--web {
    bottom: 28%;
    left: 14%;
    width: min(95px, 15vw);
    height: min(95px, 15vw);
    transform: rotate(-4deg);
  }

  .about__inner {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.82fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  @media (max-width: 900px) {
    .about__decor {
      opacity: 0.04;
    }

    .about__deco--stream {
      width: min(140px, 40vw);
      height: min(140px, 40vw);
      right: -4%;
    }

    .about__deco--layers {
      left: -2%;
    }

    .about__inner {
      grid-template-columns: 1fr;
      gap: 2.25rem;
    }

    .about__figure {
      justify-self: center;
      max-width: 360px;
    }

    .about__title {
      max-width: none;
    }
  }

  .about__eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-secondary);
  }

  .about__title {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    max-width: 18ch;
  }

  .about__subtitle {
    margin: 0 0 1.5rem;
    font-size: clamp(1.05rem, 1.9vw, 1.2rem);
    font-weight: 600;
    color: #3f4a57;
    max-width: 36ch;
    line-height: 1.45;
  }

  .about__body {
    margin: 0 0 1.1rem;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #3a4450;
    max-width: 58ch;
  }

  .about__body:last-of-type {
    margin-bottom: 0;
  }

  .about__skills {
    margin: 1.75rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-font-light);
    line-height: 1.6;
    max-width: 52ch;
  }

  .about__figure {
    margin: 0;
    justify-self: end;
    width: 100%;
    max-width: 420px;
  }

  .about__frame {
    position: relative;
    border-radius: clamp(1rem, 2vw, 1.35rem);
    padding: 3px;
    background: linear-gradient(
      135deg,
      rgba(254, 147, 53, 0.95) 0%,
      rgba(241, 69, 47, 0.85) 45%,
      rgba(16, 22, 29, 0.35) 100%
    );
    box-shadow:
      0 24px 50px rgba(16, 22, 29, 0.14),
      0 4px 14px rgba(16, 22, 29, 0.08);
  }

  .about__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: calc(clamp(1rem, 2vw, 1.35rem) - 3px);
    background: linear-gradient(145deg, #e8ecf1 0%, #d4dae3 100%);
  }

  @media (max-width: 480px) {
    .about__figure {
      max-width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .about__photo {
      transition: none;
    }
  }
</style>
