<template>
  <div class="pb-16">
    <section class="container mx-auto px-4 mt-10">
      <div class="rounded-3xl bg-base-200/70 border border-base-300/70 p-8 md:p-12 relative overflow-hidden">
        <div class="absolute -top-24 -right-24 h-64 w-64 rounded-full bg-primary/20 blur-3xl" />
        <div class="absolute -bottom-28 -left-20 h-72 w-72 rounded-full bg-secondary/20 blur-3xl" />

        <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6 relative">
          <div>
            <div class="text-xs uppercase tracking-[0.3em] text-base-content/50 mb-4">White paper</div>
            <h1 class="text-3xl md:text-5xl font-bold text-base-content max-w-3xl">
              {{ content.hero.title }}
            </h1>
            <p class="mt-5 text-lg text-base-content/70 max-w-2xl">
              {{ content.hero.subtitle }}
            </p>
            <div class="mt-8 flex flex-wrap gap-3">
              <button class="btn btn-primary">{{ content.hero.ctaPrimary }}</button>
              <button class="btn btn-ghost border border-base-300">{{ content.hero.ctaSecondary }}</button>
            </div>
          </div>

          <div class="flex items-center gap-2">
            <button
              class="btn btn-xs"
              :class="lang === 'ru' ? 'btn-primary' : 'btn-ghost'"
              @click="lang = 'ru'"
            >
              RU
            </button>
            <button
              class="btn btn-xs"
              :class="lang === 'en' ? 'btn-primary' : 'btn-ghost'"
              @click="lang = 'en'"
            >
              EN
            </button>
          </div>
        </div>

        <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="card bg-base-100 border border-base-300/60">
            <div class="card-body p-5">
              <p class="text-xs uppercase tracking-[0.2em] text-base-content/40">{{ content.hero.cards[0].label }}</p>
              <p class="text-lg font-semibold text-base-content">{{ content.hero.cards[0].value }}</p>
            </div>
          </div>
          <div class="card bg-base-100 border border-base-300/60">
            <div class="card-body p-5">
              <p class="text-xs uppercase tracking-[0.2em] text-base-content/40">{{ content.hero.cards[1].label }}</p>
              <p class="text-lg font-semibold text-base-content">{{ content.hero.cards[1].value }}</p>
            </div>
          </div>
          <div class="card bg-base-100 border border-base-300/60">
            <div class="card-body p-5">
              <p class="text-xs uppercase tracking-[0.2em] text-base-content/40">{{ content.hero.cards[2].label }}</p>
              <p class="text-lg font-semibold text-base-content">{{ content.hero.cards[2].value }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="container mx-auto px-4 mt-16">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="card bg-base-100 border border-base-300/60">
          <div class="card-body">
            <h2 class="card-title text-2xl">{{ content.vision.title }}</h2>
            <p class="text-base-content/70">{{ content.vision.body }}</p>
            <div class="mt-4 space-y-3">
              <div class="flex items-start gap-3">
                <Icon name="lucide:sparkles" class="text-primary" />
                <div>
                  <p class="font-semibold">{{ content.vision.points[0].title }}</p>
                  <p class="text-sm text-base-content/60">{{ content.vision.points[0].text }}</p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <Icon name="lucide:globe" class="text-primary" />
                <div>
                  <p class="font-semibold">{{ content.vision.points[1].title }}</p>
                  <p class="text-sm text-base-content/60">{{ content.vision.points[1].text }}</p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <Icon name="lucide:layers" class="text-primary" />
                <div>
                  <p class="font-semibold">{{ content.vision.points[2].title }}</p>
                  <p class="text-sm text-base-content/60">{{ content.vision.points[2].text }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="card bg-base-100 border border-base-300/60">
          <div class="card-body">
            <h2 class="card-title text-2xl">{{ content.mission.title }}</h2>
            <p class="text-base-content/70">{{ content.mission.body }}</p>
            <div class="mt-6 grid grid-cols-1 gap-3">
              <div class="rounded-2xl bg-base-200/70 p-4">
                <p class="text-sm uppercase tracking-[0.2em] text-base-content/40">{{ content.mission.cards[0].label }}</p>
                <p class="text-lg font-semibold">{{ content.mission.cards[0].value }}</p>
              </div>
              <div class="rounded-2xl bg-base-200/70 p-4">
                <p class="text-sm uppercase tracking-[0.2em] text-base-content/40">{{ content.mission.cards[1].label }}</p>
                <p class="text-lg font-semibold">{{ content.mission.cards[1].value }}</p>
              </div>
              <div class="rounded-2xl bg-base-200/70 p-4">
                <p class="text-sm uppercase tracking-[0.2em] text-base-content/40">{{ content.mission.cards[2].label }}</p>
                <p class="text-lg font-semibold">{{ content.mission.cards[2].value }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="container mx-auto px-4 mt-16">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="card bg-gradient-to-br from-base-200 to-base-100 border border-base-300/60">
          <div class="card-body">
            <h3 class="text-xl font-semibold">{{ content.principles[0].title }}</h3>
            <p class="text-base-content/70">{{ content.principles[0].text }}</p>
          </div>
        </div>
        <div class="card bg-gradient-to-br from-base-200 to-base-100 border border-base-300/60">
          <div class="card-body">
            <h3 class="text-xl font-semibold">{{ content.principles[1].title }}</h3>
            <p class="text-base-content/70">{{ content.principles[1].text }}</p>
          </div>
        </div>
        <div class="card bg-gradient-to-br from-base-200 to-base-100 border border-base-300/60">
          <div class="card-body">
            <h3 class="text-xl font-semibold">{{ content.principles[2].title }}</h3>
            <p class="text-base-content/70">{{ content.principles[2].text }}</p>
          </div>
        </div>
      </div>
    </section>

    <section class="container mx-auto px-4 mt-16">
      <div class="rounded-3xl bg-base-100 border border-base-300/60 p-8 md:p-12">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
          <div>
            <h2 class="text-2xl md:text-3xl font-bold">{{ content.trust.title }}</h2>
            <p class="mt-4 text-base-content/70 max-w-2xl">{{ content.trust.body }}</p>
          </div>
          <div class="grid grid-cols-1 gap-3 w-full max-w-sm">
            <div class="rounded-2xl bg-base-200/70 p-4">
              <p class="text-sm text-base-content/60">{{ content.trust.items[0] }}</p>
            </div>
            <div class="rounded-2xl bg-base-200/70 p-4">
              <p class="text-sm text-base-content/60">{{ content.trust.items[1] }}</p>
            </div>
            <div class="rounded-2xl bg-base-200/70 p-4">
              <p class="text-sm text-base-content/60">{{ content.trust.items[2] }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="container mx-auto px-4 mt-16">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="card bg-base-100 border border-base-300/60">
          <div class="card-body">
            <h3 class="text-xl font-semibold">{{ content.team.title }}</h3>
            <p class="text-base-content/60">{{ content.team.body }}</p>
          </div>
        </div>
        <div class="card bg-base-100 border border-base-300/60">
          <div class="card-body">
            <h3 class="text-xl font-semibold">{{ content.roadmap.title }}</h3>
            <ul class="mt-3 space-y-2 text-base-content/70">
              <li v-for="item in content.roadmap.items" :key="item">• {{ item }}</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <section class="container mx-auto px-4 mt-16">
      <div class="rounded-3xl bg-gradient-to-r from-primary/80 via-secondary/70 to-accent/80 text-primary-content p-10 md:p-14">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
          <div>
            <h2 class="text-2xl md:text-3xl font-bold">{{ content.cta.title }}</h2>
            <p class="mt-2 text-primary-content/80">{{ content.cta.body }}</p>
          </div>
          <button class="btn bg-base-100 text-base-content border-0">{{ content.cta.button }}</button>
        </div>
      </div>
    </section>
  </div>
</template>

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

const copy = {
  ru: {
    hero: {
      title: 'Инфраструктура цифровых инструментов, которая стирает границы',
      subtitle:
        'Optovia строит единое пространство для участников рынка: чтобы процессы были прозрачными, доверенными и простыми, а команды могли работать быстрее и безопаснее.',
      ctaPrimary: 'Запросить демо',
      ctaSecondary: 'Связаться с командой',
      cards: [
        { label: 'Идея', value: 'Стираем границы и упрощаем рынок' },
        { label: 'Подход', value: 'Инфраструктура вместо точечных продуктов' },
        { label: 'Форма', value: 'B2B / API-first / экосистема' },
      ],
    },
    vision: {
      title: 'Видение',
      body:
        'Мы делаем инфраструктуру, которая позволяет компаниям быстрее доверять друг другу и прозрачнее работать с данными. Наша цель — убрать шум, убрать барьеры и дать рынку работающий цифровой фундамент.',
      points: [
        { title: 'Стираем границы', text: 'Объединяем процессы и участников рынка в единый контур.' },
        { title: 'Делаем проще', text: 'Снижаем сложность и убираем ручные операции.' },
        { title: 'Строим фундамент', text: 'Даем основу, на которой бизнес может расти.' },
      ],
    },
    mission: {
      title: 'Что мы строим',
      body:
        'Optovia — это инфраструктура для цифровых операций: от доверия и безопасности до мониторинга и прозрачности.',
      cards: [
        { label: 'Единая экосистема', value: 'Команды, данные, процессы — в одной системе.' },
        { label: 'Прозрачность', value: 'Статусы и история действий в реальном времени.' },
        { label: 'Масштабируемость', value: 'Подходит для компаний любого размера.' },
      ],
    },
    principles: [
      { title: 'Прозрачность', text: 'Каждый процесс наблюдаем и измерим.' },
      { title: 'Надежность', text: 'Стабильная инфраструктура и контроль рисков.' },
      { title: 'Скорость', text: 'Ускоряем рутину и даем бизнесу скорость решений.' },
    ],
    trust: {
      title: 'Доверие и безопасность',
      body:
        'Мы строим технологию, которая поддерживает надежность на всех уровнях — от доступа до мониторинга данных. Безопасность не отдельный слой, а часть ДНК платформы.',
      items: [
        'Токены и изоляция сервисов',
        'Аудит действий и история событий',
        'Контроль доступа и права команд',
      ],
    },
    team: {
      title: 'Команда',
      body: 'Скоро добавим блок о команде и опыте. (заглушка)',
    },
    roadmap: {
      title: 'Roadmap',
      items: ['Private beta и пилоты', 'Усиление мониторинга и алертов', 'Масштабирование и новые вертикали'],
    },
    cta: {
      title: 'Хотите узнать больше?',
      body: 'Расскажем о платформе и покажем, как Optovia может помочь вашему бизнесу.',
      button: 'Связаться',
    },
  },
  en: {
    hero: {
      title: 'Infrastructure for digital tools that removes borders',
      subtitle:
        'Optovia builds a shared space for market participants: transparent, trusted, and simple processes that let teams move faster and safer.',
      ctaPrimary: 'Request demo',
      ctaSecondary: 'Contact team',
      cards: [
        { label: 'Idea', value: 'Remove borders and simplify the market' },
        { label: 'Approach', value: 'Infrastructure, not isolated products' },
        { label: 'Form', value: 'B2B / API-first / ecosystem' },
      ],
    },
    vision: {
      title: 'Vision',
      body:
        'We build infrastructure that helps companies trust each other faster and work with data more transparently. Our goal is to remove noise, remove barriers, and deliver a working digital foundation.',
      points: [
        { title: 'Remove borders', text: 'Unite processes and participants into one flow.' },
        { title: 'Make it simple', text: 'Reduce complexity and manual actions.' },
        { title: 'Build the foundation', text: 'Give the market a reliable base to grow.' },
      ],
    },
    mission: {
      title: 'What we build',
      body:
        'Optovia is infrastructure for digital operations: from trust and safety to monitoring and transparency.',
      cards: [
        { label: 'Unified ecosystem', value: 'Teams, data, and processes in one system.' },
        { label: 'Transparency', value: 'Statuses and history in real time.' },
        { label: 'Scalability', value: 'Fits businesses of any size.' },
      ],
    },
    principles: [
      { title: 'Transparency', text: 'Every process is observable and measurable.' },
      { title: 'Reliability', text: 'Stable infrastructure and risk control.' },
      { title: 'Speed', text: 'Faster operations and decision making.' },
    ],
    trust: {
      title: 'Trust & security',
      body:
        'Security is embedded in the platform DNA: access, monitoring, and auditability built-in from day one.',
      items: ['Tokens and service isolation', 'Audit trails and event history', 'Access control and team permissions'],
    },
    team: {
      title: 'Team',
      body: 'We will add the team and experience section soon. (placeholder)',
    },
    roadmap: {
      title: 'Roadmap',
      items: ['Private beta and pilots', 'Monitoring and alerts expansion', 'Scaling and new verticals'],
    },
    cta: {
      title: 'Want to learn more?',
      body: 'We will show how Optovia can help your business.',
      button: 'Contact us',
    },
  },
} as const

const content = computed(() => copy[lang.value])
</script>
