<script>
  /* eslint-disable svelte/no-at-html-tags -- copy comes from static locale JSON */
  import { page } from '$app/state';
  import { resolve } from '$app/paths';
  import { imageBaseUrl } from '$lib/config/imageCdn.js';
  import Head from '$lib/components/Head.svelte';
  import ArrowBackIcon from '$lib/components/icons/ArrowBackIcon.svelte';
  import { locale, t } from '$lib/translations';

  const ogImage = $derived(
    `${imageBaseUrl}/t/f_webp,w_1200,h_630,c_fill/leomurca/empreendedorismo-square-thumb.webp`,
  );

  const articleJsonLd = $derived(
    JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'TechArticle',
      headline: $t('alagoas.meta.ogTitle'),
      description: $t('alagoas.meta.description'),
      image: ogImage,
      author: {
        '@type': 'Person',
        name: 'Leonardo Murça',
        url: `${page.url.origin}/`,
      },
      url: `${page.url.origin}${page.url.pathname}`,
      mainEntityOfPage: `${page.url.origin}${page.url.pathname}`,
      inLanguage: $locale === 'pt-BR' ? 'pt-BR' : 'en-US',
    }),
  );
</script>

<Head
  title={$t('alagoas.meta.title')}
  description={$t('alagoas.meta.description')}
  keywords={$t('alagoas.meta.keywords')}
  ogTitle={$t('alagoas.meta.ogTitle')}
  ogDescription={$t('alagoas.meta.ogDescription')}
  ogImage={ogImage}
  twitterDescription={$t('alagoas.meta.twitterDescription')}
  ogType="article"
  ogImageAlt={$t('alagoas.meta.ogTitle')}
  jsonLd={articleJsonLd}
/>

<a class="floating-button" href={resolve('/')}>
  <ArrowBackIcon size={25} /> {$t('common.goBack')}</a>

<section class="hero" aria-labelledby="hero-title">
  <div class="hero__background" aria-hidden="true"></div>

  <div class="hero__content">
    <div class="hero__text">
      <h1 id="hero-title">
        {@html $t('alagoas.hero.titleHtml')}
      </h1>

      <p class="hero__description">
        {$t('alagoas.hero.description')}
      </p>

      <nav class="hero__actions" aria-label={$t('alagoas.hero.navAria')}>
        <a
          class="primary-button"
          href="https://empreendedorismo.secti.al.gov.br/"
          target="_blank"
          rel="noopener noreferrer"
          aria-label={$t('alagoas.hero.visitAria')}
        >
          {$t('common.visitWebsite')}
        </a>

        <a
          class="secondary-button"
          href="https://secti.al.gov.br/"
          target="_blank"
          rel="noopener noreferrer"
          aria-label={$t('alagoas.hero.sectiAria')}
        >
          {$t('common.aboutSecti')}
        </a>
      </nav>
    </div>

    <div class="hero__visual">
      <img
        src={`${imageBaseUrl}/t/f_webp/leomurca/empreendedorismo-square-thumb.webp`}
        alt={$t('alagoas.heroImgAlt')}
        loading="eager"
        fetchpriority="high"
        width="1200"
        height="1200"
      />
    </div>
  </div>
</section>

<section class="story" aria-labelledby="story-title">
  <div class="section-container">
    <div class="story__intro">
      <p class="eyebrow">{$t('alagoas.story.eyebrow')}</p>

      <h2 id="story-title">
        {$t('alagoas.story.title')}
      </h2>

      <p>
        {$t('alagoas.story.p1')}
      </p>

      <p>
        {@html $t('alagoas.story.p2')}
      </p>

      <p>
        {$t('alagoas.story.p3')}
      </p>

      <p>
        {$t('alagoas.story.p4')}
      </p>
    </div>

    <div class="story__gallery">
      <img
        src={`${imageBaseUrl}/t/f_webp/leomurca/empreendedorismo-desktop.webp`}
        alt={$t('alagoas.storyImgDesktopAlt')}
        width="1200"
        height="800"
        loading="lazy"
      />

      <img
        src={`${imageBaseUrl}/t/f_webp/leomurca/empreendedorismo-mobile.webp`}
        alt={$t('alagoas.storyImgMobileAlt')}
        width="1200"
        height="800"
        loading="lazy"
      />
    </div>
  </div>
</section>

<section class="purpose" aria-labelledby="purpose-title">
  <div class="section-container">
    <header class="purpose__header">
      <p class="eyebrow">{$t('alagoas.purpose.eyebrow')}</p>

      <h2 id="purpose-title">
        {$t('alagoas.purpose.title')}
      </h2>

      <p>
        {$t('alagoas.purpose.lead')}
      </p>
    </header>

    <div class="purpose__grid">
      <article class="purpose-card">
        <img
          src={`${imageBaseUrl}/t/f_webp/leomurca/empreendedorismo-programs.webp`}
          alt={$t('alagoas.card1.imgAlt')}
          width="900"
          height="700"
          loading="lazy"
        />

        <div class="purpose-card__content">
          <h3>{$t('alagoas.card1.title')}</h3>

          <p>
            {$t('alagoas.card1.body')}
          </p>
        </div>
      </article>

      <article class="purpose-card">
        <img
          src={`${imageBaseUrl}/t/f_webp/leomurca/empreendedorismo-responsive.webp`}
          alt={$t('alagoas.card2.imgAlt')}
          width="900"
          height="700"
          loading="lazy"
        />

        <div class="purpose-card__content">
          <h3>{$t('alagoas.card2.title')}</h3>

          <p>
            {$t('alagoas.card2.body')}
          </p>
        </div>
      </article>

      <article class="purpose-card">
        <img
          src={`${imageBaseUrl}/t/f_webp/leomurca/empreendedorismo-cta.webp`}
          alt={$t('alagoas.card3.imgAlt')}
          width="900"
          height="700"
          loading="lazy"
        />

        <div class="purpose-card__content">
          <h3>{$t('alagoas.card3.title')}</h3>

          <p>
            {$t('alagoas.card3.body')}
          </p>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="impact" aria-labelledby="impact-title">
  <div class="section-container">
    <div class="impact__content">
      <p class="eyebrow">{$t('alagoas.impact.eyebrow')}</p>

      <h2 id="impact-title">
        {$t('alagoas.impact.title')}
      </h2>

      <p>
        {$t('alagoas.impact.p1')}
      </p>

      <p>
        {$t('alagoas.impact.p2')}
      </p>

      <p>
        {$t('alagoas.impact.p3')}
      </p>
    </div>
  </div>
</section>

<style>
  /* =========================================================
     STORY INTRO
  ========================================================== */

  .story {
    padding: 0 8%;
    margin-top: 80px;
  }

  .section-container {
    width: min(1200px, 100%);
    margin: 0 auto;
  }

  .story__intro {
    max-width: 820px;
  }

  .story__intro h2 {
    margin-bottom: 1.5rem;
    margin-top: 0;

    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.05;
  }

  .story__intro p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
  }

  .story__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;

    margin-top: 4rem;
  }

  .story__gallery img {
    width: 100%;
    height: auto;
    border-radius: 2rem;
  }

  .eyebrow {
    margin-bottom: 1rem;

    color: #4b8fff;

    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .story__intro :global(.highlight) {
    color: #4b8fff;
    font-weight: 700;
  }

  /* =========================================================
     FEATURES SECTION
  ========================================================== */

  .purpose {
    padding: 140px 8%;
  }

  .purpose__header {
    max-width: 760px;
    margin-bottom: 4rem;
  }

  .purpose__header h2 {
    margin-bottom: 1.5rem;

    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.05;
  }

  .purpose__header p {
    font-size: 1.1rem;
  }

  .purpose__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .purpose-card {
    overflow: hidden;

    border-radius: 1.8rem;

    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);

    transition:
      transform 0.2s ease,
      border-color 0.2s ease;
  }

  .purpose-card:hover {
    transform: translateY(-4px);

    border-color: rgba(75, 143, 255, 0.3);
  }

  .purpose-card img {
    width: 100%;
    height: auto;
    display: block;
  }

  .purpose-card__content {
    padding: 1.5rem;
  }

  .purpose-card h3 {
    margin-bottom: 0.8rem;
  }

  .purpose-card p {
    color: #aeb7d0;
    line-height: 1.7;
  }

  /* =========================================================
     SECTION LAYOUT
  ========================================================== */

  section {
    position: relative;
    overflow: hidden;
  }

  .hero {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 0 8%;
    padding-bottom: 80px;
  }

  .hero__content {
    position: relative;
    z-index: 1;
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
    align-items: center;
  }

  /* =========================================================
     BACKGROUND
  ========================================================== */

  .hero__background {
    position: absolute;
    inset: 0;

    background:
      radial-gradient(circle at top, rgba(0, 83, 255, 0.22), transparent 45%),
      linear-gradient(to bottom, #001361 0%, #000a38 100%);
  }

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

  .hero__text {
    display: flex;
    flex-direction: column;
  }

  .hero__text h1 {
    max-width: 700px;
    margin-bottom: 20px;

    color: #d4d4d8;

    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 900;
    line-height: 0.95;
  }

  .hero__text h1 :global(span) {
    color: #0245b8;
  }

  .hero__description {
    max-width: 620px;

    color: #aeb7d0;

    font-size: 1.15rem;
    line-height: 1.8;
  }

  /* =========================================================
     ACTION BUTTONS
  ========================================================== */

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    margin-top: 30px;
  }

  .primary-button {
    font-size: 1.2rem;
    padding: 15px 30px;
    background: #0245b8;
    box-shadow: 0 4px 0 #023a93;
  }

  .primary-button:hover {
    transform: translateY(1px);
    box-shadow: 0 3px 0 #023a93;
  }

  .primary-button:active {
    box-shadow: 0 1px 0 #071f3f;
    top: 1px;
  }

  .secondary-button {
    font-size: 1.2rem;
    padding: 15px 30px;
    background: #303556;
    box-shadow: 0 4px 0 #262a44;
  }

  .secondary-button:hover {
    transform: translateY(1px);
    box-shadow: 0 3px 0 #262a44;
  }

  .secondary-button:active {
    box-shadow: 0 1px 0 #262a44;
    top: 1px;
  }

  /* region buttons */
  .floating-button {
    position: fixed;
    top: 40px;
    right: 40px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 5px;

    padding: 10px 22px;
    border: none;
    border-radius: 30px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    text-decoration: none;
    background: var(--color-secondary);
    color: white;
    border: none;
    box-shadow: 0 4px 0 #cc3928;
    transition: all 0.1s ease;
  }

  .floating-button:hover {
    transform: translateY(1px);
    box-shadow: 0 3px 0 #cc3928;
  }

  /* =========================================================
   AI SECTION
========================================================== */

  .impact {
    padding: 0 8% 140px;
  }

  .impact__content {
    max-width: 820px;
  }

  .impact__content h2 {
    margin-bottom: 1.5rem;

    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.05;
  }

  .impact__content p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
  }

  /* =========================================================
     HERO IMAGE
  ========================================================== */

  .hero__visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2rem;
  }
  /* =========================================================
     RESPONSIVE DESIGN
  ========================================================== */

  @media (max-width: 900px) {
    .hero__content,
    .story__gallery,
    .purpose__grid,
    .impact__content {
      grid-template-columns: 1fr;
    }
    .floating-button {
      top: 15px;
      right: 10px;
    }

    .hero {
      padding-top: 30px;
      padding-bottom: 60px;
    }

    .hero__actions {
      flex-direction: column;
    }

    .hero__text h1 {
      font-size: 3rem;
    }
  }
</style>
