{{ define "title" }}Brand &middot; Tangled{{ end }}

{{ define "content" }}
<div class="grid grid-cols-10">
  <header class="col-span-full md:col-span-10 px-6 py-2 mb-4">
    <h1 class="text-2xl font-bold dark:text-white mb-1">Brand</h1>
    <p class="text-gray-500 dark:text-gray-300 mb-1">
    Assets and guidelines for using Tangled's logo and brand elements.
    </p>
  </header>

  <main class="col-span-full md:col-span-10 bg-white dark:bg-gray-800 drop-shadow-sm rounded p-6 md:px-10">
    <div class="space-y-12">

      <!-- introduction section -->
      <section>
        <p class="text-gray-500 dark:text-gray-300 mb-2">
        Tangled's logo and mascot is <strong>Dolly</strong>, the first ever <em>cloned</em> mammal. Please
        follow the below guidelines when using Dolly and the logotype.
        </p>
      </section>

      <!-- black logotype section -->
      <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
        <div class="order-2">
          <div id="asset-logotype-black" data-filename="tangled_logotype_black.svg" class="border border-gray-200 dark:border-gray-700 p-8 sm:p-16 bg-gray-50 dark:bg-gray-100 rounded">
            {{ template "fragments/dolly/logotype" (dict "Classes" "w-full max-w-sm mx-auto" "FillColor" "black") }}
          </div>
        </div>
        <div class="order-1">
          <h2 class="text-xl font-semibold dark:text-white mb-3">Black logotype</h2>
          <p class="text-gray-500 dark:text-gray-300 mb-4">For use on light-colored backgrounds.</p>
          <p class="text-gray-700 dark:text-gray-300 mb-4">
          This is the preferred version of the logotype, featuring dark text and elements, ideal for light
          backgrounds and designs.
          </p>
          <button type="button" data-download="#asset-logotype-black" class="btn flex items-center gap-2 w-fit">
            {{ i "download" "w-4 h-4" }} Download SVG
          </button>
        </div>
      </section>

      <!-- white logotype section -->
      <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
        <div class="order-2">
          <div id="asset-logotype-white" data-filename="tangled_logotype_white.svg" class="bg-black p-8 sm:p-16 rounded">
            {{ template "fragments/dolly/logotype" (dict "Classes" "w-full max-w-sm mx-auto" "FillColor" "white") }}
          </div>
        </div>
        <div class="order-1">
          <h2 class="text-xl font-semibold dark:text-white mb-3">White logotype</h2>
          <p class="text-gray-500 dark:text-gray-300 mb-4">For use on dark-colored backgrounds.</p>
          <p class="text-gray-700 dark:text-gray-300 mb-4">
            This version features white text and elements, ideal for dark backgrounds
            and inverted designs.
          </p>
          <button type="button" data-download="#asset-logotype-white" class="btn flex items-center gap-2 w-fit">
            {{ i "download" "w-4 h-4" }} Download SVG
          </button>
        </div>
      </section>

      <!-- mark only section -->
      <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
        <div class="order-2 h-full">
          <div class="grid grid-cols-2 gap-2 h-full">
            <div id="asset-face-black" data-filename="tangled_dolly_face_black.svg" class="border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-100 p-8 sm:p-12 rounded flex items-center justify-center">
              {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
            </div>
            <div id="asset-face-white" data-filename="tangled_dolly_face_white.svg" class="bg-black p-8 sm:p-12 rounded flex items-center justify-center">
              {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
            </div>
          </div>
        </div>
        <div class="order-1">
          <h2 class="text-xl font-semibold dark:text-white mb-3">Mark only</h2>
          <p class="text-gray-500 dark:text-gray-300 mb-4">
            When a smaller 1:1 logo or icon is needed, Dolly's face may be used on its own.
          </p>
          <p class="text-gray-700 dark:text-gray-300 mb-4">
            <strong class="font-semibold">Note</strong>: for situations where the background
            is unknown, use the black version for ideal contrast in most environments.
          </p>
          <div class="flex flex-wrap gap-2">
            <button type="button" data-download="#asset-face-black" class="btn flex items-center gap-2 w-fit">
              {{ i "download" "w-4 h-4" }} Black on white
            </button>
            <button type="button" data-download="#asset-face-white" class="btn flex items-center gap-2 w-fit">
              {{ i "download" "w-4 h-4" }} White on black
            </button>
          </div>
        </div>
      </section>

      <!-- colored backgrounds section -->
      <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
        <div class="order-2">
          <div class="grid grid-cols-2 gap-2">
            <div class="bg-green-500 p-8 sm:p-12 rounded">
              {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
            </div>
            <div class="bg-blue-500 p-8 sm:p-12 rounded">
              {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
            </div>
            <div class="bg-yellow-500 p-8 sm:p-12 rounded">
              {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
            </div>
            <div class="bg-red-500 p-8 sm:p-12 rounded">
              {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "white") }}
            </div>
          </div>
        </div>
        <div class="order-1">
          <h2 class="text-xl font-semibold dark:text-white mb-3">Colored backgrounds</h2>
          <p class="text-gray-500 dark:text-gray-300 mb-4">
            White logo mark on colored backgrounds.
          </p>
          <p class="text-gray-700 dark:text-gray-300 mb-4">
            The white logo mark provides contrast on colored backgrounds.
            Perfect for more fun design contexts.
          </p>
        </div>
      </section>

      <!-- black logo on pastel backgrounds section -->
      <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
        <div class="order-2">
          <div class="grid grid-cols-2 gap-2">
            <div class="bg-green-200 p-8 sm:p-12 rounded">
              {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
            </div>
            <div class="bg-blue-200 p-8 sm:p-12 rounded">
              {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
            </div>
            <div class="bg-yellow-200 p-8 sm:p-12 rounded">
              {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
            </div>
            <div class="bg-pink-200 p-8 sm:p-12 rounded">
              {{ template "fragments/dolly/logo" (dict "Classes" "w-full max-w-16 mx-auto" "FillColor" "black") }}
            </div>
          </div>
        </div>
        <div class="order-1">
          <h2 class="text-xl font-semibold dark:text-white mb-3">Lighter backgrounds</h2>
          <p class="text-gray-500 dark:text-gray-300 mb-4">
            Dark logo mark on lighter, pastel backgrounds.
          </p>
          <p class="text-gray-700 dark:text-gray-300 mb-4">
            The dark logo mark works beautifully on pastel backgrounds,
            providing crisp contrast.
          </p>
        </div>
      </section>

      <!-- recoloring section -->
      <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
        <div class="order-2">
          <div class="bg-yellow-100 border border-yellow-200 p-8 sm:p-16 rounded">
            {{ template "fragments/dolly/logotype" (dict "Classes" "w-full max-w-sm mx-auto opacity-60 sepia contrast-75 saturate-50" "FillColor" "black") }}
          </div>
        </div>
        <div class="order-1">
          <h2 class="text-xl font-semibold dark:text-white mb-3">Recoloring</h2>
          <p class="text-gray-500 dark:text-gray-300 mb-4">
            Custom coloring of the logotype is permitted.
          </p>
          <p class="text-gray-700 dark:text-gray-300 mb-4">
            Recoloring the logotype is allowed as long as readability is maintained.
          </p>
          <p class="text-gray-700 dark:text-gray-300 text-sm">
            <strong>Example:</strong> Gray/sand colored logotype on a light yellow/tan background.
          </p>
        </div>
      </section>

    </div>
  </main>
</div>

<script>
  (function () {
    function downloadSvg(svg, filename) {
      var clone = svg.cloneNode(true);
      // strip tailwind utility classes — they're meaningless in a standalone file
      clone.removeAttribute('class');
      clone.querySelectorAll('[class]').forEach(function (el) { el.removeAttribute('class'); });
      if (!clone.getAttribute('xmlns')) {
        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
      }
      var data = '<?xml version="1.0" encoding="UTF-8"?>\n' + new XMLSerializer().serializeToString(clone);
      var url = URL.createObjectURL(new Blob([data], { type: 'image/svg+xml' }));
      var a = document.createElement('a');
      a.href = url;
      a.download = filename || 'tangled.svg';
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
    }

    document.querySelectorAll('[data-download]').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var container = document.querySelector(btn.dataset.download);
        if (!container) return;
        var svg = container.querySelector('svg');
        if (!svg) return;
        downloadSvg(svg, container.dataset.filename);
      });
    });
  })();
</script>
{{ end }}
