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

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

  const articleJsonLd = $derived(
    JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'TechArticle',
      headline: $t('embroidery.meta.ogTitle'),
      description: $t('embroidery.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('embroidery.meta.title')}
  description={$t('embroidery.meta.description')}
  keywords={$t('embroidery.meta.keywords')}
  ogTitle={$t('embroidery.meta.ogTitle')}
  ogDescription={$t('embroidery.meta.ogDescription')}
  ogImage={ogImage}
  twitterDescription={$t('embroidery.meta.twitterDescription')}
  ogType="article"
  ogImageAlt={$t('embroidery.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('embroidery.hero.titleHtml')}
      </h1>

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

      <nav class="hero__actions" aria-label={$t('embroidery.hero.navAria')}>
        <a
          class="primary-button"
          href="https://embroideryviewer.xyz"
          target="_blank"
          rel="noopener noreferrer"
          aria-label={$t('embroidery.hero.visitAria')}
        >
          {$t('common.visitWebsite')}
        </a>

        <a
          class="secondary-button"
          href="https://git.leomurca.xyz/leomurca/embroidery-viewer"
          target="_blank"
          rel="noopener noreferrer"
          aria-label={$t('embroidery.hero.sourceAria')}
        >
          {$t('common.viewSource')}
        </a>
      </nav>
    </div>

    <div class="hero__visual">
      <img
        src={`${imageBaseUrl}/t/f_webp/leomurca/embroidery-viewer-square-thumb.webp`}
        alt={$t('embroidery.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('embroidery.story.eyebrow')}</p>

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

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

      <p>
        {$t('embroidery.story.p2')}
      </p>

      <p>
        {@html $t('embroidery.story.p3')}
      </p>

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

    <div class="story__gallery">
      <img
        src={`${imageBaseUrl}/t/f_webp/leomurca/embroidery-viewer-old-design.webp`}
        alt={$t('embroidery.storyImgOldAlt')}
        width="1200"
        height="800"
        loading="lazy"
      />

      <img
        src={`${imageBaseUrl}/t/f_webp/leomurca/embroidery-viewer-home.webp`}
        alt={$t('embroidery.storyImgNewAlt')}
        width="1200"
        height="800"
        loading="lazy"
      />
    </div>
  </div>
</section>

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

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

      <p>
        {$t('embroidery.features.lead')}
      </p>
    </header>

    <div class="features__grid">
      <article class="feature-card">
        <img
          src={`${imageBaseUrl}/t/f_webp/leomurca/thread-colors.webp`}
          alt={$t('embroidery.feat1.imgAlt')}
          width="900"
          height="700"
          loading="lazy"
        />

        <div class="feature-card__content">
          <h3>{$t('embroidery.feat1.title')}</h3>

          <p>{$t('embroidery.feat1.body')}</p>
        </div>
      </article>

      <article class="feature-card">
        <img
          src={`${imageBaseUrl}/t/f_webp/leomurca/stitches-count.webp`}
          alt={$t('embroidery.feat2.imgAlt')}
          width="900"
          height="700"
          loading="lazy"
        />

        <div class="feature-card__content">
          <h3>{$t('embroidery.feat2.title')}</h3>

          <p>
            {$t('embroidery.feat2.body')}
          </p>
        </div>
      </article>

      <article class="feature-card">
        <img
          src={`${imageBaseUrl}/t/f_webp/leomurca/export-image.webp`}
          alt={$t('embroidery.feat3.imgAlt')}
          width="900"
          height="700"
          loading="lazy"
        />

        <div class="feature-card__content">
          <h3>{$t('embroidery.feat3.title')}</h3>

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

<section class="mobile" aria-labelledby="mobile-title">
  <div class="section-container">
    <div class="mobile__content">
      <div class="mobile__text">
        <p class="eyebrow">{$t('embroidery.mobile.eyebrow')}</p>

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

        <p>
          {$t('embroidery.mobile.p1')}
        </p>

        <p>
          {$t('embroidery.mobile.p2')}
        </p>

        <p>
          {$t('embroidery.mobile.p3')}
        </p>
      </div>

      <div class="mobile__visual">
        <img
          src={`${imageBaseUrl}/t/f_webp/leomurca/embroidery-viewer-mobile.webp`}
          alt={$t('embroidery.mobileImgAlt')}
          width="900"
          height="1400"
          loading="lazy"
        />
      </div>
    </div>
  </div>
</section>

<section class="ai" aria-labelledby="ai-title">
  <div class="section-container">
    <div class="ai__content">
      <p class="eyebrow">{$t('embroidery.ai.eyebrow')}</p>

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

      <p>
        {$t('embroidery.ai.p1')}
      </p>

      <p>
        {$t('embroidery.ai.p2')}
      </p>

      <p>
        {$t('embroidery.ai.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
  ========================================================== */

  .features {
    padding: 140px 8%;
  }

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

  .features__header h2 {
    margin-bottom: 1.5rem;

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

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

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

  .feature-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;
  }

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

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

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

  .feature-card__content {
    padding: 1.5rem;
  }

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

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

  /* =========================================================
     MOBILE SECTION
  ========================================================== */

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

  .mobile__content {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 5rem;
    align-items: center;
  }

  .mobile__text h2 {
    margin-bottom: 1.5rem;

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

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

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

  /* =========================================================
     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, 132, 255, 0.25), transparent 45%),
      linear-gradient(to bottom, #081024 0%, #050816 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: #165eb7;
  }

  .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: #0e3e7c;
    box-shadow: 0 4px 0 #071f3f;
  }

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

  .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;
  }

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

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

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

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

  .ai__content {
    max-width: 820px;
  }

  .ai__content h2 {
    margin-bottom: 1.5rem;

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

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

  /* =========================================================
     RESPONSIVE DESIGN
  ========================================================== */

  @media (max-width: 900px) {
    .hero__content,
    .story__gallery,
    .features__grid,
    .mobile__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: 3.5rem;
    }

    .features,
    .mobile {
      padding-left: 8%;
      padding-right: 8%;
    }
  }

  /* =========================================================
     ACCESSIBILITY
  ========================================================== */

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
</style>
