<script>
// @ts-nocheck

  import { applyAction, enhance } from '$app/forms';
	import { invalidateAll } from '$app/navigation';
  import { t, locale, SUPPORTED_LOCALES } from '$lib/translations';
  import { resolve } from '$app/paths';

  import Seo from '$lib/components/Seo.svelte';
  import appScreenshot from '$lib/assets/app-with-frame.png';
  import appScreenshotPt from '$lib/assets/app-with-frame-pt.png';

  let { data } = $props();
  /**
   * @type {{ textColor: String; message: String; } | null}
   */
  let feedbackMessage = $state(null);

  /**
   * @type {boolean}
   */
	let loading = $state(false);

  // svelte-ignore state_referenced_locally
    const metadata = data.metadata;

  const resetFeedback = () => {
    if (feedbackMessage) feedbackMessage = null
  }

</script>

<Seo {...metadata} />

<!-- eslint-disable svelte/no-at-html-tags -->
<div class="beta-section">
  <div class="beta-content">
    <div class="beta-image">

      <img src={$locale === SUPPORTED_LOCALES.EN_US ? appScreenshot : appScreenshotPt} alt="Embroidery Viewer App Screenshot" />
    </div>

    <div class="beta-text">
      <h1>{$t("home.banner.title")}</h1>
      <p class="lead">
        {@html $t('home.banner.subtitle')}
      </p>
      <p>
        {$t('home.banner.description')}
      </p>


      <form
        action="/"
        method="POST"
        class="beta-form"
        use:enhance={() => {
		      loading = true;
		      return async ({ result }) => {
			      loading = false;
			      feedbackMessage = result.data;
			      if (result.type === 'success') await invalidateAll();
			      applyAction(result);
		      };
	      }}>

        <label for="name">{$t("home.banner.name")}</label>
        <input type="text" name="name" id="name" oninput={resetFeedback}  required />

        <label for="email">{$t("home.banner.email")}</label>
        <input type="email" name="email" id="email" oninput={resetFeedback}  required />

        <button type="submit">{$t(loading ? 'home.banner.cta.loading' : 'home.banner.cta') }</button>
          {#if feedbackMessage !== null}
            <p style="margin-top: 1rem; color: {feedbackMessage.textColor}">
            {$t(feedbackMessage.message)}
          </p>
        {/if}
      </form>
    </div>
  </div>
</div>

<div class="home-container">
  <section aria-labelledby="main-title">
    <h1 id="main-title">{$t('home.main.title')}</h1>
    {@html $t('home.main.description')}
  </section>

  <section aria-labelledby="features-title">
    <h2 id="features-title">{$t('home.features.title')}</h2>
    {@html $t('home.features.list')}
  </section>

  <section aria-labelledby="how-to-use-title">
    <h2 id="how-to-use-title">{$t('home.howtouse.title')}</h2>
    {@html $t('home.howtouse.list')}
  </section>

  <section aria-labelledby="testimonials-title">
    <h2 id="testimonials-title">{$t('home.testimonials.title')}</h2>
    {@html $t('home.testimonials.description')}
  </section>

  <section aria-labelledby="donation-title">
    <h2 id="donation-title">{$t('home.donation.title')}</h2>
    {@html $t('home.donation.description')}
    <p>
      <a href={resolve("/donate")} class="button">{$t('home.donation.cta')}</a>
      – {$t('home.donation.cta.description')}
    </p>
  </section>

  <!--TODO: add video preview-->
  <section aria-labelledby="cta-title">
    <h2 id="cta-title">{$t('home.cta.title')}</h2>
    <p>
      <a href={resolve("/viewer")} class="button">{$t('home.cta.cta')}</a>
      – {@html $t('home.cta.cta.description')}
    </p>
  </section>
</div>

<style>

  .beta-form {
    background: white;
    color: #000;
    padding: 1.5rem;
    border-radius: 10px;
    max-width: 400px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }

  .beta-form label {
    display: block;
    margin-top: 1rem;
    font-weight: bold;
  }

  .beta-form input {
    width: 100%;
    padding: 0.6rem;
    margin-top: 0.3rem;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  .beta-form button {
    margin-top: 1.5rem;
    width: 100%;
    background-color: #05345f;
    color: white;
    border: none;
    padding: 0.8rem;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
  }

  .beta-form button:disabled {
    background-color: #7aa3c1;
    cursor: wait;
  }

  .beta-form button:hover:enabled {
    background-color: #042b4f;
  }
  .home-container {
    margin: 0 auto;
    width: 70%;
    padding-top: 20px;
  }

  @media (max-width: 768px) {
    .home-container {
      width: 90%;
    }
  }
    .beta-section {
    background-color: #05345f;
    color: white;
    padding: 3rem 1rem;
    display: flex;
    justify-content: center;
  }

  .beta-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1000px;
    align-items: center;
    width: 100%;
  }

  .beta-image img {
    max-width: 300px;
    border-radius: 1rem;
  }

  .beta-text {
    flex: 1;
    min-width: 280px;
  }

  .beta-text h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: white;
  }

  .beta-text .lead {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 500;
  }

  .beta-text p {
    margin-bottom: 1rem;
    line-height: 1.5;
  }

  .beta-form {
    background: white;
    color: #000;
    padding: 1.5rem;
    border-radius: 10px;
    max-width: 400px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }

  .beta-form label {
    display: block;
    margin-top: 1rem;
    font-weight: bold;
  }

  .beta-form input {
    width: 100%;
    padding: 0.6rem;
    margin-top: 0.3rem;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  .beta-form button {
    margin-top: 1.5rem;
    width: 100%;
    background-color: #05345f;
    color: white;
    border: none;
    padding: 0.8rem;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
  }

  .beta-form button:hover {
    background-color: #042b4f;
  }

  @media (max-width: 768px) {
    .beta-content {
      flex-direction: column;
      align-items: center;
    }

    .beta-form {
      margin: 0 auto;
    }
  }
</style>
