---
import { Image } from 'astro:assets';

import installedPlugins from '../../../docs/.gitbook/assets/installed-plugins.png';
import logViewer from '../../../docs/.gitbook/assets/log-viewer.png';
import playlistDetailView from '../../../docs/.gitbook/assets/playlist-detail-view.png';
import playlists from '../../../docs/.gitbook/assets/playlists.png';
import pluginStore from '../../../docs/.gitbook/assets/plugin-store.png';
import preferences from '../../../docs/.gitbook/assets/preferences.png';
import searchAlbums from '../../../docs/.gitbook/assets/search-albums.png';
import searchArtists from '../../../docs/.gitbook/assets/search-artists.png';
import searchTracks from '../../../docs/.gitbook/assets/search-tracks.png';
import whatsNew from '../../../docs/.gitbook/assets/whats-new.png';
import ThemeShowcase from './ThemeShowcase.astro';

type ScreenshotEntry = {
  src: typeof searchArtists;
  alt: string;
};

type Nuki = {
  src: string;
  alt: string;
};

type FeatureBlock = {
  heading: string;
  description: string;
  images: ScreenshotEntry[];
  layout: 'text-left' | 'text-right';
  nuki?: Nuki;
};

const featureBlocks: FeatureBlock[] = [
  {
    heading: 'Search',
    description:
      'Look up artists, albums, and tracks across multiple sources. More sources can be added with plugins.',
    images: [
      { src: searchArtists, alt: 'Search artists in Nuclear' },
      { src: searchAlbums, alt: 'Search albums in Nuclear' },
      { src: searchTracks, alt: 'Search tracks in Nuclear' },
    ],
    layout: 'text-left',
  },
  {
    heading: 'Playlists',
    description:
      'Put together playlists from any source. Reorder, rename, and come back to them later. Import from any service, or from JSON files.',
    images: [
      { src: playlists, alt: 'Playlists view in Nuclear' },
      { src: playlistDetailView, alt: 'Playlist detail view in Nuclear' },
    ],
    layout: 'text-right',
    nuki: {
      src: '/images/nuki-studying.png',
      alt: 'Nuki studying at a desk',
    },
  },
  {
    heading: 'Plugins',
    description:
      'Nuclear can be extended with a powerful plugin API. Auto-update is built in.',
    images: [
      { src: pluginStore, alt: 'Plugin store in Nuclear' },
      { src: installedPlugins, alt: 'Installed plugins in Nuclear' },
    ],
    layout: 'text-left',
    nuki: {
      src: '/images/nuki-ready-to-work.png',
      alt: 'Nuki holding a wrench and toolbox',
    },
  },
  {
    heading: 'Settings for everything',
    description:
      'Preferences for everything. Power users can use the built-in log viewer for easy debugging and support.',
    images: [
      { src: preferences, alt: 'Preferences in Nuclear' },
      { src: logViewer, alt: 'Log viewer in Nuclear' },
      { src: whatsNew, alt: "What's new in Nuclear" },
    ],
    layout: 'text-right',
  },
];
---

<div class="flex w-full flex-col gap-16 md:gap-24">
  {
    featureBlocks.map((block, blockIndex) => {
      const isReversed = block.layout === 'text-right';

      return (
        <>
          <div
            class:list={[
              'grid items-center gap-8 md:grid-cols-2 md:gap-12',
              isReversed && 'md:*:first:order-2',
            ]}
          >
            <div class="flex flex-col gap-4">
              <h3 class="font-heading text-[clamp(1.75rem,3vw,2.5rem)] leading-tight font-black tracking-wider uppercase">
                {block.heading}
              </h3>
              <p class="max-w-[38ch] text-base leading-relaxed opacity-75">
                {block.description}
              </p>
            </div>

            <div class="relative flex min-h-50 items-center justify-center perspective-distant">
              {block.nuki && (
                <img
                  src={block.nuki.src}
                  alt={block.nuki.alt}
                  class:list={[
                    'pointer-events-none absolute -bottom-4 z-10 w-40 select-none md:w-36 xl:w-50',
                    isReversed
                      ? 'right-4 rotate-6 md:-right-8'
                      : 'left-4 -rotate-6 md:-left-8',
                  ]}
                />
              )}
              {block.images.map((image, imageIndex) => (
                <div
                  class:list={[
                    'themed-border border-border shadow-shadow bg-primary block w-[75vw] shrink-0 overflow-hidden rounded-md transition duration-200 last:mr-0 hover:shadow-lg hover:brightness-90',
                    'mr-[-60vw] md:-mr-50 md:w-[320px] xl:-mr-70 xl:w-105',
                    isReversed
                      ? 'md:transform-[rotateY(28deg)]'
                      : 'md:transform-[rotateY(-28deg)]',
                  ]}
                  style={{ zIndex: imageIndex + 1 }}
                >
                  <Image
                    src={image.src}
                    alt={image.alt}
                    inferSize
                    widths={[720, 1080, 1440]}
                    sizes="(max-width: 768px) 75vw, (max-width: 1024px) 40vw, 420px"
                    quality={90}
                    class="block w-full"
                  />
                </div>
              ))}
            </div>
          </div>

          {blockIndex === 1 && <ThemeShowcase />}
        </>
      );
    })
  }
</div>
