import { ThemeToggle } from '../../infra/theme'
import { homeCards, repositoryUrl } from './config/home-screen.config'
import styles from './styles/home-screen.module.css'

const version = __BUILD_VERSION__ as string

export function HomeScreen() {
  return (
    <main className={styles.page}>
      <section className={styles.hero}>
        <h1 className={styles.title}>SLM Design</h1>
        <p className={styles.lead}>
          Scoped Layered Module Design — соглашения по архитектуре frontend-приложений:
          слои, модули, сегменты, публичные API и направление зависимостей.
        </p>

        <div className={styles.controls}>
          <a className={styles.repoLink} href={repositoryUrl} target="_blank" rel="noopener noreferrer">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z" />
            </svg>
            <span>Репозиторий</span>
          </a>
          <ThemeToggle className={styles.themeToggle} />
        </div>
      </section>

      <section className={styles.cards} aria-label="Быстрые переходы">
        {homeCards.map((card) => {
          if ('href' in card) {
            return (
              <a
                className={`${styles.card} ${styles.cardLink}`}
                href={card.href}
                download={'download' in card ? card.download : undefined}
                key={card.title}
              >
                <h2>{card.title}</h2>
                <p>{card.description}</p>
                <span className={styles.cardCta}>{card.cta}</span>
              </a>
            )
          }

          return (
            <article className={styles.card} key={card.title}>
              <h2>{card.title}</h2>
              <p>{card.description}</p>
              <div className={styles.cardActions}>
                {card.actions.map((action) => (
                  <a className={styles.cardAction} href={action.href} key={action.href}>
                    {action.label}
                  </a>
                ))}
              </div>
            </article>
          )
        })}
      </section>

      <footer className={styles.footer}>
        <span>{version}</span>
      </footer>
    </main>
  )
}