<script setup>
    import { useI18n } from 'vue-i18n';

    const { t } = useI18n();
</script>

<template>
    <section class="page-shell">
        <div class="page-header">
            <div class="eyebrow">{{ t('integrations.eyebrow') }}</div>
            <h1>{{ t('integrations.title') }}</h1>
            <p>{{ t('integrations.description') }}</p>
        </div>

        <div class="panel">
            <div class="panel-heading">
                <strong>{{ t('integrations.googleDrive.title') }}</strong>
                <span>{{ t('integrations.googleDrive.description') }}</span>
            </div>

            <div class="placeholder-block">
                <span>{{ t('integrations.statusLabel') }}</span>
                <strong>{{ t('integrations.pendingTitle') }}</strong>
                <small>{{ t('integrations.googleDrive.nextStep') }}</small>
            </div>
        </div>

        <div class="panel">
            <div class="panel-heading">
                <strong>{{ t('integrations.apiKeys.title') }}</strong>
                <span>{{ t('integrations.apiKeys.description') }}</span>
            </div>

            <div class="placeholder-block">
                <span>{{ t('integrations.statusLabel') }}</span>
                <strong>{{ t('integrations.pendingTitle') }}</strong>
                <small>{{ t('integrations.apiKeys.nextStep') }}</small>
            </div>
        </div>
    </section>
</template>

<style scoped>
    .page-shell {
        @apply flex flex-col gap-6;
    }

    .eyebrow {
        @apply text-xs font-bold uppercase tracking-[0.24em];
        color: #0f766e;
    }

    .page-header h1 {
        @apply mt-2 text-4xl font-black;
        color: #172033;
    }

    .page-header p,
    .panel-heading span,
    .placeholder-block span,
    .placeholder-block small {
        @apply text-sm leading-6;
        color: #526178;
    }

    .panel {
        @apply flex flex-col gap-5 rounded-[1.75rem] border p-5;
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(23, 32, 51, 0.08);
    }

    .panel-heading {
        @apply flex flex-col gap-2;
    }

    .panel-heading strong,
    .placeholder-block strong {
        color: #172033;
    }

    .panel-heading strong {
        @apply text-lg font-black;
    }

    .placeholder-block {
        @apply flex flex-col gap-2 rounded-[1.25rem] border p-4;
        background: #fffaf2;
        border-color: rgba(23, 32, 51, 0.08);
    }

    .placeholder-block strong {
        @apply text-xl font-black;
    }
</style>
