{/* Tabs */}

{/* LEFT: Main Settings */}

{activeTab === 'general' && (

Search Metadata

Global Meta Title setData('seo_title', e.target.value)} className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none transition-all" placeholder="Company Name | Tagline" />

Recommended: 50-60 characters.

Global Meta Description

setData('seo_description', e.target.value)}
                                            rows={4}
                                            className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none transition-all resize-none"
                                            placeholder="Enter a brief summary of your business..."
                                        />
                                        <p className="mt-1.5 text-[11px] text-[#8C92AC]">Recommended: 150-160 characters.</p>
                                    </div>

<div>
                                        <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-2">
                                            Global Keywords
                                        </label>
                                        <input 
                                            type="text"
                                            value={data.seo_keywords}
                                            onChange={e => setData('seo_keywords', e.target.value)}
                                            className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none transition-all"
                                            placeholder="growth, strategy, digital assets..."
                                        />
                                        <p className="mt-1.5 text-[11px] text-[#8C92AC]">Comma-separated list of keywords.</p>
                                    </div>
                                </div>
                            )}

{activeTab === 'social' && (
                                <>
                                    <div className="bg-white rounded-2xl border border-[#E8E6DF] overflow-hidden p-6 space-y-6">
                                        <div className="flex items-center gap-2 text-accent">
                                            <Share2 className="h-5 w-5" />
                                            <h3 className="font-bold text-ink">Social Sharing (OG Image)</h3>
                                        </div>

<div>
                                            <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-3">
                                                Default Social Media Image
                                            </label>
                                            <div className="relative group aspect-video rounded-2xl bg-[#FAFAF8] border-2 border-dashed border-[#E8E6DF] flex items-center justify-center overflow-hidden">
                                                {data.seo_og_image ? (
                                                    <img src={data.seo_og_image} alt="SEO" className="w-full h-full object-cover" />
                                                ) : (
                                                    <div className="text-center">
                                                        <ImageIcon className="h-8 w-8 text-[#C0BDBA] mx-auto mb-3" />
                                                        <span className="text-[12px] text-[#8C92AC]">1200 x 630px recommended</span>
                                                    </div>
                                                )}
                                                <button 
                                                    type="button"
                                                    onClick={() => setPickerOpen(true)}
                                                    className="absolute inset-0 bg-ink/60 text-white opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 text-[14px] font-medium"
                                                >
                                                    <ImageIcon className="h-4 w-4" />
                                                    Choose Image
                                                </button>
                                            </div>
                                            <p className="mt-3 text-[11px] text-[#8C92AC]">This image will appear when you share links on WhatsApp, Twitter, and LinkedIn.</p>
                                        </div>
                                    </div>

<div className="bg-white rounded-2xl border border-[#E8E6DF] overflow-hidden p-6 space-y-6">
                                        <div className="flex items-center gap-2 text-accent">
                                            <LinkIcon className="h-5 w-5" />
                                            <h3 className="font-bold text-ink">Organization Social Profiles</h3>
                                        </div>
                                        <p className="text-sm text-muted-foreground mb-4">
                                            These are injected into your site's JSON-LD schema to build brand authority (E-E-A-T).
                                        </p>

<div className="space-y-4">
                                            <div>
                                                <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-2">LinkedIn URL</label>
                                                <input type="url" value={data.seo_social_linkedin} onChange={e => setData('seo_social_linkedin', e.target.value)} className="w-full px-4 py-2 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none" placeholder="https://linkedin.com/company/altivate" />
                                            </div>
                                            <div>
                                                <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-2">Twitter/X URL</label>
                                                <input type="url" value={data.seo_social_twitter} onChange={e => setData('seo_social_twitter', e.target.value)} className="w-full px-4 py-2 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none" placeholder="https://twitter.com/altivate" />
                                            </div>
                                            <div>
                                                <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-2">Instagram URL</label>
                                                <input type="url" value={data.seo_social_instagram} onChange={e => setData('seo_social_instagram', e.target.value)} className="w-full px-4 py-2 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none" placeholder="https://instagram.com/altivate" />
                                            </div>
                                        </div>
                                    </div>

<div className="bg-white rounded-2xl border border-[#E8E6DF] overflow-hidden p-6 space-y-6">
                                        <div className="flex items-center gap-2 text-accent">
                                            <Activity className="h-5 w-5" />
                                            <h3 className="font-bold text-ink">Analytics Integration</h3>
                                        </div>

<div>
                                            <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-2">
                                                GA4 Measurement ID
                                            </label>
                                            <input 
                                                type="text"
                                                value={data.ga4_measurement_id}
                                                onChange={e => setData('ga4_measurement_id', e.target.value)}
                                                className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none transition-all"
                                                placeholder="G-XXXXXXXXXX"
                                            />
                                            <p className="mt-1.5 text-[11px] text-[#8C92AC]">Adding this will automatically enable Google Analytics 4 tracking.</p>
                                        </div>
                                    </div>
                                </>
                            )}

{activeTab === 'local' && (
                                <div className="bg-white rounded-2xl border border-[#E8E6DF] overflow-hidden p-6 space-y-6">
                                    <div className="flex items-center gap-2 text-accent">
                                        <MapPin className="h-5 w-5" />
                                        <h3 className="font-bold text-ink">Business NAP (Name, Address, Phone)</h3>
                                    </div>
                                    <p className="text-sm text-muted-foreground mb-4">
                                        Ensure these match your Google Business Profile exactly to improve local SEO trust signals.
                                    </p>

<div className="space-y-4">
                                        <div>
                                            <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-2">Business Name</label>
                                            <input type="text" value={data.contact_nap_name} onChange={e => setData('contact_nap_name', e.target.value)} className="w-full px-4 py-2 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none" placeholder="Altivate Solutions" />
                                        </div>
                                        <div>
                                            <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-2">Address</label>
                                            <textarea rows={3} value={data.contact_nap_address} onChange={e => setData('contact_nap_address', e.target.value)} className="w-full px-4 py-2 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none resize-none" placeholder="Full physical address..." />
                                        </div>
                                        <div>
                                            <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-2">Phone Number</label>
                                            <input type="text" value={data.contact_nap_phone} onChange={e => setData('contact_nap_phone', e.target.value)} className="w-full px-4 py-2 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none" placeholder="+234..." />
                                        </div>
                                    </div>
                                </div>
                            )}

{activeTab === 'redirects' && (
                                <div className="bg-white rounded-2xl border border-[#E8E6DF] overflow-hidden p-6 space-y-6">
                                    <div className="flex items-center gap-2 text-accent">
                                        <ExternalLink className="h-5 w-5" />
                                        <h3 className="font-bold text-ink">Redirect Manager</h3>
                                    </div>
                                    <p className="text-sm text-muted-foreground mb-4">
                                        Create 301 (Permanent) or 302 (Temporary) redirects to preserve SEO rankings when paths change.
                                    </p>

{/* Add Redirect Form */}
                                    <div className="bg-[#FAFAF8] border border-[#E8E6DF] rounded-xl p-4 mb-6">
                                        <h4 className="text-sm font-bold mb-3">Add New Redirect</h4>
                                        <div className="grid grid-cols-1 md:grid-cols-12 gap-3">
                                            <div className="md:col-span-4">
                                                <input 
                                                    type="text" 
                                                    placeholder="Old Path (e.g. /old-blog)" 
                                                    value={newRedirect.old_path}
                                                    onChange={e => setNewRedirect({...newRedirect, old_path: e.target.value})}
                                                    className="w-full px-3 py-2 bg-white border border-[#E8E6DF] rounded-lg text-sm focus:border-accent outline-none"
                                                />
                                            </div>
                                            <div className="md:col-span-4">
                                                <input 
                                                    type="text" 
                                                    placeholder="New Path (e.g. /new-blog)" 
                                                    value={newRedirect.new_path}
                                                    onChange={e => setNewRedirect({...newRedirect, new_path: e.target.value})}
                                                    className="w-full px-3 py-2 bg-white border border-[#E8E6DF] rounded-lg text-sm focus:border-accent outline-none"
                                                />
                                            </div>
                                            <div className="md:col-span-2">
                                                <select
                                                    value={newRedirect.type}
                                                    onChange={e => setNewRedirect({...newRedirect, type: e.target.value})}
                                                    className="w-full px-3 py-2 bg-white border border-[#E8E6DF] rounded-lg text-sm focus:border-accent outline-none"
                                                >
                                                    <option value="301">301 (Permanent)</option>
                                                    <option value="302">302 (Temporary)</option>
                                                </select>
                                            </div>
                                            <div className="md:col-span-2">
                                                <button 
                                                    type="button"
                                                    onClick={handleCreateRedirect}
                                                    className="w-full px-3 py-2 bg-ink text-white rounded-lg text-sm font-semibold hover:bg-accent transition-colors"
                                                >
                                                    Add
                                                </button>
                                            </div>
                                        </div>
                                    </div>

{/* Redirects List */}
                                    <div className="border border-[#E8E6DF] rounded-xl overflow-hidden">
                                        <table className="w-full text-sm text-left">
                                            <thead className="bg-[#FAFAF8] text-[#8C92AC] font-medium border-b border-[#E8E6DF]">
                                                <tr>
                                                    <th className="px-4 py-3">Old Path</th>
                                                    <th className="px-4 py-3">New Path</th>
                                                    <th className="px-4 py-3 w-20 text-center">Type</th>
                                                    <th className="px-4 py-3 w-16"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {redirects.length === 0 ? (
                                                    <tr>
                                                        <td colSpan={4} className="px-4 py-8 text-center text-muted-foreground italic">No redirects found.</td>
                                                    </tr>
                                                ) : (
                                                    redirects.map((redirect) => (
                                                        <tr key={redirect.id} className="border-b border-[#E8E6DF] last:border-0 hover:bg-[#FAFAF8] transition-colors">
                                                            <td className="px-4 py-3 font-medium text-ink">{redirect.old_path}</td>
                                                            <td className="px-4 py-3 text-[#8C92AC]">{redirect.new_path}</td>
                                                            <td className="px-4 py-3 text-center">
                                                                <span className="bg-secondary text-ink px-2 py-0.5 rounded text-xs font-bold">{redirect.type}</span>
                                                            </td>
                                                            <td className="px-4 py-3 text-right">
                                                                <button 
                                                                    type="button"
                                                                    onClick={() => handleDeleteRedirect(redirect.id)}
                                                                    className="text-red-500 hover:bg-red-50 p-1.5 rounded transition-colors"
                                                                >
                                                                    <Trash2 className="h-4 w-4" />
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    ))
                                                )}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            )}

</div>

{/* RIGHT: Preview & Tips */}
                        <div className="lg:col-span-4 space-y-6">
                            {activeTab === 'general' && (
                                <div className="bg-ink text-white rounded-2xl p-6 shadow-xl">
                                    <div className="flex items-center gap-2 mb-6">
                                        <Info className="h-5 w-5 text-accent" />
                                        <h3 className="font-bold">Google Preview</h3>
                                    </div>
                                    
                                    <div className="space-y-1">
                                        <div className="text-[14px] text-accent truncate">altivatesolutions.com</div>
                                        <div className="text-[18px] font-medium text-blue-400 line-clamp-2 hover:underline cursor-pointer">
                                            {data.seo_title || 'Your SEO Title'}
                                        </div>
                                        <div className="text-[13px] text-gray-300 line-clamp-3">
                                            {data.seo_description || 'Your meta description will appear here to attract visitors from search results.'}
                                        </div>
                                    </div>
                                </div>
                            )}

<div className="bg-white rounded-2xl border border-[#E8E6DF] p-6">
                                <h4 className="text-[13px] font-bold text-ink uppercase tracking-wider mb-4">SEO Tips</h4>
                                <ul className="space-y-4">
                                    <li className="flex gap-3 text-[13px] text-[#8C92AC]">
                                        <span className="h-1.5 w-1.5 rounded-full bg-accent mt-1.5 shrink-0" />
                                        Keep titles descriptive and unique.
                                    </li>
                                    <li className="flex gap-3 text-[13px] text-[#8C92AC]">
                                        <span className="h-1.5 w-1.5 rounded-full bg-accent mt-1.5 shrink-0" />
                                        Include your primary keywords naturally.
                                    </li>
                                    <li className="flex gap-3 text-[13px] text-[#8C92AC]">
                                        <span className="h-1.5 w-1.5 rounded-full bg-accent mt-1.5 shrink-0" />
                                        Use a high-quality OG image for social credibility.
                                    </li>
                                    <li className="flex gap-3 text-[13px] text-[#8C92AC]">
                                        <span className="h-1.5 w-1.5 rounded-full bg-accent mt-1.5 shrink-0" />
                                        Consistent NAP data builds local search authority.
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

<div className="flex justify-end pt-4">
                        <button 
                            type="submit" 
                            disabled={processing}
                            className="w-full sm:w-auto px-12 py-4 bg-ink text-white rounded-2xl text-[15px] font-semibold flex items-center justify-center gap-2 hover:bg-accent transition-all shadow-lg active:scale-[0.98] disabled:opacity-50"
                        >
                            <Save className="h-4 w-4" />
                            {processing ? 'Saving...' : 'Publish SEO Settings'}
                        </button>
                    </div>
                </form>
            </div>

<MediaPicker 
                open={pickerOpen}
                onClose={() => setPickerOpen(false)}
                onSelect={handleMediaSelect}
                title="Select Social Sharing Image"
            />
        </AdminLayout>
    );
}

SEO Center

Search Metadata