/**
 * Feature Comparison component.
 *
 * @package Schema_AI
 */

import { __ } from '@wordpress/i18n';

const features = [
	{ category: __( 'AI Generation', 'schema-ai' ), items: [
		{ name: __( 'Monthly Generations', 'schema-ai' ), free: '30', pro: '300', premium: '1,000' },
		{ name: __( 'AI Model', 'schema-ai' ), free: 'GPT-4o Mini', pro: 'GPT-4o Mini', premium: 'GPT-4o Mini' },
		{ name: __( 'Content Analysis', 'schema-ai' ), free: true, pro: true, premium: true },
		{ name: __( 'Auto-Generate on Publish', 'schema-ai' ), free: true, pro: true, premium: true },
	] },
	{ category: __( 'Schema Types', 'schema-ai' ), items: [
		{ name: __( 'All 827+ Schema Types', 'schema-ai' ), free: true, pro: true, premium: true },
		{ name: __( 'Custom Schema Builder', 'schema-ai' ), free: false, pro: true, premium: true },
		{ name: __( 'Schema Templates Library', 'schema-ai' ), free: false, pro: true, premium: true },
	] },
	{ category: __( 'Features', 'schema-ai' ), items: [
		{ name: __( 'Visual Editor', 'schema-ai' ), free: true, pro: true, premium: true },
		{ name: __( 'Google Rich Results Test', 'schema-ai' ), free: true, pro: true, premium: true },
		{ name: __( 'Schema Validation', 'schema-ai' ), free: __( 'Basic', 'schema-ai' ), pro: __( 'Advanced', 'schema-ai' ), premium: __( 'Advanced', 'schema-ai' ) },
		{ name: __( 'Bulk Operations', 'schema-ai' ), free: false, pro: false, premium: true },
		{ name: __( 'Automation Rules', 'schema-ai' ), free: false, pro: false, premium: true },
		{ name: __( 'Analytics Dashboard', 'schema-ai' ), free: false, pro: false, premium: true },
		{ name: __( 'Multi-Site Support', 'schema-ai' ), free: false, pro: false, premium: true },
	] },
	{ category: __( 'Support', 'schema-ai' ), items: [
		{ name: __( 'Community Forum', 'schema-ai' ), free: true, pro: true, premium: true },
		{ name: __( 'Priority Email Support', 'schema-ai' ), free: false, pro: true, premium: true },
		{ name: __( 'Dedicated Support', 'schema-ai' ), free: false, pro: false, premium: true },
	] },
];

function FeatureComparison() {
	const renderValue = ( val ) => {
		if ( val === true ) return <span className="dashicons dashicons-yes-alt schema-ai-fc-yes"></span>;
		if ( val === false ) return <span className="dashicons dashicons-minus schema-ai-fc-no"></span>;
		return <span className="schema-ai-fc-text">{ val }</span>;
	};

	return (
		<div className="schema-ai-feature-comparison">
			<table className="widefat striped">
				<thead>
					<tr>
						<th>{ __( 'Feature', 'schema-ai' ) }</th>
						<th className="schema-ai-fc-plan-col">{ __( 'Free', 'schema-ai' ) }</th>
						<th className="schema-ai-fc-plan-col">{ __( 'Pro', 'schema-ai' ) }</th>
						<th className="schema-ai-fc-plan-col">{ __( 'Premium', 'schema-ai' ) }</th>
					</tr>
				</thead>
				<tbody>
					{ features.map( ( group ) => (
						<>
							<tr key={ group.category } className="schema-ai-feature-group">
								<td colSpan="4"><strong>{ group.category }</strong></td>
							</tr>
							{ group.items.map( ( item ) => (
								<tr key={ item.name }>
									<td>{ item.name }</td>
									<td className="schema-ai-fc-plan-col">{ renderValue( item.free ) }</td>
									<td className="schema-ai-fc-plan-col">{ renderValue( item.pro ) }</td>
									<td className="schema-ai-fc-plan-col">{ renderValue( item.premium ) }</td>
								</tr>
							) ) }
						</>
					) ) }
				</tbody>
			</table>
		</div>
	);
}

export default FeatureComparison;