<script setup lang="ts">
import iconImage from '@/assets/images/icon.svg'

const valueProps = [
  {
    icon: 'mdi-folder-multiple-outline',
    title: 'Dateien zuerst',
    text: 'Ordner, Dateiliste und Vorschau bilden den Kern – kein überladenes Dashboard, keine Ablenkung.',
  },
  {
    icon: 'mdi-file-document-edit-outline',
    title: 'Markdown direkt im Browser',
    text: 'Notizen, Doku und Konzepte ohne Tool-Wechsel öffnen, lesen und sauber strukturieren.',
  },
  {
    icon: 'mdi-server-outline',
    title: 'Self-hosted Kontrolle',
    text: 'Metadaten in PostgreSQL, Dateien in MinIO. Volle Datenhoheit auf deinem eigenen Server.',
  },
]

const coreFeatures = [
  {
    icon: 'mdi-folder-open-outline',
    title: 'Ordnernavigation wie gewohnt',
    text: 'Schnell durch Verzeichnisse klicken, Inhalte erfassen und sauber organisieren.',
  },
  {
    icon: 'mdi-image-outline',
    title: 'PDF- und Bildvorschau',
    text: 'Dateien direkt einsehen, ohne externe Viewer oder ständige Downloads.',
  },
  {
    icon: 'mdi-account-lock-outline',
    title: 'Klare Benutzerlogik',
    text: 'Keine offene Registrierung. Konten werden bewusst und kontrolliert verwaltet.',
  },
  {
    icon: 'mdi-lightning-bolt-outline',
    title: 'Schlankes MVP-Setup',
    text: 'Fokus auf das Wesentliche – stabil, wartbar und realistisch für Solo-Entwicklung.',
  },
]

const workflowSteps = [
  {
    number: '01',
    title: 'Anmelden',
    text: 'Mit deinem bestehenden Konto einsteigen und direkt in deiner Dateiablage starten.',
  },
  {
    number: '02',
    title: 'Dateien strukturieren',
    text: 'Ordner anlegen, Inhalte hochladen und Arbeitsbereiche aufgeräumt halten.',
  },
  {
    number: '03',
    title: 'Inhalte bearbeiten',
    text: 'Markdown, Bilder und PDFs direkt in der App ansehen und bearbeiten.',
  },
]

const techStack = [
  { label: 'Vue 3', icon: 'mdi-vuejs' },
  { label: 'ASP.NET Core', icon: 'mdi-dot-net' },
  { label: 'PostgreSQL', icon: 'mdi-database-outline' },
  { label: 'MinIO', icon: 'mdi-cloud-outline' },
  { label: 'md-editor-v3', icon: 'mdi-language-markdown-outline' },
  { label: 'Cookie-Auth', icon: 'mdi-cookie-outline' },
]
</script>

<template>
  <v-container fluid class="landing-page hoard-page">
    <section class="hero hoard-panel hoard-panel-gradient hoard-spotlight">
      <div class="hero-copy">
        <p class="hero-kicker hoard-kicker hoard-kicker--wide">Self-hosted Datei-Workspace</p>
        <h1>
          Eine ruhige Heimat für deine
          <span class="hero-accent">Dateien, Ordner und Notizen.</span>
        </h1>
        <p class="hero-lead">
          Hoard ist eine Google-Drive-inspirierte Web-App für Teams, die volle Kontrolle über
          Daten, Struktur und Workflow behalten wollen – ohne Cloud-Lock-in, ohne SaaS-Abo.
        </p>

        <div class="hero-actions hoard-action-row">
          <v-btn variant="elevated" size="large" prepend-icon="mdi-login" to="/login">
            Anmelden
          </v-btn>
          <v-btn variant="outlined" size="large" prepend-icon="mdi-arrow-right" to="/impressum">
            Mehr erfahren
          </v-btn>
        </div>

        <div class="hero-tags">
          <span class="hoard-chip hoard-chip--brand">
            <v-icon icon="mdi-shield-check-outline" size="14" /> Datenhoheit
          </span>
          <span class="hoard-chip">
            <v-icon icon="mdi-account-multiple-outline" size="14" /> Mehrbenutzerfähig
          </span>
          <span class="hoard-chip">
            <v-icon icon="mdi-weather-night" size="14" /> Light- und Dark-Mode
          </span>
        </div>
      </div>

      <aside class="hero-preview" aria-hidden="true">
        <div class="preview-window">
          <header class="preview-window__head">
            <span class="preview-window__dots">
              <span /><span /><span />
            </span>
            <span class="preview-window__path">
              hoard / dokumentation
            </span>
          </header>

          <div class="preview-window__body">
            <header class="preview-toolbar">
              <span class="preview-toolbar__title">Dokumentation</span>
              <span class="hoard-chip hoard-chip--brand">
                <v-icon icon="mdi-folder-outline" size="14" /> 3 Ordner · 12 Dateien
              </span>
            </header>

            <div class="preview-list">
              <article class="preview-row">
                <span class="preview-row__icon">
                  <v-icon icon="mdi-folder-outline" size="18" />
                </span>
                <div class="preview-row__body">
                  <p class="preview-row__title">Konzepte</p>
                  <p class="preview-row__meta">Ordner · vor 2 Tagen</p>
                </div>
                <span class="hoard-status hoard-status--muted">Geteilt</span>
              </article>

              <article class="preview-row preview-row--active">
                <span class="preview-row__icon">
                  <v-icon icon="mdi-language-markdown-outline" size="18" />
                </span>
                <div class="preview-row__body">
                  <p class="preview-row__title">roadmap.md</p>
                  <p class="preview-row__meta">Markdown · 18 KB</p>
                </div>
                <span class="hoard-status hoard-status--success">Editor</span>
              </article>

              <article class="preview-row">
                <span class="preview-row__icon">
                  <v-icon icon="mdi-file-pdf-box" size="18" />
                </span>
                <div class="preview-row__body">
                  <p class="preview-row__title">api-reference.pdf</p>
                  <p class="preview-row__meta">PDF · 1,2 MB</p>
                </div>
                <span class="hoard-status hoard-status--info">Vorschau</span>
              </article>

              <article class="preview-row">
                <span class="preview-row__icon">
                  <v-icon icon="mdi-image-outline" size="18" />
                </span>
                <div class="preview-row__body">
                  <p class="preview-row__title">screen-2026-04.png</p>
                  <p class="preview-row__meta">Bild · 480 KB</p>
                </div>
                <span class="hoard-status hoard-status--muted">Bereit</span>
              </article>
            </div>
          </div>
        </div>

        <div class="preview-glow" aria-hidden="true">
          <img :src="iconImage" alt="" class="preview-glow__logo" />
        </div>
      </aside>
    </section>

    <section class="value-grid">
      <article v-for="item in valueProps" :key="item.title" class="value-card hoard-panel">
        <span class="hoard-icon-tile hoard-icon-tile--lg">
          <v-icon :icon="item.icon" size="22" />
        </span>
        <h2>{{ item.title }}</h2>
        <p>{{ item.text }}</p>
      </article>
    </section>

    <section class="feature-section hoard-panel">
      <header class="hoard-section-head">
        <p class="hoard-kicker">Für den Produktivalltag</p>
        <h2>Weniger Tool-Chaos, mehr Fokus auf Inhalte.</h2>
        <p>Hoard bündelt Datei- und Markdown-Workflows in einer ruhigen Oberfläche, die nicht ablenkt.</p>
      </header>

      <div class="feature-grid">
        <article v-for="feature in coreFeatures" :key="feature.title" class="feature-card">
          <span class="hoard-icon-tile">
            <v-icon :icon="feature.icon" size="20" />
          </span>
          <div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.text }}</p>
          </div>
        </article>
      </div>
    </section>

    <section class="workflow-section">
      <header class="hoard-section-head">
        <p class="hoard-kicker">So funktioniert Hoard</p>
        <h2>In drei klaren Schritten produktiv starten.</h2>
      </header>
      <div class="workflow-grid">
        <article v-for="step in workflowSteps" :key="step.number" class="workflow-card hoard-panel">
          <p class="workflow-number">{{ step.number }}</p>
          <h3>{{ step.title }}</h3>
          <p>{{ step.text }}</p>
        </article>
      </div>
    </section>

    <section class="stack-section hoard-panel hoard-panel-gradient">
      <div class="stack-copy">
        <p class="hoard-kicker">Technische Basis</p>
        <h2>Schlank gebaut für ein realistisches MVP.</h2>
        <p>
          Hoard kombiniert einen modernen Frontend-Stack mit einem pragmatischen Backend-Setup,
          damit Weiterentwicklung und Betrieb auch solo machbar bleiben.
        </p>
      </div>
      <div class="stack-list">
        <span v-for="item in techStack" :key="item.label" class="stack-pill">
          <v-icon :icon="item.icon" size="16" />
          {{ item.label }}
        </span>
      </div>
    </section>
  </v-container>
</template>

<style scoped>
.landing-page {
  --hoard-page-width: 1200px;
}

/* ---------- Hero ---------- */
.hero {
  --hoard-gradient-angle: 130deg;
  --hoard-gradient-start: color-mix(in srgb, var(--color-primary-100) 70%, var(--color-surface) 30%);
  --hoard-gradient-end: var(--color-surface);
  --hoard-gradient-end-stop: 60%;

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-10);
  padding: var(--space-12);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

h1 {
  margin-bottom: var(--space-4);
  max-width: 18ch;
  font-size: clamp(2.4rem, 1.6rem + 1.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.hero-accent {
  background: linear-gradient(120deg, var(--color-primary-700) 30%, var(--color-primary-500) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  margin-bottom: var(--space-6);
  max-width: 56ch;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  line-height: 1.6;
}

.hero-actions {
  margin-bottom: var(--space-5);
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Hero preview ---------- */
.hero-preview {
  position: relative;
  align-self: center;
  z-index: 1;
}

.preview-window {
  position: relative;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-surface) 96%, var(--color-surface-alt) 4%),
      var(--color-surface)
    );
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.preview-window__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: var(--color-surface-alt);
}

.preview-window__dots {
  display: inline-flex;
  gap: 6px;
}

.preview-window__dots span {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--color-border-strong) 80%, var(--color-text-muted) 20%);
}

.preview-window__dots span:first-child {
  background-color: color-mix(in srgb, var(--color-danger) 60%, var(--color-border-strong) 40%);
}

.preview-window__dots span:nth-child(2) {
  background-color: color-mix(in srgb, var(--color-warning) 60%, var(--color-border-strong) 40%);
}

.preview-window__dots span:last-child {
  background-color: color-mix(in srgb, var(--color-success) 60%, var(--color-border-strong) 40%);
}

.preview-window__path {
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
}

.preview-window__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.preview-toolbar__title {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.preview-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.preview-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.preview-row:hover {
  border-color: color-mix(in srgb, var(--color-primary-300) 50%, var(--color-border) 50%);
  background-color: color-mix(in srgb, var(--color-primary-100) 28%, var(--color-surface) 72%);
}

.preview-row--active {
  border-color: color-mix(in srgb, var(--color-primary-500) 60%, var(--color-border) 40%);
  background-color: color-mix(in srgb, var(--color-primary-100) 60%, var(--color-surface) 40%);
}

.preview-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--color-surface-alt) 70%, var(--color-surface) 30%);
  color: var(--color-text-secondary);
}

.preview-row--active .preview-row__icon {
  background-color: color-mix(in srgb, var(--color-primary-100) 80%, var(--color-surface) 20%);
  color: var(--color-primary-700);
}

.preview-row__title,
.preview-row__meta {
  margin: 0;
}

.preview-row__title {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: 500;
}

.preview-row__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.preview-glow {
  position: absolute;
  inset: -10% -10% auto auto;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: blur(0.6px);
  opacity: 0.16;
}

.preview-glow__logo {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* ---------- Value grid ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.value-card {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.value-card,
.workflow-card,
.feature-card {
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.value-card:hover,
.workflow-card:hover,
.feature-card:hover {
  border-color: color-mix(in srgb, var(--color-primary-300) 50%, var(--color-border) 50%);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.value-card h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.value-card p,
.feature-card p,
.workflow-card p {
  margin: 0;
  color: var(--color-text-secondary);
}

/* ---------- Feature section ---------- */
.feature-section {
  padding: var(--space-8);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.feature-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.feature-card h3,
.workflow-card h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Workflow ---------- */
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.workflow-card {
  position: relative;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.workflow-card::before {
  content: '';
  position: absolute;
  left: var(--space-6);
  top: var(--space-6);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary-100) 70%, var(--color-surface) 30%);
  filter: blur(8px);
  opacity: 0.7;
  z-index: 0;
}

.workflow-number {
  position: relative;
  margin: 0;
  color: var(--color-primary-700);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  z-index: 1;
}

/* ---------- Stack ---------- */
.stack-section {
  --hoard-gradient-angle: 110deg;
  --hoard-gradient-start: color-mix(in srgb, var(--color-primary-100) 50%, var(--color-surface) 50%);
  --hoard-gradient-end: var(--color-surface);
  --hoard-gradient-end-stop: 70%;

  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8);
}

.stack-copy h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-2xl);
  letter-spacing: -0.015em;
}

.stack-copy p {
  margin: 0;
  color: var(--color-text-secondary);
  max-width: 56ch;
}

.stack-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.stack-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.stack-pill:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-primary-300) 60%, var(--color-border-strong) 40%);
}

.stack-pill .v-icon {
  color: var(--color-primary-700);
}

/* ---------- Animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy,
  .hero-preview,
  .value-card,
  .feature-section,
  .workflow-section,
  .stack-section {
    animation: hoard-soft-enter 320ms both;
  }

  .hero-preview {
    animation-delay: 80ms;
  }

  .value-card:nth-child(2) {
    animation-delay: 80ms;
  }

  .value-card:nth-child(3),
  .feature-section {
    animation-delay: 140ms;
  }

  .workflow-section {
    animation-delay: 180ms;
  }

  .stack-section {
    animation-delay: 220ms;
  }

  .preview-row {
    animation: hoard-soft-enter 240ms both;
  }

  .preview-row:nth-child(2) {
    animation-delay: 60ms;
  }

  .preview-row:nth-child(3) {
    animation-delay: 120ms;
  }

  .preview-row:nth-child(4) {
    animation-delay: 180ms;
  }
}

/* ---------- Responsive ---------- */
@media (width <= 1100px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-8);
  }

  .hero-preview {
    max-width: 720px;
  }

  .stack-section {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (width <= 960px) {
  .hero,
  .feature-section,
  .stack-section {
    padding: var(--space-6);
  }

  .hero-preview {
    max-width: none;
  }

  .preview-window__body {
    padding: var(--space-3);
  }

  .preview-row {
    padding: var(--space-3) var(--space-4);
  }

  .value-grid,
  .feature-grid,
  .workflow-grid {
    grid-template-columns: 1fr;
  }

  h1 {
    max-width: none;
  }

  .feature-card {
    padding: var(--space-4);
  }
}

@media (width <= 600px) {
  .hero,
  .feature-section,
  .stack-section,
  .feature-card,
  .value-card,
  .workflow-card {
    padding: var(--space-5);
  }

  .hero-lead {
    font-size: var(--font-size-md);
    margin-bottom: var(--space-5);
  }

  .hero-actions {
    width: 100%;
  }

  :deep(.hero-actions .v-btn) {
    width: 100%;
    min-height: 44px;
  }

  .hero-tags {
    gap: 6px;
  }

  .stack-pill {
    width: 100%;
    justify-content: center;
  }

  .preview-row {
    grid-template-columns: auto 1fr;
  }

  .preview-row .hoard-status {
    display: none;
  }
}
</style>
