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>
    );
}