import { Box, Button } from '@mui/material'
import { useEffect } from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { appPublicRoutes } from '../../routes'
import { saveVisitedLink } from '../../utils'
import { CardComponent } from '../../components/Landing/CardComponent/CardComponent'
import { Container } from '../../components/Container'
import styles from './style.module.scss'
import bg_l from '../../assets/images/bg_l.svg'
import bg_r from '../../assets/images/bg_r.svg'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faOsi } from '@fortawesome/free-brands-svg-icons'
import {
  faCheck,
  faMobileScreenButton,
  faShieldHeart,
  faSlash,
  faUsers,
  faWifi
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIconStack } from '../../components/FontAwesomeIconStack'
import { Footer } from '../../components/Footer/Footer'

export const LandingPage = () => {
  const navigate = useNavigate()
  const location = useLocation()

  const onSignInClick = async () => {
    navigate(appPublicRoutes.nostr)
  }

  const cards = [
    {
      icon: <FontAwesomeIcon width={25} height={25} icon={faOsi} />,
      title: <>Open Source</>,
      description: (
        <>
          Code is AGPL licenced and available at{' '}
          <a href="https://git.nostrdev.com/sigit/sigit.io">
            https://git.nostrdev.com/sigit/sigit.io
          </a>
          .
        </>
      )
    },
    {
      icon: (
        <FontAwesomeIcon width={25} height={25} icon={faMobileScreenButton} />
      ),
      title: <>Multi-Device</>,
      description: (
        <>
          Create, Sign and Verify documents and files from any device with a
          browser.
        </>
      )
    },
    {
      icon: <FontAwesomeIcon width={25} height={25} icon={faShieldHeart} />,
      title: <>Secure &amp; Private</>,
      description: (
        <>
          Documents are encrypted locally and can be accessed only by named
          recipients.
        </>
      )
    },
    {
      icon: <FontAwesomeIcon width={25} height={25} icon={faCheck} />,
      title: <>Verifiable</>,
      description: (
        <>
          Thanks to Schnorr Signatures and Web of Trust, SIGit is far more
          auditable than traditional server-based offerings.
        </>
      )
    },
    {
      icon: (
        <FontAwesomeIconStack>
          <FontAwesomeIcon width={25} height={25} icon={faSlash} />
          <FontAwesomeIcon width={25} height={25} icon={faWifi} />
        </FontAwesomeIconStack>
      ),
      title: <>Works Offline</>,
      description: (
        <>
          Presuming you have a hardware signing device, it is possible to
          complete a SIGit round without an internet connection.
        </>
      )
    },
    {
      icon: <FontAwesomeIcon width={25} height={25} icon={faUsers} />,
      title: <>Multi-Party Signing</>,
      description: (
        <>
          Choose any number of Signers and Viewers, track the signature status,
          send reminders, get notifications on completion.
        </>
      )
    }
  ]

  useEffect(() => {
    saveVisitedLink(location.pathname, location.search)
  }, [location])

  return (
    <div className={styles.background}>
      <div
        className={`${styles.backgroundBlob} ${styles.backgroundBlobLeft}`}
        style={{ backgroundImage: `url("${bg_l}")` }}
      ></div>
      <div
        className={`${styles.backgroundBlob} ${styles.backgroundBlobRight}`}
        style={{ backgroundImage: `url("${bg_r}")` }}
      ></div>

      <Container className={styles.container}>
        <img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
        <div className={styles.titleSection}>
          <h1 className={styles.title}>
            Secure &amp; Private Document Signing
          </h1>
          <p className={styles.subTitle}>
            An open-source and self-hostable solution for secure document
            signing and verification.
          </p>
        </div>
        <Box
          display={'grid'}
          gap={'25px'}
          sx={{
            gridTemplateColumns: {
              xs: '1fr',
              sm: 'repeat(2, 1fr)',
              xl: 'repeat(3, 1fr)'
            }
          }}
        >
          {cards.map((c, i) => (
            <CardComponent key={i} {...c} />
          ))}
        </Box>

        <p className={styles.description}>
          SIGit is a secure &amp; private document signing service where you can
          create, sign, and verify any document from any device with a browser.
        </p>

        <Button
          sx={{
            fontSize: '22px',
            padding: '16px 32px',
            backgroundColor: 'var(--secondary-main)'
          }}
          variant="contained"
          onClick={onSignInClick}
        >
          GET STARTED
        </Button>

        <Outlet />
      </Container>
      <Footer />
    </div>
  )
}