<!-- This example requires Tailwind CSS v2.0+ -->
<template>
    <div class="mx-auto max-w-3xl text-base leading-7 text-gray-700 px-4">
        <h1 class="mt-10 text-3xl font-bold tracking-tight text-gray-900">
            KISO 이용자 보호 시스템 API 서비스
        </h1>
        <p class="mt-2 text-lg leading-8 text-gray-600">
            KSS(KISO Safeguard System) API Service
        </p>

        <div class="mt-10 max-w-2xl">
            <h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
                KSS 소개
            </h2>
            <p class="mt-6">
                KISO 이용자보호시스템(KSS, KISO Safeguard System) API는 국내
                대표 포털 네이버와 카카오로부터 제공받은 욕설·비속어 DB를 활용해
                개발되었습니다.
            </p>
            <p class="mt-6">
                해당 API는 약 80만 건의 욕설·비속어 DB를 활용해 입력된 표현 중
                사전에 포함된 단어가 있는지 검사하고 그 결과를 필터링해 주는
                서비스를 제공합니다.
            </p>
            <p class="mt-6">
                본 서비스의 목적은 다양한 인터넷 서비스에서 사업자가 별도의
                욕설·비속어 DB구축 및 유지 보수의 부담이 없이 욕설·비속어 표현에
                대한 서비스 관리 및 운영에 도움을 드리는 것입니다.
            </p>
        </div>

        <div class="mt-10 max-w-2xl">
            <h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
                주요 특징
            </h2>

            <ul role="list" class="mt-8 max-w-xl space-y-8 text-gray-600">
                <li class="flex gap-x-3">
                    <CheckCircleIcon
                        class="mt-1 h-5 w-5 flex-none text-indigo-600"
                        aria-hidden="true"
                    />
                    <span
                        ><strong class="font-semibold text-gray-900"
                            >표준화된 필터 데이터베이스</strong
                        >
                        <p>
                            KSS에서 사용하는 필터 단어 데이터베이스는 네이버와
                            카카오와 같은 국내 대형 포털로부터 제공받은 기반
                            데이터를 정제하여 표준화 된 것입니다. 대부분의
                            인터넷 커뮤니티 서비스에서 바로 사용하기에 적합
                            합니다.
                        </p>
                    </span>
                </li>
                <li class="flex gap-x-3">
                    <CheckCircleIcon
                        class="mt-1 h-5 w-5 flex-none text-indigo-600"
                        aria-hidden="true"
                    />
                    <span
                        ><strong class="font-semibold text-gray-900"
                            >빠른 검색 속도</strong
                        >
                        <p>
                            현재 검색 대상 단어 데이터베이스에는 80만개의 단어가
                            등록되어 있으며 이는 시간이 흐름에 따라 계속
                            늘어나게 됩니다. 하지만 고객사의 API 호출시 필터
                            단어를 검색하는 시간은 데이터베이스 크기와 무관하게
                            검사 대상인 텍스트의 사이즈만큼만 시간을 소모하도록
                            만들어져 있어서 대부분의 인터넷 서비스에 사용 적합
                            합니다.
                        </p>
                    </span>
                </li>

                <li class="flex gap-x-3">
                    <CheckCircleIcon
                        class="mt-1 h-5 w-5 flex-none text-indigo-600"
                        aria-hidden="true"
                    />
                    <span
                        ><strong class="font-semibold text-gray-900"
                            >안정적인 인프라</strong
                        >
                        <p>
                            KSS는 우수한 성능과 안정성을 보유한 AWS 클라우드를
                            사용하여 안정적인 서비스를 제공합니다. 서비스
                            사용량이 많아서 충분한 처리 속도를 확보하기를 원하는
                            회원사를 위한 부하 격리 기능도 준비되어 있습니다.
                        </p>
                    </span>
                </li>
                <li class="flex gap-x-3">
                    <CheckCircleIcon
                        class="mt-1 h-5 w-5 flex-none text-indigo-600"
                        aria-hidden="true"
                    />
                    <span
                        ><strong class="font-semibold text-gray-900"
                            >지속적인 업데이트</strong
                        >
                        <p>
                            KSS는 포털 회원사의 지속적인 DB 제공으로 인터넷상
                            빠르게 전파되는 욕설·비속어에 대응할 수 있습니다.
                            DB를 직접 제공하지 않고 응용프로그램 인터페이스(API)
                            방식으로 서비스하는 것은 업데이트를 하기
                            위해서입니다.
                        </p>
                    </span>
                </li>
            </ul>
        </div>

        <div class="mt-10 max-w-2xl">
            <h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
                필터 DB 생성 절차
            </h2>

            <div class="mt-6 lg:border-b lg:border-t lg:border-gray-200">
                <nav class="mx-auto max-w-7xl px-2" aria-label="Progress">
                    <ol
                        role="list"
                        class="overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-l lg:border-r lg:border-gray-200"
                    >
                        <li
                            v-for="(step, stepIdx) in steps_db"
                            :key="step.id"
                            class="relative overflow-hidden lg:flex-1"
                        >
                            <div
                                :class="[
                                    stepIdx === 0
                                        ? 'rounded-t-md border-b-0'
                                        : '',
                                    stepIdx === steps.length - 1
                                        ? 'rounded-b-md border-t-0'
                                        : '',
                                    'overflow-hidden border border-gray-200 lg:border-0',
                                ]"
                            >
                                <a :href="step.href" aria-current="step">
                                    <span
                                        class="absolute left-0 top-0 h-full w-1 bg-indigo-600 lg:bottom-0 lg:top-auto lg:h-1 lg:w-full"
                                        aria-hidden="true"
                                    />
                                    <span
                                        :class="[
                                            stepIdx !== 0 ? '' : '',
                                            'flex items-start px-5 py-5 text-sm font-medium',
                                        ]"
                                    >
                                        <span class="flex-shrink-0">
                                            <span
                                                class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-indigo-600"
                                            >
                                                <span class="text-indigo-600">{{
                                                    step.id
                                                }}</span>
                                            </span>
                                        </span>
                                        <span
                                            class="lg:text-center ml-2 mt-0.5 flex min-w-0 flex-col"
                                        >
                                            <span
                                                class="text-sm font-medium text-indigo-600"
                                                >{{ step.name }}</span
                                            >
                                            <span
                                                class="text-sm font-medium text-gray-500"
                                                >{{ step.description }}</span
                                            >
                                        </span>
                                    </span>
                                </a>

                                <template v-if="stepIdx !== 0">
                                    <!-- Separator -->
                                    <div
                                        class="absolute inset-0 left-0 top-0 hidden w-3 lg:block"
                                        aria-hidden="true"
                                    >
                                        <svg
                                            class="h-full w-full text-gray-300"
                                            viewBox="0 0 12 82"
                                            fill="none"
                                            preserveAspectRatio="none"
                                        >
                                            <path
                                                d="M0.5 0V31L10.5 41L0.5 51V82"
                                                stroke="currentcolor"
                                                vector-effect="non-scaling-stroke"
                                            />
                                        </svg>
                                    </div>
                                </template>
                            </div>
                        </li>
                    </ol>
                </nav>
            </div>

            <div></div>

            <p class="mt-6 text-sm">
                위 과정을 일정 기간마다 주기적으로 수행하여 항상 최신의 표준화된
                필터 DB를 서비스 합니다.
            </p>
        </div>

        <div class="mt-10 max-w-2xl">
            <h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
                서비스 비용
            </h2>
            <p class="mt-6">
                KSS API 서비스는 회원사, 언론사, 공공기관에 무료로 이용
                가능하도록 배포하고 있습니다. KSS 만을 이용하는 경우 서비스
                이용료(월 6만원)가 발생 됩니다.
            </p>

            <div class="bg-white py-1 rounded-2xl">
                <div class="mx-auto max-w-7xl px-2">
                    <div class="mx-auto max-w-2xl lg:max-w-none">
                        <dl
                            class="mt-1 mb-1 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4"
                        >
                            <div
                                v-for="stat in stats"
                                :key="stat.id"
                                class="flex flex-col bg-gray-400/5 py-6"
                            >
                                <dt
                                    class="text-2sm font-semibold leading-6 text-gray-600"
                                >
                                    {{ stat.name }}
                                </dt>
                                <dd
                                    class="order-first text-xl font-semibold tracking-tight text-gray-900"
                                >
                                    {{ stat.value }}
                                </dd>
                            </div>
                        </dl>
                    </div>
                </div>
            </div>

            <p class="mt-6 text-sm">
                * 서비스 제공 내용과 요금은 향후 변동 가능하므로 공지 사항이나
                이메일 공지를 반드시 확인해 주세요.
            </p>
        </div>

        <div class="mt-10 max-w-2xl">
            <h2
                id="service-use-agreement"
                class="mt-16 text-2xl font-bold tracking-tight text-gray-900"
            >
                서비스 이용 절차
            </h2>
            <nav class="mt-6 ml-6" aria-label="Progress">
                <ol role="list" class="overflow-hidden">
                    <li
                        v-for="(step, stepIdx) in steps"
                        :key="step.name"
                        :class="[
                            stepIdx !== steps.length - 1 ? 'pb-10' : '',
                            'relative',
                        ]"
                    >
                        <template v-if="step.status === 'complete'">
                            <div
                                v-if="stepIdx !== steps.length - 1"
                                class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-indigo-600"
                                aria-hidden="true"
                            />
                            <a
                                :href="step.href"
                                class="group relative flex items-start"
                            >
                                <span class="flex h-9 items-center">
                                    <span
                                        class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800"
                                    >
                                        <CheckIcon
                                            class="h-5 w-5 text-white"
                                            aria-hidden="true"
                                        />
                                    </span>
                                </span>
                                <span class="ml-4 flex min-w-0 flex-col">
                                    <span class="text-sm font-medium">{{
                                        step.name
                                    }}</span>
                                    <span class="text-sm text-gray-500">{{
                                        step.description
                                    }}</span>
                                </span>
                            </a>
                        </template>
                        <template v-else-if="step.status === 'current'">
                            <div
                                v-if="stepIdx !== steps.length - 1"
                                class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-gray-300"
                                aria-hidden="true"
                            />
                            <a
                                :href="step.href"
                                class="group relative flex items-start"
                                aria-current="step"
                            >
                                <span
                                    class="flex h-9 items-center"
                                    aria-hidden="true"
                                >
                                    <span
                                        class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-indigo-600 bg-white"
                                    >
                                        <span
                                            class="h-2.5 w-2.5 rounded-full bg-indigo-600"
                                        />
                                    </span>
                                </span>
                                <span class="ml-4 flex min-w-0 flex-col">
                                    <span
                                        class="text-sm font-medium text-indigo-600"
                                        >{{ step.name }}</span
                                    >
                                    <span class="text-sm text-gray-500">{{
                                        step.description
                                    }}</span>
                                </span>
                            </a>
                        </template>
                        <template v-else>
                            <div
                                v-if="stepIdx !== steps.length - 1"
                                class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-gray-300"
                                aria-hidden="true"
                            />
                            <a
                                :href="step.href"
                                class="group relative flex items-start"
                            >
                                <span
                                    class="flex h-9 items-center"
                                    aria-hidden="true"
                                >
                                    <span
                                        class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400"
                                    >
                                        <span
                                            class="h-2.5 w-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
                                        />
                                    </span>
                                </span>
                                <span class="ml-4 flex min-w-0 flex-col">
                                    <span
                                        class="text-sm font-medium text-gray-500"
                                        >{{ step.name }}</span
                                    >
                                    <span class="text-sm text-gray-500">{{
                                        step.description
                                    }}</span>
                                </span>
                            </a>
                        </template>
                    </li>
                </ol>
            </nav>
        </div>

        <div class="mt-10 max-w-2xl">
            <h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
                사용문의
            </h2>
            <p class="mt-6">
                API 사용에 필요한 자세한 기술 문서는
                <a
                    class="font-semibold text-indigo-600 hover:text-indigo-500"
                    href="javascript:void()"
                    @click="navigateTo('/doc/api_doc')"
                    >API 연동 안내</a
                >
                에 수록되어 있습니다. 또한
                <a
                    class="font-semibold text-indigo-600 hover:text-indigo-500"
                    href="javascript:void()"
                    @click="navigateTo('/doc/guide')"
                    >서비스 도입 안내</a
                >,

                <a
                    class="font-semibold text-indigo-600 hover:text-indigo-500"
                    href="javascript:void()"
                    @click="navigateTo('/support/faq')"
                    >FAQ
                </a>

                을 통해 KSS API 서비스 개념과 사용방법에 대해 살펴보시기
                바랍니다.
            </p>

            <p class="mt-6">
                API 연동 관련 문의는 이메일(netsafe@kiso.or.kr)로 보내주시기
                바랍니다.
            </p>
        </div>

        <div class="mt-10 max-w-2xl">
            <h2
                class="mt-16 text-2xl font-bold tracking-tight text-gray-900"
            ></h2>
            <p class="mt-6"></p>
        </div>

        <div class="py-1">
            <div class="mx-auto max-w-7xl px-6">
                <div class="mx-auto max-w-2xl">
                    <div
                        class="mx-auto mt-2 mb-2 grid grid-cols-4 items-start gap-x-8 gap-y-10"
                    >
                        <img
                            class="col-span-2 max-h-12 w-full object-contain object-left"
                            src="https://dev.safekiso.com/kiso_ci_1.png"
                            alt="Transistor"
                            width="158"
                            height="48"
                        />
                        <img
                            class="col-span-2 max-h-12 w-full object-contain object-left"
                            src="https://www.safekiso.com/logos/kss_certification_logo_box_english.png"
                            alt="Reform"
                            width="158"
                            height="48"
                        />
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-10 max-w-2xl">
            <h2
                class="mt-16 text-2xl font-bold tracking-tight text-gray-900"
            ></h2>
            <p class="mt-6"></p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    CheckCircleIcon,
    InformationCircleIcon,
} from '@heroicons/vue/20/solid';

import { CheckIcon } from '@heroicons/vue/20/solid';

const steps_db = [
    {
        id: '01',
        name: '네이버, 카카오',
        description: '욕설·비속어 DB 제공',
        href: '#',
        status: 'current',
    },
    {
        id: '02',
        name: 'KISO',
        description: '표준화, DB 구축',
        href: '#',
        status: 'current',
    },
    {
        id: '03',
        name: 'KSS API',
        description: 'API 서비스 제공',
        href: '#',
        status: 'current',
    },
];

const steps = [
    {
        name: '서비스 사용 신청',
        description: '이 메일을 통한 서비스 등록 신청',
        href: '#',
        status: 'complete',
    },
    {
        name: '내부 검토 및 계정 등록',
        description: '고객사의 회원 자격 등을 검토 하여 계정을 등록 합니다.',
        href: '#',
        status: 'current',
    },
    {
        name: '회원 가입',
        description: '등록된 이메일 주소로 회원 가입을 진행 합니다.',
        href: '#',
        status: 'upcoming',
    },
    {
        name: 'API 키 생성',
        description: '웹 어드민 기능을 통해 필요한 API 키를 생성 합니다.',
        href: '#',
        status: 'upcoming',
    },
    {
        name: '서비스 연동',
        description:
            '연동 가이드 등을 참고로 발급된 API 키를 서비스와 연동 합니다.',
        href: '#',
        status: 'upcoming',
    },
];

const includedFeatures = [
    '최신 통합 필터 DB 적용',
    '일 최대 8백만건 호출',
    '초당 최대 100회 호출',
    '웹 어드민 페이지',
];

const stats = [
    { id: 1, name: '일 최대 호출', value: '8,640,000' },
    { id: 2, name: '1초 호출 제한', value: '100회' },
    { id: 3, name: '관리 기능 제공', value: '웹 어드민' },
    { id: 4, name: '낮은 도입 부담', value: '월 단위 결제' },
];

const route = useRoute();
console.log('route.query = ', route.query);
console.log('route = ', route.fullPath);

onMounted(() => {
    console.log('myheader mounted');

    if (route.fullPath.endsWith('#service-use-agreement')) {
        const container = document.getElementById('service-use-agreement');
        container.scrollIntoView({ behavior: 'smooth' });
    }
});
</script>
