<template>
  <div class="seo-landing-page">
    <section class="seo-hero card">
      <p class="seo-eyebrow">{{ eyebrow }}</p>
      <h1>{{ title }}</h1>
      <p class="seo-lead">{{ lead }}</p>
      <div v-if="highlights?.length" class="seo-highlights">
        <span v-for="highlight in highlights" :key="highlight" class="seo-highlight-chip">
          {{ highlight }}
        </span>
      </div>
    </section>

    <section class="seo-body-grid">
      <article class="card seo-main-card">
        <div v-for="section in sections" :key="section.heading" class="seo-section">
          <h2>{{ section.heading }}</h2>
          <p v-for="paragraph in section.paragraphs" :key="paragraph">
            {{ paragraph }}
          </p>
        </div>
      </article>

      <aside class="card seo-side-card">
        <div class="seo-side-block">
          <h2>Wichtig im Überblick</h2>
          <ul>
            <li v-for="point in checklist" :key="point">{{ point }}</li>
          </ul>
        </div>

        <div class="seo-side-block">
          <h2>Passende Seiten</h2>
          <nav class="seo-related-links">
            <router-link
              v-for="link in relatedLinks"
              :key="link.to"
              :to="link.to"
              class="seo-related-link"
            >
              {{ link.label }}
            </router-link>
          </nav>
        </div>

        <div class="seo-side-block">
          <h2>Nächster Schritt</h2>
          <p>Wer die Abläufe im Verein bündeln will, kann die Anwendung direkt im Browser testen.</p>
          <div class="seo-cta-links">
            <router-link to="/register" class="btn-primary">Kostenlos starten</router-link>
            <router-link to="/login" class="btn-secondary">Zum Login</router-link>
          </div>
        </div>
      </aside>
    </section>
  </div>
</template>

<script>
export default {
  name: 'SeoLandingPage',
  props: {
    eyebrow: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    lead: {
      type: String,
      required: true,
    },
    highlights: {
      type: Array,
      default: () => [],
    },
    sections: {
      type: Array,
      default: () => [],
    },
    checklist: {
      type: Array,
      default: () => [],
    },
    relatedLinks: {
      type: Array,
      default: () => [],
    },
    /** Optional JSON-LD (schema.org), z. B. eine WebPage */
    structuredData: {
      type: Object,
      default: null,
    },
  },
  watch: {
    structuredData: {
      deep: true,
      handler() {
        this.removeStructuredDataScript();
        this.injectStructuredDataScript();
      },
    },
  },
  mounted() {
    this.injectStructuredDataScript();
  },
  beforeUnmount() {
    this.removeStructuredDataScript();
  },
  methods: {
    injectStructuredDataScript() {
      if (!this.structuredData || typeof this.structuredData !== 'object') return;
      const el = document.createElement('script');
      el.setAttribute('type', 'application/ld+json');
      el.setAttribute('data-seo-landing-structured', '1');
      el.textContent = JSON.stringify(this.structuredData);
      document.head.appendChild(el);
      this._structuredDataEl = el;
    },
    removeStructuredDataScript() {
      if (this._structuredDataEl?.parentNode) {
        this._structuredDataEl.parentNode.removeChild(this._structuredDataEl);
      }
      this._structuredDataEl = null;
    },
  },
};
</script>

<style scoped>
.seo-landing-page {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.seo-hero {
  padding: 1.75rem;
  border: 1px solid rgba(47, 122, 95, 0.18);
  background: linear-gradient(135deg, rgba(47, 122, 95, 0.08), rgba(255, 255, 255, 0.98));
}

.seo-eyebrow {
  margin: 0 0 0.5rem 0;
  color: var(--primary-color);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.seo-hero h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--text-primary);
}

.seo-lead {
  margin: 1rem 0 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 860px;
}

.seo-highlights {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.seo-highlight-chip {
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(47, 122, 95, 0.1);
  color: var(--text-primary);
  font-weight: 600;
}

.seo-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
  gap: 1.5rem;
}

.seo-main-card,
.seo-side-card {
  padding: 1.5rem;
}

.seo-section + .seo-section {
  margin-top: 1.6rem;
}

.seo-section h2,
.seo-side-block h2 {
  margin: 0 0 0.75rem 0;
  color: var(--text-primary);
  font-size: 1.25rem;
}

.seo-section p,
.seo-side-block p,
.seo-side-block li {
  color: var(--text-secondary);
  line-height: 1.7;
}

.seo-side-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.seo-side-block ul {
  margin: 0;
  padding-left: 1.1rem;
}

.seo-related-links,
.seo-cta-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.seo-related-link {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.seo-related-link:hover {
  text-decoration: underline;
}

@media (max-width: 960px) {
  .seo-body-grid {
    grid-template-columns: 1fr;
  }

  .seo-hero h1 {
    font-size: 1.65rem;
  }
}
</style>
