import { XStack, YStack, H1, Button, Anchor } from '@junwon/aesthetics'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faApple, faGooglePlay } from '@fortawesome/free-brands-svg-icons'

export function CameraSite() {
  const appName = 'La Camera'
  const iosLink = 'https://www.apple.com'
  const androidLink = 'https://www.google.com'
  const companySiteLink = 'https://www.junwon.com'
  const termsLink = '/terms'
  const privacyLink = '/privacy'
  const contactLink = '/contact'

  return (
    <YStack
      f={1}
      w="100%"
      jc="space-between"
      ai="center"
    >
      <YStack
        ai="center"
        pt="20vh"
        gap="5vh"
      >
        <H1>{appName}</H1>

        <YStack
          ai="center"
          jc="center"
          p="$5"
          gap="10vh"
        >
          <Anchor
            href={iosLink}
            asChild
          >
            <Button
              w="$20"
              h="$8"
              bc="$blue10"
              size="$5"
              icon={
                <FontAwesomeIcon
                  icon={faApple}
                  size="2x"
                />
              }
            >
              Install on Apple
            </Button>
          </Anchor>

          <Anchor
            href={androidLink}
            asChild
          >
            <Button
              w="$20"
              h="$8"
              bc="$green10"
              size="$5"
              icon={
                <FontAwesomeIcon
                  icon={faGooglePlay}
                  size="lg"
                />
              }
            >
              Install on Android
            </Button>
          </Anchor>
        </YStack>
      </YStack>

      <YStack
        ai="center"
        b="$5"
      >
        <XStack>
          <Anchor
            href={termsLink}
            textDecorationLine="none"
          >
            Terms{' '}
          </Anchor>
          <Anchor
            href={companySiteLink}
            textDecorationLine="none"
          >
            &
          </Anchor>
          <Anchor
            href={privacyLink}
            textDecorationLine="none"
          >
            {' '}
            Privacy
          </Anchor>
        </XStack>
        <Anchor
          href={contactLink}
          textDecorationLine="none"
        >
          Contact
        </Anchor>
      </YStack>
    </YStack>
  )
}