@jhits/plugin-website 0.0.16 → 0.0.17

package/src/views/Settings/components/LocalesManagementCard.tsx

@@ -0,0 +1,198 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Globe, Plus, Search, Loader2, X, Sparkles, Info } from 'lucide-react';
+import { LocaleDefinition } from '../../../types/settings';
+import { GLOBAL_LOCALE_DATABASE } from '../constants';
+import { FlagIcon } from './FlagIcon';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+interface LocalesManagementCardProps {
+    supportedLocales: LocaleDefinition[];
+    onUpdate: (locales: LocaleDefinition[]) => void;
+}
+
+export function LocalesManagementCard({ supportedLocales, onUpdate }: LocalesManagementCardProps) {
+    const [searchCode, setSearchCode] = useState('');
+    const [isSearching, setIsSearching] = useState(false);
+    const [searchError, setSearchError] = useState('');
+
+    const handleToggleLocale = (locale: LocaleDefinition) => {
+        const isEnabled = supportedLocales.some(l => l.code === locale.code);
+        if (isEnabled) {
+            if (supportedLocales.length <= 1) {
+                alert('You must have at least one language enabled.');
+                return;
+            }
+            onUpdate(supportedLocales.filter(l => l.code !== locale.code));
+        } else {
+            onUpdate([...supportedLocales, locale]);
+        }
+    };
+
+    const handleSearchAndAdd = async () => {
+        const code = searchCode.trim().toLowerCase();
+        if (!code) return;
+
+        if (supportedLocales.some(l => l.code === code || l.countryCode === code)) {
+            setSearchError('Language already added');
+            return;
+        }
+
+        setIsSearching(true);
+        setSearchError('');
+
+        try {
+            const response = await fetch(`https://restcountries.com/v3.1/alpha/${code}`);
+            if (!response.ok) throw new Error('Country not found');
+            
+            const data = await response.json();
+            const country = data[0];
+
+            if (country) {
+                const newLocale: LocaleDefinition = {
+                    code: code,
+                    name: country.name.common,
+                    countryCode: country.cca2.toLowerCase()
+                };
+
+                onUpdate([...supportedLocales, newLocale]);
+                setSearchCode('');
+            }
+        } catch (err) {
+            setSearchError('Could not find country code');
+        } finally {
+            setIsSearching(false);
+        }
+    };
+
+    return (
+        <section className="space-y-8">
+            <div className="flex items-center gap-4">
+                <div className="size-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 shadow-inner">
+                    <Globe size={20} />
+                </div>
+                <h3 className="text-2xl lg:text-3xl font-bold text-dashboard-text leading-none tracking-tight">
+                    Localization <span className="text-primary">Matrix</span>
+                </h3>
+            </div>
+
+            <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="bg-dashboard-card/50 border border-dashboard-border/40 p-8 rounded-[2rem] space-y-8 relative overflow-hidden"
+            >
+                {/* Active / Enabled Languages */}
+                <div className="space-y-4">
+                    <div className="flex items-center gap-3 ml-2">
+                        <Sparkles size={12} className="text-primary animate-pulse" />
+                        <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-primary/60">Active Translation Nodes</span>
+                    </div>
+                    
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                        <AnimatePresence mode="popLayout">
+                            {supportedLocales.length > 0 ? (
+                                supportedLocales.map((loc) => (
+                                    <motion.div 
+                                        layout
+                                        initial={{ opacity: 0, scale: 0.95 }}
+                                        animate={{ opacity: 1, scale: 1 }}
+                                        exit={{ opacity: 0, scale: 0.95 }}
+                                        key={loc.code}
+                                        className="flex items-center justify-between p-4 bg-dashboard-bg/30 border border-dashboard-border/40 rounded-xl group hover:border-primary/30 transition-all duration-500 shadow-sm"
+                                    >
+                                        <div className="flex items-center gap-4">
+                                            <div className="size-10 rounded-lg bg-dashboard-card/50 flex items-center justify-center border border-dashboard-border/40 group-hover:bg-primary/10 group-hover:border-primary/20 transition-all duration-500 shadow-inner">
+                                                <FlagIcon countryCode={loc.countryCode} />
+                                            </div>
+                                            <div className="flex flex-col">
+                                                <span className="text-sm font-bold text-dashboard-text/90 group-hover:text-primary transition-colors">{loc.name}</span>
+                                                <span className="text-[10px] text-dashboard-text-secondary/70 font-bold tracking-widest uppercase mt-0.5">{loc.code}</span>
+                                            </div>
+                                        </div>
+                                        <button 
+                                            onClick={() => handleToggleLocale(loc)}
+                                            className="p-2 text-dashboard-text-secondary/40 hover:text-red-500 hover:bg-red-500/10 rounded-lg opacity-0 group-hover:opacity-100 transition-all active:scale-90"
+                                        >
+                                            <X size={16} />
+                                        </button>
+                                    </motion.div>
+                                ))
+                            ) : (
+                                <div className="col-span-2 py-12 text-center bg-dashboard-card/30 border-dashed border border-dashboard-border/40 rounded-2xl">
+                                    <p className="text-xs text-dashboard-text-secondary/60 font-medium">No active localization nodes detected.</p>
+                                </div>
+                            )}
+                        </AnimatePresence>
+                    </div>
+                </div>
+                
+                {/* Search & Add New */}
+                <div className="space-y-4 pt-8 border-t border-dashboard-border/40">
+                    <div className="flex items-center justify-between px-2">
+                        <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-primary/60">Initialize New Region</span>
+                        {searchError && <p className="text-[10px] font-bold text-red-500 animate-pulse">{searchError}</p>}
+                    </div>
+                    <div className="flex gap-3">
+                        <div className="relative flex-1">
+                            <input 
+                                type="text"
+                                value={searchCode}
+                                onChange={(e) => setSearchCode(e.target.value.toUpperCase())}
+                                onKeyDown={(e) => e.key === 'Enter' && handleSearchAndAdd()}
+                                placeholder="COUNTRY CODE (e.g. BE, JP, FR)"
+                                className="w-full pl-6 pr-12 py-3 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-xl text-xs font-bold uppercase tracking-wider outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all text-dashboard-text placeholder:text-dashboard-text-secondary/40"
+                                maxLength={3}
+                            />
+                            {isSearching && (
+                                <Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 size-4 animate-spin text-primary" />
+                            )}
+                        </div>
+                        <button 
+                            onClick={handleSearchAndAdd}
+                            disabled={isSearching || !searchCode}
+                            className="px-6 bg-primary text-white rounded-xl hover:bg-primary/90 transition-all shadow-lg shadow-primary/10 disabled:opacity-50 active:scale-95 flex items-center justify-center shrink-0"
+                        >
+                            <Plus size={20} strokeWidth={2.5} />
+                        </button>
+                    </div>
+                </div>
+
+                {/* Quick Suggestions */}
+                <div className="space-y-4 pt-8 border-t border-dashboard-border/40">
+                    <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-primary/60 ml-2">Recommended Protocols</span>
+                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3">
+                        {GLOBAL_LOCALE_DATABASE
+                            .filter(loc => !supportedLocales.some(s => s.code === loc.code))
+                            .slice(0, 6)
+                            .map((loc) => (
+                                <button
+                                    key={loc.code}
+                                    onClick={() => handleToggleLocale(loc)}
+                                    className="flex flex-col items-center gap-2 p-3 bg-dashboard-bg/30 border border-dashboard-border/40 hover:border-primary/40 hover:bg-primary/5 group transition-all duration-500 rounded-xl"
+                                >
+                                    <div className="size-8 rounded-lg bg-dashboard-card/50 flex items-center justify-center border border-dashboard-border/40 group-hover:border-primary/20 transition-all shadow-inner">
+                                        <FlagIcon countryCode={loc.countryCode} />
+                                    </div>
+                                    <span className="text-[10px] font-bold text-dashboard-text-secondary/60 group-hover:text-primary transition-colors truncate w-full text-center">{loc.name}</span>
+                                </button>
+                            ))}
+                    </div>
+                </div>
+
+                <div className="bg-primary/5 border border-primary/10 p-6 rounded-2xl flex items-start gap-4 group">
+                    <div className="size-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary shrink-0 border border-primary/20">
+                        <Info size={16} />
+                    </div>
+                    <p className="text-xs text-dashboard-text-secondary/70 font-medium leading-relaxed">
+                        JHITS operates on a modular localization engine. Provisioning a region here will automatically synchronize translation schemas and localized data structures across the entire infrastructure.
+                    </p>
+                </div>
+            </motion.div>
+        </section>
+    );
+}

package/src/views/Settings/components/LocalizedContentSection.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Mail, Globe, Plus, Trash2, Smartphone, MapPin, Share2 } from 'lucide-react';
+import { WebsiteSettings, LocaleDefinition, LocalizedContactInfo } from '../../../types/settings';
+import { FlagIcon } from './FlagIcon';
+import { AVAILABLE_PLATFORMS } from '../constants';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+interface LocalizedContentSectionProps {
+    settings: WebsiteSettings;
+    activeTab: string;
+    onUpdateContact: (field: keyof LocalizedContactInfo, value: string) => void;
+    onAddSocial: () => void;
+    onUpdateSocial: (id: number, field: string, value: string) => void;
+    onRemoveSocial: (id: number) => void;
+}
+
+export function LocalizedContentSection({
+    settings,
+    activeTab,
+    onUpdateContact,
+    onAddSocial,
+    onUpdateSocial,
+    onRemoveSocial
+}: LocalizedContentSectionProps) {
+    const contact = settings.localizedContactInfo?.[activeTab] || {};
+    const socials = settings.localizedSocials?.[activeTab] || [];
+
+    return (
+        <section className="space-y-8">
+            <div className="flex items-center gap-4">
+                <div className="size-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 shadow-inner">
+                    <Share2 size={20} />
+                </div>
+                <h3 className="text-2xl lg:text-3xl font-bold text-dashboard-text leading-none tracking-tight">
+                    Localized <span className="text-primary">Content</span>
+                </h3>
+            </div>
+
+            <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="bg-dashboard-card/50 border border-dashboard-border/40 p-8 rounded-[2rem] space-y-8 relative overflow-hidden"
+            >
+                {/* 1. Contact Info Sub-section */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="space-y-2">
+                        <label className="text-[10px] font-bold text-dashboard-text-secondary/70 uppercase tracking-[0.15em] ml-2 opacity-60">Communication Vector ({activeTab})</label>
+                        <div className="relative group">
+                            <Smartphone className="absolute left-5 top-1/2 -translate-y-1/2 size-4 text-dashboard-text-secondary/40 group-focus-within:text-primary transition-colors" />
+                            <input
+                                type="tel"
+                                value={contact.phoneNumber || ''}
+                                onChange={(e) => onUpdateContact('phoneNumber', e.target.value)}
+                                placeholder="INITIALIZE_PHONE"
+                                className="w-full pl-12 pr-6 py-3 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all text-dashboard-text placeholder:text-dashboard-text-secondary/30"
+                            />
+                        </div>
+                    </div>
+                    <div className="space-y-2">
+                        <label className="text-[10px] font-bold text-dashboard-text-secondary/70 uppercase tracking-[0.15em] ml-2 opacity-60">Geospatial Coordinates ({activeTab})</label>
+                        <div className="relative group">
+                            <MapPin className="absolute left-5 top-1/2 -translate-y-1/2 size-4 text-dashboard-text-secondary/40 group-focus-within:text-primary transition-colors" />
+                            <input
+                                type="text"
+                                value={contact.physicalAddress || ''}
+                                onChange={(e) => onUpdateContact('physicalAddress', e.target.value)}
+                                placeholder="STREET_ADDRESS_PROTOCOL"
+                                className="w-full pl-12 pr-6 py-3 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all text-dashboard-text placeholder:text-dashboard-text-secondary/30"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {/* 2. Social Links Sub-section */}
+                <div className="pt-8 border-t border-dashboard-border/40">
+                    <div className="flex items-center justify-between mb-4 ml-2">
+                        <label className="text-[10px] font-bold text-dashboard-text-secondary/70 uppercase tracking-[0.15em] opacity-60">Social Ecosystem Nodes ({activeTab})</label>
+                        <button 
+                            onClick={onAddSocial}
+                            className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-xl text-[10px] font-bold uppercase tracking-[0.15em] hover:bg-primary/90 transition-all shadow-lg shadow-primary/10 active:scale-95 group/btn overflow-hidden relative"
+                        >
+                            <div className="absolute inset-0 bg-linear-to-br from-white/20 to-transparent opacity-0 group-hover/btn:opacity-100 transition-opacity" />
+                            <Plus size={12} strokeWidth={3} /> <span>Link Node</span>
+                        </button>
+                    </div>
+
+                    <div className="space-y-3">
+                        <AnimatePresence mode="popLayout">
+                            {socials.length > 0 ? (
+                                socials.map((social, idx) => {
+                                    const platform = AVAILABLE_PLATFORMS.find(p => p.name === social.platform);
+                                    return (
+                                        <motion.div 
+                                            layout
+                                            initial={{ opacity: 0, x: -20 }}
+                                            animate={{ opacity: 1, x: 0 }}
+                                            exit={{ opacity: 0, x: 20 }}
+                                            transition={{ delay: idx * 0.05 }}
+                                            key={social.id} 
+                                            className="flex items-center gap-4 p-3 bg-dashboard-bg/30 border border-dashboard-border/40 rounded-xl group hover:border-primary/30 transition-all duration-500"
+                                        >
+                                            <div className="shrink-0 size-10 rounded-lg bg-dashboard-card/50 flex items-center justify-center border border-dashboard-border/40 text-dashboard-text-secondary/40 group-hover:text-primary group-hover:bg-primary/10 group-hover:border-primary/20 transition-all duration-500 shadow-inner">
+                                                {platform?.icon || <Globe size={18} />}
+                                            </div>
+                                            
+                                            <div className="flex-1 flex flex-col md:flex-row items-center gap-4">
+                                                <div className="w-full md:w-32 relative">
+                                                    <select
+                                                        value={social.platform}
+                                                        onChange={(e) => onUpdateSocial(social.id, 'platform', e.target.value)}
+                                                        className="w-full bg-transparent border-none outline-none text-[10px] font-bold uppercase tracking-wider text-dashboard-text/90 cursor-pointer focus:text-primary transition-colors appearance-none"
+                                                    >
+                                                        <option value="" className="bg-neutral-900">PLATFORM</option>
+                                                        {AVAILABLE_PLATFORMS.map(p => (<option key={p.name} value={p.name} className="bg-neutral-900">{p.name}</option>))}
+                                                    </select>
+                                                </div>
+                                                
+                                                <div className="hidden md:block h-5 w-px bg-dashboard-border/40" />
+                                                
+                                                <input
+                                                    type="url"
+                                                    value={social.url}
+                                                    onChange={(e) => onUpdateSocial(social.id, 'url', e.target.value)}
+                                                    placeholder="URL_ENDPOINT"
+                                                    className="flex-1 bg-transparent border-none outline-none text-xs font-bold text-dashboard-text/90 placeholder:text-dashboard-text-secondary/30 w-full"
+                                                />
+                                            </div>
+
+                                            <button 
+                                                onClick={() => onRemoveSocial(social.id)}
+                                                className="p-2 text-dashboard-text-secondary/40 hover:text-red-500 hover:bg-red-500/10 rounded-lg opacity-0 group-hover:opacity-100 transition-all active:scale-90"
+                                            >
+                                                <Trash2 size={16} />
+                                            </button>
+                                        </motion.div>
+                                    );
+                                })
+                            ) : (
+                                <div className="text-center py-12 bg-dashboard-card/20 border border-dashed border-dashboard-border/40 rounded-2xl">
+                                    <p className="text-[10px] text-dashboard-text-secondary/40 font-bold uppercase tracking-[0.2em]">No social platforms initialized</p>
+                                </div>
+                            )}
+                        </AnimatePresence>
+                    </div>
+                </div>
+            </motion.div>
+        </section>
+    );
+}

package/src/views/Settings/components/SeoIdentitySection.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Search, Sparkles, Fingerprint } from 'lucide-react';
+import { WebsiteSettings, LocalizedIdentity } from '../../../types/settings';
+import { FlagIcon } from './FlagIcon';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+interface SeoIdentitySectionProps {
+    settings: WebsiteSettings;
+    activeTab: string;
+    onUpdateLocalized: (field: keyof LocalizedIdentity, value: string) => void;
+}
+
+export function SeoIdentitySection({ 
+    settings, 
+    activeTab, 
+    onUpdateLocalized 
+}: SeoIdentitySectionProps) {
+    const identity = settings.localizedIdentity?.[activeTab] || {};
+
+    return (
+        <section className="space-y-8">
+            <div className="flex items-center gap-4">
+                <div className="size-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 shadow-inner">
+                    <Fingerprint size={20} />
+                </div>
+                <h3 className="text-2xl lg:text-3xl font-bold text-dashboard-text leading-none tracking-tight">
+                    Identity <span className="text-primary">& SEO</span>
+                </h3>
+            </div>
+
+            <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="bg-dashboard-card/50 border border-dashboard-border/40 p-8 rounded-[2rem] space-y-6 relative overflow-hidden"
+            >
+                <div className="absolute top-0 right-0 w-64 h-64 blur-3xl opacity-5 bg-primary pointer-events-none" />
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="space-y-2">
+                        <div className="flex items-center justify-between ml-2">
+                            <label className="text-[10px] font-bold text-dashboard-text-secondary/70 uppercase tracking-[0.15em] opacity-60">System Name ({activeTab})</label>
+                            <Sparkles size={10} className="text-primary animate-pulse" />
+                        </div>
+                        <input
+                            type="text"
+                            value={identity.siteName || ''}
+                            onChange={(e) => onUpdateLocalized('siteName', e.target.value)}
+                            placeholder="INITIALIZE_NAME"
+                            className="w-full px-6 py-3 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all text-dashboard-text placeholder:text-dashboard-text-secondary/30"
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <label className="text-[10px] font-bold text-dashboard-text-secondary/70 uppercase tracking-[0.15em] ml-2 opacity-60">Strategic Tagline ({activeTab})</label>
+                        <input
+                            type="text"
+                            value={identity.siteTagline || ''}
+                            onChange={(e) => onUpdateLocalized('siteTagline', e.target.value)}
+                            placeholder="DEFINE_TAGLINE"
+                            className="w-full px-6 py-3 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all text-dashboard-text placeholder:text-dashboard-text-secondary/30"
+                        />
+                    </div>
+                </div>
+
+                <div className="space-y-2">
+                    <label className="text-[10px] font-bold text-dashboard-text-secondary/70 uppercase tracking-[0.15em] ml-2 opacity-60">Global Description Protocol ({activeTab})</label>
+                    <textarea
+                        value={identity.siteDescription || ''}
+                        onChange={(e) => onUpdateLocalized('siteDescription', e.target.value)}
+                        placeholder="A comprehensive architectural description for search engine crawlers..."
+                        rows={3}
+                        className="w-full px-6 py-4 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-xl text-sm font-medium leading-relaxed outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all text-dashboard-text placeholder:text-dashboard-text-secondary/30 resize-none"
+                    />
+                </div>
+
+                <div className="space-y-2">
+                    <label className="text-[10px] font-bold text-dashboard-text-secondary/70 uppercase tracking-[0.15em] ml-2 opacity-60">Indexing Keywords ({activeTab})</label>
+                    <div className="relative group">
+                        <Search className="absolute left-5 top-1/2 -translate-y-1/2 size-4 text-dashboard-text-secondary/40 group-focus-within:text-primary transition-colors" />
+                        <input
+                            type="text"
+                            value={identity.keywords || ''}
+                            onChange={(e) => onUpdateLocalized('keywords', e.target.value)}
+                            placeholder="comma, separated, identifiers"
+                            className="w-full pl-12 pr-6 py-3 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all text-dashboard-text placeholder:text-dashboard-text-secondary/30"
+                        />
+                    </div>
+                    <p className="text-[10px] text-dashboard-text-secondary/60 ml-4 font-medium opacity-60">Separated by commas. These tokens facilitate high-signal discovery during search engine scanning.</p>
+                </div>
+            </motion.div>
+        </section>
+    );
+}

package/src/views/Settings/components/SocialLinksSection.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Globe, X } from 'lucide-react';
+import { WebsiteSettings, LocaleDefinition, LocalizedSocialLink } from '../../../types/settings';
+import { AVAILABLE_PLATFORMS } from '../constants';
+import { FlagIcon } from './FlagIcon';
+
+interface SocialLinksSectionProps {
+    settings: WebsiteSettings;
+    activeTab: string;
+    onTabChange: (code: string) => void;
+    activeLocales: LocaleDefinition[];
+    onAdd: () => void;
+    onUpdate: (id: number, field: string, value: string) => void;
+    onRemove: (id: number) => void;
+}
+
+export function SocialLinksSection({
+    settings,
+    activeTab,
+    onTabChange,
+    activeLocales,
+    onAdd,
+    onUpdate,
+    onRemove
+}: SocialLinksSectionProps) {
+    const currentSocials = settings.localizedSocials?.[activeTab] || [];
+
+    return (
+        <section className="bg-dashboard-card/50 p-6 rounded-[2rem] border border-dashboard-border/40">
+            <div className="flex items-center justify-between border-b border-dashboard-border/40 pb-4 mb-4">
+                <div className="flex items-center gap-2 text-xl font-bold text-dashboard-text leading-none tracking-tight">
+                    <Globe size={18} className="text-primary" />
+                    Social <span className="text-primary">Links</span> ({activeTab.toUpperCase()})
+                </div>
+                <button 
+                    onClick={onAdd}
+                    className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider bg-primary text-white rounded-xl hover:bg-primary/90 transition-all shadow-lg shadow-primary/10"
+                >
+                    Add Social
+                </button>
+            </div>
+
+            <div className="flex gap-2 mb-4 overflow-x-auto pb-2 custom-scrollbar">
+                {activeLocales.map((loc) => (
+                    <button
+                        key={loc.code}
+                        onClick={() => onTabChange(loc.code)}
+                        className={`px-3 py-1.5 rounded-xl text-[10px] font-bold uppercase tracking-wider transition-all flex items-center gap-2 shrink-0 border ${
+                            activeTab === loc.code 
+                                ? 'bg-primary text-white border-primary shadow-lg shadow-primary/10' 
+                                : 'bg-dashboard-bg/30 text-dashboard-text-secondary/50 border-dashboard-border/40 hover:border-primary/30'
+                        }`}
+                    >
+                        <FlagIcon code={loc.code} countryCode={loc.countryCode} />
+                        {loc.code.toUpperCase()}
+                    </button>
+                ))}
+            </div>
+
+            <div className="space-y-3">
+                {currentSocials.length > 0 ? (
+                    currentSocials.map((social) => {
+                        const platform = AVAILABLE_PLATFORMS.find(p => p.name === social.platform);
+                        return (
+                            <div key={social.id} className="flex items-center gap-3 p-3 bg-dashboard-bg/30 rounded-xl border border-dashboard-border/40">
+                                <div className="flex-shrink-0 text-dashboard-text-secondary/40">
+                                    {platform?.icon || <Globe size={16} />}
+                                </div>
+                                <select
+                                    value={social.platform}
+                                    onChange={(e) => onUpdate(social.id, 'platform', e.target.value)}
+                                    className="flex-1 px-3 py-1.5 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-lg outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 text-sm font-bold text-dashboard-text/90 cursor-pointer appearance-none"
+                                >
+                                    <option value="" className="bg-neutral-900">PLATFORM</option>
+                                    {AVAILABLE_PLATFORMS.map(p => (<option key={p.name} value={p.name} className="bg-neutral-900">{p.name}</option>))}
+                                </select>
+                                <input
+                                    type="url"
+                                    value={social.url}
+                                    onChange={(e) => onUpdate(social.id, 'url', e.target.value)}
+                                    placeholder="https://..."
+                                    className="flex-[2] px-3 py-1.5 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-lg outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 text-sm font-bold text-dashboard-text/90 placeholder:text-dashboard-text-secondary/30"
+                                />
+                                <button onClick={() => onRemove(social.id)} className="p-2 text-dashboard-text-secondary/40 hover:text-red-500 hover:bg-red-500/10 rounded-lg transition-all">
+                                    <X size={14} />
+                                </button>
+                            </div>
+                        );
+                    })
+                ) : (
+                    <p className="text-[10px] text-dashboard-text-secondary/50 font-bold uppercase tracking-wider text-center py-8 bg-dashboard-card/20 border border-dashed border-dashboard-border/40 rounded-xl">
+                        No social links added for {activeTab.toUpperCase()}
+                    </p>
+                )}
+            </div>
+        </section>
+    );
+}