@prenta/admin 0.92.0

package/src/components/SEOPanel.tsx

@@ -0,0 +1,994 @@
+'use client'
+
+import * as Select from '@radix-ui/react-select'
+import { adminPortalContainer } from '../lib/portal-container.js'
+import { useState, useMemo } from 'react'
+import {
+  Search,
+  RefreshCw,
+  EyeOff,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  Globe,
+  Share2,
+  Settings2,
+  Target,
+  BookOpen,
+  CheckCircle2,
+  AlertCircle,
+  XCircle,
+  BarChart3,
+  Star,
+} from 'lucide-react'
+import { SEO_SCHEMA_TYPES } from '../lib/seo-service.js'
+import { Toggle } from './ui/Toggle.js'
+
+export interface SEOData {
+  metaTitle?: string
+  metaDescription?: string
+  /** Canonical stored key (API / audit / SeoEditorPane). */
+  focusKeyword?: string
+  /**
+   * @deprecated Legacy DocumentEdit alias — normalized to `focusKeyword` on save.
+   * Still accepted on load for older documents.
+   */
+  focusKeyphrase?: string
+  keyTakeaway?: string
+  canonical?: string
+  robotsPolicy?:
+    | 'inherit'
+    | 'index-follow'
+    | 'noindex-follow'
+    | 'index-nofollow'
+    | 'noindex-nofollow'
+  noIndex?: boolean
+  noFollow?: boolean
+  ogTitle?: string
+  ogDescription?: string
+  ogImage?: string
+  twitterTitle?: string
+  twitterDescription?: string
+  twitterImage?: string
+  isCornerstone?: boolean
+  schemaType?: string
+}
+
+/** Resolve focus keyphrase from either the canonical or legacy field name. */
+export function resolveFocusKeyword(seo: Pick<SEOData, 'focusKeyword' | 'focusKeyphrase'>): string {
+  const v = seo.focusKeyword ?? seo.focusKeyphrase
+  return typeof v === 'string' ? v : ''
+}
+
+export interface SEOPanelProps {
+  title: string
+  slug: string
+  content?: string
+  seoData: SEOData
+  onChange: (data: SEOData) => void
+  siteUrl?: string
+}
+
+const ROBOTS_POLICY_OPTIONS: Array<{ value: NonNullable<SEOData['robotsPolicy']>; label: string }> =
+  [
+    { value: 'inherit', label: 'Inherit site default' },
+    { value: 'index-follow', label: 'Force index, follow' },
+    { value: 'noindex-follow', label: 'Force noindex, follow' },
+    { value: 'index-nofollow', label: 'Force index, nofollow' },
+    { value: 'noindex-nofollow', label: 'Force noindex, nofollow' },
+  ]
+
+function getRobotsPolicy(seoData: SEOData): NonNullable<SEOData['robotsPolicy']> {
+  if (seoData.robotsPolicy) return seoData.robotsPolicy
+  if (typeof seoData.noIndex === 'boolean' || typeof seoData.noFollow === 'boolean') {
+    const noIndex = seoData.noIndex === true
+    const noFollow = seoData.noFollow === true
+    if (noIndex && noFollow) return 'noindex-nofollow'
+    if (noIndex) return 'noindex-follow'
+    if (noFollow) return 'index-nofollow'
+    return 'index-follow'
+  }
+  return 'inherit'
+}
+
+function robotsPolicyToBooleans(
+  policy: NonNullable<SEOData['robotsPolicy']>,
+): Pick<SEOData, 'noIndex' | 'noFollow'> {
+  switch (policy) {
+    case 'index-follow':
+      return { noIndex: false, noFollow: false }
+    case 'noindex-follow':
+      return { noIndex: true, noFollow: false }
+    case 'index-nofollow':
+      return { noIndex: false, noFollow: true }
+    case 'noindex-nofollow':
+      return { noIndex: true, noFollow: true }
+    default:
+      return { noIndex: undefined, noFollow: undefined }
+  }
+}
+
+interface SEOCheck {
+  id: string
+  label: string
+  status: 'good' | 'ok' | 'bad'
+  detail: string
+}
+
+interface ReadabilityResult {
+  fleschScore: number
+  avgSentenceLength: number
+  wordCount: number
+  readingTime: number
+  passiveEstimate: number
+}
+
+const SCHEMA_TYPES = SEO_SCHEMA_TYPES
+
+function stripHtml(html: string): string {
+  return html
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function countWords(text: string): number {
+  if (!text.trim()) return 0
+  return text.trim().split(/\s+/).length
+}
+
+function countSentences(text: string): number {
+  if (!text.trim()) return 0
+  const matches = text.match(/[.!?]+/g)
+  return matches ? matches.length : 1
+}
+
+function countSyllables(word: string): number {
+  const w = word.toLowerCase().replace(/[^a-z]/g, '')
+  if (w.length <= 3) return 1
+  let count = 0
+  const vowels = 'aeiouy'
+  let prevVowel = false
+  for (let i = 0; i < w.length; i++) {
+    const isVowel = vowels.includes(w[i] ?? '')
+    if (isVowel && !prevVowel) count++
+    prevVowel = isVowel
+  }
+  if (w.endsWith('e') && count > 1) count--
+  return Math.max(count, 1)
+}
+
+function analyzeReadability(text: string): ReadabilityResult {
+  const plainText = stripHtml(text)
+  const wordCount = countWords(plainText)
+  const sentenceCount = countSentences(plainText)
+  const avgSentenceLength = sentenceCount > 0 ? wordCount / sentenceCount : 0
+  const readingTime = Math.max(1, Math.ceil(wordCount / 200))
+
+  let fleschScore = 0
+  if (wordCount > 0 && sentenceCount > 0) {
+    const words = plainText.split(/\s+/)
+    const totalSyllables = words.reduce((sum, w) => sum + countSyllables(w), 0)
+    fleschScore = Math.round(
+      206.835 - 1.015 * (wordCount / sentenceCount) - 84.6 * (totalSyllables / wordCount),
+    )
+    fleschScore = Math.max(0, Math.min(100, fleschScore))
+  }
+
+  const passivePatterns = /\b(is|are|was|were|been|being|be)\s+\w+ed\b/gi
+  const passiveMatches = plainText.match(passivePatterns)
+  const passiveEstimate = passiveMatches
+    ? Math.round((passiveMatches.length / Math.max(sentenceCount, 1)) * 100)
+    : 0
+
+  return { fleschScore, avgSentenceLength, wordCount, readingTime, passiveEstimate }
+}
+
+function runSEOChecks(seoData: SEOData, title: string, slug: string, content: string): SEOCheck[] {
+  const checks: SEOCheck[] = []
+  const plainText = stripHtml(content)
+  const wordCount = countWords(plainText)
+  const keyphrase = resolveFocusKeyword(seoData).toLowerCase().trim()
+  const metaTitle = seoData.metaTitle ?? ''
+  const metaDesc = seoData.metaDescription ?? ''
+
+  // Meta title length
+  if (!metaTitle) {
+    checks.push({
+      id: 'title-missing',
+      label: 'Meta title',
+      status: 'bad',
+      detail: 'No meta title set',
+    })
+  } else if (metaTitle.length >= 30 && metaTitle.length <= 60) {
+    checks.push({
+      id: 'title-length',
+      label: 'Meta title length',
+      status: 'good',
+      detail: `${metaTitle.length} chars (ideal: 30-60)`,
+    })
+  } else if (metaTitle.length > 60) {
+    checks.push({
+      id: 'title-length',
+      label: 'Meta title length',
+      status: 'ok',
+      detail: `${metaTitle.length} chars — too long, may be truncated`,
+    })
+  } else {
+    checks.push({
+      id: 'title-length',
+      label: 'Meta title length',
+      status: 'ok',
+      detail: `${metaTitle.length} chars — quite short`,
+    })
+  }
+
+  // Meta description length
+  if (!metaDesc) {
+    checks.push({
+      id: 'desc-missing',
+      label: 'Meta description',
+      status: 'bad',
+      detail: 'No meta description set',
+    })
+  } else if (metaDesc.length >= 120 && metaDesc.length <= 160) {
+    checks.push({
+      id: 'desc-length',
+      label: 'Meta description length',
+      status: 'good',
+      detail: `${metaDesc.length} chars (ideal: 120-160)`,
+    })
+  } else if (metaDesc.length > 160) {
+    checks.push({
+      id: 'desc-length',
+      label: 'Meta description length',
+      status: 'ok',
+      detail: `${metaDesc.length} chars — may be truncated`,
+    })
+  } else {
+    checks.push({
+      id: 'desc-length',
+      label: 'Meta description length',
+      status: 'ok',
+      detail: `${metaDesc.length} chars — could be longer`,
+    })
+  }
+
+  // Content length
+  if (wordCount >= 300) {
+    checks.push({
+      id: 'content-length',
+      label: 'Content length',
+      status: 'good',
+      detail: `${wordCount} words`,
+    })
+  } else if (wordCount >= 150) {
+    checks.push({
+      id: 'content-length',
+      label: 'Content length',
+      status: 'ok',
+      detail: `${wordCount} words — aim for 300+`,
+    })
+  } else {
+    checks.push({
+      id: 'content-length',
+      label: 'Content length',
+      status: 'bad',
+      detail: `${wordCount} words — too short`,
+    })
+  }
+
+  // Focus keyphrase checks
+  if (!keyphrase) {
+    checks.push({
+      id: 'keyphrase-missing',
+      label: 'Focus keyphrase',
+      status: 'bad',
+      detail: 'No focus keyphrase set',
+    })
+  } else {
+    const inTitle = metaTitle.toLowerCase().includes(keyphrase)
+    checks.push({
+      id: 'keyphrase-title',
+      label: 'Keyphrase in title',
+      status: inTitle ? 'good' : 'bad',
+      detail: inTitle ? 'Found in meta title' : 'Not found in meta title',
+    })
+
+    const inDesc = metaDesc.toLowerCase().includes(keyphrase)
+    checks.push({
+      id: 'keyphrase-desc',
+      label: 'Keyphrase in description',
+      status: inDesc ? 'good' : 'ok',
+      detail: inDesc ? 'Found in meta description' : 'Not found in meta description',
+    })
+
+    const inSlug = slug.toLowerCase().includes(keyphrase.replace(/\s+/g, '-'))
+    checks.push({
+      id: 'keyphrase-slug',
+      label: 'Keyphrase in slug',
+      status: inSlug ? 'good' : 'ok',
+      detail: inSlug ? 'Found in URL slug' : 'Not found in URL slug',
+    })
+
+    const firstParagraph = plainText.slice(0, 300).toLowerCase()
+    const inIntro = firstParagraph.includes(keyphrase)
+    checks.push({
+      id: 'keyphrase-intro',
+      label: 'Keyphrase in introduction',
+      status: inIntro ? 'good' : 'ok',
+      detail: inIntro ? 'Found in first paragraph' : 'Not found in first paragraph',
+    })
+
+    if (wordCount > 0) {
+      const kpWords = keyphrase.split(/\s+/).length
+      const regex = new RegExp(keyphrase.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi')
+      const matches = plainText.match(regex)
+      const occurrences = matches ? matches.length : 0
+      const density = ((occurrences * kpWords) / wordCount) * 100
+      const densityOk = density >= 0.5 && density <= 3
+      checks.push({
+        id: 'keyphrase-density',
+        label: 'Keyphrase density',
+        status: densityOk ? 'good' : density === 0 ? 'bad' : 'ok',
+        detail: `${density.toFixed(1)}% (aim for 0.5-3%)`,
+      })
+    }
+  }
+
+  // Image alt text
+  const imgTags = content.match(/<img[^>]*>/gi) ?? []
+  if (imgTags.length > 0) {
+    const withoutAlt = imgTags.filter((tag) => !tag.match(/alt\s*=\s*["'][^"']+["']/i))
+    if (withoutAlt.length === 0) {
+      checks.push({
+        id: 'img-alt',
+        label: 'Image alt text',
+        status: 'good',
+        detail: 'All images have alt text',
+      })
+    } else {
+      checks.push({
+        id: 'img-alt',
+        label: 'Image alt text',
+        status: 'ok',
+        detail: `${withoutAlt.length} image(s) missing alt text`,
+      })
+    }
+  }
+
+  // OG checks
+  const hasOgTitle = !!(seoData.ogTitle || metaTitle)
+  const hasOgDesc = !!(seoData.ogDescription || metaDesc)
+  const hasOgImage = !!seoData.ogImage
+  checks.push({
+    id: 'og-title',
+    label: 'Social title',
+    status: hasOgTitle ? 'good' : 'ok',
+    detail: hasOgTitle ? 'Set' : 'Missing — will fall back to page title',
+  })
+  checks.push({
+    id: 'og-desc',
+    label: 'Social description',
+    status: hasOgDesc ? 'good' : 'ok',
+    detail: hasOgDesc ? 'Set' : 'Missing — will fall back to meta description',
+  })
+  checks.push({
+    id: 'og-image',
+    label: 'Social image',
+    status: hasOgImage ? 'good' : 'bad',
+    detail: hasOgImage ? 'Set' : 'No OG image set — strongly recommended',
+  })
+
+  return checks
+}
+
+function computeOverallScore(checks: SEOCheck[]): number {
+  if (checks.length === 0) return 0
+  const scoreMap = { good: 100, ok: 50, bad: 0 }
+  const total = checks.reduce((sum, c) => sum + scoreMap[c.status], 0)
+  return Math.round(total / checks.length)
+}
+
+function StatusDot({ status }: { status: 'good' | 'ok' | 'bad' }) {
+  if (status === 'good') return <CheckCircle2 className="text-success h-4 w-4 shrink-0" />
+  if (status === 'ok') return <AlertCircle className="text-warning h-4 w-4 shrink-0" />
+  return <XCircle className="text-destructive h-4 w-4 shrink-0" />
+}
+
+function ScoreRing({ score }: { score: number }) {
+  const radius = 28
+  const circumference = 2 * Math.PI * radius
+  const offset = circumference - (score / 100) * circumference
+  const color = score >= 70 ? '#22c55e' : score >= 40 ? '#f59e0b' : '#ef4444'
+
+  return (
+    <div className="relative inline-flex items-center justify-center">
+      <svg width="72" height="72" className="-rotate-90">
+        <circle cx="36" cy="36" r={radius} fill="none" stroke="var(--border)" strokeWidth="5" />
+        <circle
+          cx="36"
+          cy="36"
+          r={radius}
+          fill="none"
+          stroke={color}
+          strokeWidth="5"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+          className="transition-all duration-500"
+        />
+      </svg>
+      <span className="absolute text-sm font-medium" style={{ color }}>
+        {score}
+      </span>
+    </div>
+  )
+}
+
+function Section({
+  id,
+  title,
+  icon,
+  expanded,
+  onToggle,
+  children,
+  badge,
+}: {
+  id: string
+  title: string
+  icon: React.ReactNode
+  expanded: boolean
+  onToggle: (id: string) => void
+  children: React.ReactNode
+  badge?: React.ReactNode
+}) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-[var(--border)]">
+      <button
+        onClick={() => onToggle(id)}
+        className="hover:bg-muted flex w-full items-center justify-between px-4 py-2.5 text-left text-sm font-medium text-[var(--foreground)] transition-colors"
+      >
+        <span className="flex items-center gap-2">
+          {icon}
+          {title}
+          {badge}
+        </span>
+        {expanded ? (
+          <ChevronUp className="h-4 w-4 text-[var(--muted-foreground)]" />
+        ) : (
+          <ChevronDown className="h-4 w-4 text-[var(--muted-foreground)]" />
+        )}
+      </button>
+      {expanded && <div className="px-4 pt-1 pb-4">{children}</div>}
+    </div>
+  )
+}
+
+function ToggleSwitch({
+  label,
+  description,
+  checked,
+  onChange,
+}: {
+  label: string
+  description: string
+  checked: boolean
+  onChange: (v: boolean) => void
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="min-w-0 flex-1">
+        <label className="text-sm font-medium text-[var(--foreground)]">{label}</label>
+        <p className="mt-0.5 text-xs text-[var(--muted-foreground)]">{description}</p>
+      </div>
+      <Toggle checked={checked} onCheckedChange={onChange} aria-label={label} />
+    </div>
+  )
+}
+
+function InputField({
+  label,
+  value,
+  onChange,
+  placeholder,
+  type = 'text',
+  charCount,
+  charTarget,
+}: {
+  label: string
+  value: string
+  onChange: (v: string) => void
+  placeholder?: string
+  type?: string
+  charCount?: number
+  charTarget?: string
+}) {
+  return (
+    <div>
+      <label className="mb-1 block text-xs font-medium text-[var(--muted-foreground)]">
+        {label}
+      </label>
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:ring-2 focus:ring-[var(--primary)] focus:outline-none"
+        placeholder={placeholder}
+      />
+      {charCount !== undefined && charTarget && (
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">
+          {charCount} chars {charTarget}
+        </p>
+      )}
+    </div>
+  )
+}
+
+function TextareaField({
+  label,
+  value,
+  onChange,
+  placeholder,
+  rows = 3,
+  charCount,
+  charTarget,
+}: {
+  label: string
+  value: string
+  onChange: (v: string) => void
+  placeholder?: string
+  rows?: number
+  charCount?: number
+  charTarget?: string
+}) {
+  return (
+    <div>
+      <label className="mb-1 block text-xs font-medium text-[var(--muted-foreground)]">
+        {label}
+      </label>
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        rows={rows}
+        className="w-full resize-none rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:ring-2 focus:ring-[var(--primary)] focus:outline-none"
+        placeholder={placeholder}
+      />
+      {charCount !== undefined && charTarget && (
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">
+          {charCount} chars {charTarget}
+        </p>
+      )}
+    </div>
+  )
+}
+
+export function SEOPanel({
+  title,
+  slug,
+  content = '',
+  seoData,
+  onChange,
+  siteUrl = 'https://example.com',
+}: SEOPanelProps) {
+  const [expandedSections, setExpandedSections] = useState<string[]>(['analysis'])
+
+  const update = (partial: Partial<SEOData>) => {
+    onChange({ ...seoData, ...partial })
+  }
+
+  const toggleSection = (id: string) => {
+    setExpandedSections((prev) =>
+      prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id],
+    )
+  }
+
+  const checks = useMemo(
+    () => runSEOChecks(seoData, title, slug, content),
+    [seoData, title, slug, content],
+  )
+  const readability = useMemo(() => analyzeReadability(content), [content])
+  const score = useMemo(() => computeOverallScore(checks), [checks])
+
+  const goodCount = checks.filter((c) => c.status === 'good').length
+  const okCount = checks.filter((c) => c.status === 'ok').length
+  const badCount = checks.filter((c) => c.status === 'bad').length
+
+  const metaTitle = seoData.metaTitle ?? ''
+  const metaDesc = seoData.metaDescription ?? ''
+  const robotsPolicy = getRobotsPolicy(seoData)
+  const displayTitle = seoData.ogTitle || metaTitle || title || 'Page Title'
+  const displayDesc =
+    seoData.ogDescription ||
+    metaDesc ||
+    'Add a meta description to see how this page will appear in search results.'
+  const fleschLabel =
+    readability.fleschScore >= 60
+      ? 'Easy to read'
+      : readability.fleschScore >= 30
+        ? 'Fairly difficult'
+        : 'Very difficult'
+  const fleschColor =
+    readability.fleschScore >= 60
+      ? 'text-success'
+      : readability.fleschScore >= 30
+        ? 'text-warning'
+        : 'text-destructive'
+
+  return (
+    <div className="rounded-lg border border-[var(--border)] bg-[var(--card)]">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-[var(--border)] px-4 py-3">
+        <h3 className="flex items-center gap-2 text-sm font-medium text-[var(--foreground)]">
+          <Search className="h-4 w-4" />
+          SEO
+        </h3>
+        <button
+          onClick={() => update({ metaTitle: title, ogTitle: '', ogDescription: '' })}
+          className="flex items-center gap-1 text-xs text-[var(--primary)] hover:opacity-80"
+        >
+          <RefreshCw className="h-3 w-3" />
+          Reset
+        </button>
+      </div>
+
+      {/* Score */}
+      <div className="flex items-center gap-4 border-b border-[var(--border)] px-4 py-3">
+        <ScoreRing score={score} />
+        <div className="space-y-0.5 text-xs text-[var(--muted-foreground)]">
+          <div className="flex items-center gap-1.5">
+            <CheckCircle2 className="text-success h-3 w-3" /> {goodCount} passed
+          </div>
+          <div className="flex items-center gap-1.5">
+            <AlertCircle className="text-warning h-3 w-3" /> {okCount} improvements
+          </div>
+          <div className="flex items-center gap-1.5">
+            <XCircle className="text-destructive h-3 w-3" /> {badCount} issues
+          </div>
+        </div>
+      </div>
+
+      {/* Sections */}
+      <div className="space-y-2 p-3">
+        {/* SEO Analysis */}
+        <Section
+          id="analysis"
+          title="SEO Analysis"
+          icon={<BarChart3 className="h-4 w-4" />}
+          expanded={expandedSections.includes('analysis')}
+          onToggle={toggleSection}
+          badge={
+            <span className="bg-muted ml-1 inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium text-[var(--muted-foreground)]">
+              {goodCount}/{checks.length}
+            </span>
+          }
+        >
+          <div className="space-y-1.5">
+            {checks.map((c) => (
+              <div key={c.id} className="flex items-start gap-2 py-1">
+                <StatusDot status={c.status} />
+                <div className="min-w-0">
+                  <p className="text-sm leading-snug text-[var(--foreground)]">{c.label}</p>
+                  <p className="text-xs text-[var(--muted-foreground)]">{c.detail}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        {/* Readability */}
+        <Section
+          id="readability"
+          title="Readability"
+          icon={<BookOpen className="h-4 w-4" />}
+          expanded={expandedSections.includes('readability')}
+          onToggle={toggleSection}
+        >
+          <div className="grid grid-cols-2 gap-3">
+            <div className="bg-muted rounded-lg p-2.5">
+              <p className="text-xs text-[var(--muted-foreground)]">Flesch Score</p>
+              <p className={`text-lg font-medium ${fleschColor}`}>{readability.fleschScore}</p>
+              <p className={`text-[10px] ${fleschColor}`}>{fleschLabel}</p>
+            </div>
+            <div className="bg-muted rounded-lg p-2.5">
+              <p className="text-xs text-[var(--muted-foreground)]">Word Count</p>
+              <p className="text-lg font-medium text-[var(--foreground)]">
+                {readability.wordCount}
+              </p>
+              <p className="text-[10px] text-[var(--muted-foreground)]">words</p>
+            </div>
+            <div className="bg-muted rounded-lg p-2.5">
+              <p className="text-xs text-[var(--muted-foreground)]">Avg. Sentence</p>
+              <p className="text-lg font-medium text-[var(--foreground)]">
+                {readability.avgSentenceLength.toFixed(1)}
+              </p>
+              <p className="text-[10px] text-[var(--muted-foreground)]">words/sentence</p>
+            </div>
+            <div className="bg-muted rounded-lg p-2.5">
+              <p className="text-xs text-[var(--muted-foreground)]">Reading Time</p>
+              <p className="text-lg font-medium text-[var(--foreground)]">
+                {readability.readingTime}
+              </p>
+              <p className="text-[10px] text-[var(--muted-foreground)]">min</p>
+            </div>
+          </div>
+          <div className="mt-3 flex items-center gap-2 text-xs text-[var(--muted-foreground)]">
+            <span>Passive voice est.:</span>
+            <span
+              className={
+                readability.passiveEstimate > 15
+                  ? 'text-warning font-medium'
+                  : 'text-success font-medium'
+              }
+            >
+              {readability.passiveEstimate}%
+            </span>
+          </div>
+        </Section>
+
+        {/* Basic SEO */}
+        <Section
+          id="basic"
+          title="Basic SEO"
+          icon={<Target className="h-4 w-4" />}
+          expanded={expandedSections.includes('basic')}
+          onToggle={toggleSection}
+        >
+          <div className="space-y-3">
+            <InputField
+              label="Meta Title"
+              value={metaTitle}
+              onChange={(v) => update({ metaTitle: v })}
+              placeholder={title || 'Enter meta title'}
+              charCount={metaTitle.length}
+              charTarget="(ideal: 30-60)"
+            />
+            <TextareaField
+              label="Meta Description"
+              value={metaDesc}
+              onChange={(v) => update({ metaDescription: v })}
+              placeholder="Brief description for search engines"
+              charCount={metaDesc.length}
+              charTarget="(ideal: 120-160)"
+            />
+            <InputField
+              label="Focus Keyphrase"
+              value={resolveFocusKeyword(seoData)}
+              onChange={(v) => update({ focusKeyword: v, focusKeyphrase: undefined })}
+              placeholder="Primary keyword or phrase"
+            />
+            <TextareaField
+              label="Key Takeaway"
+              value={seoData.keyTakeaway ?? ''}
+              onChange={(v) => update({ keyTakeaway: v })}
+              placeholder="One or two sentences AI answer engines can quote"
+              charCount={(seoData.keyTakeaway ?? '').length}
+              charTarget="(ideal: under 240)"
+            />
+            <InputField
+              label="Canonical URL"
+              value={seoData.canonical ?? ''}
+              onChange={(v) => update({ canonical: v })}
+              placeholder="https://example.com/canonical-url"
+              type="url"
+            />
+          </div>
+        </Section>
+
+        {/* Robots Meta */}
+        <Section
+          id="robots"
+          title="Robots Meta"
+          icon={<EyeOff className="h-4 w-4" />}
+          expanded={expandedSections.includes('robots')}
+          onToggle={toggleSection}
+        >
+          <div className="space-y-4">
+            <div>
+              <label
+                id="robots-policy-label"
+                className="text-muted-foreground mb-1 block text-xs font-medium"
+              >
+                Robots Policy
+              </label>
+              <Select.Root
+                value={robotsPolicy}
+                onValueChange={(value) => {
+                  const policy = value as NonNullable<SEOData['robotsPolicy']>
+                  update({ robotsPolicy: policy, ...robotsPolicyToBooleans(policy) })
+                }}
+              >
+                <Select.Trigger
+                  aria-labelledby="robots-policy-label"
+                  className="border-border bg-background text-foreground focus:ring-primary flex w-full items-center justify-between rounded-lg border px-3 py-1.5 text-sm focus:ring-2 focus:outline-none"
+                >
+                  <Select.Value />
+                  <Select.Icon>
+                    <ChevronDown className="text-muted-foreground h-4 w-4" />
+                  </Select.Icon>
+                </Select.Trigger>
+                <Select.Portal container={adminPortalContainer()}>
+                  <Select.Content className="border-border bg-card z-50 overflow-hidden rounded-lg border shadow-md">
+                    <Select.Viewport className="p-1">
+                      {ROBOTS_POLICY_OPTIONS.map((option) => (
+                        <Select.Item
+                          key={option.value}
+                          value={option.value}
+                          className="text-foreground hover:bg-muted focus:bg-muted relative flex cursor-pointer items-center rounded-md py-1.5 pr-3 pl-8 text-sm outline-none select-none"
+                        >
+                          <Select.ItemIndicator className="absolute left-2 inline-flex items-center">
+                            <Check className="h-4 w-4" />
+                          </Select.ItemIndicator>
+                          <Select.ItemText>{option.label}</Select.ItemText>
+                        </Select.Item>
+                      ))}
+                    </Select.Viewport>
+                  </Select.Content>
+                </Select.Portal>
+              </Select.Root>
+              <p className="text-muted-foreground mt-1 text-xs">
+                Use inheritance for most pages. Override only when a page needs different
+                index/follow behavior.
+              </p>
+            </div>
+          </div>
+        </Section>
+
+        {/* Search Preview */}
+        <Section
+          id="preview"
+          title="Search Preview"
+          icon={<Globe className="h-4 w-4" />}
+          expanded={expandedSections.includes('preview')}
+          onToggle={toggleSection}
+        >
+          <div className="rounded-lg border border-[var(--border)] bg-[var(--background)] p-3">
+            <div className="text-primary line-clamp-1 cursor-pointer text-sm hover:underline">
+              {metaTitle || title || 'Page Title'}
+            </div>
+            <div className="text-success mt-1 truncate text-xs">
+              {siteUrl}/{slug}
+            </div>
+            <div className="mt-1 line-clamp-2 text-sm text-[var(--muted-foreground)]">
+              {metaDesc ||
+                'Add a meta description to see how this page will appear in search results.'}
+            </div>
+          </div>
+        </Section>
+
+        {/* Social Media */}
+        <Section
+          id="social"
+          title="Social Media"
+          icon={<Share2 className="h-4 w-4" />}
+          expanded={expandedSections.includes('social')}
+          onToggle={toggleSection}
+        >
+          <div className="space-y-3">
+            <InputField
+              label="OG Title"
+              value={seoData.ogTitle ?? ''}
+              onChange={(v) => update({ ogTitle: v })}
+              placeholder={metaTitle || title || 'Leave blank to use meta title'}
+            />
+            <TextareaField
+              label="OG Description"
+              value={seoData.ogDescription ?? ''}
+              onChange={(v) => update({ ogDescription: v })}
+              rows={2}
+              placeholder={metaDesc || 'Leave blank to use meta description'}
+            />
+            <InputField
+              label="OG Image URL"
+              value={seoData.ogImage ?? ''}
+              onChange={(v) => update({ ogImage: v })}
+              placeholder="https://example.com/og-image.jpg"
+              type="url"
+            />
+
+            <div className="mt-3 border-t border-[var(--border)] pt-3">
+              <p className="mb-2 text-xs font-medium text-[var(--muted-foreground)]">
+                Twitter / X Overrides
+              </p>
+              <div className="space-y-3">
+                <InputField
+                  label="Twitter Title"
+                  value={seoData.twitterTitle ?? ''}
+                  onChange={(v) => update({ twitterTitle: v })}
+                  placeholder="Leave blank to use OG title"
+                />
+                <TextareaField
+                  label="Twitter Description"
+                  value={seoData.twitterDescription ?? ''}
+                  onChange={(v) => update({ twitterDescription: v })}
+                  rows={2}
+                  placeholder="Leave blank to use OG description"
+                />
+                <InputField
+                  label="Twitter Image URL"
+                  value={seoData.twitterImage ?? ''}
+                  onChange={(v) => update({ twitterImage: v })}
+                  placeholder="Leave blank to use OG image"
+                  type="url"
+                />
+              </div>
+            </div>
+
+            {/* Social preview card */}
+            <div className="mt-3">
+              <p className="mb-2 text-xs font-medium text-[var(--muted-foreground)]">
+                Social Preview
+              </p>
+              <div className="bg-muted overflow-hidden rounded-lg border border-[var(--border)]">
+                {seoData.ogImage ? (
+                  <div className="bg-muted flex aspect-video items-center justify-center overflow-hidden">
+                    <img
+                      src={seoData.ogImage}
+                      alt="OG preview"
+                      className="h-full w-full object-cover"
+                    />
+                  </div>
+                ) : (
+                  <div className="bg-muted flex aspect-video items-center justify-center text-sm text-[var(--muted-foreground)]">
+                    No OG image set
+                  </div>
+                )}
+                <div className="p-3">
+                  <div className="line-clamp-1 text-sm font-medium text-[var(--foreground)]">
+                    {displayTitle}
+                  </div>
+                  <div className="mt-1 line-clamp-2 text-xs text-[var(--muted-foreground)]">
+                    {displayDesc.slice(0, 100)}
+                  </div>
+                  <div className="mt-1 truncate text-xs text-[var(--muted-foreground)]">
+                    {siteUrl}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Section>
+
+        {/* Advanced */}
+        <Section
+          id="advanced"
+          title="Advanced"
+          icon={<Settings2 className="h-4 w-4" />}
+          expanded={expandedSections.includes('advanced')}
+          onToggle={toggleSection}
+        >
+          <div className="space-y-4">
+            <ToggleSwitch
+              label="Cornerstone Content"
+              description="Mark as cornerstone — your most important, comprehensive articles"
+              checked={seoData.isCornerstone ?? false}
+              onChange={(v) => update({ isCornerstone: v })}
+            />
+            {seoData.isCornerstone && (
+              <div className="text-warning bg-warning/10 flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs">
+                <Star className="h-3.5 w-3.5" />
+                Cornerstone content is held to stricter SEO standards
+              </div>
+            )}
+            <div>
+              <label className="mb-1 block text-xs font-medium text-[var(--muted-foreground)]">
+                Schema Type
+              </label>
+              <select
+                value={seoData.schemaType ?? 'Article'}
+                onChange={(e) => update({ schemaType: e.target.value })}
+                className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] focus:ring-2 focus:ring-[var(--primary)] focus:outline-none"
+              >
+                {SCHEMA_TYPES.map((t) => (
+                  <option key={t} value={t}>
+                    {t}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        </Section>
+      </div>
+    </div>
+  )
+}