import {
  Component,
  createEffect,
  createMemo,
  FlowComponent,
  onCleanup,
  onMount,
  JSX,
  useContext,
  splitProps,
  createSignal,
  Show,
  For,
  untrack,
  createResource,
} from "solid-js";
import { createStore } from "solid-js/store";
import LufraiLogo from "~icons/custom/lufrai-logo";
import AppIcon from "~icons/custom/icon";
import ExternalLinkIcon from "~icons/carbon/launch";
import WarningIcon from "~icons/carbon/warning-alt-filled";
import LaunchIcon from "~icons/carbon/edit";
import DonationIcon from "~icons/bxs/donate-heart";
import FavoriteIcon from "~icons/carbon/favorite";
import FavoriteHalfIcon from "~icons/carbon/favorite-half";
import FavoriteFilledIcon from "~icons/carbon/favorite-filled";
import WatermarkIcon from "~icons/carbon/bullhorn";
import FreedomIcon from "~icons/noto/butterfly";
import FreeIcon from "~icons/noto/seedling";
import PrivacyIcon from "~icons/noto/princess";
import AgileIcon from "~icons/noto/person-bouncing-ball";
import ResultIcon from "~icons/noto/chequered-flag";
import HugIcon from "~icons/noto/hugging-face";
import VideoIcon from "~icons/carbon/video-filled";
import CloseIcon from "~icons/carbon/close-outline";
import Modal, { ModalCloseButton } from "./Modal";
import { LocalStoreContext } from "~/stores";
import createAccordion from "./Accordion";
import typer from "typer-js";
import "typer-js/dist/typer.min.css";
import {
  externalLink,
  getDisplayDate,
  getDomain,
  getHost,
  onClickFocus,
} from "~/util";
import { capitalize, clamp, shuffle } from "froebel";
import { markdownHelpUrl } from "./Markdown";
import AgileCalculator from "./AgileCalculator";
import server from "solid-start/server";
import { getLikes, increaseLikes } from "~/server/likes";
export const description =
  "Räppli ist eine freie Web App zur Erstellung von Schweizerischen Rechnungen inklusive QR-Code. Erfasse deine Rechnungspositionen und erhalte unmittelbar eine druckbare Rechnung.";

const externalLinkClass = "inline-flex items-center gap-1";
import ConfettiExplosion from "solid-confetti-explosion";
// TODO: after solid-start update >= alpha.95, switch to lazy
// const ConfettiExplosion = lazy(() => import("solid-confetti-explosion"));

const ExternalLink: FlowComponent<
  JSX.AnchorHTMLAttributes<HTMLAnchorElement>
> = (p) => {
  const [props, rest] = splitProps(p, ["children"]);
  return (
    <a class={externalLinkClass} {...externalLink} {...rest}>
      {props.children}
      <ExternalLinkIcon />
    </a>
  );
};

const WelcomeModal: Component = (props) => {
  const [localState, setLocalState, localStateMounted] =
    useContext(LocalStoreContext)!;
  const [AccordionItem] = createAccordion();
  let subtitleEl: HTMLSpanElement = undefined!;
  const isOpen = createMemo(() => {
    return localStateMounted() && localState.showWelcome;
  });
  const [showTrailer, setShowTrailer] = createSignal(false);
  const increaseCount_ = server(increaseLikes);
  const [likes] = createResource(server(getLikes));

  onMount(function () {
    let adjectives = [
      "Schweizerischen",
      "anständigen",
      "umfassenden",
      "erfrischenden",
      "erfreulichen",
      "sauberen",
      "übersichtlichen",
    ];
    let nouns = ["Rechnung", "Auftragsbestätigung", "Offerte"];

    let combinations: [string, string][] = [];
    for (const adjective of adjectives) {
      for (const noun of nouns) {
        combinations.push([adjective, noun]);
      }
    }
    const firstCombination = combinations.splice(0, 1)[0];
    combinations = shuffle(combinations);
    combinations.unshift(firstCombination!);

    let typerInstance = typer(subtitleEl, { min: 60, max: 160 });

    let lastAdjective = "";
    let lastNoun = "";
    for (const [adjective, noun] of combinations) {
      const first = lastAdjective === "";

      if (lastAdjective === adjective) {
        typerInstance.back(lastNoun.length, 80).continue(noun);
      } else {
        const method = first ? "line" : "continue";
        typerInstance
          .back("all", 65)
          [method](
            `${adjective} ${noun}`,
            first ? { min: 60, max: 70 } : undefined
          );
      }

      typerInstance.pause(first ? 4181 : 6765);

      lastNoun = noun;
      lastAdjective = adjective;
    }

    typerInstance.back("all", 50).repeat(Infinity);

    let halted = false;

    createEffect(function () {
      if (!isOpen()) {
        halted = typerInstance.halt() === undefined;
      } else {
        try {
          // typer-js has some weird logic how it handles halt / resume. Essentially if halt wasn't executed before of resume, resume breaks completely
          halted && typerInstance.resume();
        } catch (err) {
          if (!(err as TypeError).message.endsWith("is not a function")) {
            console.dir(err);
          }
        }
        halted = false;
      }
    });

    onCleanup(function () {
      typerInstance.kill();
    });
  });

  const ShareonLink: Component<{ provider: string; via?: string }> = (
    props
  ) => (
    <a
      class={props.provider + " shadow"}
      title={capitalize(props.provider)}
      data-via={props.via}
      aria-label={`Share on ${capitalize(props.provider)}`}
    ></a>
  );

  // I hope Randomness will guarantee a fair sequence <3
  const thankYouRahelAndFredi = shuffle([
    <>
      Fredi Niklaus (
      <a
        class={externalLinkClass}
        href="https://www.remedyit.ch/"
        {...externalLink}
      >
        RemedyIT <ExternalLinkIcon />
      </a>
      )
    </>,
    "Rahel Lutz",
  ]);
  thankYouRahelAndFredi.splice(1, 0, " und ");
  const [likeCount, setLikeCount] = createSignal(0);
  const [confetti, setConfetti] = createStore([false, false, false]);

  const confettiDuration = 2000;
  createEffect(function () {
    if (likeCount() == 0) {
      return;
    }
    untrack(function () {
      for (const idx of confetti.keys()) {
        if (confetti[idx]) {
          continue;
        }

        setConfetti(idx, true);
        setTimeout(
          () => setConfetti(idx, false),
          (confettiDuration / 100) * 80
        );
        break;
      }
    });
  });

  return (
    <Modal open={isOpen()}>
      <div class="hidden lg:block">
        <ModalCloseButton onClick={() => setLocalState("showWelcome", false)} />
      </div>
      <div class="max-h-[60vh] overflow-y-auto px-2">
        <div class="min-h-[60vh] flex items-center justify-center">
          <div>
            <div class="flex flex-col items-center justify-around">
              <div class="mt-3 mb-3 text-6xl lg:text-8xl flex items-end lg:w-[370px] justify-between gap-2 lg:gap-0 font-bold tracking-tighter leading-none text-swiss-red fill-current">
                <AppIcon class="w-auto h-[0.9em]" />
                <div>Räppli</div>
              </div>
              <div class="flex flex-col items-stretch">
                <div class="flex justify-center">
                  <div class="text-gray-800 text-sm lg:text-base tracking-widest mb-4 flex gap-1 flex-col items-center lg:flex-row">
                    Der reibungslose Weg zur{" "}
                    <span class="ignore-white-space" ref={subtitleEl}></span>
                  </div>
                </div>
              </div>
              <div class="flex justify-end lg:w-[410px] max-w-full">
                <a
                  href="https://lufrai.org"
                  class="text-lufrai-primary-darker hover:text-lufrai-primary transition-colors fill-current text-base flex items-center leading-tight gap-2 tracking-tighter font-bold border-b border-lufrai-primary-light border-opacity-20 pb-1"
                  {...externalLink}
                >
                  <span>made</span>
                  <span>by</span>
                  <LufraiLogo class="w-auto h-[1.5em]" />
                </a>
              </div>
            </div>

            <Show when={showTrailer()}>
              {() => (
                <div class="absolute top-0 left-0 h-full w-full flex flex-col justify-center items-center gap-8 bg-black backdrop-blur bg-opacity-90 [@supports(backdrop-filter:blur(0))]:bg-opacity-70 z-10">
                  <video
                    controls
                    autoplay
                    onended={() => setShowTrailer(false)}
                  >
                    <source src="/RaeppliTrailer.mp4" type="video/mp4" />
                  </video>
                  <button
                    class="btn btn-accent btn-xl gap-2"
                    onClick={() => setShowTrailer(false)}
                  >
                    <CloseIcon />
                    Schliessen
                  </button>
                </div>
              )}
            </Show>

            <div class="mt-24 text-base grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 text-center gap-y-3 md:gap-y-5 gap-x-2 lg:gap-x-8 items-center justify-center">
              <button
                class="shadow-md btn btn-secondary hover:ring-2 ring-offset-2 ring-secondary bg-pink-600 hover gap-2 whitespace-normal flex-nowrap"
                onClick={() => setShowTrailer(true)}
              >
                <VideoIcon />
                <span>
                  Trailer <span class="hidden xl:inline">anschauen</span>
                </span>
              </button>
              <a
                class="link text-secondary-focus hover:text-secondary"
                href="#welcome-quickstart"
              >
                Einleitung
              </a>
              <a
                class="link text-secondary-focus hover:text-secondary"
                href="#welcome-why-free"
              >
                <strong>Komplett kostenlos</strong>!
              </a>
              <a
                class="link text-secondary-focus hover:text-secondary"
                href="#welcome-lufrai"
              >
                Was ist Lufrai?
              </a>
              <a
                class="link text-secondary-focus hover:text-secondary"
                href="#welcome-patron"
              >
                Das Projekt unterstützen
              </a>
              <a
                class="link text-secondary-focus hover:text-secondary"
                href="#welcome-opensource"
              >
                Open Source
              </a>
              <a
                class="link text-secondary-focus hover:text-secondary"
                href="#welcome-thankyou"
              >
                Danksagungen
              </a>
              <a
                class="link text-secondary-focus hover:text-secondary"
                title="Häufig gestellte Fragen"
                href="#welcome-faq"
              >
                FAQ
              </a>
            </div>

            <div
              class="mt-16 flex flex-wrap gap-3 items-center justify-center"
              id="welcome-social"
            >
              <div class="text-sm text-slate-600">Teile es auf:</div>
              <div
                class="shareon flex flex-wrap items-center justify-center"
                data-title="Hast du schon von Räppli gehört? Es ist ein praktisches Web App, womit Schweizer QR Rechnungen inkl. Rechnungspositionen erstellt werden können und es ist komplett kostenlos! Probiere es aus unter:"
                data-url={getHost()}
              >
                <ShareonLink provider="mastodon" />
                <ShareonLink provider="telegram" />
                <ShareonLink provider="reddit" />
                <ShareonLink provider="odnoklassniki" />
                <ShareonLink provider="pinterest" />
                <ShareonLink provider="pocket" />
                <ShareonLink provider="viber" />
                <ShareonLink provider="vkontakte" />
                <ShareonLink provider="linkedin" />
                <ShareonLink provider="twitter" via="katy_wings" />
                <ShareonLink provider="facebook" />
                <ShareonLink provider="whatsapp" />
              </div>
            </div>
          </div>
        </div>

        <div class="mt-20 prose text-opacity-100">
          <section>
            <h2 id="welcome-quickstart">Einleitung</h2>
            <p class="text-xl font-light lead">{description}</p>
            <p>
              Du möchtest dich <strong>selbstständig machen</strong>, gründest
              gerade ein <strong>Startup</strong> oder einen{" "}
              <strong>Verein</strong> und musst in der Lage sein{" "}
              <strong>Rechnungen, Offerten und Auftragsbestätigungen</strong> zu
              verschicken? Du möchtest dabei <strong>unabhängig</strong>{" "}
              bleiben? Dann bist du hier genau richtig!
            </p>
            <p>Vorteile von Räppli:</p>
            <ul>
              <li>
                <ResultIcon class="inline-block scale-150 mr-2" /> Die
                praktische Vorschau zeigt dir sofort das Endergebnis.
              </li>
              <li>
                <PrivacyIcon class="inline-block scale-150 mr-2" />
                Deine Daten bleiben{" "}
                <a onClick={onClickFocus} href="#welcome-privacy">
                  bei dir
                </a>
                .
              </li>
              <li>
                <FreeIcon class="inline-block scale-150 mr-2" /> Räppli ist und
                bleibt <a href="#welcome-why-free">komplett kostenlos</a>!
              </li>
              <li>
                <FreedomIcon class="inline-block scale-150 mr-2" /> Der
                Quellcode ist{" "}
                <a href="#welcome-opensource">vollumfänglich öffentlich</a>.
                Räppli kann selbst gehostet werden!
              </li>
              <li>
                <AgileIcon class="inline-block scale-150 mr-2" /> Du arbeitest{" "}
                <a onClick={onClickFocus} href="#welcome-agile">
                  agil
                </a>
                ? Räppli kann dir dabei helfen einen Preis zu kalkulieren!
              </li>
            </ul>
          </section>

          <section class="mt-16">
            <h2 id="welcome-why-free">
              Wieso ist <span class="text-swiss-red">Räppli</span> komplett{" "}
              <span class="text-swiss-red">kostenlos</span>?
            </h2>
            <p class="text-xl font-light lead">
              Weil moderne Rechnungsstellung für alle Menschen möglich sein
              sollte!
            </p>
            <p>
              Jeder Selbstständige kommt wohl irgendwann an den Punkt, dass er
              eine Rechnung schreiben muss. Doch eine moderne Rechnung zu
              schreiben, die heutige Erwartungen erfüllt, ist gar nicht so
              einfach und braucht viel Zeit. So werden viele Selbstständige zum
              Einsatz von komplexer und oftmals teurer "ERP"-Software oder zu
              Outsourcing gedrängt. Menschen die sich mit wenig Startkapital
              selbstständig machen wollen, stehen vor einer schwierigen Wahl.
            </p>
            <p>
              Eines der wesentlichen Ziele von{" "}
              <a href="#welcome-lufrai">Lufrai</a> ist, Menschen dabei zu
              unterstützen aus eigener Kraft unabhängig zu werden und ihrem
              eigenen Lebenssinn zu folgen.{" "}
              <strong>
                <i>Befreie deine Stimme!</i>
              </strong>
            </p>
            <p>
              Räppli soll ein Beweis dafür darstellen, dass Selbstlosigkeit auch
              ohne teure, zentralisierte, staatliche Lösungen möglich ist. Der
              gesamte Quellcode von Räppli steht offen verfügbar.{" "}
              <a href="#welcome-opensource">Erfahre mehr</a>
            </p>
            <p>
              Zu guter Letzt ist Räppli auch eine Referenzarbeit. Sie soll
              zeigen was ich (Katja) als Web-Entwicklerin drauf habe. Denn im
              mündlichen Gespräch verkaufe ich meine Fähigkeiten leider wie eine
              absolute Niete und wirke mit einer Grösse von 1.9 Metern etwas
              abschreckend. Verkauf ist nicht meine Stärke.
            </p>
          </section>

          <section class="mt-16">
            <h2 id="welcome-lufrai">
              Was ist <span class="text-lufrai-primary">Lufrai</span>?
            </h2>
            <p>
              Lufrai ist die Einzelfirma von{" "}
              <a
                class={externalLinkClass}
                href="https://lufrai.org/katjalutz"
                {...externalLink}
              >
                Katja Lutz <ExternalLinkIcon />
              </a>
              . Sie setzt sich als Web-Entwicklerin, Künstlerin und Aktivistin
              für eine unabhängige, freie Schweiz ein und unterstützt ihre
              souveränen Mitmenschen, das Steuer selbst in die Hand zu nehmen.
              <a
                class="btn btn-sm inline-flex ml-3 items-center gap-1"
                href="https://lufrai.org"
                {...externalLink}
              >
                Erfahre mehr <ExternalLinkIcon />
              </a>
            </p>
            <p>Grundsätze:</p>
            <ol class="prose-sm">
              <li>Zuoberst steht der Mensch.</li>
              <li>
                Selbstverantwortlich zu leben heisst, zu geben und anzunehmen.
                <br />
                Miteinander zu leben heisst, zu vergeben.
              </li>
              <li>
                Erkenntnis kommt von Innen und Altruismus kann nicht erzwungen
                werden.
              </li>
              <li>
                Nötigung drängt den Horizont zusammen, Aufklärung erweitert ihn.
              </li>
              <li>
                Gleichheit setzt voraus, sich auf Augenhöhe zu begegnen und
                Privatsphäre zu respektieren.
              </li>
              <li>
                Achtsam ist, wer global denkt, aber lokal handelt. <br />
                Gute Entscheidungen trifft, wer die Konsequenzen begreift.
              </li>
              <li>
                Der Technik die Entscheidung zu überlassen heisst, selbst zur
                Maschine zu werden.
              </li>
              <li>
                Schönheit ist nicht selbstverständlich, sie entspringt aus der
                Bereitschaft zur Veränderung.
              </li>
              <li>
                Anführer zeichnen sich nicht durch ihre Lautstärke und Forderung
                aus, sondern durch Selbstlosigkeit und Transparenz.
              </li>
              <li>Zensur betreibt, wer etwas verbergen will.</li>
            </ol>
          </section>

          <section class="mt-16">
            <h2 id="welcome-patron">Das Projekt unterstützen</h2>
            <p class="text-xl font-light lead">
              Danke dass du das Projekt und damit auch den Fortbestand von
              Lufrai unterstützen möchtest!
            </p>
            <h3>Teilen</h3>
            <p>
              <a href="#welcome-social">Teile</a> Räppi unter deinen Freunden
              und Bekannten was das Zeug hält! Lufrai investiert kein Geld in
              teures Marketing, aus der Überzeugung, dass es auf unserer Welt
              bereits genug davon gibt.
            </p>
            <h3>Spenden</h3>
            <p>
              Räppli 1.0 wurde mit einem Aufwand von fast 4 Wochen entwickelt, "
              <a href="#welcome-lufrai">Lufrai - Katja Lutz</a>" hat somit etwa
              18'000 CHF in die Verwirklichung von diesem Projekt investiert.{" "}
              <strong>
                Herzlichen Dank, dass du dich daran beteiligen möchtest!
              </strong>
            </p>
            <a
              href="https://lufrai.org/spenden/"
              class={`btn btn-sm btn-secondary bg-purple-600 border-purple-600 ${externalLinkClass}`}
              {...externalLink}
            >
              Kontoinformationen <ExternalLinkIcon />
            </a>
            <h3>Mitwirkung / Feedback</h3>
            <p>
              Für Feedbacks, bitte beachte den entsprechenden{" "}
              <a href="#welcome-feedback" onClick={onClickFocus}>
                FAQ-Abschnitt
              </a>
              .
            </p>
            <p>
              Du bist ein Web-Entwickler, verstehst Javascript / Typescript wie
              deine Westentasche und möchtest Räppli verbessern? Hurra! Bitte
              schaue dir den <a href="#welcome-opensource">Open Source</a>{" "}
              Abschnitt an.
            </p>
          </section>

          <section class="mt-16">
            <h2 id="welcome-opensource">Open Source</h2>
            <p>
              Du hast richtig gehört, Räppli ist Open Source! Jeder kann Räppli
              kopieren, verteilen und erweitern. Du brauchst also keine Angst zu
              haben, dass du irgendwann keine Rechnungen mehr schreiben darfst.
              Lizenziert ist Räppli mit{" "}
              <ExternalLink href="https://git.lufrai.com/rappli/rappli/src/branch/master/LICENSE">
                MIT
              </ExternalLink>
              .
              <a
                class="btn btn-sm inline-flex ml-3 items-center gap-1"
                href="https://git.lufrai.com/rappli/rappli"
                {...externalLink}
              >
                Git-Repository
                <ExternalLinkIcon />
              </a>
              <br />
              <strong>
                Falls du dich dort zur Mitwirkung registrieren möchtest: Bitte
                schreibe mir nach deiner Registrierung ein kurzes Mail mit
                deiner Motivation an "contact(at)lufrai.org", damit ich dich
                freischalten kann.
              </strong>
            </p>
            <p>
              Eingesetzte Technologien (<small>Nur um einige zu nennen</small>):
            </p>
            <ul>
              <li>
                <a
                  class={externalLinkClass}
                  href="https://www.solidjs.com/"
                  {...externalLink}
                >
                  Solid
                  <ExternalLinkIcon />
                </a>
              </li>
              <li>
                <a
                  class={externalLinkClass}
                  href="https://tailwindcss.com/"
                  {...externalLink}
                >
                  Tailwind CSS
                  <ExternalLinkIcon />
                </a>
              </li>
              <li>
                <a
                  class={externalLinkClass}
                  href="https://daisyui.com/"
                  {...externalLink}
                >
                  daisyUI
                  <ExternalLinkIcon />
                </a>
              </li>
              <li>
                <a
                  class={externalLinkClass}
                  href="https://sortablejs.github.io/Sortable/"
                  {...externalLink}
                >
                  Sortable
                  <ExternalLinkIcon />
                </a>
              </li>
              <li>
                <a
                  class={externalLinkClass}
                  href="https://remark.js.org/"
                  {...externalLink}
                >
                  remark
                  <ExternalLinkIcon />
                </a>
              </li>
            </ul>
          </section>

          <section class="mt-16">
            <h2 id="welcome-thankyou">Danksagungen</h2>
            <p>
              An dieser Stelle möchte ich (Katja) mich bei der Community von{" "}
              <a
                class={externalLinkClass}
                href="https://www.solidjs.com/"
                {...externalLink}
              >
                Solid <ExternalLinkIcon />
              </a>{" "}
              bedanken, nicht nur für ihr verblüffend effektives Open Source
              Web-Framework, sondern auch für ihre Offenheit, Anregungen und
              cleveren Tipps!
            </p>
            <p>
              Ausserdem möchte ich mich insbesondere bei {thankYouRahelAndFredi}{" "}
              herzlichst bedanken, welche mir stets bei der Umsetzung meiner
              kurligen Projekte unterstützend zur Seite standen und mich immer
              inspirierten, einen Schritt weiterzugehen!
            </p>
            <p>
              Mein herzlicher Dank gilt zudem auch{" "}
              <ExternalLink href="https://www.kohei.dev/en-us">
                Kohei Asai
              </ExternalLink>{" "}
              <small>
                (
                <ExternalLink href="https://twitter.com/axross_">
                  Twitter
                </ExternalLink>
                )
              </small>
              , welcher mir sehr grosszügig seine Rechte am Paketnamen "rappli"
              auf{" "}
              <ExternalLink href="https://npmjs.com">npmjs.com</ExternalLink>{" "}
              übertragen hat.
            </p>
          </section>

          <section class="mt-16">
            <h2 id="welcome-faq">Häufig gestellte Fragen</h2>
            <div class="text-black">
              <AccordionItem
                id="welcome-privacy"
                label={"1. Wo werden welche Daten gespeichert?"}
                alignCenter={false}
              >
                <ul>
                  <li>
                    Deine eingegebenen Daten werden an keine Server übermittelt.
                  </li>
                  <li>
                    Einige deiner Daten, wie z.B. Bankverbindung, Logo und
                    Zahlungsbedingungen verbleiben im{" "}
                    <span
                      class="text-title-border"
                      title="Der sogennante localStorage"
                    >
                      Speicher
                    </span>{" "}
                    von deinem Browser. So musst du sie nicht jedes Mal neu
                    erfassen, wenn du eine Rechnung schreiben willst.
                  </li>
                  <li>
                    Damit das Internet und somit auch Räppli überhaupt
                    funktionieren, müssen jedoch unweigerlich einige Daten
                    übertragen werden, wie z.B. deine IP-Adresse. Erfahre{" "}
                    <a
                      class={externalLinkClass}
                      href="https://t3n.de/news/tcp-ip-internet-grundlagen-755667/"
                      {...externalLink}
                    >
                      hier
                      <ExternalLinkIcon />
                    </a>{" "}
                    wie das Internet funktioniert.
                  </li>
                </ul>
              </AccordionItem>

              <AccordionItem
                label="2. Ich habe vergessen zu speichern, was nun?!"
                alignCenter={false}
              >
                Deine Daten werden auf keinem Server gespeichert. Lerne aus dem
                Malheur und speichere ab sofort regelmässig{" "}
                <HugIcon class="inline" />!
              </AccordionItem>

              <AccordionItem label="3. Werden meine Nutzungsdaten zu Marketingzwecken gesammelt?">
                <strong>Nein</strong>, vorausgesetzt du verwendest das
                offizielle Räppli über rappli.ch und keine modizifierte Version.
                Lufrai legt Wert auf deine Privatsphäre. Es werden keine
                Nutzungsdaten an Google, Facebook oder ähnliche Riesen
                übermittelt.
              </AccordionItem>

              <AccordionItem
                id="welcome-feedback"
                label={
                  <>
                    4. Ich habe einen Anpassungswunsch!
                    <br />
                    Kann die App bitte gratis angepasst werden?
                  </>
                }
                alignCenter={false}
              >
                Räppli ist <a href="#welcome-opensource">Open Source</a> und
                wird grundsätzlich von <a href="#welcome-lufrai">Lufrai</a>{" "}
                weiterentwickelt. Für eine optimale Weiterentwicklung ist dein
                Feedback sehr wichtig und ich (Katja) bin für dein Feedback und
                deine Ideen dankbar! Jedoch besteht keine Garantie dafür, dass
                jedes Feedback beantwortet / umgesetzt werden kann, die
                Entwicklung ist aufwändig und kein Wunschkonzert. Kontaktiere
                Lufrai auf{" "}
                <a
                  href="https://lufrai.org/impressum/"
                  class={externalLinkClass}
                  {...externalLink}
                >
                  Kontakt <ExternalLinkIcon />
                </a>{" "}
                oder erstelle ein Issue auf dem{" "}
                <a href="#welcome-opensource">Git-Repository</a>.
              </AccordionItem>

              <AccordionItem
                id="welcome-agile"
                label={
                  <div>
                    5. Wie funktionieren <strong>Agile Positionen</strong>?
                  </div>
                }
                alignCenter={false}
              >
                <p class="!mt-0 text-lg font-light lead">
                  Agile Positionen können dir dabei helfen, Arbeitsaufwand
                  (Zeit) zu schätzen.
                </p>
                <p>
                  Der Preis von agilen Positionen wird aus Story Points, einem
                  Umrechnungssatz "Stunden pro Story Point", dem Risiko Faktor
                  und dem Stundensatz ("Einzelpreis") berechnet.
                </p>
                <h3>Was sind Story Points?</h3>
                <p>
                  Story Points sind relative Punktzahlen. Weise all deinen
                  Positionen Story Points zu, die im Verhältnis zueinander
                  stimmen. Vergleiche dazu deine Positionen und überlege dir,
                  welche davon schwieriger sind und welche einfacher. Wie viel
                  schwieriger ist eine Position (Arbeitsaufwand) im Vergleich zu
                  einer anderen?
                </p>
                <p>
                  Nachdem du die Story Points zugewiesen hast, kannst du dir
                  überlegen, wie viel Stunden ein einzelner Story Point wert
                  ist, trage diesen in den "Dokument"-Einstellungen unter
                  "Stunden pro Story Point" ein.
                </p>
                <a
                  href="https://www.agile-academy.com/de/product-owner/was-sind-story-points/"
                  class={externalLinkClass}
                  {...externalLink}
                >
                  Erfahre mehr über Story Points
                  <ExternalLinkIcon />
                </a>
                <h3>Was ist der Risiko Faktor?</h3>
                <p>
                  Aufwandschätzungen sind eine riskante Angelegenheit. Räppli
                  erlaubt dir deshalb für den geschätzten, optimalen Fall "Story
                  Points Minimum" und für den schlimmsten Fall "Story Points
                  Maximum" anzugeben.
                  <br />
                  <strong>
                    Der Risiko Faktor wird in den "Dokument"-Einstellungen
                    eingegeben und er entscheidet über die Gewichtung der
                    minimalen und maximalen Story Points:
                  </strong>
                </p>
                <ul class="mb-8">
                  <li>
                    Risiko Faktor von <span class="underline">0%</span>: Es
                    existiert kein Risiko, <strong>nur die minimalen</strong>{" "}
                    Story Points werden beachtet!
                  </li>
                  <li>
                    Risiko Faktor von <span class="underline">70%</span>:{" "}
                    <strong>30% von den Minimalen</strong>, und{" "}
                    <strong>70% von den maximalen</strong> Story Points werden
                    beachtet.
                  </li>
                  <li>
                    Risiko Faktor von <span class="underline">100%</span>: Der
                    Worst-Case ist alternativlos,{" "}
                    <strong>nur die maximalen</strong> Story Points werden
                    beachtet!
                  </li>
                </ul>

                <AgileCalculator />
              </AccordionItem>

              <AccordionItem
                label={"6. Welche Geräte werden unterstützt?"}
                alignCenter={false}
              >
                <p class="!mt-0">
                  Räppli wurde für Geräte mit grösseren Bildschirmen wie z.B.
                  Laptops und Computer programmiert. Die besten Druckergebnisse
                  werden erfahrungsgemäss mit dem Browser "Mozilla Firefox"
                  erreicht, jedoch sind auch "Google Chrome" basierte Browser
                  geeignet. Verwende einen aktuellen Browser!
                </p>
              </AccordionItem>

              <AccordionItem
                label={
                  <div>
                    7. Können Fliesstexte formatiert werden?
                    <br />
                    Was ist <strong>Markdown</strong>?
                  </div>
                }
                alignCenter={false}
              >
                <p class="!mt-0 mb-1">
                  Du kannst deinen Text formatieren, indem du ihn mit ganz
                  bestimmten Zeichen versiehst! Welche Zeichen das sind, wird
                  durch den "Markdown"-Standard definiert.
                </p>
                <p class="mt-1">
                  Erfahre{" "}
                  <a
                    href={markdownHelpUrl}
                    class={externalLinkClass}
                    {...externalLink}
                  >
                    hier <ExternalLinkIcon />
                  </a>{" "}
                  wie Markdown im Detail funktioniert!
                </p>

                <strong>Kurzbeispiel:</strong>
                <div class="prose-sm">
                  <div class="grid grid-cols-2">
                    <p>Dein Text:</p>
                    <pre>
                      {["- *Pizza*", "- **Gemüse**", "- ***Salat***"].join(
                        "\n"
                      )}
                    </pre>
                    <p>Ausgabe:</p>
                    <div class="border border-slate-200">
                      <ul>
                        <li>
                          <i>Pizza</i>
                        </li>
                        <li>
                          <strong>Gemüse</strong>
                        </li>
                        <li>
                          <i>
                            <strong>Salat</strong>
                          </i>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </AccordionItem>

              <AccordionItem
                id="welcome-local-installation"
                label={<div>8. Kann Räppli lokal installiert werden?</div>}
                alignCenter={false}
              >
                <p class="!mt-0">
                  Räppli kann lokal installiert werden, jedoch ist es für den
                  Betrieb auf Servern optimiert. Das heisst: auch wenn du Räppli
                  installiert hast, musst du deinen Webbrowser nutzen, um Räppli
                  zu öffnen.
                </p>
                <p class="bg-slate-500/10 flex p-3 items-center gap-3 rounded">
                  <WarningIcon class="w-auto h-6 inline mr-1" />{" "}
                  <strong>
                    Für die Installation sind grundlegende Kenntnisse im Umgang
                    mit der Kommandozeile empfohlen!
                  </strong>
                </p>
                <h3>Voraussetzungen:</h3>
                <ul>
                  <li>
                    Installiere{" "}
                    <a
                      class={externalLinkClass}
                      href="https://nodejs.org/en/"
                      {...externalLink}
                    >
                      nodejs {">"}= 18 <ExternalLinkIcon />
                    </a>
                  </li>
                </ul>
                <h3>Installation Räppli</h3>
                <p>Führe folgenden Befehl aus:</p>
                <pre>npm install -g rappli</pre>
                <h3>Räppli starten</h3>
                <p>Führe folgenden Befehl aus, um Räppli zu starten</p>
                <pre>rappli</pre>
                <p>
                  Sobald die Meldung "Listening on port 3000" erscheint, kannst
                  du dein lokales Räppli auf deinem Browser über{" "}
                  <a href="http://localhost:3000" {...externalLink}>
                    http://localhost:3000
                  </a>{" "}
                  erreichen.
                </p>
              </AccordionItem>

              <AccordionItem
                label={
                  <div>
                    9. Wie präzise wurden die SIX QR-Rechnung Vorgaben
                    umgesetzt?
                  </div>
                }
                alignCenter={false}
              >
                <p class="!mt-0">
                  Es handelt sich bewusst nicht um eine Pixel-genaue Umsetzung
                  der Vorgaben von SIX. Das Design der QR-Rechnung orientiert
                  sich am Grundsatz des pragmatischen Perfektionismus. Das
                  heisst: es wurden die Möglichkeiten des Design Frameworks
                  "Tailwind CSS" genutzt, um die Vorgaben von SIX möglichst
                  genau umzusetzen, aber da dabei nicht die unerschöpflichen
                  Mittel der Schweizer Regierung zur Verfügung standen, wurde
                  das Rad nicht komplett neu erfunden.
                </p>
              </AccordionItem>

              <AccordionItem
                label={<div>10. Haftungsausschluss</div>}
                alignCenter={false}
              >
                <p class="!mt-0">
                  Räppli ({getDomain()}) verwendest du{" "}
                  <strong>eigenverantwortlich</strong>. "Lufrai - Katja Lutz"
                  (Einzelfirma) und "Katja Lutz" (Mensch) übernehmen keine
                  Haftung.
                </p>
                <p>
                  Es besteht kein Anspruch auf die Verfügbarkeit von{" "}
                  {getDomain()}. Falls du 100% sicher sein willst, dass du
                  Räppli auch in aussergewöhnlichen Zeiten verwenden kannst,
                  besorge dir den Quellcode jetzt und{" "}
                  <a href="#welcome-local-installation" onClick={onClickFocus}>
                    installiere Räppli lokal
                  </a>
                  .
                </p>
              </AccordionItem>
            </div>
          </section>
        </div>
      </div>
      <div class="mt-8 xl:mt-14 relative flex justify-center items-center gap-2 sm:gap-5 xl:gap-10">
        <a
          href="#welcome-patron"
          class="flex btn btn-sm btn-secondary bg-purple-600 border-purple-600 gap-2 transition-all shadow-lg hover:shadow-lg shadow-purple-300 hover:shadow-purple-500 hover:ring-2 ring-offset-2 ring-purple-500"
        >
          <DonationIcon />
          Spenden
        </a>
        <div
          class="hidden lg:flex form-control flex-row items-center gap-2 tooltip tooltip-accent"
          data-tip="Füge das Lufrai Logo zu deinem Dokument hinzu."
        >
          <input
            id="welcome-modal-show-watermark"
            checked={localState.showLufraiWatermark}
            class="checkbox checkbox-lg checkbox-accent shadow-md"
            type="checkbox"
            onClick={(evt) =>
              setLocalState("showLufraiWatermark", evt.currentTarget.checked)
            }
          />
          <label
            for="welcome-modal-show-watermark"
            class="btn btn-sm btn-accent gap-2 shadow-md"
          >
            <WatermarkIcon />
            Für Lufrai werben
          </label>
        </div>
        <div
          class="static md:relative lg:hidden tooltip tooltip-error"
          data-tip="Bitte verwende einen Laptop oder Computer mit einer
            Mindestbreite von 1024 Pixeln!"
        >
          <div class="btn hover:!bg-white hover:!text-black/50 btn-outline flex gap-2 transition-all shadow-indigo-300 hover:shadow-red-300 hover:ring-2 ring-offset-2 ring-red-400">
            <WarningIcon /> Loslegen
          </div>
        </div>
        <button
          class="btn relative border-red-600 bg-red-500 hover:bg-red-600 hover:border-pink-700 hover:ring-2 ring-offset-2 ring-pink-500 shadow-red-300 shadow-lg lg:shadow-md lg:shadow-red-300 hover:shadow-red-400 tooltip tooltip-error stroke-1 stroke-white"
          onClick={() => {
            setLikeCount(likeCount() + 1);
            increaseCount_();
          }}
          data-tip={(likes() || 0) + likeCount()}
        >
          <div
            class="flex justify-center transition-transform"
            style={{
              transform: `scale(${clamp(0.9, 0.9 + likeCount() / 12, 1.3)})`,
            }}
          >
            <Show when={likeCount() === 0}>
              <FavoriteIcon />
            </Show>
            <Show when={likeCount() === 1}>
              <FavoriteHalfIcon />
            </Show>
            <Show when={likeCount() > 1}>
              <FavoriteFilledIcon />
            </Show>
          </div>
          <span aria-disabled="true" class="text-xs text-orange-200 font-black">
            {Intl.NumberFormat("en-US", {
              notation: "compact",
              maximumFractionDigits: 1,
            }).format((likes() || 0) + likeCount())}
          </span>

          <For each={confetti}>
            {(v) => (
              <Show when={v}>
                <ConfettiExplosion
                  stageHeight={1500}
                  duration={confettiDuration}
                  force={1}
                  shouldDestroyAfterDone={true}
                />
              </Show>
            )}
          </For>
        </button>
        <button
          onClick={() => setLocalState("showWelcome", false)}
          class="hidden lg:flex btn btn-lg btn-primary gap-2 transition-all shadow-lg shadow-indigo-300 hover:shadow-indigo-500 hover:ring-2 ring-offset-2 ring-indigo-500"
        >
          <LaunchIcon />
          Loslegen
        </button>
      </div>
      <a
        href="https://git.lufrai.com/rappli/rappli/src/branch/master/CHANGELOG.md#changelog"
        class="hover:underline absolute bottom-8 right-8 text-xs text-black opacity-60 flex gap-3"
        {...externalLink}
      >
        <span>Version: {__APP_VERSION__}</span>
        <span>{getDisplayDate(new Date(__BUILD_TIME__))}</span>
      </a>
    </Modal>
  );
};

export default WelcomeModal;