<script setup lang="ts">
const valueProps = [
  {
    icon: 'mdi-folder-multiple-outline',
    title: 'Dateien zuerst',
    text: 'Ordner, Dateiliste und Vorschau sind der Kern. Kein überladenes Dashboard-Gefühl.',
  },
  {
    icon: 'mdi-file-document-edit-outline',
    title: 'Markdown direkt im Browser',
    text: 'Dokumente bearbeiten, lesen und strukturieren ohne Tool-Wechsel.',
  },
  {
    icon: 'mdi-server-outline',
    title: 'Self-hosted Kontrolle',
    text: 'Dateimetadaten in PostgreSQL, Dateien in MinIO, alles auf deinem 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 öffnen und direkt einsehen, ohne externe Viewer oder Downloads.',
  },
  {
    icon: 'mdi-account-lock-outline',
    title: 'Klare Benutzerlogik',
    text: 'Keine offene Registrierung. Accounts 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: 'Melde dich mit einem vorhandenen Konto an und starte direkt in deiner Dateiablage.',
  },
  {
    number: '02',
    title: 'Dateien strukturieren',
    text: 'Lege Ordner an, lade Dateien hoch und halte deine Arbeitsbereiche aufgeräumt.',
  },
  {
    number: '03',
    title: 'Inhalte bearbeiten',
    text: 'Markdown, Bilder und PDFs direkt in der App ansehen und bearbeiten.',
  },
]

const techStack = ['Vue 3', 'ASP.NET Core', 'PostgreSQL', 'MinIO', 'md-editor-v3', 'Cookie Auth']
</script>

<template>
  <v-container fluid class="landing-page hoard-page">
    <section class="hero hoard-panel hoard-panel-gradient">
      <div class="hero-copy">
        <p class="hero-kicker hoard-kicker">Self-hosted Datei-Workspace</p>
        <h1>Hoard ist deine ruhige Startseite für Dateien, Ordner und Markdown.</h1>
        <p class="hero-lead">
          Eine einfache, Google-Drive-inspirierte Web-App für Teams, die volle Kontrolle über
          Daten, Struktur und Workflow behalten wollen.
        </p>

        <div class="hero-actions hoard-action-row">
          <v-btn color="primary" size="large" prepend-icon="mdi-login" to="/login">
            Zum Login
          </v-btn>
          <v-btn variant="outlined" size="large" prepend-icon="mdi-file-document-outline" to="/impressum">
            Mehr erfahren
          </v-btn>
        </div>

        <div class="hero-tags">
          <span class="hero-tag">Light-first UX</span>
          <span class="hero-tag">Mehrbenutzerfähig</span>
          <span class="hero-tag">Ohne SaaS-Abhängigkeit</span>
        </div>
      </div>

      <div class="hero-preview">
        <header class="preview-head">
          <p class="preview-title">Beispielansicht</p>
          <span class="preview-pill">Workspace</span>
        </header>
        <div class="preview-list">
          <article class="preview-row">
            <v-icon icon="mdi-folder-outline" size="18" />
            <div>
              <p class="row-title">Dokumentation</p>
              <p class="row-meta">Ordner · vor 3 Tagen aktualisiert</p>
            </div>
          </article>
          <article class="preview-row">
            <v-icon icon="mdi-file-document-outline" size="18" />
            <div>
              <p class="row-title">roadmap.md</p>
              <p class="row-meta">Markdown · 18 KB</p>
            </div>
          </article>
          <article class="preview-row">
            <v-icon icon="mdi-file-pdf-box" size="18" />
            <div>
              <p class="row-title">api-reference.pdf</p>
              <p class="row-meta">PDF · 1.2 MB</p>
            </div>
          </article>
        </div>
      </div>
    </section>

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

    <section class="feature-section hoard-panel">
      <header class="section-head">
        <p class="section-kicker hoard-kicker">Für den Produktivalltag</p>
        <h2>Weniger Tool-Chaos, mehr Fokus auf Inhalte</h2>
      </header>
      <div class="feature-grid">
        <article v-for="feature in coreFeatures" :key="feature.title" class="feature-card">
          <v-icon :icon="feature.icon" size="20" />
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.text }}</p>
        </article>
      </div>
    </section>

    <section class="workflow-section">
      <header class="section-head">
        <p class="section-kicker 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">
      <div class="stack-copy">
        <p class="section-kicker hoard-kicker">Technische Basis</p>
        <h2>Schlank gebaut für ein realistisches MVP</h2>
        <p class="stack-text">
          Hoard kombiniert einen modernen Frontend-Stack mit einem pragmatischen Backend-Setup,
          damit Weiterentwicklung und Betrieb auch solo gut machbar bleiben.
        </p>
      </div>
      <div class="stack-list">
        <span v-for="item in techStack" :key="item" class="stack-pill">{{ item }}</span>
      </div>
    </section>
  </v-container>
</template>

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

.hero {
  --hoard-gradient-angle: 120deg;
  --hoard-gradient-start: color-mix(in srgb, var(--color-primary-100) 34%, var(--color-surface) 66%);
  --hoard-gradient-end: var(--color-surface);
  --hoard-gradient-end-stop: 52%;

  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-8);
}

.workflow-number,
.preview-title,
.row-title,
.row-meta,
.stack-text {
  margin: 0;
}

h1 {
  margin-bottom: var(--space-4);
  max-width: 20ch;
  font-size: 3rem;
  line-height: 1.08;
}

.hero-lead {
  margin-bottom: var(--space-5);
  max-width: 50ch;
  color: var(--color-text-secondary);
  font-size: 15px;
}

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

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

.hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.hero-preview {
  align-self: center;
  padding: var(--space-5);
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--color-border) 76%, var(--color-surface) 24%);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-surface-alt) 82%, var(--color-surface) 18%),
      var(--color-surface)
    );
  box-shadow: var(--shadow-sm);
}

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.preview-title {
  color: var(--color-text);
  font-weight: 600;
}

.preview-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-2);
  border-radius: 999px;
  color: var(--color-primary-700);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background-color: var(--color-primary-100);
}

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

.preview-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, var(--color-surface) 25%);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.preview-row:hover {
  border-color: color-mix(in srgb, var(--color-primary-300) 52%, var(--color-border) 48%);
  box-shadow: var(--shadow-sm);
  transform: translateX(3px);
}

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

.row-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

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

.value-card {
  padding: var(--space-5);
}

.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) 48%, var(--color-border) 52%);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

:deep(.value-card > .v-icon),
:deep(.feature-card > .v-icon) {
  display: inline-flex;
  width: 36px;
  height: 36px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-primary-700);
  background-color: color-mix(in srgb, var(--color-primary-100) 82%, var(--color-surface) 18%);
}

.value-card h2,
.section-head h2 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 1.65rem;
}

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

.feature-section,
.stack-section {
  padding: var(--space-6);
}

.section-head {
  margin-bottom: var(--space-5);
}

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

.feature-card {
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, var(--color-surface) 25%);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--color-surface) 80%, var(--color-surface-alt) 20%);
}

.feature-card h3,
.workflow-card h3,
.stack-copy h2 {
  margin: var(--space-2) 0;
}

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

.workflow-card {
  padding: var(--space-5);
}

.workflow-number {
  color: var(--color-primary-700);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.stack-section {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

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

.stack-pill {
  padding: 6px var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  background-color: color-mix(in srgb, var(--color-surface-alt) 75%, var(--color-surface) 25%);
}

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

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

  .value-card:nth-child(2),
  .feature-section,
  .workflow-section {
    animation-delay: 90ms;
  }

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

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

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

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

@media (width <= 1100px) {
  .hero,
  .stack-section {
    grid-template-columns: 1fr;
  }

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

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

  .hero-actions {
    gap: var(--space-2);
  }

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

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

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

  h1 {
    max-width: none;
    font-size: 2.25rem;
  }

  .value-card h2,
  .section-head h2 {
    font-size: 1.45rem;
  }
}

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

  h1 {
    font-size: 1.9rem;
  }

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

  .hero-actions {
    width: 100%;
  }

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

  .hero-tags {
    gap: 6px;
  }

  .hero-tag {
    padding: 4px var(--space-2);
    font-size: var(--font-size-xs);
  }

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

  .stack-pill {
    width: 100%;
    text-align: center;
  }
}
</style>
