import {
  SimpleGrid,
  Image,
  Text,
  BackgroundImage,
  Title,
  Stack,
  Container,
  Box,
  Center,
  Group,
  Badge,
} from '@mantine/core';
import BG from '@/assets/semble-bg.webp';
import DarkBG from '@/assets/semble-bg-dark.png';
import CurateIcon from '@/assets/icons/curate-icon.svg';
import CommunityIcon from '@/assets/icons/community-icon.svg';
import DBIcon from '@/assets/icons/db-icon.svg';
import BigPictureIcon from '@/assets/icons/big-picture-icon.svg';
import SembleLogo from '@/assets/semble-logo.svg';
import AnimatedTitle from '@/components/landing/animatedTitle/AnimatedTitle';
import RecentActivity from '@/components/landing/recentActivity/RecentActivity';
import RecentActivitySkeleton from '@/components/landing/recentActivity/Skeleton.RecentActivity';
import Footer from '@/components/landing/footer/Footer';
import { Fragment, Suspense } from 'react';
import AuthButtons from '@/components/landing/authButtons/AuthButtons';
import { IoArrowForward } from 'react-icons/io5';
import NavMenu from '@/components/landing/navMenu/NavMenu';
import { LinkButton } from '@/components/link/MantineLink';

export default async function Page() {
  return (
    <Box component="section" pos="relative" h="100svh" w="100%">
      {/* light mode bg */}
      <BackgroundImage src={BG.src} darkHidden h="100svh" pos={'absolute'} />

      {/* dark mode bg */}
      <BackgroundImage
        src={DarkBG.src}
        lightHidden
        h="100svh"
        pos={'absolute'}
      />

      <Box pos="relative" style={{ zIndex: 1 }}>
        <Content />
      </Box>
    </Box>
  );
}

function Content() {
  return (
    <Fragment>
      <script async src="https://tally.so/widgets/embed.js" />
      <Container size="xl" p="sm" my="auto">
        <Group justify="space-between">
          <Stack gap={6} align="center">
            <Image src={SembleLogo.src} alt="Semble logo" w={25} h="auto" />
            <Badge size="xs">Alpha</Badge>
          </Stack>
          <NavMenu />
        </Group>
      </Container>

      <Center h="100svh" py={{ base: '2rem', xs: '5rem' }}>
        <Container size="xl" p="sm" my="auto">
          <Stack gap="5rem" align="center">
            <Stack gap="xs" align="center" maw={700}>
              <LinkButton
                href={'https://atmosphereconf.org/event/OD6Gd0A'}
                size="compact-sm"
                leftSection={'🪿'}
                variant="default"
                rightSection={<IoArrowForward />}
                c="#4098FF"
                bg={'blue.0'}
              >
                Watch our talk at ATmosphereConf!
              </LinkButton>
              <AnimatedTitle />

              {/* light mode subtitle */}
              <Title
                order={2}
                fw={600}
                fz="xl"
                c="#1F6144"
                ta={'center'}
                maw={450}
                darkHidden
              >
                Follow your peers&apos; research trails. Surface and discover
                new connections. Built on ATProto so you own your data.
              </Title>

              {/* dark mode subtitle */}
              <Title
                order={2}
                fw={600}
                fz="xl"
                c="#1e4dd9"
                ta={'center'}
                maw={450}
                lightHidden
              >
                Follow your peers&apos; research trails. Surface and discover
                new connections. Built on ATProto so you own your data.
              </Title>

              <AuthButtons />
            </Stack>

            <Box maw={750} w="100%">
              <Suspense fallback={<RecentActivitySkeleton />}>
                <RecentActivity />
              </Suspense>
            </Box>

            <SimpleGrid
              cols={{ base: 1, xs: 2, sm: 2, md: 3, lg: 4 }}
              spacing={{ base: 'xl' }}
              mt={{ base: '1rem', xs: '5rem' }}
            >
              <Stack gap="xs">
                <Image src={CurateIcon.src} alt="Curate icon" w={28} />
                <Text>
                  <Text fw={600} fz="lg" span>
                    Curate your research trails.
                  </Text>{' '}
                  <Text fw={500} fz="lg" c="dark.2" span>
                    Collect interesting links, add notes, and organize them into
                    shareable collections. Build trails others can explore and
                    extend.
                  </Text>
                </Text>
              </Stack>
              <Stack gap="xs">
                <Image src={CommunityIcon.src} alt="Community icon" w={28} />
                <Text>
                  <Text fw={600} fz="lg" span>
                    Connect with peers.
                  </Text>{' '}
                  <Text fw={500} fz="lg" c="dark.2" span>
                    See what your peers are sharing and find new collaborators
                    with shared interests. Experience research rabbit holes,
                    together.
                  </Text>
                </Text>
              </Stack>
              <Stack gap="xs">
                <Image src={DBIcon.src} alt="Database icon" w={28} />
                <Text>
                  <Text fw={600} fz="lg" span>
                    Own your data.
                  </Text>{' '}
                  <Text fw={500} fz="lg" c="dark.2" span>
                    Built on ATProto, new apps will come to you. No more
                    rebuilding your social graph and data when apps pivot and
                    shut down.
                  </Text>
                </Text>
              </Stack>
              <Stack gap="xs">
                <Image src={BigPictureIcon.src} alt="Big picture icon" w={28} />
                <Text>
                  <Text fw={600} fz="lg" span>
                    See the bigger picture.
                  </Text>{' '}
                  <Text fw={500} fz="lg" c="dark.2" span>
                    Find what&apos;s relevant through your network. Get the
                    extra context that matters before you dive into content.
                  </Text>
                </Text>
              </Stack>
            </SimpleGrid>

            <Footer />
          </Stack>
        </Container>
      </Center>
    </Fragment>
  );
}
