'use client'
import colors from '@/con/colors';
import { ActionIcon, Anchor, Box, Center, Container, Divider, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title, useMantineTheme } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { IconAt, IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';

function Footer() {
  const theme = useMantineTheme();
  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
  return (
    <>
      <Stack bg={colors["blue-button"]}>
        <Box w={mobile ? "100%" : "100%"} p={"xl"} h={{ base: 2500, md: 1100 }} >
          <Center>
            <Paper w={"100%"}>
              <Box component="footer" py="xl">
                <Container size="lg">
                  <Stack gap="xl">
                    <Box>
                      <Title fz={"md"} order={2} fw={700} mb="md">Komitmen Dalam Pelayanan</Title>
                      <Stack gap="sm">
                        <Group align="flex-start" gap="xs">
                          <Text fz={"sm"} fw={700}>1. Transparansi:</Text>
                          <Text fz={"sm"}>
                            Kami berkomitmen untuk mengelola dana desa secara terbuka, sehingga masyarakat dapat
                            mengetahui penggunaan anggaran secara jelas dan bertanggung jawab.
                          </Text>
                        </Group>

                        <Group align="flex-start" gap="xs">
                          <Text fz={"sm"} fw={700}>2. Profesionalisme:</Text>

                          <Text fz={"sm"}>
                            Setiap layanan desa akan dilakukan dengan profesional, cepat, dan tanpa diskriminasi,
                            demi memastikan kepuasan masyarakat.
                          </Text>
                        </Group>

                        <Group align="flex-start" gap="xs">
                          <Text fz={"sm"} fw={700}>3. Partisipatif:</Text>
                          <Text fz={"sm"}>
                            Kami percaya bahwa partisipasi aktif masyarakat adalah kunci keberhasilan pembangunan desa.
                            Oleh karena itu, kami akan terus melibatkan warga dalam setiap proses pengambilan keputusan.
                          </Text>
                        </Group>

                        <Group align="flex-start" gap="xs">
                          <Text fz={"sm"} fw={700}>4. Inovasi:</Text>
                          <Text fz={"sm"}>
                            Kami berkomitmen untuk terus berinovasi dalam memberikan solusi bagi permasalahan desa,
                            termasuk melalui pemanfaatan teknologi untuk mempermudah akses layanan.
                          </Text>
                        </Group>

                        <Group align="flex-start" gap="xs">
                          <Text fz={"sm"} fw={700}>5. Berkeadilan:</Text>
                          <Text fz={"sm"}>
                            Setiap kebijakan dan program desa akan dirancang untuk memberikan manfaat yang merata
                            bagi seluruh lapisan masyarakat, tanpa memandang status sosial atau ekonomi.
                          </Text>
                        </Group>

                        <Group align="flex-start" gap="xs">
                          <Text fz={"sm"} fw={700}>6. Pemberdayaan:</Text>
                          <Text fz={"sm"}>
                            Kami berkomitmen untuk memberdayakan masyarakat melalui pelatihan, pendampingan,
                            dan dukungan terhadap usaha-usaha lokal agar desa semakin mandiri.
                          </Text>
                        </Group>

                        <Group align="flex-start" gap="xs">
                          <Text fz={"sm"} fw={700}>7. Ramah Lingkungan:</Text>
                          <Text fz={"sm"}>
                            Seluruh kegiatan pembangunan dan pelayanan desa akan memperhatikan keberlanjutan lingkungan,
                            demi menjaga keseimbangan alam dan kenyamanan hidup warga.
                          </Text>
                        </Group>
                      </Stack>
                    </Box>

                    <Divider />

                    <Box>
                      <Title fz={"md"} order={2} fw={700} mb="md">Tujuan Akhir</Title>
                      <Text fz={"sm"} mb="sm">
                        Dengan visi, misi dan komitmen ini, kami bertekad untuk menjadikan desa sebagai tempat tinggal
                        yang nyaman, aman dan sejahtera bagi seluruh warganya.
                      </Text>
                      <Text fz={"sm"} mb="sm">
                        Kami percaya bahwa kemajuan desa dimulai dari kerjasama antara pemerintah desa dan masyarakat,
                        serta didukung oleh tata kelola yang baik dan berorientasi pada kepentingan bersama. Jika ada
                        masukan untuk lembaga desa, silahkan hubungi pada nomor pengaduan di bawah, terima kasih.
                      </Text>
                    </Box>

                    <Group justify='apart' align="center">
                      <Text ta={"center"} fz={"sm"} fw={700} size="lg" style={{ fontStyle: 'italic' }}>{"Desa Kuat, Masyarakat Sejahtera!"}</Text>
                      <Box
                        style={{
                          width: 80,
                          height: 80,
                          position: 'relative'
                        }}
                      >
                        <ActionIcon size={80} radius={"xl"} variant='transparent'>
                          <Image src="/api/img/chatbot-removebg-preview.png" alt="Logo Desa" width={80} height={80} />
                        </ActionIcon>
                      </Box>
                    </Group>
                  </Stack>
                </Container>
              </Box>
            </Paper>
          </Center>
          <Box py={20} >
            <SimpleGrid
              p={20}
              cols={{
                base: 2,
                sm: 4,
              }}
              style={{
                color: "white"
              }}
            >
              <Box p={mobile ? 30 : 30} style={{color: "white"}}>
                <Stack justify='space-between'>
                  <Text fz={"md"} fw={"bold"} c={"white"}>Tentang Darmasaba</Text>
                  <Text fz={"xs"} c={"white"}>Desa Darmasaba adalah desa
                    budaya yang kaya akan tradisi dan
                    nilai-nilai luhur masyarakat Bali.</Text>
                  <Box>
                    <Flex gap={"md"}>
                      <ActionIcon variant='transparent'>
                        <IconBrandFacebook color='white' size={"30"} />
                      </ActionIcon>
                      <ActionIcon variant='transparent'>
                        <IconBrandInstagram color='white' size={"30"} />
                      </ActionIcon>
                      <ActionIcon variant='transparent'>
                        <IconBrandTwitter color='white' size={"30"} />
                      </ActionIcon>
                      <ActionIcon variant='transparent'>
                        <IconBrandWhatsapp color='white' size={"30"} />
                      </ActionIcon>
                    </Flex>
                  </Box>
                </Stack>
              </Box>
              <Box p={mobile ? 30 : 30}>
                <Stack justify='space-between' gap={"xs"}>
                  <Text fz={"md"} fw={"bold"} c={"white"}>Layanan</Text>
                  <Anchor c={"white"} variant='transparent'>
                    <Text fz={"xs"} c={"white"}>Administrasi Kependudukan</Text>
                  </Anchor>
                  <Anchor c={"white"} variant='transparent'>
                    <Text fz={"xs"} c={"white"}>Pelayanan Sosial</Text>
                  </Anchor>
                  <Anchor c={"white"} variant='transparent'>
                    <Text fz={"xs"} c={"white"}>Pengaduan Masyarakat</Text>
                  </Anchor>
                  <Anchor c={"white"} variant='transparent'>
                    <Text fz={"xs"} c={"white"}>Informasi Publik</Text>
                  </Anchor>
                </Stack>
              </Box>
              <Box p={mobile ? 30 : 30}>
                <Stack justify='space-between' gap={"xs"}>
                  <Text fz={"md"} fw={"bold"} c={"white"}>Tautan Penting</Text>
                  <Anchor c={"white"} variant='transparent'>
                    <Text fz={"xs"} c={"white"}>Portal Badung</Text>
                  </Anchor>
                  <Anchor c={"white"} variant='transparent'>
                    <Text fz={"xs"} c={"white"}>E-Government</Text>
                  </Anchor>
                  <Anchor c={"white"} variant='transparent'>
                    <Text fz={"xs"} c={"white"}>Transparansi</Text>
                  </Anchor>
                  <Anchor c={"white"} variant='transparent'>
                    <Text fz={"xs"} c={"white"}>Unduhan</Text>
                  </Anchor>
                </Stack>
              </Box>
              <Box p={mobile ? 30 : 30}>
                <Stack justify='space-between'>
                  <Text fz={"md"} fw={"bold"} c={"white"}>Newsletter</Text>
                  <Text fz={"xs"} c={"white"}>Dapatkan informasi terbaru
                    tentang kegiatan dan program
                    desa</Text>
                  <TextInput
                    placeholder='Alamat email anda'
                    rightSection={<IconAt color={colors["blue-button"]} />}
                  />
                </Stack>
              </Box>
            </SimpleGrid>
          </Box>
          <Divider py={15} />
          <Text ta={"center"} c={"white"} p={20}>
            © 2024 Desa Darmasaba. Hak Cipta Dilindungi.
          </Text>
        </Box>
      </Stack>
    </>
  );
}

export default Footer;