---
import { processMarkdown } from "@config/io/markdown";
import PipewireLogoSmall from "@public/assets/pipewire-logo-small.svg?raw";
import XOrgLogo from "@public/assets/x-org-logo.svg?raw";
import SwayLogo from "@public/assets/sway-logo.svg?raw";

let codeString = `\`\`\`qml
// a standard desktop window
FloatingWindow {
  Timer {
    id: timer // give the timer a name to refer to it by
    property bool invert: false // our custom property

    // change the value of invert every half second
    running: true; repeat: true
    interval: 500 // ms
    onTriggered: timer.invert = !timer.invert
  }

  // change the window's color when timer.invert changes
  color: timer.invert ? "purple" : "green"
}
\`\`\`
`;

const codeHTML = await processMarkdown(codeString);
---
<ul class="featurelist">
  <li class="featurelist-item hot-reloading left">
    <section class="feature-text">
      <h3 class="feature-title">See your changes in real time</h3>
      <span class="feature-subtitle">
        Quickshell loads changes as soon as they're saved, letting you iterate as fast as you can type.
      </span>
    </section>
    <section class="feature-showcase">
      <video class="feature-video" style="height: 21rem" preload="metadata" controls={false} autoplay loop>
        <source src="/assets/simple-shell-livereload.mp4" type="video/mp4"/>
      </video>
    </section>
  </li>
  <li class="featurelist-item qml right">
    <section class="feature-text">
      <h3 class="feature-title">Easy to use language</h3>
      <span class="feature-subtitle">
        Quickshell is configured in QML, a simple language designed for creating flexible user interfaces.
        It also has LSP support.
      </span>
    </section>
    <section class="feature-showcase" id="qml-showcase">
      <Fragment set:html={codeHTML}/>
    </section>
  </li>
  <li class="featurelist-item cloud-li left">
    <section class="feature-text">
      <h3 class="feature-title">Extensive integrations</h3>
      <span class="feature-subtitle">
        Quickshell comes with a large set of integrations, with new ones arriving all the time.
      </span>
    </section>
    <section class="feature-showcase cloud">
      <section class="feature-cloud">
      <span class="cloud-item hyprland">
        <img src={"/assets/hyprland-logo.ico"}/>
      </span>
      <span class="cloud-item wayland">
        <img src={"/assets/wayland-logo.png"}/>
      </span>
      <span class="cloud-item pipewire">
        <Fragment set:html={PipewireLogoSmall}/>
      </span>
      <span class="cloud-item x-org">
        <Fragment set:html={XOrgLogo}/>
      </span>
      <span class="cloud-item sway">
        <Fragment set:html={SwayLogo}/>
      </span>
      </section>
    </section>
  </li>
</ul>