<template>
  <div class="whitepaper">
    <div class="grain" aria-hidden="true"></div>
    <header class="hero">
      <nav class="nav">
        <div class="logo">Optovia</div>
        <div class="nav-actions">
          <button
            class="lang-toggle"
            :class="{ active: lang === 'ru' }"
            @click="lang = 'ru'"
          >
            RU
          </button>
          <button
            class="lang-toggle"
            :class="{ active: lang === 'en' }"
            @click="lang = 'en'"
          >
            EN
          </button>
          <button class="cta">Запросить демо</button>
        </div>
      </nav>

      <div class="hero-grid">
        <div class="hero-text">
          <div class="eyebrow">White Paper</div>
          <h1>Инфраструктура цифровых инструментов, которая стирает границы</h1>
          <p class="lead">
            Optovia — платформа, которая помогает участникам рынка получать
            первоклассные цифровые инструменты и выстраивать процессы KYC и
            мониторинга как единую, прозрачную систему.
          </p>
          <div class="hero-actions">
            <button class="cta">Скачать PDF</button>
            <button class="ghost">Связаться с командой</button>
          </div>
          <div class="hero-meta">
            <div class="meta-card">
              <span class="meta-title">Фокус</span>
              <span class="meta-value">KYC / Monitoring</span>
            </div>
            <div class="meta-card">
              <span class="meta-title">Формат</span>
              <span class="meta-value">B2B / API-first</span>
            </div>
            <div class="meta-card">
              <span class="meta-title">Стадия</span>
              <span class="meta-value">Private beta</span>
            </div>
          </div>
        </div>
        <div class="hero-visual">
          <div class="card flow-card">
            <div class="card-header">
              <span>Flow View</span>
              <span class="pill">Live</span>
            </div>
            <div class="flow">
              <div class="flow-node success">User</div>
              <div class="flow-node success">Team</div>
              <div class="flow-node success">KYC App</div>
              <div class="flow-node warn">Temporo</div>
              <div class="flow-node success">Business</div>
              <div class="flow-node success">KSC Monitoring</div>
              <div class="flow-node success">Daxter</div>
            </div>
            <div class="flow-footer">
              <div>
                <span class="badge ok"></span>В синке: 996
              </div>
              <div>
                <span class="badge bad"></span>Не в синке: 4
              </div>
            </div>
          </div>
          <div class="card stats-card">
            <div class="stat">
              <span class="label">Всего профилей</span>
              <span class="value">1 000</span>
            </div>
            <div class="stat">
              <span class="label">Ошибки</span>
              <span class="value error">4</span>
            </div>
          </div>
        </div>
      </div>
    </header>

    <main>
      <section v-if="lang === 'ru'" class="section" id="ru">
        <div class="section-header">
          <h2>О платформе</h2>
          <p>
            Мы строим инфраструктуру, которая делает цифровые процессы понятными,
            управляемыми и доверенными. Optovia связывает команды, данные и
            комплаенс в единый контур.
          </p>
        </div>
        <div class="grid two">
          <div class="card">
            <h3>Проблема рынка</h3>
            <ul>
              <li>Сложные KYC-процессы разорваны по системам</li>
              <li>Низкая наблюдаемость и нет единого статуса</li>
              <li>Высокая доля ручных действий и человеческий фактор</li>
            </ul>
          </div>
          <div class="card">
            <h3>Наше решение</h3>
            <ul>
              <li>Единый пайплайн KYC и мониторинга</li>
              <li>Прозрачный статус актуальности данных</li>
              <li>API-first подход и гибкие интеграции</li>
            </ul>
          </div>
        </div>
      </section>

      <section v-if="lang === 'ru'" class="section">
        <div class="section-header">
          <h2>Как это работает</h2>
          <p>
            Прозрачный процесс с контролем статусов и истории на каждом шаге.
          </p>
        </div>
        <div class="timeline">
          <div class="step">
            <div class="dot"></div>
            <div>
              <h4>Создание команды</h4>
              <p>Пользователь создает команду и инициирует KYC application.</p>
            </div>
          </div>
          <div class="step">
            <div class="dot"></div>
            <div>
              <h4>Процессинг</h4>
              <p>Temporo запускает процедуру и передает управление бизнес-этапам.</p>
            </div>
          </div>
          <div class="step">
            <div class="dot"></div>
            <div>
              <h4>Мониторинг</h4>
              <p>KSC Monitoring фиксирует состояние, Daxter следит за актуальностью.</p>
            </div>
          </div>
        </div>
      </section>

      <section v-if="lang === 'ru'" class="section">
        <div class="section-header">
          <h2>Технологии</h2>
          <p>Сильная инженерия, измеримость и надежность.</p>
        </div>
        <div class="grid three">
          <div class="card">
            <h3>Архитектура</h3>
            <p>Микросервисы, событийная оркестрация, масштабирование по нагрузке.</p>
          </div>
          <div class="card">
            <h3>Наблюдаемость</h3>
            <p>Метрики, трассировка, алерты. Понимаем, где узкие места.</p>
          </div>
          <div class="card">
            <h3>Данные</h3>
            <p>PostgreSQL и MongoDB как основа для надежного хранения и поиска.</p>
          </div>
        </div>
      </section>

      <section v-if="lang === 'ru'" class="section">
        <div class="section-header">
          <h2>Безопасность</h2>
          <p>Доступ, токены и аудит — встроены в архитектуру.</p>
        </div>
        <div class="grid two">
          <div class="card">
            <h3>Контроль доступа</h3>
            <ul>
              <li>m2m-токены</li>
              <li>Изоляция сервисов</li>
              <li>Аудит действий</li>
            </ul>
          </div>
          <div class="card">
            <h3>Надежность</h3>
            <ul>
              <li>Failover и очереди</li>
              <li>Восстановление процессов</li>
              <li>История событий</li>
            </ul>
          </div>
        </div>
      </section>

      <section v-if="lang === 'ru'" class="section">
        <div class="section-header">
          <h2>Roadmap</h2>
          <p>Черновик, дополним вместе.</p>
        </div>
        <div class="grid three">
          <div class="card">
            <h3>Q1</h3>
            <p>Private beta + пилоты с партнерами.</p>
          </div>
          <div class="card">
            <h3>Q2</h3>
            <p>Автоматизация мониторинга, алерты, отчеты.</p>
          </div>
          <div class="card">
            <h3>Q3</h3>
            <p>Масштабирование и выход в новые вертикали.</p>
          </div>
        </div>
      </section>

      <section v-if="lang === 'en'" class="section" id="en">
        <div class="section-header">
          <h2>About the platform</h2>
          <p>
            We build infrastructure that makes digital processes transparent and
            trusted. Optovia connects teams, data, and compliance into a single
            system.
          </p>
        </div>
        <div class="grid two">
          <div class="card">
            <h3>Market problem</h3>
            <ul>
              <li>KYC processes are fragmented</li>
              <li>Low observability and no single status view</li>
              <li>Heavy manual work and human error</li>
            </ul>
          </div>
          <div class="card">
            <h3>Our solution</h3>
            <ul>
              <li>Unified KYC & monitoring pipeline</li>
              <li>Clear profile freshness status</li>
              <li>API-first integrations</li>
            </ul>
          </div>
        </div>
      </section>

      <section v-if="lang === 'en'" class="section" id="en-more">
        <div class="section-header">
          <h2>How it works</h2>
          <p>Transparent flow with status control at each step.</p>
        </div>
        <div class="timeline">
          <div class="step">
            <div class="dot"></div>
            <div>
              <h4>Team creation</h4>
              <p>User creates a team and submits a KYC application.</p>
            </div>
          </div>
          <div class="step">
            <div class="dot"></div>
            <div>
              <h4>Processing</h4>
              <p>Temporo orchestrates the procedure and business steps.</p>
            </div>
          </div>
          <div class="step">
            <div class="dot"></div>
            <div>
              <h4>Monitoring</h4>
              <p>KSC Monitoring stores state, Daxter tracks freshness.</p>
            </div>
          </div>
        </div>
      </section>

      <section v-if="lang === 'en'" class="section" id="en-tech">
        <div class="section-header">
          <h2>Technology</h2>
          <p>Strong engineering, measurable outcomes, reliability.</p>
        </div>
        <div class="grid three">
          <div class="card">
            <h3>Architecture</h3>
            <p>Microservices, event-driven orchestration, scalable design.</p>
          </div>
          <div class="card">
            <h3>Observability</h3>
            <p>Metrics, tracing, alerts. We see bottlenecks early.</p>
          </div>
          <div class="card">
            <h3>Data</h3>
            <p>PostgreSQL and MongoDB as the reliable data backbone.</p>
          </div>
        </div>
      </section>

      <section v-if="lang === 'en'" class="section" id="en-security">
        <div class="section-header">
          <h2>Security</h2>
          <p>Access control, tokens, and audit built in.</p>
        </div>
        <div class="grid two">
          <div class="card">
            <h3>Access control</h3>
            <ul>
              <li>m2m tokens</li>
              <li>Service isolation</li>
              <li>Audit trail</li>
            </ul>
          </div>
          <div class="card">
            <h3>Reliability</h3>
            <ul>
              <li>Failover and queues</li>
              <li>Process recovery</li>
              <li>Event history</li>
            </ul>
          </div>
        </div>
      </section>

      <section v-if="lang === 'en'" class="section" id="en-roadmap">
        <div class="section-header">
          <h2>Roadmap</h2>
          <p>Draft, we will refine together.</p>
        </div>
        <div class="grid three">
          <div class="card">
            <h3>Q1</h3>
            <p>Private beta + partner pilots.</p>
          </div>
          <div class="card">
            <h3>Q2</h3>
            <p>Monitoring automation, alerts, reporting.</p>
          </div>
          <div class="card">
            <h3>Q3</h3>
            <p>Scale and expand into new verticals.</p>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="footer-content">
        <div>
          <div class="logo">Optovia</div>
          <p>White Paper v0.1</p>
        </div>
        <div>
          <p>Контакты: <span class="muted">to be added</span></p>
          <p>Команда: <span class="muted">to be added</span></p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
const lang = ref<'ru' | 'en'>('ru');

definePageMeta({
  layout: false,
});
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;700&family=IBM+Plex+Sans:wght@300;400;600&display=swap');

:global(body) {
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  color: #13100f;
  background: radial-gradient(circle at top left, #fef9f0 0%, #f5f1ea 55%, #efe7dd 100%);
}

.whitepaper {
  position: relative;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.06'/></svg>");
}

.hero {
  padding: 48px 72px 80px;
  background: linear-gradient(135deg, rgba(31, 91, 158, 0.08), rgba(232, 123, 42, 0.05));
  border-bottom: 1px solid rgba(19, 16, 15, 0.12);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}

.logo {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  letter-spacing: 0.02em;
}

.nav-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.lang-toggle {
  border: 1px solid rgba(19, 16, 15, 0.12);
  background: transparent;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.lang-toggle.active {
  background: #13100f;
  color: white;
}

.cta {
  background: #1f5b9e;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
}

.ghost {
  background: transparent;
  border: 1px solid #13100f;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center;
}

.hero-text h1 {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  line-height: 1.1;
  margin: 8px 0 20px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: #6c6661;
}

.lead {
  font-size: 18px;
  color: #6c6661;
  max-width: 520px;
}

.hero-actions {
  margin-top: 24px;
  display: flex;
  gap: 16px;
}

.hero-meta {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.meta-card {
  background: #ffffff;
  border: 1px solid rgba(19, 16, 15, 0.12);
  padding: 12px 14px;
  border-radius: 12px;
}

.meta-title {
  display: block;
  font-size: 11px;
  color: #6c6661;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.meta-value {
  font-weight: 600;
}

.hero-visual {
  display: grid;
  gap: 16px;
}

.card {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(19, 16, 15, 0.12);
  box-shadow: 0 20px 60px rgba(15, 17, 19, 0.15);
}

.flow-card {
  padding: 20px 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #6c6661;
}

.pill {
  background: #e7f3ff;
  color: #1f5b9e;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
}

.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.flow-node {
  text-align: center;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(19, 16, 15, 0.12);
  background: #f9f7f3;
}

.flow-node.success {
  border-color: rgba(31, 91, 158, 0.4);
}

.flow-node.warn {
  border-color: rgba(232, 123, 42, 0.6);
  background: rgba(232, 123, 42, 0.08);
}

.flow-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6c6661;
}

.badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.badge.ok {
  background: #1f5b9e;
}

.badge.bad {
  background: #e23b2a;
}

.stats-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stat {
  background: #f9f7f3;
  border-radius: 14px;
  padding: 14px;
}

.label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6c6661;
}

.value {
  display: block;
  font-size: 24px;
  font-weight: 600;
}

.value.error {
  color: #e23b2a;
}

.section {
  padding: 72px;
}

.section-header {
  max-width: 640px;
  margin-bottom: 32px;
}

.section-header h2 {
  font-family: 'Fraunces', serif;
  font-size: 34px;
  margin-bottom: 12px;
}

.grid {
  display: grid;
  gap: 20px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.timeline {
  display: grid;
  gap: 18px;
}

.step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 16px;
  align-items: start;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1f5b9e;
  margin-top: 6px;
}

.footer {
  padding: 40px 72px 60px;
  border-top: 1px solid rgba(19, 16, 15, 0.12);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #6c6661;
}

.muted {
  color: #6c6661;
  font-style: italic;
}

@media (max-width: 980px) {
  .hero {
    padding: 36px 24px 60px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-text h1 {
    font-size: 36px;
  }

  .section {
    padding: 52px 24px;
  }

  .grid.two,
  .grid.three {
    grid-template-columns: 1fr;
  }

  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>
