import { serverClient } from "@/lib/trpc/server"

import Image from "@/components/Image"

import Navigation from "./Navigation"

import styles from "./footer.module.css"

export default async function Footer() {
  const footerData = await serverClient().contentstack.base.footer()
  return (
    <footer className={styles.container}>
      <div className={styles.content}>
        <h2 className={styles.contentHeading}>
          <Image
            alt={footerData.logoConnection.edges[0].node.title}
            data-nosvgsrc="/_static/img/scandic-logotype-white.png" // what here?
            height={23}
            src={footerData.logoConnection.edges[0].node.url}
            width={102.17}
          />
          <span className={styles.hiddenAccessible}>Scandic</span>
        </h2>
        <ul className={styles.footerSections}>
          {footerData.navigation.map((group) => (
            <li className={styles.footerLink} key={group.title}>
              <div className={styles.footerLinkHeader}>{group.title}</div>
            </li>
          ))}
        </ul>

        <div>
          <Navigation linkGroups={footerData.navigation} />

          <div className={styles.contentBottom}>
            <p className={styles.contentBottomTitle}>
              {footerData.about.title}
            </p>
            <div>
              <p className={styles.footerAboutText}>{footerData.about.text}</p>
              <p className={styles.contentBottomTitle}>
                {footerData.app_downloads.title}
              </p>
              <table className={styles.appDownloadTable}>
                <tbody>
                  <tr className={styles.tableRow}>
                    <td
                      className={styles.tableData}
                      style={{ textAlign: "right" }}
                    >
                      <a
                        title="Appstore"
                        href={footerData.app_downloads.app_store.href}
                        target="_blank"
                        rel="noopener"
                      >
                        <Image
                          alt={
                            footerData.app_downloads.app_store.imageConnection
                              .edges[0].node.title
                          }
                          height={45}
                          src={
                            footerData.app_downloads.app_store.imageConnection
                              .edges[0].node.url
                          }
                          width={135}
                        />
                      </a>
                    </td>
                    <td
                      className={styles.tableData}
                      style={{ textAlign: "left" }}
                    >
                      <a
                        title="Google Play"
                        href={footerData.app_downloads.google_play.href}
                        target="_blank"
                        rel="noopener"
                      >
                        <Image
                          alt={
                            footerData.app_downloads.google_play.imageConnection
                              .edges[0].node.title
                          }
                          height={45}
                          src={
                            footerData.app_downloads.google_play.imageConnection
                              .edges[0].node.url
                          }
                          width={135}
                        />
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div className={styles.sectionContainer}>
            <h3 className={styles.sectionTitle}>
              {footerData.social_media.title}
            </h3>
            <section className={styles.socialMediaIconsContainer}>
              <a
                href={footerData.social_media.facebook.href}
                rel="noopener"
                target="_blank"
                className={styles.socialMediaIconLink}
                title="Scandic on Facebook"
              >
                <svg
                  focusable="false"
                  className={styles.socialMediaIcon}
                  viewBox="0 0 150 150"
                  role="img"
                  aria-labelledby="social-icons facebook-icon"
                >
                  <title id="facebook-icon">
                    {footerData.social_media.facebook.title}
                  </title>
                  <use xlinkHref="/_static/img/icons/sprites.svg#icon-facebook"></use>
                </svg>
              </a>
              <a
                href={footerData.social_media.instagram.href}
                rel="noopener"
                target="_blank"
                className={styles.socialMediaIconLink}
                title="Scandic on Instagram"
              >
                <svg
                  focusable="false"
                  className={styles.socialMediaIcon}
                  viewBox="0 0 150 150"
                  role="img"
                  aria-labelledby="social-icons instagram-icon"
                >
                  <title id="instagram-icon">
                    {footerData.social_media.instagram.title}
                  </title>
                  <use xlinkHref="/_static/img/icons/sprites.svg#icon-instagram"></use>
                </svg>
              </a>
            </section>
          </div>
          <div className={styles.sectionContainer}>
            <h3 className={styles.sectionTitle}>
              {footerData.trip_advisor.title}
            </h3>
            <Image
              alt="Trip Advisor logotype"
              height={24}
              src={footerData.trip_advisor.logoConnection.edges[0].node.url}
              width={160}
            />
          </div>
        </div>
      </div>
    </footer>
  )
}