<script>
  /* eslint-disable svelte/no-at-html-tags -- copy comes from static locale JSON */
  import { imageBaseUrl } from '$lib/config/imageCdn.js';
  import { isMobile } from '$lib/utils/isMobile';
  import { t } from '$lib/translations';

  const backgroundImage = isMobile()
    ? `${imageBaseUrl}/t/f_webp/leomurca/hero-mobile.webp`
    : `${imageBaseUrl}/t/f_webp,w_1920,h_1080/leomurca/hero.webp`;
</script>

<section id="hero" style={`background-image: url(${backgroundImage});`}>
    <div class="overlay">
    <h1>{@html $t('hero.titleHtml')}</h1>

    <p>
      {@html $t('hero.intro')}
    </p>

    <a class="primary-button" href="#featured-works">{$t('hero.ctaWorks')}</a>
  </div>
</section>

<style>
  /* =========================
     LAYOUT / STRUCTURE
  ========================= */
  #hero {
    position: relative;
    z-index: 0;
    display: flex;
    background: var(--color-light-background);
    overflow: hidden;
    width: 100%;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: 100vh;
  }

  /* =========================
     CONTENT
  ========================= */

  .overlay {
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    max-width: 70%;
    padding-top: 200px;
    margin: 0 auto;

    color: var(--color-font-dark);
  }

  h1 {
    font-size: clamp(3.5rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;

    margin-bottom: 1rem;
  }

  p {
    font-size: 1.2rem;
    max-width: 600px;

    margin-bottom: 2rem;
    color: #10161dcc;
  }

  /* =========================
     TEXT HIGHLIGHTS
  ========================= */

  /* 🔥 Strong highlight (from translated HTML) */
  .overlay :global(.highlight) {
    background: linear-gradient(120deg, #fe933540, #f1452f40);
    padding: 0 8px;
    border-radius: 8px;
  }

  /* ✨ Softer highlight */
  .overlay :global(.highlight-soft) {
    color: #f1452f;
  }

  /* =========================
     MOBILE / RESPONSIVE
  ========================= */
  @media (max-width: 1350px) {
    h1 {
      font-size: clamp(3.3rem, 4vw, 3.3rem);
    }
  }

  @media (max-width: 1280px) {
    h1 {
      font-size: clamp(3rem, 4vw, 3rem);
    }

    p {
      font-size: 1.1rem;
    }
  }

  @media (max-width: 1180px) {
    h1 {
      font-size: clamp(3rem, 4vw, 3rem);
    }
  }

  @media (max-width: 768px) {
    h1 {
      font-size: clamp(2rem, 4vw, 2rem);
    }
    p {
      margin-top: 0;
    }

    .overlay {
      max-width: 100%;
      padding: 100px 20px;
      margin: 0;
    }
  }
</style>
