import clsx from 'clsx';
import { Card } from '@/components/card';
import RoundStar from '@/assets/images/thick-round-star-6.svg';
import FatStar from '@/assets/images/fat-little-star.svg';
import LoveIcon from '@/assets/icons/love.svg';
import useLocale from '@/utils/useLocale';
import { locales } from './locales';
import styles from './featuresCards.module.scss';

export function FeaturesCards() {
  const t = useLocale(locales);
  const days = t('days') as string[];

  return (
    <section className={styles.cards} aria-label={t('section')}>
      <Card
        className={clsx(styles.card, styles.journey)}
        title={t('journeyTitle')}
        subtitle={t('journeyDescription')}
        classes={{ content: styles.content }}
      >
        <RoundStar className={styles.roundStar} aria-hidden="true" />
        <div className={styles.illustration} aria-hidden="true">
          <div className={styles.journeySheet}>
            <span className={styles.journeyLine} />
            <div className={styles.place}>
              <span className={styles.point}>{t('departureLetter')}</span>
              <div>
                <span>{t('from')}</span>
                <strong>{t('departurePoint')}</strong>
              </div>
            </div>
            <div className={styles.place}>
              <span className={clsx(styles.point, styles.destination)}>
                {t('destinationLetter')}
              </span>
              <div>
                <span>{t('to')}</span>
                <strong>{t('destinationPoint')}</strong>
              </div>
            </div>
          </div>
          <span className={styles.journeyChip}>
            {t('journeyChip')}
          </span>
        </div>
      </Card>

      <Card
        className={clsx(styles.card, styles.map)}
        title={t('mapTitle')}
        subtitle={t('mapDescription')}
        classes={{ content: styles.content }}
      >
        <div
          className={clsx(styles.illustration, styles.mapIllustration)}
          aria-hidden="true"
        >
          <div className={styles.mapSheet}>
            <svg viewBox="0 0 440 270" className={styles.mapDrawing}>
              <rect width="440" height="270" rx="28" fill="#AEC6FF" />
              <g fill="#D8E2FF">
                <rect x="20" y="18" width="99" height="59" rx="16" />
                <rect x="145" y="18" width="116" height="59" rx="16" />
                <rect x="286" y="18" width="134" height="59" rx="16" />
                <rect x="20" y="106" width="99" height="146" rx="16" />
                <rect x="145" y="106" width="116" height="67" rx="16" />
                <rect x="286" y="106" width="134" height="67" rx="16" />
                <rect x="145" y="200" width="116" height="52" rx="16" />
                <rect x="286" y="200" width="134" height="52" rx="16" />
              </g>
              <g stroke="#F3F3FA" strokeWidth="13" strokeLinecap="round">
                <path d="M132 0v270M274 0v270M0 92h440M132 187h308" />
              </g>
              <path
                d="M52 92h222v95h111"
                fill="none"
                stroke="#2C4678"
                strokeWidth="6"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <g fill="#fff" stroke="#2C4678" strokeWidth="5">
                <circle cx="52" cy="92" r="10" />
                <circle cx="274" cy="187" r="10" />
                <circle cx="385" cy="187" r="10" />
              </g>
              <circle
                className={styles.locationHalo}
                cx="198"
                cy="139"
                r="22"
                fill="#2C4678"
                fillOpacity="0.15"
              />
              <circle
                cx="198"
                cy="139"
                r="9"
                fill="#2C4678"
                stroke="#fff"
                strokeWidth="4"
              />
            </svg>
          </div>
          <span className={styles.mapChip}>
            <span className={styles.chipDot} />
            {t('mapChip')}
          </span>
        </div>
      </Card>

      <Card
        className={clsx(styles.card, styles.favorites)}
        title={t('favoritesTitle')}
        subtitle={t('favoritesDescription')}
        classes={{ content: styles.content }}
      >
        <FatStar className={styles.favoriteStar} aria-hidden="true" />
        <div className={styles.illustration} aria-hidden="true">
          <div className={clsx(styles.favoriteTicket, styles.homeTicket)}>
            <span className={styles.favoriteIcon}>
              <LoveIcon />
            </span>
            <div>
              <strong>{t('stopTitle')}</strong>
              <span>{t('favoriteStop')}</span>
            </div>
          </div>
          <div className={clsx(styles.favoriteTicket, styles.workTicket)}>
            <span className={styles.favoriteIcon}>
              <LoveIcon />
            </span>
            <div>
              <strong>{t('routeTitle')}</strong>
              <span>{t('favoriteRoute')}</span>
            </div>
          </div>
          <span className={styles.favoritesChip}>{t('favoritesChip')}</span>
        </div>
      </Card>

      <Card
        className={clsx(styles.card, styles.timetable)}
        title={t('timetableTitle')}
        subtitle={t('timetableDescription')}
        classes={{ content: styles.content }}
      >
        <RoundStar className={styles.timetableStar} aria-hidden="true" />
        <div className={styles.illustration} aria-hidden="true">
          <div className={styles.timetableSheet}>
            <div className={styles.dayTypes}>
              <span>{t('weekdays')}</span>
              <span>{t('weekends')}</span>
            </div>
            <div className={styles.days}>
              {days.map((day, index) => (
                <span
                  key={day}
                  className={index > 4 ? styles.weekend : undefined}
                >
                  {day}
                </span>
              ))}
            </div>
            <div className={styles.hours}>
              {['07', '08', '09'].map((hour) => (
                <div key={hour}>
                  <strong>{hour}</strong>
                  <span>10</span>
                  <span>25</span>
                  <span>40</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Card>
    </section>
  );
}