<script setup>
const route = useRoute()

// 1) Page meta (title, description, OG, Twitter, canonical, robots)
useSiteMeta({
  title: 'Logitech K1 Wireless Keyboard Review',
  description: 'After 3 months of daily testing, the K1 is our top pick for typists.',
  image: '/reviews/k1/og.jpg',
  type: 'article',
  publishedTime: '2026-01-15',
  modifiedTime: '2026-04-20',
  author: 'Jane Reviewer',
  section: 'Reviews',
  tags: ['wireless keyboards', 'mechanical', 'logitech'],
})

// 2) Article schema (BlogPosting — the article side of the review)
useArticleSchema({
  type: 'BlogPosting',
  headline: 'Logitech K1 Wireless Keyboard Review',
  description: 'After 3 months of daily testing, the K1 is our top pick for typists.',
  image: ['/reviews/k1/hero.jpg', '/reviews/k1/side.jpg'],
  datePublished: '2026-01-15',
  dateModified: '2026-04-20',
  articleSection: 'Reviews',
  keywords: ['wireless keyboards', 'mechanical', 'logitech'],
  wordCount: 1850,
  articleBody: 'After 3 months of daily use...',
  inLanguage: 'en-US',
})

// 3) Product + Review + AggregateRating + Offer (the product side)
useProductSchema({
  product: {
    name: 'Logitech K1',
    description: 'Compact mechanical wireless keyboard with hot-swappable switches',
    image: ['/reviews/k1/hero.jpg', '/reviews/k1/side.jpg'],
    brand: 'Logitech',
    sku: 'K1-001',
  },
  ratingValue: 4.6,
  ratingCount: 1234,
  reviewCount: 89,
  offer: {
    price: 79.99,
    priceCurrency: 'USD',
    availability: 'InStock',
    priceValidUntil: '2026-12-31',
  },
  reviewBody: 'After 3 months of daily use...',
  datePublished: '2026-01-15',
})

// 4) Breadcrumbs
useBreadcrumbSchema({
  items: [
    { label: 'Home', href: '/' },
    { label: 'Reviews', href: '/reviews' },
    { label: 'Wireless Keyboards', href: '/reviews/wireless-keyboards' },
    { label: 'Logitech K1' },
  ],
})

// 5) FAQ
useFAQSchema({
  faqs: [
    { question: 'Is the K1 hot-swappable?', answer: 'Yes — all 87 switches are hot-swappable with 3-pin and 5-pin support.' },
    { question: 'Battery life?', answer: 'Up to 200 hours with backlight off; ~40 hours with backlight on full.' },
  ],
})
</script>

<script setup>
const route = useRoute()
const article = await useArticle(route.params.slug)

useSiteMeta({
  title: article.title,
  description: article.excerpt,
  image: article.heroImage,
  type: 'article',
  publishedTime: article.publishedAt,
  modifiedTime: article.updatedAt,
  author: article.author.name,
  section: article.category,
  tags: article.tags,
  keywords: article.seoKeywords,           // separate list for <meta name="keywords">
  alternate: article.translations?.map(t => ({
    hreflang: t.lang,
    href: t.url,
  })),
})

useArticleSchema({
  type: 'BlogPosting',
  headline: article.title,
  description: article.excerpt,
  image: article.heroImage,
  datePublished: article.publishedAt,
  dateModified: article.updatedAt,
  articleSection: article.category,
  keywords: article.tags,
  wordCount: article.wordCount,
  articleBody: article.bodyText,
  inLanguage: 'en-US',
})

useBreadcrumbSchema({
  items: [
    { label: 'Home', href: '/' },
    { label: article.category, href: `/category/${article.categorySlug}` },
    { label: article.title },
  ],
})
</script>

<script setup>
// Fire once per app — site identity + searchbox
useOrganizationSchema()
usePersonSchema()           // uses xAffiliate.author
useWebSiteSchema({
  searchUrlTemplate: 'https://example.com/search?q={search_term_string}',
})
</script>

const schema = cleanSchema({
  '@context': 'https://schema.org',
  '@type': 'Thing',
  name: 'X',
  description: undefined,    // removed
  image: [],                  // removed
  url: 'https://...',
})

composable: useSchema
package: "@xenterprises/nuxt-x-affiliate"
use-when: >
  Building a review or product page that needs Google rich-result eligibility.
  useProductSchema() is the highest-ROI call — drives star SERPs.
  useArticleSchema({ type: 'BlogPosting', ... }) is the swap target for
  hand-rolled BlogPosting JSON-LD on articles/[slug].vue pages — it
  supports the full Schema.org article shape (articleSection, keywords,
  wordCount, articleBody, inLanguage, isAccessibleForFree).
  For review pages, call useArticleSchema + useProductSchema together
  (the dual-block pattern Google recommends). useFAQSchema() drives FAQ
  rich results. useBreadcrumbSchema() drives breadcrumb SERPs.
  useOrganizationSchema() + usePersonSchema() are called once site-wide
  from app.vue or a layout. useWebSiteSchema({ searchUrlTemplate })
  enables the Google sitelinks searchbox. useSiteMeta() handles all
  standard meta tags (title, description, OG, Twitter Card, canonical,
  hreflang via alternate[], robots) — single call replaces the
  useSeoMeta + useHead boilerplate that lived on every page.
  Call useOrganizationSchema() + usePersonSchema() once in app.vue.
  Call useSiteMeta() + useArticleSchema() + useBreadcrumbSchema() on
  articles/[slug].vue. Call useSiteMeta() + useArticleSchema() +
  useProductSchema() + useBreadcrumbSchema() + useFAQSchema() on
  reviews/[slug].vue. Every composable auto-injects a
  <script type="application/ld+json"> block — no template wiring required.