'use client'
import colors from "@/con/colors";
import { ActionIcon, BackgroundImage, Box, Button, Container, Divider, Flex, Group, List, ListItem, SimpleGrid, Stack, Stepper, StepperCompleted, StepperStep, Text, TextInput } from "@mantine/core";
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp, IconSearch } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import BackButton from "./_com/BackButto";

const data = [
    {
        id: 1,
        images: "/api/img/test.png",
        name: "Surat Keterangan Domisili Organisasi",
        link: "/darmasaba/desa/layanan/surat-keterangan-domisili"
    },
    {
        id: 2,
        images: "/api/img/test-3.jpeg",
        name: "Surat Keterangan Penghasilan",
        link: "/darmasaba/desa/layanan/surat-keterangan-penghasilan"
    },
    {
        id: 3,
        images: "/api/img/domisili.jpeg",
        name: "Surat Keterangan Tidak Mampu",
        link: "/darmasaba/desa/layanan/surat-keterangan-tidak-mampu"
    },
    {
        id: 4,
        images: "/api/img/kelahiran.jpeg",
        name: "Surat Keterangan Kelahiran",
        link: "/darmasaba/desa/layanan/surat-keterangan-kelahiran"
    },
    {
        id: 5,
        images: "/api/img/keterangan-usaha.jpeg",
        name: "Surat Keterangan Usaha",
        link: "/darmasaba/desa/layanan/surat-keterangan-usaha"
    },
    {
        id: 6,
        images: "/api/img/kematian.jpeg",
        name: "Surat Keterangan Kematian",
        link: "/darmasaba/desa/layanan/surat-keterangan-kematian"
    },
    {
        id: 7,
        images: "/api/img/tempatusaha.jpeg",
        name: "Surat Keterangan Tempat Usaha",
        link: "/darmasaba/desa/layanan/surat-keterangan-tempat-usaha"
    },
    {
        id: 8,
        images: "/api/img/belumkawin.jpeg",
        name: "Surat Keterangan Belum Kawin",
        link: "/darmasaba/desa/layanan/surat-keterangan-belum-kawin"
    },
    {
        id: 9,
        images: "/api/img/berkelakuan-baik.jpeg",
        name: "Surat Keterangan Kelakuan Baik",
        link: "/darmasaba/desa/layanan/surat-keterangan-kelakuan-baik"
    },
    {
        id: 10,
        images: "/api/img/biodata.jpeg",
        name: "Surat Keterangan Beda Biodata Diri",
        link: "/darmasaba/desa/layanan/surat-keterangan-beda-biodata-diri"
    },
    {
        id: 11,
        images: "/api/img/yatim.jpeg",
        name: "Surat Keterangan Yatim Piatu",
        link: "/darmasaba/desa/layanan/surat-keterangan-yatim-piatu"
    }

]
export default function Page() {
    const router = useRouter()
    const [active, setActive] = useState(1);
    const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
    const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
    return (
        <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
            <Box px={{ base: 'md', md: 100 }}>
                <BackButton />
            </Box>
            <Container w={{ base: "100%", md: "50%" }} >
                <Stack align="center" gap={0}>
                    {/* Bagian Layanan */}
                    <Text fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" }} c={colors["blue-button"]} fw={"bold"}>
                        Layanan Desa Darmasaba
                    </Text>
                    <Text
                    >
                        Informasi dan Pelayanan Administrasi Digital
                    </Text>
                    <TextInput
                        pt={20}
                        w={{ base: "70%", md: "50%" }}
                        placeholder="Cari Layanan"
                        leftSection={<IconSearch size={20} />}

                    />
                </Stack>
            </Container>
            <Box px={{ base: "md", md: 100 }}>
                {/* Bagian Pelayanan Surat Keterangan */}
                <Box pb={10}>
                    <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>Pelayanan Surat Keterangan</Text>
                </Box>
                <SimpleGrid
                    py={20}
                    cols={{
                        base: 1,
                        sm: 3
                    }}
                >
                    {data.map((v, k) => {
                        return (
                            <BackgroundImage
                                key={k}
                                src={v.images}
                                h={250}
                                radius={16}
                                pos={"relative"}
                            >
                                <Box
                                    style={{
                                        borderRadius: 16,
                                        zIndex: 0
                                    }}
                                    pos={"absolute"}
                                    w={"100%"}
                                    h={"100%"}
                                    bg={colors.trans.dark[2]}
                                />
                                <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
                                    <Box p={"lg"}>
                                        <Text
                                            c={"white"}
                                            size={"1.5rem"}
                                            style={{
                                                textAlign: "center",
                                            }}>{v.name}</Text>
                                    </Box>
                                    <Group justify="center">
                                        <Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
                                            onClick={() => router.push(v.link)}>
                                            Detail
                                        </Button>
                                    </Group>
                                </Stack>
                            </BackgroundImage>
                        )
                    })}
                </SimpleGrid>
                {/* Bagian Pelayanan Perizinan Berusaha */}
                <Box py={15}>
                    <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>Pelayanan Perizinan Berusaha Berbasis Risiko Melalui Sistem ONLINE SINGLE SUBMISSION (OSS)</Text>
                </Box>
                <Text py={10} ta={"justify"} fz={{ base: "sm", md: 'h3' }}>Penyelenggaraan Perizinan Berusaha Berbasis Risiko melalui Sistem Online Single Submission (OSS)
                    merupakan pelaksanaan Undang-Undang Nomor 11 Tahun 2020 Tentang Cipta Kerja. OSS Berbasis Risiko wajib digunakan oleh Pelaku Usaha,
                    Kementerian/Lembaga, Pemerintah Daerah, Administrator Kawasan Ekonomi Khusus (KEK), dan Badan Pengusahaan Kawasan Perdagangan Bebas
                    Pelabuhan Bebas (KPBPB).Berdasarkan Peraturan Pemerintah Nomor 5 Tahun 2021 terdapat 1.702 kegiatan usaha yang terdiri atas 1.349
                    Klasifikasi Baku Lapangan Usaha Indonesia (KBLI) yang sudah diimplementasikan dalam Sistem OSS Berbasis Risiko.</Text>
                <Text py={10} fz={{ base: "sm", md: 'h3' }}>Proses pendaftaran NIB melalui OSS mencakup beberapa langkah umum, seperti:</Text>
                <Box p={"xl"} w={{ base: "100%", md: "100%" }} >
                    <Stepper active={active} onStepClick={setActive} orientation="vertical"
                        styles={{
                            separator: {
                                marginLeft: 25
                            },

                            step: {
                                padding: '12px 0'
                            }
                        }}>
                        <StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
                            Pendaftaran akun pada portal OSS
                        </StepperStep>
                        <StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
                            Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
                        </StepperStep>
                        <StepperStep label="Langkah Ketiga" description="Pemilihan KBLI ">
                            Memilih KBLI dengan jenis usaha yang akan didaftarkan
                        </StepperStep>
                        <StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
                            Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
                        </StepperStep>
                        <StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
                            Proses verifikasi dan persetujuan oleh instansi terkait
                        </StepperStep>
                        <StepperStep label="Langkah Keenam" description="Penerimaan NIB">
                            Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
                        </StepperStep>
                        <StepperCompleted >
                            Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
                        </StepperCompleted>
                    </Stepper>

                    <Group justify="center" mt="xl">
                        <Button variant="default" onClick={prevStep}>Back</Button>
                        <Button onClick={nextStep}>Next step</Button>
                    </Group>
                    <Text py={35} ta={"justify"} fz={{ base: "sm", md: 'h3' }}>Penting untuk diingat bahwa prosedur dan persyaratan dapat berubah
                        seiring waktu. Untuk informasi yang lebih akurat dan terkini, saya sarankan untuk mengunjungi situs
                        resmi OSS <a href={"https://oss.go.id/"}>(https://oss.go.id/)</a> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.</Text>
                </Box>
                {/* Bagian Pelayanan Telunjuk Sakti Desa */}
                <Box py={15}>
                    <Text fz={{base: "h4", md: "h3"}} fw={"bold"}>Pelayanan Telunjuk Sakti Desa</Text>
                </Box>
                <Text fz={{ base: "sm", md: 'h3' }} py={10}>Terwujudnya Layanan umum bertajuk Sistim administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman. layanan telunjuk sakti Desa meliputi :</Text>
                <List type="ordered" pb={20}>
                    <ListItem fz={{ base: "sm", md: 'h3' }}>Telunjuk Sakti Desa Akta Kelahiran (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KELAHIRAN_(dengan%20contoh%20Formulir).pdf">Akta Kelahiran</a>)</ListItem>
                    <ListItem fz={{ base: "sm", md: 'h3' }}>Telunjuk Sakti Desa Akta Perkawinan (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20PERKAWINAN_(dengan%20contoh%20Formulir).pdf">Akta Perkawinan</a>)</ListItem>
                    <ListItem fz={{ base: "sm", md: 'h3' }}>Telunjuk Sakti Desa Akta Kematian (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KEMATIAN_(dengan%20contoh%20Formulir).pdf">Akata Kematian</a>)</ListItem>
                </List>
                {/* Bagian Pelayanan Telunjuk Sakti Desa */}
                <Box py={15}>
                    <Text fz={{base: "h4", md: "h3"}} fw={"bold"}>Pelayanan Penduduk Non-Permanent</Text>
                </Box>
                <Text pb={20} fz={{ base: "sm", md: 'h3' }} ta={"justify"}>Surat Keterangan Penduduk Non-Permanent adalah dokumen yang dikeluarkan oleh pihak berwenang untuk memberikan keterangan bahwa seseorang atau kelompok orang memiliki status penduduk non-permanent di suatu wilayah. Dokumen ini biasanya digunakan untuk keperluan administratif atau legal, seperti mendapatkan akses ke layanan kesehatan, pendidikan, atau pelayanan publik lainnya.</Text>
                <Divider color={colors["blue-button"]} />
                <Flex justify={"space-between"} py={20}>
                    <Text fz={{ base: "sm", md: 'h3' }}>25 May 2021 . Darmasaba</Text>
                    <Box>
                        <Flex gap={"lg"}>
                            <ActionIcon variant='transparent'>
                                <IconBrandFacebook color={colors["blue-button"]} size={"30"} />
                            </ActionIcon>
                            <ActionIcon variant='transparent'>
                                <IconBrandInstagram color={colors["blue-button"]} size={"30"} />
                            </ActionIcon>
                            <ActionIcon variant='transparent'>
                                <IconBrandTwitter color={colors["blue-button"]} size={"30"} />
                            </ActionIcon>
                            <ActionIcon variant='transparent'>
                                <IconBrandWhatsapp color={colors["blue-button"]} size={"30"} />
                            </ActionIcon>
                        </Flex>
                    </Box>
                </Flex>
                <Divider color={colors["blue-button"]} pb={50} />
            </Box>
        </Stack>
    )
}