# thinkrank/1.0.0/src/admin/components/content-brief/ContentStructure.js

ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO, version 1.0.0. 1,065 lines.

- Page: https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/content-brief/ContentStructure.js
- Raw: https://pluginprobe.com/plugins/thinkrank/1.0.0/raw/src/admin/components/content-brief/ContentStructure.js
- Modified: 2025-08-10T07:57:44+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/content-brief/ContentStructure.js#L10-L20`.

```javascript
/**
 * Content Structure Component
 *
 * Displays the generated content brief structure and recommendations
 *
 * @package ThinkRank
 * @since 1.0.0
 */

import React, { useState } from 'react';
import { Notice, Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
    copy,
    chevronDown,
    chevronUp,
    info,
    heading,
    formatListBullets,
    search,
    chartBar,
    funnel,
    megaphone,
    code
} from '@wordpress/icons';
import ModelBadge from '../shared/ModelBadge';

/**
 * Icon Component for WordPress Icons
 */
const Icon = ({ icon, className = '' }) => {
    return (
        <span className={`thinkrank-icon ${className}`} style={{ display: 'inline-flex', alignItems: 'center' }}>
            {icon}
        </span>
    );
};

/**
 * Utility function to convert markdown formatting to HTML
 */
const formatMarkdownText = (text) => {
    if (!text) return text;

    // Convert **bold** to <strong>bold</strong>
    const boldFormatted = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');

    // Convert *italic* to <em>italic</em>
    const italicFormatted = boldFormatted.replace(/\*(.*?)\*/g, '<em>$1</em>');

    return italicFormatted;
};

/**
 * Component to render formatted text with HTML
 */
const FormattedText = ({ children, className = '' }) => {
    const formattedText = formatMarkdownText(children);

    // Sanitize HTML to prevent XSS attacks
    // Only allow safe formatting tags
    const sanitizedHTML = formattedText
        .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '') // Remove script tags
        .replace(/javascript:/gi, '') // Remove javascript: URLs
        .replace(/on\w+\s*=/gi, '') // Remove event handlers
        .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '') // Remove iframes
        .replace(/<object\b[^<]*(?:(?!<\/object>)<[^<]*)*<\/object>/gi, '') // Remove objects
        .replace(/<embed\b[^<]*(?:(?!<\/embed>)<[^<]*)*<\/embed>/gi, ''); // Remove embeds

    return (
        <span
            className={className}
            dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
        />
    );
};



/**
 * Collapsible Section Component
 */
const CollapsibleSection = ({ title, icon, children, defaultOpen = true }) => {
    const [isOpen, setIsOpen] = useState(defaultOpen);

    return (
        <div className="thinkrank-card thinkrank-card--elevated thinkrank-mb-6">
            <div
                className="thinkrank-card__header thinkrank-cursor-pointer"
                onClick={() => setIsOpen(!isOpen)}
                style={{ cursor: 'pointer' }}
            >
                <div className="thinkrank-flex thinkrank-items-center thinkrank-justify-between">
                    <h3 className="thinkrank-text-lg thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-0 thinkrank-flex thinkrank-items-center thinkrank-gap-2">
                        {typeof icon === 'string' ? (
                            <span>{icon}</span>
                        ) : (
                            <Icon icon={icon} className="thinkrank-text-blue" />
                        )}
                        {title}
                    </h3>
                    <Button
                        icon={isOpen ? chevronUp : chevronDown}
                        variant="tertiary"
                        size="small"
                        onClick={(e) => {
                            e.stopPropagation();
                            setIsOpen(!isOpen);
                        }}
                    />
                </div>
            </div>
            {isOpen && (
                <div className="thinkrank-card__body">
                    {children}
                </div>
            )}
        </div>
    );
};

const ContentStructure = ({ briefData, formData }) => {
    if (!briefData) {
        return null;
    }

    /**
     * Copy text to clipboard with fallback
     */
    const copyToClipboard = async (text) => {
        try {
            // Try modern clipboard API first
            if (navigator.clipboard && navigator.clipboard.writeText) {
                await navigator.clipboard.writeText(text);
                console.log('Copied to clipboard');
                return;
            }

            // Fallback for older browsers or non-HTTPS contexts
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-999999px';
            textArea.style.top = '-999999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();

            try {
                document.execCommand('copy');
                console.log('Copied to clipboard (fallback)');
            } catch (err) {
                console.error('Failed to copy text: ', err);
            }

            document.body.removeChild(textArea);
        } catch (err) {
            console.error('Copy to clipboard failed: ', err);
        }
    };

    /**
     * Render overview card with form input summary
     */
    const renderOverviewCard = () => {
        // Use generation_params from briefData as primary source, fallback to formData
        const params = briefData.generation_params || formData;
        if (!params) return null;

        const getDisplayValue = (key, value) => {
            const displayMaps = {
                content_type: {
                    'blog_post': __('Blog Post', 'thinkrank'),
                    'article': __('Article', 'thinkrank'),
                    'landing_page': __('Landing Page', 'thinkrank'),
                    'product_description': __('Product Description', 'thinkrank'),
                    'social_media': __('Social Media', 'thinkrank'),
                    'email': __('Email', 'thinkrank')
                },
                target_audience: {
                    'general': __('General Audience', 'thinkrank'),
                    'beginners': __('Beginners', 'thinkrank'),
                    'professionals': __('Professionals', 'thinkrank'),
                    'experts': __('Experts', 'thinkrank'),
                    'students': __('Students', 'thinkrank'),
                    'business_owners': __('Business Owners', 'thinkrank')
                },
                content_length: {
                    'short': __('Short (300-600 words)', 'thinkrank'),
                    'medium': __('Medium (600-1200 words)', 'thinkrank'),
                    'long': __('Long (1200+ words)', 'thinkrank')
                },
                tone: {
                    'professional': __('Professional', 'thinkrank'),
                    'casual': __('Casual', 'thinkrank'),
                    'friendly': __('Friendly', 'thinkrank'),
                    'authoritative': __('Authoritative', 'thinkrank'),
                    'conversational': __('Conversational', 'thinkrank'),
                    'technical': __('Technical', 'thinkrank')
                }
            };

            return displayMaps[key]?.[value] || value;
        };

        return (
            <div className="thinkrank-card thinkrank-card--elevated thinkrank-mb-6">
                <div className="thinkrank-card__body">
                    <div className="thinkrank-flex thinkrank-items-center thinkrank-justify-between thinkrank-mb-4">
                        <h3 className="thinkrank-text-lg thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-0 thinkrank-flex thinkrank-items-center thinkrank-gap-2">
                            <Icon icon={info} className="thinkrank-text-blue" />
                            {__('Brief Overview', 'thinkrank')}
                        </h3>
                        {briefData.generation_meta && (
                            <ModelBadge
                                provider={briefData.generation_meta.provider}
                                model={briefData.generation_meta.model}
                            />
                        )}
                    </div>
                    <div className="thinkrank-grid thinkrank-grid-cols-1-xs thinkrank-grid-cols-2-md thinkrank-gap-4">
                        <div className="thinkrank-space-y-3">
                            <div>
                                <span className="thinkrank-text-sm thinkrank-font-bold thinkrank-text-secondary">{__('Target Keywords:', 'thinkrank')}</span>
                                <div className="thinkrank-mt-1 thinkrank-flex thinkrank-flex-wrap thinkrank-gap-2">
                                    {params.target_keywords?.filter(k => k.trim()).map((keyword, index) => (
                                        <span key={index} className="thinkrank-px-3 thinkrank-py-1 thinkrank-bg-blue thinkrank-bg-opacity-10 thinkrank-text-blue thinkrank-text-sm thinkrank-rounded-full">
                                            {keyword}
                                        </span>
                                    ))}
                                </div>
                            </div>
                            <div>
                                <span className="thinkrank-text-sm thinkrank-font-bold thinkrank-text-secondary">{__('Content Type:', 'thinkrank')}</span>
                                <p className="thinkrank-text-sm thinkrank-text-primary thinkrank-mt-1 thinkrank-mb-0">{getDisplayValue('content_type', params.content_type)}</p>
                            </div>
                            <div>
                                <span className="thinkrank-text-sm thinkrank-font-bold thinkrank-text-secondary">{__('Target Audience:', 'thinkrank')}</span>
                                <p className="thinkrank-text-sm thinkrank-text-primary thinkrank-mt-1 thinkrank-mb-0">{getDisplayValue('target_audience', params.target_audience)}</p>
                            </div>
                        </div>
                        <div className="thinkrank-space-y-3">
                            <div>
                                <span className="thinkrank-text-sm thinkrank-font-bold thinkrank-text-secondary">{__('Content Length:', 'thinkrank')}</span>
                                <p className="thinkrank-text-sm thinkrank-text-primary thinkrank-mt-1 thinkrank-mb-0">{getDisplayValue('content_length', params.content_length)}</p>
                            </div>
                            <div>
                                <span className="thinkrank-text-sm thinkrank-font-bold thinkrank-text-secondary">{__('Tone:', 'thinkrank')}</span>
                                <p className="thinkrank-text-sm thinkrank-text-primary thinkrank-mt-1 thinkrank-mb-0">{getDisplayValue('tone', params.tone)}</p>
                            </div>
                            {params.competitor_urls?.filter(url => url.trim()).length > 0 && (
                                <div>
                                    <span className="thinkrank-text-sm thinkrank-font-bold thinkrank-text-secondary">{__('Competitor URLs:', 'thinkrank')}</span>
                                    <div className="thinkrank-mt-1 thinkrank-space-y-1">
                                        {params.competitor_urls.filter(url => url.trim()).map((url, index) => (
                                            <div key={index} className="thinkrank-text-sm thinkrank-text-primary">
                                                <a
                                                    href={url}
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    className="thinkrank-text-blue hover:thinkrank-underline thinkrank-break-words"
                                                    title={url}
                                                >
                                                    {url.length > 50 ? url.substring(0, 50) + '...' : url}
                                                </a>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                    {params.additional_context && (
                        <div className="thinkrank-mt-4 thinkrank-pt-4 thinkrank-border-t thinkrank-border-light">
                            <span className="thinkrank-text-sm thinkrank-font-bold thinkrank-text-secondary">{__('Additional Context:', 'thinkrank')}</span>
                            <p className="thinkrank-text-sm thinkrank-text-primary thinkrank-mt-1 thinkrank-mb-0">{params.additional_context}</p>
                        </div>
                    )}

                    {/* Generation Date */}
                    {briefData.created_at && (
                        <div className="thinkrank-flex thinkrank-justify-end thinkrank-mt-4 thinkrank-pt-4 thinkrank-border-t thinkrank-border-light">
                            <span className="thinkrank-text-xs thinkrank-text-secondary">
                                {__('Generated on:', 'thinkrank')} {briefData.created_at}
                            </span>
                        </div>
                    )}
                </div>
            </div>
        );
    };

    /**
     * Render title suggestions
     */
    const renderTitleSuggestions = () => {
        if (!briefData.title || !Array.isArray(briefData.title)) {
            return null;
        }

        return (
            <CollapsibleSection
                title={__('Title Suggestions', 'thinkrank')}
                icon={heading}
                defaultOpen={true}
            >
                <div className="thinkrank-space-y-3">
                    {briefData.title.map((title, index) => (
                        <div key={index} className="thinkrank-flex thinkrank-items-center thinkrank-justify-between thinkrank-p-3 thinkrank-bg-gray-50 thinkrank-rounded-lg thinkrank-border thinkrank-border-light">
                            <span className="thinkrank-text-sm thinkrank-text-primary thinkrank-flex-1 thinkrank-pr-3">{title}</span>
                            <button
                                className="thinkrank-btn thinkrank-btn--ghost thinkrank-btn--sm thinkrank-w-8 thinkrank-h-8 thinkrank-flex-center"
                                onClick={() => copyToClipboard(title)}
                                title={__('Copy title', 'thinkrank')}
                            >
                                <svg className="thinkrank-w-4 thinkrank-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                </svg>
                            </button>
                        </div>
                    ))}
                </div>
            </CollapsibleSection>
        );
    };

    /**
     * Render content outline
     */
    const renderContentOutline = () => {
        if (!briefData.outline || !Array.isArray(briefData.outline)) {
            return null;
        }

        return (
            <CollapsibleSection
                title={__('Content Outline', 'thinkrank')}
                icon={formatListBullets}
                defaultOpen={true}
            >
                <div className="thinkrank-space-y-4">
                    {briefData.outline.map((item, index) => (
                        <div
                            key={index}
                            className="thinkrank-border-l-4 thinkrank-border-blue thinkrank-pl-4 thinkrank-py-3"
                            style={{ marginLeft: `${(item.level - 1) * 20}px` }}
                        >
                            <div className="thinkrank-flex thinkrank-items-center thinkrank-gap-3 thinkrank-mb-2">
                                <span className="thinkrank-text-sm thinkrank-font-semibold thinkrank-text-blue thinkrank-bg-blue thinkrank-bg-opacity-10 thinkrank-px-2 thinkrank-py-1 thinkrank-rounded">
                                    H{item.level}
                                </span>
                                <strong className="thinkrank-text-primary thinkrank-font-semibold"><FormattedText>{item.heading}</FormattedText></strong>
                                {item.word_count > 0 && (
                                    <span className="thinkrank-text-xs thinkrank-text-secondary thinkrank-bg-gray-100 thinkrank-px-2 thinkrank-py-1 thinkrank-rounded">
                                        {item.word_count} words
                                    </span>
                                )}
                            </div>

                            {item.key_points && item.key_points.length > 0 && (
                                <ul className="thinkrank-list-disc thinkrank-list-inside thinkrank-space-y-1 thinkrank-text-sm thinkrank-text-secondary thinkrank-ml-4">
                                    {item.key_points.map((point, pointIndex) => (
                                        <li key={pointIndex}><FormattedText>{point}</FormattedText></li>
                                    ))}
                                </ul>
                            )}

                            {item.keywords && item.keywords.length > 0 && (
                                <div className="thinkrank-mt-2 thinkrank-p-2 thinkrank-bg-gray-50 thinkrank-rounded">
                                    <strong className="thinkrank-text-sm thinkrank-text-primary">{__('Keywords:', 'thinkrank')}</strong>
                                    <span className="thinkrank-text-sm thinkrank-text-secondary thinkrank-ml-2">{item.keywords.join(', ')}</span>
                                </div>
                            )}
                        </div>
                    ))}
                </div>

                {briefData.estimated_word_count && (
                    <div className="thinkrank-mt-6 thinkrank-p-4 thinkrank-bg-blue thinkrank-bg-opacity-10 thinkrank-border thinkrank-border-blue thinkrank-border-opacity-20 thinkrank-rounded-lg">
                        <strong className="thinkrank-text-blue thinkrank-font-semibold">
                            {__('Estimated Total Word Count:', 'thinkrank')} {briefData.estimated_word_count}
                        </strong>
                    </div>
                )}
            </CollapsibleSection>
        );
    };

    /**
     * Render SEO recommendations
     */
    const renderSEORecommendations = () => {
        if (!briefData.seo_recommendations) {
            return null;
        }

        const {
            title_suggestions,
            meta_descriptions,
            meta_description,
            url_slugs,
            focus_keyword_analysis,
            internal_links,
            related_keywords,
            long_tail_keywords
        } = briefData.seo_recommendations;

        return (
            <CollapsibleSection
                title={__('SEO Recommendations', 'thinkrank')}
                icon={search}
                defaultOpen={false}
            >
                <div className="thinkrank-space-y-6">
                    {/* Title Suggestions */}
                    {title_suggestions && title_suggestions.length > 0 && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Title Suggestions', 'thinkrank')}</h4>
                            <ul className="thinkrank-list-disc thinkrank-list-inside thinkrank-space-y-2 thinkrank-text-sm thinkrank-text-secondary">
                                {title_suggestions.map((suggestion, index) => (
                                    <li key={index}>{suggestion}</li>
                                ))}
                            </ul>
                        </div>
                    )}

                    {/* Meta Descriptions */}
                    {(meta_descriptions && meta_descriptions.length > 0) || meta_description ? (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Meta Descriptions', 'thinkrank')}</h4>

                            {meta_description && (
                                <div className="thinkrank-mb-4 thinkrank-p-4 thinkrank-bg-blue thinkrank-bg-opacity-5 thinkrank-rounded thinkrank-border thinkrank-border-blue thinkrank-border-opacity-20">
                                    <div className="thinkrank-flex thinkrank-justify-between thinkrank-items-center thinkrank-mb-2">
                                        <span className="thinkrank-text-xs thinkrank-font-semibold thinkrank-text-blue">{__('Primary Meta Description', 'thinkrank')}</span>
                                        <span className={`thinkrank-text-xs thinkrank-px-2 thinkrank-py-1 thinkrank-rounded-full ${
                                            meta_description.length >= 150 && meta_description.length <= 160
                                                ? 'thinkrank-bg-green thinkrank-text-white'
                                                : 'thinkrank-bg-orange thinkrank-text-white'
                                        }`}>
                                            {meta_description.length} {__('characters', 'thinkrank')}
                                        </span>
                                    </div>
                                    <p className="thinkrank-text-sm thinkrank-text-secondary thinkrank-m-0"><FormattedText>{meta_description}</FormattedText></p>
                                </div>
                            )}

                            {meta_descriptions && meta_descriptions.length > 0 && (
                                <div>
                                    <h5 className="thinkrank-text-sm thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-2">{__('Alternative Variations', 'thinkrank')}</h5>
                                    {meta_descriptions.map((desc, index) => (
                                        <div key={index} className="thinkrank-mb-2 thinkrank-p-3 thinkrank-bg-gray-50 thinkrank-rounded thinkrank-border thinkrank-border-gray-200">
                                            <div className="thinkrank-flex thinkrank-justify-between thinkrank-items-center thinkrank-mb-1">
                                                <span className="thinkrank-text-xs thinkrank-font-medium thinkrank-text-secondary">{__('Variation', 'thinkrank')} {index + 1}</span>
                                                <span className="thinkrank-text-xs thinkrank-px-2 thinkrank-py-0.5 thinkrank-rounded-full thinkrank-bg-gray-200 thinkrank-text-gray-700">
                                                    {desc.length} {__('chars', 'thinkrank')}
                                                </span>
                                            </div>
                                            <p className="thinkrank-text-sm thinkrank-text-secondary thinkrank-m-0"><FormattedText>{desc}</FormattedText></p>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    ) : null}

                    {/* URL Slugs */}
                    {url_slugs && url_slugs.length > 0 && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('URL Slug Suggestions', 'thinkrank')}</h4>
                            <div className="thinkrank-space-y-2">
                                {url_slugs.map((slug, index) => (
                                    <div key={index} className="thinkrank-flex thinkrank-items-center thinkrank-gap-2">
                                        <code className="thinkrank-px-3 thinkrank-py-1 thinkrank-bg-gray-100 thinkrank-text-sm thinkrank-rounded">
                                            {slug}
                                        </code>
                                        <button
                                            className="thinkrank-text-blue thinkrank-text-sm thinkrank-flex thinkrank-items-center thinkrank-gap-1"
                                            onClick={() => copyToClipboard(slug)}
                                        >
                                            <Icon icon={copy} />
                                            {__('Copy', 'thinkrank')}
                                        </button>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* Focus Keyword Analysis */}
                    {focus_keyword_analysis && (focus_keyword_analysis.primary_placement?.length > 0 ||
                                               focus_keyword_analysis.secondary_integration?.length > 0 ||
                                               focus_keyword_analysis.density_guidelines?.length > 0) && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Focus Keyword Analysis', 'thinkrank')}</h4>

                            {focus_keyword_analysis.primary_placement?.length > 0 && (
                                <div className="thinkrank-mb-3">
                                    <h5 className="thinkrank-text-sm thinkrank-font-semibold thinkrank-text-secondary thinkrank-mb-2">{__('Primary Keyword Placement', 'thinkrank')}</h5>
                                    <ul className="thinkrank-list-disc thinkrank-list-inside thinkrank-space-y-1 thinkrank-text-sm thinkrank-text-secondary">
                                        {focus_keyword_analysis.primary_placement.map((item, index) => (
                                            <li key={index}><FormattedText>{item}</FormattedText></li>
                                        ))}
                                    </ul>
                                </div>
                            )}

                            {focus_keyword_analysis.secondary_integration?.length > 0 && (
                                <div className="thinkrank-mb-3">
                                    <h5 className="thinkrank-text-sm thinkrank-font-semibold thinkrank-text-secondary thinkrank-mb-2">{__('Secondary Keyword Integration', 'thinkrank')}</h5>
                                    <ul className="thinkrank-list-disc thinkrank-list-inside thinkrank-space-y-1 thinkrank-text-sm thinkrank-text-secondary">
                                        {focus_keyword_analysis.secondary_integration.map((item, index) => (
                                            <li key={index}><FormattedText>{item}</FormattedText></li>
                                        ))}
                                    </ul>
                                </div>
                            )}

                            {focus_keyword_analysis.density_guidelines?.length > 0 && (
                                <div>
                                    <h5 className="thinkrank-text-sm thinkrank-font-semibold thinkrank-text-secondary thinkrank-mb-2">{__('Keyword Density Guidelines', 'thinkrank')}</h5>
                                    <ul className="thinkrank-list-disc thinkrank-list-inside thinkrank-space-y-1 thinkrank-text-sm thinkrank-text-secondary">
                                        {focus_keyword_analysis.density_guidelines.map((item, index) => (
                                            <li key={index}><FormattedText>{item}</FormattedText></li>
                                        ))}
                                    </ul>
                                </div>
                            )}
                        </div>
                    )}

                    {/* Internal Linking */}
                    {internal_links && internal_links.length > 0 && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Internal Linking Opportunities', 'thinkrank')}</h4>
                            <ul className="thinkrank-list-disc thinkrank-list-inside thinkrank-space-y-2 thinkrank-text-sm thinkrank-text-secondary">
                                {internal_links.map((link, index) => (
                                    <li key={index}><FormattedText>{link}</FormattedText></li>
                                ))}
                            </ul>
                        </div>
                    )}

                    {/* Related Keywords */}
                    {related_keywords && related_keywords.length > 0 && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Related Keywords', 'thinkrank')}</h4>
                            <div className="thinkrank-flex thinkrank-flex-wrap thinkrank-gap-2">
                                {related_keywords.map((keyword, index) => (
                                    <span key={index} className="thinkrank-px-3 thinkrank-py-1 thinkrank-bg-blue thinkrank-bg-opacity-10 thinkrank-text-blue thinkrank-text-sm thinkrank-rounded-full">
                                        <FormattedText>{keyword}</FormattedText>
                                    </span>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* Long-tail Keywords */}
                    {long_tail_keywords && long_tail_keywords.length > 0 && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Long-tail Keyword Variations', 'thinkrank')}</h4>
                            <div className="thinkrank-flex thinkrank-flex-wrap thinkrank-gap-2">
                                {long_tail_keywords.map((keyword, index) => (
                                    <span key={index} className="thinkrank-px-3 thinkrank-py-1 thinkrank-bg-green thinkrank-bg-opacity-10 thinkrank-text-green thinkrank-text-sm thinkrank-rounded-full">
                                        {keyword}
                                    </span>
                                ))}
                            </div>
                        </div>
                    )}
                </div>
            </CollapsibleSection>
        );
    };

    /**
     * Render social media meta tags
     */
    const renderSocialMediaTags = () => {
        if (!briefData.social_media) {
            return null;
        }

        const { open_graph, twitter_card } = briefData.social_media;

        // Check if we have any social media data
        if ((!open_graph?.title && !open_graph?.description) &&
            (!twitter_card?.title && !twitter_card?.description)) {
            return null;
        }

        return (
            <CollapsibleSection
                title={__('Social Media Meta Tags', 'thinkrank')}
                icon={megaphone}
                defaultOpen={false}
            >
                <div className="thinkrank-space-y-6">
                    {/* Open Graph Tags */}
                    {(open_graph?.title || open_graph?.description) && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Open Graph (Facebook, LinkedIn)', 'thinkrank')}</h4>

                            {open_graph.title && (
                                <div className="thinkrank-mb-3 thinkrank-p-3 thinkrank-bg-blue thinkrank-bg-opacity-5 thinkrank-rounded thinkrank-border thinkrank-border-blue thinkrank-border-opacity-20">
                                    <div className="thinkrank-flex thinkrank-justify-between thinkrank-items-center thinkrank-mb-2">
                                        <span className="thinkrank-text-xs thinkrank-font-semibold thinkrank-text-blue">{__('OG Title', 'thinkrank')}</span>
                                        <span className={`thinkrank-text-xs thinkrank-px-2 thinkrank-py-1 thinkrank-rounded-full ${
                                            open_graph.title.length <= 55
                                                ? 'thinkrank-bg-green thinkrank-text-white'
                                                : 'thinkrank-bg-orange thinkrank-text-white'
                                        }`}>
                                            {open_graph.title.length}/55 {__('chars', 'thinkrank')}
                                        </span>
                                    </div>
                                    <p className="thinkrank-text-sm thinkrank-text-secondary thinkrank-m-0"><FormattedText>{open_graph.title}</FormattedText></p>
                                </div>
                            )}

                            {open_graph.description && (
                                <div className="thinkrank-p-3 thinkrank-bg-blue thinkrank-bg-opacity-5 thinkrank-rounded thinkrank-border thinkrank-border-blue thinkrank-border-opacity-20">
                                    <div className="thinkrank-flex thinkrank-justify-between thinkrank-items-center thinkrank-mb-2">
                                        <span className="thinkrank-text-xs thinkrank-font-semibold thinkrank-text-blue">{__('OG Description', 'thinkrank')}</span>
                                        <span className={`thinkrank-text-xs thinkrank-px-2 thinkrank-py-1 thinkrank-rounded-full ${
                                            open_graph.description.length <= 125
                                                ? 'thinkrank-bg-green thinkrank-text-white'
                                                : 'thinkrank-bg-orange thinkrank-text-white'
                                        }`}>
                                            {open_graph.description.length}/125 {__('chars', 'thinkrank')}
                                        </span>
                                    </div>
                                    <p className="thinkrank-text-sm thinkrank-text-secondary thinkrank-m-0"><FormattedText>{open_graph.description}</FormattedText></p>
                                </div>
                            )}
                        </div>
                    )}

                    {/* Twitter Card Tags */}
                    {(twitter_card?.title || twitter_card?.description) && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Twitter Cards', 'thinkrank')}</h4>

                            {twitter_card.title && (
                                <div className="thinkrank-mb-3 thinkrank-p-3 thinkrank-bg-gray-50 thinkrank-rounded thinkrank-border thinkrank-border-gray-200">
                                    <div className="thinkrank-flex thinkrank-justify-between thinkrank-items-center thinkrank-mb-2">
                                        <span className="thinkrank-text-xs thinkrank-font-semibold thinkrank-text-secondary">{__('Twitter Title', 'thinkrank')}</span>
                                        <span className={`thinkrank-text-xs thinkrank-px-2 thinkrank-py-1 thinkrank-rounded-full ${
                                            twitter_card.title.length <= 70
                                                ? 'thinkrank-bg-green thinkrank-text-white'
                                                : 'thinkrank-bg-orange thinkrank-text-white'
                                        }`}>
                                            {twitter_card.title.length}/70 {__('chars', 'thinkrank')}
                                        </span>
                                    </div>
                                    <p className="thinkrank-text-sm thinkrank-text-secondary thinkrank-m-0"><FormattedText>{twitter_card.title}</FormattedText></p>
                                </div>
                            )}

                            {twitter_card.description && (
                                <div className="thinkrank-p-3 thinkrank-bg-gray-50 thinkrank-rounded thinkrank-border thinkrank-border-gray-200">
                                    <div className="thinkrank-flex thinkrank-justify-between thinkrank-items-center thinkrank-mb-2">
                                        <span className="thinkrank-text-xs thinkrank-font-semibold thinkrank-text-secondary">{__('Twitter Description', 'thinkrank')}</span>
                                        <span className={`thinkrank-text-xs thinkrank-px-2 thinkrank-py-1 thinkrank-rounded-full ${
                                            twitter_card.description.length <= 125
                                                ? 'thinkrank-bg-green thinkrank-text-white'
                                                : 'thinkrank-bg-orange thinkrank-text-white'
                                        }`}>
                                            {twitter_card.description.length}/125 {__('chars', 'thinkrank')}
                                        </span>
                                    </div>
                                    <p className="thinkrank-text-sm thinkrank-text-secondary thinkrank-m-0"><FormattedText>{twitter_card.description}</FormattedText></p>
                                </div>
                            )}
                        </div>
                    )}
                </div>
            </CollapsibleSection>
        );
    };

    /**
     * Render schema markup suggestions
     */
    const renderSchemaMarkup = () => {
        if (!briefData.schema_markup) {
            return null;
        }

        const { recommended_types, key_properties, faq_questions } = briefData.schema_markup;

        // Check if we have any schema data
        if ((!recommended_types || recommended_types.length === 0) &&
            (!key_properties || key_properties.length === 0) &&
            (!faq_questions || faq_questions.length === 0)) {
            return null;
        }

        return (
            <CollapsibleSection
                title={__('Schema Markup Suggestions', 'thinkrank')}
                icon={code}
                defaultOpen={false}
            >
                <div className="thinkrank-space-y-6">
                    {/* Recommended Schema Types */}
                    {recommended_types && recommended_types.length > 0 && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Recommended Schema Types', 'thinkrank')}</h4>
                            <div className="thinkrank-flex thinkrank-flex-wrap thinkrank-gap-2">
                                {recommended_types.map((type, index) => (
                                    <span key={index} className="thinkrank-px-3 thinkrank-py-1 thinkrank-bg-purple thinkrank-bg-opacity-10 thinkrank-text-purple thinkrank-text-sm thinkrank-rounded-full thinkrank-font-medium">
                                        <FormattedText>{type}</FormattedText>
                                    </span>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* Key Properties */}
                    {key_properties && key_properties.length > 0 && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Key Schema Properties', 'thinkrank')}</h4>
                            <ul className="thinkrank-list-disc thinkrank-list-inside thinkrank-space-y-2 thinkrank-text-sm thinkrank-text-secondary">
                                {key_properties.map((property, index) => (
                                    <li key={index}><FormattedText>{property}</FormattedText></li>
                                ))}
                            </ul>
                        </div>
                    )}

                    {/* FAQ Schema Questions */}
                    {faq_questions && faq_questions.length > 0 && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('FAQ Schema Questions', 'thinkrank')}</h4>
                            <div className="thinkrank-space-y-3">
                                {faq_questions.map((question, index) => (
                                    <div key={index} className="thinkrank-p-3 thinkrank-bg-yellow thinkrank-bg-opacity-5 thinkrank-rounded thinkrank-border thinkrank-border-yellow thinkrank-border-opacity-20">
                                        <div className="thinkrank-flex thinkrank-items-center thinkrank-gap-2 thinkrank-mb-1">
                                            <span className="thinkrank-text-xs thinkrank-font-semibold thinkrank-text-yellow">{__('Q', 'thinkrank')}{index + 1}</span>
                                        </div>
                                        <p className="thinkrank-text-sm thinkrank-text-secondary thinkrank-m-0"><FormattedText>{question}</FormattedText></p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                </div>
            </CollapsibleSection>
        );
    };

    /**
     * Render visual content strategy
     */
    const renderVisualContent = () => {
        if (!briefData.visual_content) {
            return null;
        }

        const { image_recommendations, alt_text_suggestions, infographic_opportunities } = briefData.visual_content;

        // Check if we have any visual content data
        if ((!image_recommendations || image_recommendations.length === 0) &&
            (!alt_text_suggestions || alt_text_suggestions.length === 0) &&
            (!infographic_opportunities || infographic_opportunities.length === 0)) {
            return null;
        }

        return (
            <CollapsibleSection
                title={__('Visual Content Strategy', 'thinkrank')}
                icon={chartBar}
                defaultOpen={false}
            >
                <div className="thinkrank-space-y-6">
                    {/* Image Recommendations */}
                    {image_recommendations && image_recommendations.length > 0 && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Image Recommendations', 'thinkrank')}</h4>
                            <ul className="thinkrank-list-disc thinkrank-list-inside thinkrank-space-y-2 thinkrank-text-sm thinkrank-text-secondary">
                                {image_recommendations.map((recommendation, index) => (
                                    <li key={index}><FormattedText>{recommendation}</FormattedText></li>
                                ))}
                            </ul>
                        </div>
                    )}

                    {/* Alt Text Suggestions */}
                    {alt_text_suggestions && alt_text_suggestions.length > 0 && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Alt Text Suggestions', 'thinkrank')}</h4>
                            <div className="thinkrank-space-y-2">
                                {alt_text_suggestions.map((suggestion, index) => (
                                    <div key={index} className="thinkrank-p-3 thinkrank-bg-green thinkrank-bg-opacity-5 thinkrank-rounded thinkrank-border thinkrank-border-green thinkrank-border-opacity-20">
                                        <p className="thinkrank-text-sm thinkrank-text-secondary thinkrank-m-0"><FormattedText>{suggestion}</FormattedText></p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* Infographic Opportunities */}
                    {infographic_opportunities && infographic_opportunities.length > 0 && (
                        <div>
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-3">{__('Infographic Opportunities', 'thinkrank')}</h4>
                            <ul className="thinkrank-list-disc thinkrank-list-inside thinkrank-space-y-2 thinkrank-text-sm thinkrank-text-secondary">
                                {infographic_opportunities.map((opportunity, index) => (
                                    <li key={index}><FormattedText>{opportunity}</FormattedText></li>
                                ))}
                            </ul>
                        </div>
                    )}
                </div>
            </CollapsibleSection>
        );
    };

    /**
     * Render comprehensive competitor analysis
     */
    const renderCompetitorAnalysis = () => {
        const hasCompetitorUrls = briefData.generation_params?.competitor_urls?.length > 0;

        if (!hasCompetitorUrls) {
            return null;
        }

        return (
            <CollapsibleSection
                title={__('Comprehensive Competitor Analysis', 'thinkrank')}
                icon={chartBar}
                defaultOpen={false}
            >
                <div className="thinkrank-competitor-analysis">
                    <p>{__('Detailed analysis of competitor content and SEO performance:', 'thinkrank')}</p>

                        {/* Competitor URLs Overview */}
                        <div className="thinkrank-mb-6">
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-4">{__('Analyzed Competitors', 'thinkrank')}</h4>
                            <div className="thinkrank-flex thinkrank-flex-col thinkrank-gap-3">
                                {briefData.generation_params.competitor_urls.map((url, index) => (
                                    <div key={index} className="thinkrank-card thinkrank-card--flat thinkrank-flex thinkrank-items-center thinkrank-justify-between thinkrank-p-4 thinkrank-bg-gray-50">
                                        <div className="thinkrank-flex-1 thinkrank-min-w-0">
                                            <div className="thinkrank-text-sm thinkrank-font-medium thinkrank-text-secondary thinkrank-mb-1">
                                                {__('Competitor', 'thinkrank')} {index + 1}:
                                            </div>
                                            <a href={url} target="_blank" rel="noopener noreferrer" className="thinkrank-text-sm thinkrank-text-blue hover:thinkrank-underline thinkrank-truncate thinkrank-block">
                                                {url.length > 60 ? url.substring(0, 60) + '...' : url}
                                            </a>
                                        </div>
                                        <div className="thinkrank-flex-shrink-0 thinkrank-ml-4">
                                            <span className="thinkrank-inline-flex thinkrank-items-center thinkrank-gap-1 thinkrank-px-3 thinkrank-py-1 thinkrank-bg-green thinkrank-bg-opacity-10 thinkrank-text-green thinkrank-text-xs thinkrank-font-medium thinkrank-rounded-full">
                                                ✓ {__('Analyzed', 'thinkrank')}
                                            </span>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>

                        {/* Analysis Summary */}
                        <div className="thinkrank-mb-6">
                            <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-4">{__('Key Insights', 'thinkrank')}</h4>
                            <div className="thinkrank-grid thinkrank-grid-cols-1 thinkrank-grid-cols-2-md thinkrank-gap-4">
                                <div className="thinkrank-card thinkrank-card--flat thinkrank-flex thinkrank-items-start thinkrank-gap-3 thinkrank-p-4">
                                    <div className="thinkrank-flex-shrink-0 thinkrank-text-lg">📊</div>
                                    <div className="thinkrank-flex-1 thinkrank-min-w-0">
                                        <div className="thinkrank-text-sm thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-1">{__('Content Analysis', 'thinkrank')}</div>
                                        <p className="thinkrank-text-xs thinkrank-text-secondary thinkrank-m-0 thinkrank-leading-relaxed">{__('Word count, readability, and structure analysis completed', 'thinkrank')}</p>
                                    </div>
                                </div>
                                <div className="thinkrank-card thinkrank-card--flat thinkrank-flex thinkrank-items-start thinkrank-gap-3 thinkrank-p-4">
                                    <div className="thinkrank-flex-shrink-0 thinkrank-text-lg">🎯</div>
                                    <div className="thinkrank-flex-1 thinkrank-min-w-0">
                                        <div className="thinkrank-text-sm thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-1">{__('SEO Evaluation', 'thinkrank')}</div>
                                        <p className="thinkrank-text-xs thinkrank-text-secondary thinkrank-m-0 thinkrank-leading-relaxed">{__('Title tags, meta descriptions, and schema markup assessed', 'thinkrank')}</p>
                                    </div>
                                </div>
                                <div className="thinkrank-card thinkrank-card--flat thinkrank-flex thinkrank-items-start thinkrank-gap-3 thinkrank-p-4">
                                    <div className="thinkrank-flex-shrink-0 thinkrank-text-lg">🔗</div>
                                    <div className="thinkrank-flex-1 thinkrank-min-w-0">
                                        <div className="thinkrank-text-sm thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-1">{__('Link Analysis', 'thinkrank')}</div>
                                        <p className="thinkrank-text-xs thinkrank-text-secondary thinkrank-m-0 thinkrank-leading-relaxed">{__('Internal and external linking strategies evaluated', 'thinkrank')}</p>
                                    </div>
                                </div>
                                <div className="thinkrank-card thinkrank-card--flat thinkrank-flex thinkrank-items-start thinkrank-gap-3 thinkrank-p-4">
                                    <div className="thinkrank-flex-shrink-0 thinkrank-text-lg">🖼️</div>
                                    <div className="thinkrank-flex-1 thinkrank-min-w-0">
                                        <div className="thinkrank-text-sm thinkrank-font-semibold thinkrank-text-primary thinkrank-mb-1">{__('Media Usage', 'thinkrank')}</div>
                                        <p className="thinkrank-text-xs thinkrank-text-secondary thinkrank-m-0 thinkrank-leading-relaxed">{__('Image optimization and alt text usage analyzed', 'thinkrank')}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Detailed Analysis Note */}
                        <div className="thinkrank-p-4 thinkrank-bg-blue thinkrank-bg-opacity-5 thinkrank-border thinkrank-border-blue thinkrank-border-opacity-10 thinkrank-rounded-md">
                            <p className="thinkrank-text-sm thinkrank-text-secondary thinkrank-leading-relaxed thinkrank-m-0">
                                <strong className="thinkrank-text-primary">{__('Note:', 'thinkrank')}</strong> {__('This analysis was used to generate the content gaps and recommendations below. The AI has identified specific opportunities to outperform these competitors.', 'thinkrank')}
                            </p>
                        </div>
                    </div>
                </CollapsibleSection>
        );
    };

    /**
     * Render enhanced competitor gaps and opportunities
     */
    const renderCompetitorGaps = () => {
        if (!briefData.competitor_gaps || briefData.competitor_gaps.length === 0) {
            return null;
        }

        return (
            <CollapsibleSection
                title={__('Content Gaps & Competitive Opportunities', 'thinkrank')}
                icon={funnel}
                defaultOpen={false}
            >
                <div>
                        <div className="thinkrank-mb-6">
                            <p className="thinkrank-text-sm thinkrank-text-secondary thinkrank-leading-relaxed thinkrank-m-0">{__('Based on comprehensive competitor analysis, here are specific opportunities to create superior content that outranks the competition:', 'thinkrank')}</p>
                        </div>

                        <div className="thinkrank-flex thinkrank-flex-col thinkrank-gap-4 thinkrank-mb-6">
                            {briefData.competitor_gaps.map((gap, index) => (
                                <div key={index} className="thinkrank-card thinkrank-card--flat thinkrank-flex thinkrank-items-start thinkrank-gap-4 thinkrank-p-4">
                                    <div className="thinkrank-flex-shrink-0">
                                        <span className="thinkrank-inline-flex thinkrank-items-center thinkrank-px-3 thinkrank-py-1 thinkrank-bg-orange thinkrank-text-white thinkrank-text-xs thinkrank-font-semibold thinkrank-rounded-full thinkrank-shadow-sm">
                                            {__('HIGH IMPACT', 'thinkrank')}
                                        </span>
                                    </div>
                                    <div className="thinkrank-flex-1 thinkrank-min-w-0">
                                        <div className="thinkrank-text-sm thinkrank-font-medium thinkrank-text-primary thinkrank-leading-relaxed thinkrank-mb-3"><FormattedText>{gap}</FormattedText></div>
                                        <div className="thinkrank-flex thinkrank-items-center thinkrank-gap-2">
                                            <span className="thinkrank-text-xs thinkrank-font-semibold thinkrank-text-secondary">{__('ACTION:', 'thinkrank')}</span>
                                            <span className="thinkrank-text-xs thinkrank-text-blue thinkrank-font-medium">{__('Include this in your content strategy', 'thinkrank')}</span>
                                        </div>
                                    </div>
                                    <div className="thinkrank-flex-shrink-0 thinkrank-flex thinkrank-items-center thinkrank-justify-center thinkrank-w-8 thinkrank-h-8 thinkrank-bg-orange thinkrank-bg-opacity-10 thinkrank-rounded-full">
                                        <span className="thinkrank-text-base">💡</span>
                                    </div>
                                </div>
                            ))}
                        </div>

                        <div className="thinkrank-p-4 thinkrank-bg-green thinkrank-bg-opacity-5 thinkrank-border thinkrank-border-green thinkrank-border-opacity-20 thinkrank-rounded-md">
                            <div className="thinkrank-mb-3">
                                <h4 className="thinkrank-text-base thinkrank-font-semibold thinkrank-text-green thinkrank-flex thinkrank-items-center thinkrank-gap-2 thinkrank-m-0">
                                    🚀 {__('Your Competitive Advantage', 'thinkrank')}
                                </h4>
                            </div>
                            <div className="thinkrank-flex thinkrank-flex-col thinkrank-gap-2">
                                <div className="thinkrank-flex thinkrank-items-start thinkrank-gap-2">
                                    <span className="thinkrank-text-green thinkrank-font-bold thinkrank-flex-shrink-0">✓</span>
                                    <span className="thinkrank-text-sm thinkrank-text-secondary thinkrank-leading-relaxed">{__('Address gaps competitors miss', 'thinkrank')}</span>
                                </div>
                                <div className="thinkrank-flex thinkrank-items-start thinkrank-gap-2">
                                    <span className="thinkrank-text-green thinkrank-font-bold thinkrank-flex-shrink-0">✓</span>
                                    <span className="thinkrank-text-sm thinkrank-text-secondary thinkrank-leading-relaxed">{__('Provide more comprehensive coverage', 'thinkrank')}</span>
                                </div>
                                <div className="thinkrank-flex thinkrank-items-start thinkrank-gap-2">
                                    <span className="thinkrank-text-green thinkrank-font-bold thinkrank-flex-shrink-0">✓</span>
                                    <span className="thinkrank-text-sm thinkrank-text-secondary thinkrank-leading-relaxed">{__('Better user experience and engagement', 'thinkrank')}</span>
                                </div>
                                <div className="thinkrank-flex thinkrank-items-start thinkrank-gap-2">
                                    <span className="thinkrank-text-green thinkrank-font-bold thinkrank-flex-shrink-0">✓</span>
                                    <span className="thinkrank-text-sm thinkrank-text-secondary thinkrank-leading-relaxed">{__('Higher search engine rankings potential', 'thinkrank')}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </CollapsibleSection>
        );
    };

    /**
     * Render call-to-action suggestions
     */
    const renderCallToActions = () => {
        if (!briefData.call_to_actions || briefData.call_to_actions.length === 0) {
            return null;
        }

        return (
            <CollapsibleSection
                title={__('Call-to-Action Suggestions', 'thinkrank')}
                icon={megaphone}
                defaultOpen={false}
            >
                <div className="thinkrank-space-y-3">
                    {briefData.call_to_actions.map((cta, index) => (
                        <div key={index} className="thinkrank-flex thinkrank-items-center thinkrank-justify-between thinkrank-p-3 thinkrank-bg-gray-50 thinkrank-rounded-lg thinkrank-border thinkrank-border-light">
                            <span className="thinkrank-text-sm thinkrank-text-primary thinkrank-flex-1 thinkrank-pr-3"><FormattedText>{cta}</FormattedText></span>
                            <button
                                className="thinkrank-btn thinkrank-btn--ghost thinkrank-btn--sm thinkrank-w-8 thinkrank-h-8 thinkrank-flex-center"
                                onClick={() => copyToClipboard(cta)}
                                title={__('Copy CTA', 'thinkrank')}
                            >
                                <svg className="thinkrank-w-4 thinkrank-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                </svg>
                            </button>
                        </div>
                    ))}
                </div>
            </CollapsibleSection>
        );
    };

    /**
     * Render raw AI response (for debugging/reference)
     */
    const renderRawResponse = () => {
        if (!briefData.raw_response) {
            return null;
        }

        return (
            <CollapsibleSection
                title={__('AI Response (Raw)', 'thinkrank')}
                icon={code}
                defaultOpen={false}
            >
                <div className="thinkrank-space-y-4">
                    <pre className="thinkrank-bg-gray-50 thinkrank-p-4 thinkrank-rounded-lg thinkrank-text-sm thinkrank-overflow-x-auto thinkrank-whitespace-pre-wrap">{briefData.raw_response}</pre>
                    <button
                        className="thinkrank-btn thinkrank-btn--secondary thinkrank-btn--sm thinkrank-flex thinkrank-items-center thinkrank-gap-2"
                        onClick={() => copyToClipboard(briefData.raw_response)}
                    >
                        <svg className="thinkrank-w-4 thinkrank-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                        </svg>
                        {__('Copy Raw Response', 'thinkrank')}
                    </button>
                </div>
            </CollapsibleSection>
        );
    };

    return (
        <div className="thinkrank-content-structure">
            {/* Overview Card with Model Badge and Date */}
            {renderOverviewCard()}

            {/* Collapsible Sections */}
            <div className="thinkrank-brief-sections">
                {renderTitleSuggestions()}
                {renderContentOutline()}
                {renderSEORecommendations()}
                {renderSocialMediaTags()}
                {renderSchemaMarkup()}
                {renderVisualContent()}
                {renderCompetitorAnalysis()}
                {renderCompetitorGaps()}
                {renderCallToActions()}
                {renderRawResponse()}
            </div>
        </div>
    );
};

export default ContentStructure;

```