@actuate-media/cms-admin 0.1.4 → 0.2.0

package/src/components/SEOPanel.tsx

@@ -0,0 +1,767 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import {
+  Search,
+  RefreshCw,
+  EyeOff,
+  ChevronDown,
+  ChevronUp,
+  Globe,
+  Share2,
+  Settings2,
+  Target,
+  BookOpen,
+  CheckCircle2,
+  AlertCircle,
+  XCircle,
+  BarChart3,
+  Star,
+} from 'lucide-react';
+
+export interface SEOData {
+  metaTitle?: string;
+  metaDescription?: string;
+  focusKeyphrase?: string;
+  canonical?: string;
+  noIndex?: boolean;
+  noFollow?: boolean;
+  ogTitle?: string;
+  ogDescription?: string;
+  ogImage?: string;
+  twitterTitle?: string;
+  twitterDescription?: string;
+  twitterImage?: string;
+  isCornerstone?: boolean;
+  schemaType?: string;
+}
+
+export interface SEOPanelProps {
+  title: string;
+  slug: string;
+  content?: string;
+  seoData: SEOData;
+  onChange: (data: SEOData) => void;
+  siteUrl?: string;
+}
+
+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 = [
+  'Article',
+  'BlogPosting',
+  'WebPage',
+  'FAQPage',
+  'Product',
+  'Event',
+  'LocalBusiness',
+  'HowTo',
+  'Recipe',
+] as const;
+
+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 = (seoData.focusKeyphrase ?? '').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="h-4 w-4 shrink-0 text-green-500" />;
+  if (status === 'ok') return <AlertCircle className="h-4 w-4 shrink-0 text-amber-500" />;
+  return <XCircle className="h-4 w-4 shrink-0 text-red-500" />;
+}
+
+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-bold" 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="border border-[var(--border)] rounded-lg overflow-hidden">
+      <button
+        onClick={() => onToggle(id)}
+        className="flex items-center justify-between w-full px-4 py-2.5 text-left text-sm font-medium text-[var(--foreground)] hover:bg-[var(--muted)] 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 pb-4 pt-1">{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="flex-1 min-w-0">
+        <label className="text-sm font-medium text-[var(--foreground)]">{label}</label>
+        <p className="text-xs text-[var(--muted-foreground)] mt-0.5">{description}</p>
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        onClick={() => onChange(!checked)}
+        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors ${checked ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'}`}
+      >
+        <span className={`pointer-events-none block h-5 w-5 rounded-full bg-white shadow-sm transition-transform mt-0.5 ${checked ? 'translate-x-[22px]' : 'translate-x-0.5'}`} />
+      </button>
+    </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="block text-xs font-medium text-[var(--muted-foreground)] mb-1">{label}</label>
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full px-3 py-1.5 text-sm border border-[var(--border)] rounded-lg bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] placeholder:text-[var(--muted-foreground)]"
+        placeholder={placeholder}
+      />
+      {charCount !== undefined && charTarget && (
+        <p className="text-xs mt-1 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="block text-xs font-medium text-[var(--muted-foreground)] mb-1">{label}</label>
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        rows={rows}
+        className="w-full px-3 py-1.5 text-sm border border-[var(--border)] rounded-lg bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] resize-none placeholder:text-[var(--muted-foreground)]"
+        placeholder={placeholder}
+      />
+      {charCount !== undefined && charTarget && (
+        <p className="text-xs mt-1 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 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-green-500' : readability.fleschScore >= 30 ? 'text-amber-500' : 'text-red-500';
+
+  return (
+    <div className="rounded-lg border border-[var(--border)] bg-[var(--card)]">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)]">
+        <h3 className="font-semibold text-[var(--foreground)] flex items-center gap-2 text-sm">
+          <Search className="w-4 h-4" />
+          SEO
+        </h3>
+        <button
+          onClick={() => update({ metaTitle: title, ogTitle: '', ogDescription: '' })}
+          className="text-xs text-[var(--primary)] hover:opacity-80 flex items-center gap-1"
+        >
+          <RefreshCw className="w-3 h-3" />
+          Reset
+        </button>
+      </div>
+
+      {/* Score */}
+      <div className="flex items-center gap-4 px-4 py-3 border-b border-[var(--border)]">
+        <ScoreRing score={score} />
+        <div className="text-xs text-[var(--muted-foreground)] space-y-0.5">
+          <div className="flex items-center gap-1.5"><CheckCircle2 className="h-3 w-3 text-green-500" /> {goodCount} passed</div>
+          <div className="flex items-center gap-1.5"><AlertCircle className="h-3 w-3 text-amber-500" /> {okCount} improvements</div>
+          <div className="flex items-center gap-1.5"><XCircle className="h-3 w-3 text-red-500" /> {badCount} issues</div>
+        </div>
+      </div>
+
+      {/* Sections */}
+      <div className="p-3 space-y-2">
+        {/* SEO Analysis */}
+        <Section
+          id="analysis"
+          title="SEO Analysis"
+          icon={<BarChart3 className="h-4 w-4" />}
+          expanded={expandedSections.includes('analysis')}
+          onToggle={toggleSection}
+          badge={
+            <span className="ml-1 inline-flex items-center rounded-full bg-[var(--muted)] 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 text-[var(--foreground)] leading-snug">{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="rounded-lg bg-[var(--muted)] p-2.5">
+              <p className="text-xs text-[var(--muted-foreground)]">Flesch Score</p>
+              <p className={`text-lg font-bold ${fleschColor}`}>{readability.fleschScore}</p>
+              <p className={`text-[10px] ${fleschColor}`}>{fleschLabel}</p>
+            </div>
+            <div className="rounded-lg bg-[var(--muted)] p-2.5">
+              <p className="text-xs text-[var(--muted-foreground)]">Word Count</p>
+              <p className="text-lg font-bold text-[var(--foreground)]">{readability.wordCount}</p>
+              <p className="text-[10px] text-[var(--muted-foreground)]">words</p>
+            </div>
+            <div className="rounded-lg bg-[var(--muted)] p-2.5">
+              <p className="text-xs text-[var(--muted-foreground)]">Avg. Sentence</p>
+              <p className="text-lg font-bold text-[var(--foreground)]">{readability.avgSentenceLength.toFixed(1)}</p>
+              <p className="text-[10px] text-[var(--muted-foreground)]">words/sentence</p>
+            </div>
+            <div className="rounded-lg bg-[var(--muted)] p-2.5">
+              <p className="text-xs text-[var(--muted-foreground)]">Reading Time</p>
+              <p className="text-lg font-bold 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-amber-500 font-medium' : 'text-green-500 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={seoData.focusKeyphrase ?? ''}
+              onChange={(v) => update({ focusKeyphrase: v })}
+              placeholder="Primary keyword or phrase"
+            />
+            <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">
+            <ToggleSwitch
+              label="No Index"
+              description="Prevent search engines from indexing this page"
+              checked={seoData.noIndex ?? false}
+              onChange={(v) => update({ noIndex: v })}
+            />
+            <ToggleSwitch
+              label="No Follow"
+              description="Prevent search engines from following links"
+              checked={seoData.noFollow ?? false}
+              onChange={(v) => update({ noFollow: v })}
+            />
+          </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)] p-3 bg-[var(--background)]">
+            <div className="text-sm text-blue-600 hover:underline cursor-pointer line-clamp-1">
+              {metaTitle || title || 'Page Title'}
+            </div>
+            <div className="text-xs text-green-700 mt-1 truncate">
+              {siteUrl}/{slug}
+            </div>
+            <div className="text-sm text-[var(--muted-foreground)] mt-1 line-clamp-2">
+              {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="border-t border-[var(--border)] pt-3 mt-3">
+              <p className="text-xs font-medium text-[var(--muted-foreground)] mb-2">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="text-xs font-medium text-[var(--muted-foreground)] mb-2">Social Preview</p>
+              <div className="rounded-lg border border-[var(--border)] overflow-hidden bg-[var(--muted)]">
+                {seoData.ogImage ? (
+                  <div className="aspect-video bg-[var(--muted)] flex items-center justify-center overflow-hidden">
+                    <img src={seoData.ogImage} alt="OG preview" className="w-full h-full object-cover" />
+                  </div>
+                ) : (
+                  <div className="aspect-video bg-[var(--muted)] flex items-center justify-center text-[var(--muted-foreground)] text-sm">
+                    No OG image set
+                  </div>
+                )}
+                <div className="p-3">
+                  <div className="text-sm font-medium text-[var(--foreground)] line-clamp-1">{displayTitle}</div>
+                  <div className="text-xs text-[var(--muted-foreground)] mt-1 line-clamp-2">
+                    {displayDesc.slice(0, 100)}
+                  </div>
+                  <div className="text-xs text-[var(--muted-foreground)] mt-1 truncate">{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="flex items-center gap-1.5 text-xs text-amber-600 bg-amber-50 rounded-md px-2.5 py-1.5">
+                <Star className="h-3.5 w-3.5" />
+                Cornerstone content is held to stricter SEO standards
+              </div>
+            )}
+            <div>
+              <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">Schema Type</label>
+              <select
+                value={seoData.schemaType ?? 'Article'}
+                onChange={(e) => update({ schemaType: e.target.value })}
+                className="w-full px-3 py-1.5 text-sm border border-[var(--border)] rounded-lg bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
+              >
+                {SCHEMA_TYPES.map((t) => (
+                  <option key={t} value={t}>{t}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+        </Section>
+      </div>
+    </div>
+  );
+}