Create rs.jsx

rs.jsx

@@ -0,0 +1,527 @@
+import React, { useState } from 'react';
+import { Info, Star, Compass, BookOpen, Sparkles, Moon, Sun, CircleDot } from 'lucide-react';
+
+// --- DATA ---
+const nakshatraNamesMalayalam = ["അശ്വതി", "ഭരണി", "കാർത്തിക", "രോഹിണി", "മകയിരം", "തിരുവാതിര", "പുണർതം", "പൂയം", "ആയില്യം", "മകം", "പൂരം", "ഉത്രം", "അത്തം", "ചിത്തിര", "ചോതി", "വിശാഖം", "അനിഴം", "തൃക്കേട്ട", "മൂലം", "പൂരാടം", "ഉത്രാടം", "തിരുവോണം", "അവിട്ടം", "ചതയം", "പൂരുരുട്ടാതി", "ഉത്തൃട്ടാതി", "രേവതി"];
+const nakshatraNamesEng = ["Ashvini", "Bharani", "Krittika", "Rohini", "Mrigashirsha", "Ardra", "Punarvasu", "Pushya", "Ashlesha", "Magha", "Purva Phalguni", "Uttara Phalguni", "Hasta", "Chitra", "Swati", "Vishakha", "Anuradha", "Jyeshtha", "Mula", "Purva Ashadha", "Uttara Ashadha", "Shravana", "Dhanishtha", "Shatabhisha", "Purva Bhadrapada", "Uttara Bhadrapada", "Revati"];
+const rasiNamesMalayalam = ["മേടം", "ഇടവം", "മിഥുനം", "കർക്കടകം", "ചിങ്ങം", "കന്നി", "തുലാം", "വൃശ്ചികം", "ധനു", "മകരം", "കുംഭം", "മീനം"];
+const rasiNamesEng = ["Mesha (Aries)", "Vrisha (Taurus)", "Mithuna (Gemini)", "Karka (Cancer)", "Simha (Leo)", "Kanya (Virgo)", "Tula (Libra)", "Vrishchika (Scorpio)", "Dhanu (Sagittarius)", "Makar (Capricorn)", "Kumbha (Aquarius)", "Meen (Pisces)"];
+
+// Vibrant Astrological properties
+const tattvas = { Fire: "അഗ്നി (Fire)", Earth: "ഭൂമി (Earth)", Air: "വായു (Air)", Water: "ജലം (Water)" };
+const rasiDetails = [
+  { element: 'Fire', lord: 'Mars' }, { element: 'Earth', lord: 'Venus' }, { element: 'Air', lord: 'Mercury' }, { element: 'Water', lord: 'Moon' },
+  { element: 'Fire', lord: 'Sun' }, { element: 'Earth', lord: 'Mercury' }, { element: 'Air', lord: 'Venus' }, { element: 'Water', lord: 'Mars' },
+  { element: 'Fire', lord: 'Jupiter' }, { element: 'Earth', lord: 'Saturn' }, { element: 'Air', lord: 'Saturn' }, { element: 'Water', lord: 'Jupiter' }
+];
+
+// Vimshottari Dasha Sequence
+const navagrahaDetails = {
+    Ketu:    { eng: 'Ketu', mal: 'കേതു', color: '#b45309', textColor: '#ffffff', icon: '☋', type: 'Shadow' }, // Orange-Brown
+    Venus:   { eng: 'Venus', mal: 'ശുക്രൻ', color: '#ec4899', textColor: '#ffffff', icon: '♀', type: 'Benefic' }, // Vibrant Pink
+    Sun:     { eng: 'Sun', mal: 'സൂര്യൻ', color: '#dc2626', textColor: '#ffffff', icon: '☉', type: 'Malefic' }, // Red
+    Moon:    { eng: 'Moon', mal: 'ചന്ദ്രൻ', color: '#f8fafc', textColor: '#0f172a', icon: '☾', type: 'Benefic' }, // Silver/White
+    Mars:    { eng: 'Mars', mal: 'ചൊവ്വ', color: '#b91c1c', textColor: '#ffffff', icon: '♂', type: 'Malefic' }, // Deep Red
+    Rahu:    { eng: 'Rahu', mal: 'രാഹു', color: '#334155', textColor: '#ffffff', icon: '☊', type: 'Shadow' }, // Slate
+    Jupiter: { eng: 'Jupiter', mal: 'വ്യാഴം', color: '#eab308', textColor: '#ffffff', icon: '♃', type: 'Benefic' }, // Yellow/Gold
+    Saturn:  { eng: 'Saturn', mal: 'ശനി', color: '#1e3a8a', textColor: '#ffffff', icon: '♄', type: 'Malefic' }, // Deep Blue
+    Mercury: { eng: 'Mercury', mal: 'ബുധൻ', color: '#16a34a', textColor: '#ffffff', icon: '☿', type: 'Benefic' }  // Emerald Green
+};
+const grahaSequence = ['Ketu', 'Venus', 'Sun', 'Moon', 'Mars', 'Rahu', 'Jupiter', 'Saturn', 'Mercury'];
+
+// Vibrant Element Colors for Rasis
+const elementColors = { Fire: '#fca5a5', Earth: '#86efac', Air: '#fde047', Water: '#93c5fd' }; 
+const elementColorsHover = { Fire: '#f87171', Earth: '#4ade80', Air: '#facc15', Water: '#60a5fa' }; 
+const nakColors = ['#fdf4ff', '#fff1f2', '#f0fdf4']; 
+
+// Data Generation
+const rasis = rasiNamesMalayalam.map((name, i) => ({
+    type: 'rasi',
+    id: i + 1,
+    malayalam: name,
+    english: rasiNamesEng[i],
+    startAngle: i * 30, 
+    endAngle: (i + 1) * 30,
+    color: elementColors[rasiDetails[i].element],
+    hoverColor: elementColorsHover[rasiDetails[i].element],
+    element: tattvas[rasiDetails[i].element],
+    lord: navagrahaDetails[rasiDetails[i].lord]
+}));
+
+const nakshatraDegrees = 360 / 27; 
+const nakshatras = nakshatraNamesMalayalam.map((name, i) => ({
+    type: 'nakshatra',
+    id: i + 1,
+    malayalam: name,
+    english: nakshatraNamesEng[i],
+    startAngle: i * nakshatraDegrees,
+    endAngle: (i + 1) * nakshatraDegrees,
+    color: nakColors[i % 3],
+    lord: navagrahaDetails[grahaSequence[i % 9]]
+}));
+
+// Navagraha Ring Data (mapped directly to Nakshatras)
+const grahas = nakshatras.map((nak, i) => ({
+    ...nak.lord,
+    type: 'graha',
+    id: `graha-${i}`,
+    nakshatraId: nak.id,
+    startAngle: nak.startAngle,
+    endAngle: nak.endAngle
+}));
+
+// --- COMPONENT ---
+export default function App() {
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [hoveredItem, setHoveredItem] = useState(null);
+
+    // Geometry Helpers
+    const getCoordinates = (cx, cy, radius, angleDeg) => {
+        const angleRad = (angleDeg * Math.PI) / 180;
+        return {
+            x: cx - radius * Math.sin(angleRad),
+            y: cy - radius * Math.cos(angleRad)
+        };
+    };
+
+    const createArcPath = (cx, cy, innerR, outerR, startAngle, endAngle) => {
+        const startOut = getCoordinates(cx, cy, outerR, startAngle);
+        const endOut = getCoordinates(cx, cy, outerR, endAngle);
+        const startIn = getCoordinates(cx, cy, innerR, startAngle);
+        const endIn = getCoordinates(cx, cy, innerR, endAngle);
+        const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
+        
+        return [
+            `M ${startOut.x} ${startOut.y}`,
+            `A ${outerR} ${outerR} 0 ${largeArcFlag} 0 ${endOut.x} ${endOut.y}`,
+            `L ${endIn.x} ${endIn.y}`,
+            `A ${innerR} ${innerR} 0 ${largeArcFlag} 1 ${startIn.x} ${startIn.y}`,
+            'Z'
+        ].join(' ');
+    };
+
+    const getTextTransform = (cx, cy, radius, midAngle) => {
+        const pos = getCoordinates(cx, cy, radius, midAngle);
+        let rotation = -midAngle;
+        if (midAngle > 90 && midAngle < 270) rotation += 180; 
+        return `translate(${pos.x}, ${pos.y}) rotate(${rotation})`;
+    };
+
+    const getOverlapInfo = (rasi, nak) => {
+        const overlap = Math.max(0, Math.min(rasi.endAngle, nak.endAngle) - Math.max(rasi.startAngle, nak.startAngle));
+        if (overlap < 0.01) return null;
+        
+        const proportion = overlap / nakshatraDegrees;
+        let proportionText = ""; let padams = 0;
+
+        if (proportion >= 0.99) { proportionText = "പൂർണ്ണം (Full)"; padams = 4; }
+        else if (proportion >= 0.74) { proportionText = "മുക്കാൽ (3/4)"; padams = 3; }
+        else if (proportion >= 0.49) { proportionText = "പകുതി (1/2)"; padams = 2; }
+        else if (proportion >= 0.24) { proportionText = "കാൽ (1/4)"; padams = 1; }
+
+        return { nak, rasi, proportionText, padams };
+    };
+
+    // --- RENDERERS ---
+    const renderChart = () => {
+        const cx = 400; const cy = 400;
+        const centerR = 80; const rasiR = 190; const nakR = 300; const grahaR = 390;
+
+        return (
+            <svg viewBox="0 0 800 800" className="w-full h-auto max-w-3xl drop-shadow-2xl font-sans">
+                <defs>
+                    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+                        <feDropShadow dx="0" dy="0" stdDeviation="6" floodColor="#ffffff" floodOpacity="0.8" />
+                    </filter>
+                    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
+                        <feDropShadow dx="0" dy="4" stdDeviation="5" floodColor="#000000" floodOpacity="0.3" />
+                    </filter>
+                </defs>
+
+                {/* Outer Base Ring */}
+                <circle cx={cx} cy={cy} r={grahaR} fill="#ffffff" stroke="#cbd5e1" strokeWidth="1" />
+                
+                {/* 1. Navagraha Ring (Outermost) */}
+                {grahas.map(graha => {
+                    const midAngle = (graha.startAngle + graha.endAngle) / 2;
+                    const isSelected = selectedItem?.type === 'graha' && selectedItem?.eng === graha.eng;
+                    const isHovered = hoveredItem?.type === 'graha' && hoveredItem?.eng === graha.eng;
+                    const isAnySelectedOrHovered = selectedItem || hoveredItem;
+                    const opacity = isAnySelectedOrHovered ? (isSelected || isHovered ? 1 : 0.3) : 1;
+
+                    return (
+                        <g key={graha.id} 
+                           onClick={(e) => { e.stopPropagation(); setSelectedItem(graha); }}
+                           onMouseEnter={() => setHoveredItem(graha)}
+                           onMouseLeave={() => setHoveredItem(null)}
+                           className="cursor-pointer transition-all duration-300"
+                           style={{ filter: isSelected ? 'url(#shadow)' : 'none' }}>
+                            <path 
+                                d={createArcPath(cx, cy, nakR, grahaR, graha.startAngle, graha.endAngle)} 
+                                fill={graha.color} 
+                                fillOpacity={opacity}
+                                stroke="#ffffff" strokeWidth="1.5"
+                            />
+                            <text transform={getTextTransform(cx, cy, (nakR + grahaR) / 2, midAngle)} 
+                                  textAnchor="middle" alignmentBaseline="middle" 
+                                  className="pointer-events-none transition-opacity duration-300"
+                                  fill={graha.textColor} opacity={opacity}>
+                                <tspan x="0" dy="-0.6em" className="text-[14px] font-black">{graha.mal}</tspan>
+                                <tspan x="0" dy="1.4em" className="text-[10px] font-bold uppercase tracking-widest">{graha.eng} {graha.icon}</tspan>
+                            </text>
+                        </g>
+                    );
+                })}
+
+                {/* 2. Nakshatra Ring (Middle) */}
+                {nakshatras.map(nak => {
+                    const midAngle = (nak.startAngle + nak.endAngle) / 2;
+                    const isSelected = selectedItem?.type === 'nakshatra' && selectedItem?.id === nak.id;
+                    const isHovered = hoveredItem?.type === 'nakshatra' && hoveredItem?.id === nak.id;
+                    const isAnySelectedOrHovered = selectedItem || hoveredItem;
+                    const opacity = isAnySelectedOrHovered ? (isSelected || isHovered ? 1 : 0.3) : 1;
+                    
+                    const padamDegree = (nak.endAngle - nak.startAngle) / 4;
+                    const dividers = [1, 2, 3].map(step => {
+                        const angle = nak.startAngle + step * padamDegree;
+                        return <line 
+                            key={`div-${nak.id}-${step}`} 
+                            x1={getCoordinates(cx, cy, rasiR + 2, angle).x} y1={getCoordinates(cx, cy, rasiR + 2, angle).y} 
+                            x2={getCoordinates(cx, cy, nakR - 2, angle).x} y2={getCoordinates(cx, cy, nakR - 2, angle).y} 
+                            stroke={isSelected ? '#6366f1' : '#94a3b8'} 
+                            strokeWidth={isSelected ? 1.5 : 0.5} strokeDasharray="3,3" opacity={opacity} 
+                        />;
+                    });
+
+                    return (
+                        <g key={`nak-${nak.id}`} 
+                           onClick={(e) => { e.stopPropagation(); setSelectedItem(nak); }}
+                           onMouseEnter={() => setHoveredItem(nak)}
+                           onMouseLeave={() => setHoveredItem(null)}
+                           className="cursor-pointer transition-all duration-300"
+                           style={{ filter: isSelected ? 'url(#glow)' : 'none' }}>
+                            <path 
+                                d={createArcPath(cx, cy, rasiR, nakR, nak.startAngle, nak.endAngle)} 
+                                fill={isHovered && !isSelected ? '#fef08a' : nak.color} 
+                                fillOpacity={opacity}
+                                stroke={isSelected ? '#4338ca' : '#cbd5e1'}
+                                strokeWidth={isSelected ? 2.5 : 1}
+                            />
+                            {dividers}
+                            <text transform={getTextTransform(cx, cy, (rasiR + nakR) / 2, midAngle)} 
+                                  textAnchor="middle" alignmentBaseline="middle" 
+                                  className={`pointer-events-none transition-opacity duration-300 ${isSelected ? 'fill-indigo-950' : 'fill-slate-700'}`}
+                                  opacity={opacity}>
+                                <tspan x="0" dy="-0.6em" className="text-[12px] font-bold tracking-wide">{nak.malayalam}</tspan>
+                                <tspan x="0" dy="1.4em" className="text-[9px] font-semibold tracking-wider uppercase text-slate-500">{nak.english.split(' ')[0]}</tspan>
+                                {nak.english.split(' ')[1] && <tspan x="0" dy="1.2em" className="text-[9px] font-semibold tracking-wider uppercase text-slate-500">{nak.english.split(' ')[1]}</tspan>}
+                            </text>
+                        </g>
+                    );
+                })}
+
+                {/* 3. Rasi Ring (Inner) */}
+                {rasis.map(rasi => {
+                    const midAngle = (rasi.startAngle + rasi.endAngle) / 2;
+                    const isSelected = selectedItem?.type === 'rasi' && selectedItem?.id === rasi.id;
+                    const isHovered = hoveredItem?.type === 'rasi' && hoveredItem?.id === rasi.id;
+                    const isAnySelectedOrHovered = selectedItem || hoveredItem;
+                    const opacity = isAnySelectedOrHovered ? (isSelected || isHovered ? 1 : 0.25) : 1;
+
+                    return (
+                        <g key={`rasi-${rasi.id}`} 
+                           onClick={(e) => { e.stopPropagation(); setSelectedItem(rasi); }}
+                           onMouseEnter={() => setHoveredItem(rasi)}
+                           onMouseLeave={() => setHoveredItem(null)}
+                           className="cursor-pointer transition-all duration-300"
+                           style={{ filter: isSelected ? 'url(#glow)' : 'none' }}>
+                            <path 
+                                d={createArcPath(cx, cy, centerR, rasiR, rasi.startAngle, rasi.endAngle)} 
+                                fill={isHovered ? rasi.hoverColor : rasi.color} 
+                                fillOpacity={opacity}
+                                stroke={isSelected ? '#4338ca' : '#ffffff'}
+                                strokeWidth={isSelected ? 3 : 1.5}
+                            />
+                            <text transform={getTextTransform(cx, cy, (centerR + rasiR) / 2, midAngle)} 
+                                  textAnchor="middle" alignmentBaseline="middle" 
+                                  className={`pointer-events-none transition-opacity duration-300 ${isSelected ? 'fill-indigo-950' : 'fill-slate-800'}`}
+                                  opacity={opacity}>
+                                <tspan x="0" dy="-0.5em" className="text-[16px] font-black tracking-wide">{rasi.id}. {rasi.malayalam}</tspan>
+                                <tspan x="0" dy="1.5em" className="text-[10px] font-bold tracking-widest text-slate-700 uppercase">{rasi.english}</tspan>
+                            </text>
+                        </g>
+                    );
+                })}
+
+                {/* Center Core */}
+                <g filter="url(#shadow)">
+                    <circle cx={cx} cy={cy} r={centerR} fill="#ffffff" stroke="#e2e8f0" strokeWidth="4" />
+                    <circle cx={cx} cy={cy} r={centerR - 8} fill="#f1f5f9" stroke="#cbd5e1" strokeWidth="1" strokeDasharray="3,3" />
+                    <text x={cx} y={cy} textAnchor="middle" alignmentBaseline="middle" className="pointer-events-none">
+                        <tspan x={cx} dy="-0.8em" className="text-[15px] font-black tracking-widest fill-indigo-900 uppercase">ജ്യോതിഷ</tspan>
+                        <tspan x={cx} dy="1.2em" className="text-[15px] font-black tracking-widest fill-indigo-900 uppercase">ചക്രം</tspan>
+                    </text>
+                </g>
+            </svg>
+        );
+    };
+
+    const renderDetails = () => {
+        if (!selectedItem) {
+            return (
+                <div className="flex flex-col h-full bg-white/80 backdrop-blur-xl p-8 rounded-3xl shadow-xl border border-white overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+                    <div className="flex flex-col items-center justify-center text-slate-400 p-8 text-center border-2 border-dashed border-slate-200/60 bg-gradient-to-b from-slate-50 to-white rounded-2xl mb-8">
+                        <Compass className="w-14 h-14 mb-4 text-indigo-400 animate-pulse" strokeWidth={1.5} />
+                        <p className="text-lg font-bold text-slate-700 mb-1">Explore the Chakra</p>
+                        <p className="text-sm text-slate-500">Select any <span className="font-semibold text-rose-500">Graha</span>, <span className="font-semibold text-indigo-500">Nakshatra</span>, or <span className="font-semibold text-amber-500">Rasi</span> on the wheel to reveal its astrological properties.</p>
+                    </div>
+
+                    <div className="space-y-5">
+                        <h3 className="font-bold text-slate-800 text-lg flex items-center gap-2 pb-2 border-b border-slate-100">
+                            <BookOpen className="w-5 h-5 text-indigo-500"/>
+                            Vedic Architecture
+                        </h3>
+                        <div className="space-y-4 text-sm text-slate-600">
+                            <div className="grid grid-cols-3 gap-3 text-center">
+                                <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100 shadow-sm">
+                                    <CircleDot className="w-6 h-6 mx-auto mb-2 text-rose-500" />
+                                    <div className="text-2xl font-black text-slate-800">9</div>
+                                    <div className="text-[10px] font-bold uppercase tracking-wider text-slate-500">Grahas</div>
+                                </div>
+                                <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100 shadow-sm">
+                                    <Moon className="w-6 h-6 mx-auto mb-2 text-indigo-400" />
+                                    <div className="text-2xl font-black text-slate-800">27</div>
+                                    <div className="text-[10px] font-bold uppercase tracking-wider text-slate-500">Stars</div>
+                                </div>
+                                <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100 shadow-sm">
+                                    <Sun className="w-6 h-6 mx-auto mb-2 text-amber-500" />
+                                    <div className="text-2xl font-black text-slate-800">12</div>
+                                    <div className="text-[10px] font-bold uppercase tracking-wider text-slate-500">Zodiacs</div>
+                                </div>
+                            </div>
+                            
+                            <div className="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm space-y-3">
+                                <div className="flex justify-between items-center"><span className="text-slate-500">1 Rasi</span><span className="font-bold text-slate-800">30° 00'</span></div>
+                                <div className="flex justify-between items-center"><span className="text-slate-500">1 Nakshatra</span><span className="font-bold text-slate-800">13° 20'</span></div>
+                                <div className="flex justify-between items-center"><span className="text-slate-500">1 Padam</span><span className="font-bold text-slate-800">3° 20'</span></div>
+                            </div>
+                            <p className="bg-indigo-50/50 p-4 rounded-2xl border border-indigo-100 text-xs text-indigo-900 leading-relaxed font-medium">
+                                The outermost ring maps the 9 ruling planets (Navagrahas) to their respective Nakshatras in the repeating Vimshottari sequence.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+
+        if (selectedItem.type === 'graha') {
+            // Find all Nakshatras ruled by this Graha
+            const ruledNaks = nakshatras.filter(n => n.lord.eng === selectedItem.eng);
+            // Find all Rasis ruled by this Graha
+            const ruledRasis = rasis.filter(r => r.lord.eng === selectedItem.eng);
+
+            return (
+                <div className="flex flex-col h-full bg-white/90 backdrop-blur-xl p-8 rounded-3xl shadow-xl border border-white overflow-y-auto animate-in slide-in-from-right-4 duration-300" onClick={(e) => e.stopPropagation()}>
+                    <div className="inline-flex items-center self-start px-4 py-1.5 text-white text-[10px] font-bold uppercase tracking-widest rounded-full mb-5 shadow-sm" style={{ backgroundColor: selectedItem.color }}>
+                        നവഗ്രഹം • Navagraha (Planet)
+                    </div>
+                    <div className="flex items-center gap-4 mb-1">
+                        <h2 className="text-5xl font-black text-slate-800 tracking-tight">{selectedItem.mal}</h2>
+                        <span className="text-5xl" style={{ color: selectedItem.color }}>{selectedItem.icon}</span>
+                    </div>
+                    <p className="text-xl text-slate-500 font-semibold mb-8 tracking-wide">{selectedItem.eng}</p>
+                    
+                    <div className="grid grid-cols-2 gap-3 mb-8">
+                        <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100 shadow-sm">
+                            <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-1">പ്രകൃതി (Nature)</p>
+                            <p className="font-bold text-slate-800 text-sm">{selectedItem.type}</p>
+                        </div>
+                        <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100 shadow-sm">
+                            <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-1">നക്ഷത്രങ്ങൾ (Rules)</p>
+                            <p className="font-bold text-slate-800 text-sm">3 Nakshatras</p>
+                        </div>
+                    </div>
+
+                    <div className="space-y-6">
+                        <div>
+                            <div className="flex items-center gap-2 mb-3">
+                                <Star className="w-4 h-4 text-indigo-500" />
+                                <h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider">Ruled Nakshatras</h3>
+                            </div>
+                            <div className="grid gap-2">
+                                {ruledNaks.map(n => (
+                                    <div key={n.id} className="p-3 bg-white border border-slate-100 rounded-xl shadow-sm flex justify-between items-center cursor-pointer hover:border-indigo-300 transition-colors" onClick={() => setSelectedItem(n)}>
+                                        <span className="font-bold text-slate-800">{n.malayalam}</span>
+                                        <span className="text-xs font-semibold text-slate-500">{n.english}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        {ruledRasis.length > 0 && (
+                            <div>
+                                <div className="flex items-center gap-2 mb-3">
+                                    <Sun className="w-4 h-4 text-amber-500" />
+                                    <h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider">Ruled Zodiac Signs</h3>
+                                </div>
+                                <div className="grid gap-2">
+                                    {ruledRasis.map(r => (
+                                        <div key={r.id} className="p-3 bg-white border border-slate-100 rounded-xl shadow-sm flex justify-between items-center cursor-pointer hover:border-amber-300 transition-colors" onClick={() => setSelectedItem(r)}>
+                                            <span className="font-bold text-slate-800">{r.malayalam}</span>
+                                            <span className="text-xs font-semibold text-slate-500">{r.english}</span>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            );
+        }
+
+        if (selectedItem.type === 'rasi') {
+            const innerNaks = nakshatras.map(nak => getOverlapInfo(selectedItem, nak)).filter(Boolean);
+            return (
+                <div className="flex flex-col h-full bg-white/90 backdrop-blur-xl p-8 rounded-3xl shadow-xl border border-white overflow-y-auto animate-in slide-in-from-right-4 duration-300" onClick={(e) => e.stopPropagation()}>
+                    <div className="inline-flex items-center self-start px-4 py-1.5 bg-amber-100 text-amber-800 text-[10px] font-bold uppercase tracking-widest rounded-full mb-5 shadow-sm border border-amber-200">
+                        രാശി • Zodiac Sign
+                    </div>
+                    <h2 className="text-5xl font-black text-slate-800 mb-1 tracking-tight">{selectedItem.malayalam}</h2>
+                    <p className="text-xl text-slate-500 font-semibold mb-8 tracking-wide">{selectedItem.english}</p>
+                    
+                    <div className="grid grid-cols-2 gap-3 mb-8">
+                        <div className="bg-gradient-to-br from-slate-50 to-slate-100 p-4 rounded-2xl border border-slate-200/60 shadow-sm cursor-pointer hover:shadow-md transition-shadow" onClick={() => setSelectedItem(selectedItem.lord)}>
+                            <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-1 flex justify-between">അധിപൻ (Lord) <span style={{color: selectedItem.lord.color}}>{selectedItem.lord.icon}</span></p>
+                            <p className="font-bold text-slate-800 text-sm">{selectedItem.lord.eng} ({selectedItem.lord.mal})</p>
+                        </div>
+                        <div className="bg-gradient-to-br from-slate-50 to-slate-100 p-4 rounded-2xl border border-slate-200/60 shadow-sm">
+                            <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-1">തത്ത്വം (Element)</p>
+                            <p className="font-bold text-slate-800 text-sm">{selectedItem.element}</p>
+                        </div>
+                        <div className="bg-gradient-to-br from-slate-50 to-slate-100 p-4 rounded-2xl border border-slate-200/60 shadow-sm col-span-2 flex justify-between items-center">
+                            <div>
+                                <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-1">വ്യാപ്തി (Span)</p>
+                                <p className="font-bold text-slate-800 text-sm">30° 00'</p>
+                            </div>
+                            <div className="text-xs font-medium text-slate-400">9 Padams</div>
+                        </div>
+                    </div>
+
+                    <div className="flex items-center gap-3 mb-5">
+                        <Sparkles className="w-5 h-5 text-amber-500" />
+                        <h3 className="text-lg font-bold text-slate-800">Constituent Stars</h3>
+                    </div>
+                    
+                    <ul className="space-y-3">
+                        {innerNaks.map((info, idx) => (
+                            <li key={idx} className="group flex justify-between items-center p-4 bg-white rounded-2xl border border-slate-100 hover:border-amber-300 hover:shadow-md transition-all cursor-pointer" onClick={(e) => { e.stopPropagation(); setSelectedItem(info.nak); }}>
+                                <div>
+                                    <span className="font-bold text-slate-800 block text-lg group-hover:text-amber-600 transition-colors">{info.nak.malayalam}</span>
+                                    <span className="text-xs font-medium text-slate-500">{info.nak.english}</span>
+                                </div>
+                                <div className="text-right flex flex-col items-end">
+                                    <span className="bg-amber-50 text-amber-700 px-3 py-1 rounded-lg text-[11px] font-bold block mb-1.5 shadow-sm border border-amber-100">
+                                        {info.proportionText}
+                                    </span>
+                                    <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider flex gap-1">
+                                        {Array.from({length: info.padams}).map((_, i) => (
+                                            <div key={i} className="w-1.5 h-1.5 bg-amber-400 rounded-full" />
+                                        ))}
+                                        <span className="ml-1">{info.padams} Padam{info.padams > 1 ? 's' : ''}</span>
+                                    </span>
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            );
+        }
+
+        if (selectedItem.type === 'nakshatra') {
+            const parentRasis = rasis.map(rasi => getOverlapInfo(rasi, selectedItem)).filter(Boolean);
+            return (
+                <div className="flex flex-col h-full bg-white/90 backdrop-blur-xl p-8 rounded-3xl shadow-xl border border-white overflow-y-auto animate-in slide-in-from-right-4 duration-300" onClick={(e) => e.stopPropagation()}>
+                    <div className="inline-flex items-center self-start px-4 py-1.5 bg-indigo-100 text-indigo-800 text-[10px] font-bold uppercase tracking-widest rounded-full mb-5 shadow-sm border border-indigo-200">
+                        നക്ഷത്രം • Nakshatra
+                    </div>
+                    <h2 className="text-5xl font-black text-slate-800 mb-1 tracking-tight">{selectedItem.malayalam}</h2>
+                    <p className="text-xl text-slate-500 font-semibold mb-8 tracking-wide">{selectedItem.english}</p>
+                    
+                    <div className="grid grid-cols-2 gap-3 mb-8">
+                        <div className="bg-gradient-to-br from-slate-50 to-slate-100 p-4 rounded-2xl border border-slate-200/60 shadow-sm cursor-pointer hover:shadow-md transition-shadow" onClick={() => setSelectedItem(selectedItem.lord)}>
+                            <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-1 flex justify-between">അധിപൻ (Lord) <span style={{color: selectedItem.lord.color}}>{selectedItem.lord.icon}</span></p>
+                            <p className="font-bold text-slate-800 text-sm">{selectedItem.lord.eng} ({selectedItem.lord.mal})</p>
+                        </div>
+                        <div className="bg-gradient-to-br from-slate-50 to-slate-100 p-4 rounded-2xl border border-slate-200/60 shadow-sm">
+                            <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-1">പാദങ്ങൾ</p>
+                            <p className="font-bold text-slate-800 text-sm">4 Padams</p>
+                        </div>
+                        <div className="bg-gradient-to-br from-slate-50 to-slate-100 p-4 rounded-2xl border border-slate-200/60 shadow-sm col-span-2 flex justify-between items-center">
+                            <div>
+                                <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-1">വ്യാപ്തി (Span)</p>
+                                <p className="font-bold text-slate-800 text-sm">13° 20'</p>
+                            </div>
+                            <div className="text-xs font-medium text-slate-400">13.333 Degrees</div>
+                        </div>
+                    </div>
+
+                    <div className="flex items-center gap-3 mb-5">
+                        <Compass className="w-5 h-5 text-indigo-500" />
+                        <h3 className="text-lg font-bold text-slate-800">Residing Zodiacs</h3>
+                    </div>
+
+                    <ul className="space-y-3">
+                        {parentRasis.map((info, idx) => (
+                            <li key={idx} className="group flex justify-between items-center p-4 bg-white rounded-2xl border border-slate-100 hover:border-indigo-300 hover:shadow-md transition-all cursor-pointer" onClick={(e) => { e.stopPropagation(); setSelectedItem(info.rasi); }}>
+                                <div>
+                                    <span className="font-bold text-slate-800 block text-lg group-hover:text-indigo-600 transition-colors">{info.rasi.malayalam}</span>
+                                    <span className="text-xs font-medium text-slate-500">{info.rasi.english}</span>
+                                </div>
+                                <div className="text-right flex flex-col items-end">
+                                    <span className="bg-indigo-50 text-indigo-700 px-3 py-1 rounded-lg text-[11px] font-bold block mb-1.5 shadow-sm border border-indigo-100">
+                                        {info.proportionText}
+                                    </span>
+                                    <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider flex gap-1">
+                                        {Array.from({length: info.padams}).map((_, i) => (
+                                            <div key={i} className="w-1.5 h-1.5 bg-indigo-400 rounded-full" />
+                                        ))}
+                                        <span className="ml-1">{info.padams} Padam{info.padams > 1 ? 's' : ''}</span>
+                                    </span>
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            );
+        }
+    };
+
+    return (
+        <div 
+            className="min-h-screen bg-slate-100 text-slate-800 font-sans p-4 md:p-8 flex flex-col xl:flex-row gap-8 selection:bg-indigo-100 selection:text-indigo-900"
+            onClick={() => setSelectedItem(null)} 
+        >
+            {/* Left Side: Chart UI */}
+            <div 
+                className="w-full xl:w-2/3 flex flex-col items-center justify-center bg-white/60 backdrop-blur-3xl p-6 md:p-10 rounded-[2.5rem] shadow-2xl shadow-slate-200/50 border border-white"
+                onClick={(e) => e.stopPropagation()} 
+            >
+                <div className="mb-8 text-center max-w-lg">
+                    <h1 className="text-3xl md:text-5xl font-black text-slate-800 mb-4 tracking-tight">കേരള ജ്യോതിഷ ചക്രം</h1>
+                    <p className="text-slate-600 font-bold flex items-center justify-center gap-2 bg-white/80 py-2.5 px-5 rounded-full inline-flex border border-slate-200/60 shadow-sm">
+                        <Info className="w-5 h-5 text-indigo-600" />
+                        <span className="text-sm">Interactive Navagraha, Nakshatra & Rasi Wheel</span>
+                    </p>
+                </div>
+                <div className="w-full flex justify-center items-center cursor-crosshair" onClick={() => setSelectedItem(null)}>
+                    {renderChart()}
+                </div>
+            </div>
+
+            {/* Right Side: Details Panel */}
+            <div className="w-full xl:w-1/3 flex flex-col h-[650px] xl:h-auto z-10 relative">
+                {renderDetails()}
+            </div>
+        </div>
+    );
+}