Research and add astrology tools to web app

components/AstroTooltip.tsx

@@ -0,0 +1,277 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Info, HelpCircle } from 'lucide-react';
+
+interface AstroTooltipProps {
+  term: string;
+  children?: React.ReactNode;
+  variant?: 'info' | 'help';
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+// Astrological term definitions database
+const ASTRO_DEFINITIONS: Record<string, { title: string; content: string; example?: string }> = {
+  // Planets
+  'Sun': {
+    title: 'The Sun ☉',
+    content: 'Represents your core identity, ego, and life force. It shows how you shine and express your authentic self.',
+    example: 'Sun in Leo: Natural leadership, creative expression, confidence'
+  },
+  'Moon': {
+    title: 'The Moon ☽',
+    content: 'Represents your emotional nature, instincts, and subconscious. It shows how you nurture and need to be nurtured.',
+    example: 'Moon in Cancer: Deep emotions, strong intuition, home-oriented'
+  },
+  'Mercury': {
+    title: 'Mercury ☿',
+    content: 'Governs communication, thinking, and learning. It shows how you process and share information.',
+    example: 'Mercury in Gemini: Quick wit, versatile communication, curious mind'
+  },
+  'Venus': {
+    title: 'Venus ♀',
+    content: 'Represents love, beauty, values, and relationships. It shows what you find attractive and how you love.',
+    example: 'Venus in Libra: Harmonious relationships, aesthetic appreciation, diplomatic'
+  },
+  'Mars': {
+    title: 'Mars ♂',
+    content: 'Governs action, desire, and drive. It shows how you assert yourself and pursue your goals.',
+    example: 'Mars in Aries: Direct action, competitive, pioneering energy'
+  },
+  'Jupiter': {
+    title: 'Jupiter ♃',
+    content: 'Represents expansion, luck, and wisdom. It shows where you experience growth and abundance.',
+    example: 'Jupiter in Sagittarius: Philosophical mind, love of travel, optimistic'
+  },
+  'Saturn': {
+    title: 'Saturn ♄',
+    content: 'Governs discipline, responsibility, and life lessons. It shows where you face challenges and build mastery.',
+    example: 'Saturn in Capricorn: Strong work ethic, ambitious, builds lasting structures'
+  },
+  'Uranus': {
+    title: 'Uranus ♅',
+    content: 'Represents innovation, rebellion, and sudden change. It shows where you break free and innovate.',
+    example: 'Uranus in Aquarius: Revolutionary ideas, technological affinity, humanitarian'
+  },
+  'Neptune': {
+    title: 'Neptune ♆',
+    content: 'Governs dreams, spirituality, and illusion. It shows your connection to the divine and artistic nature.',
+    example: 'Neptune in Pisces: Deep spiritual connection, artistic gifts, empathic'
+  },
+  'Pluto': {
+    title: 'Pluto ♇',
+    content: 'Represents transformation, power, and regeneration. It shows where you experience deep change and empowerment.',
+    example: 'Pluto in Scorpio: Intense transformation, psychological depth, healing power'
+  },
+  'Chiron': {
+    title: 'Chiron ⚷',
+    content: 'Known as the "Wounded Healer." Represents your deepest wound and greatest healing potential.',
+    example: 'Chiron in Aries: Learning self-worth, healing identity wounds, teaching confidence'
+  },
+
+  // Lunar Nodes
+  'North Node': {
+    title: 'North Node ☊',
+    content: 'Represents your soul\'s purpose and the qualities you\'re meant to develop in this lifetime.',
+    example: 'North Node in Leo: Learning to shine, express creativity, develop confidence'
+  },
+  'South Node': {
+    title: 'South Node ☋',
+    content: 'Represents past life skills and comfort zones. What comes naturally but may hold you back.',
+    example: 'South Node in Aquarius: Already mastered detachment, group dynamics'
+  },
+
+  // Special Points
+  'Lilith': {
+    title: 'Black Moon Lilith ⚸',
+    content: 'Represents your shadow self, repressed desires, and raw feminine power. Shows where you refuse to conform.',
+    example: 'Lilith in Scorpio: Intense sexuality, power dynamics, taboo exploration'
+  },
+  'Part of Fortune': {
+    title: 'Part of Fortune ⊕',
+    content: 'An Arabic Part indicating worldly success and joy. Shows where you find luck and fulfillment.',
+    example: 'Part of Fortune in 10th House: Success through career and public recognition'
+  },
+  'Ascendant': {
+    title: 'Ascendant (Rising Sign)',
+    content: 'The zodiac sign rising on the eastern horizon at your birth. Represents your outer personality and how others see you.',
+    example: 'Scorpio Rising: Mysterious presence, intense gaze, magnetic personality'
+  },
+
+  // Concepts
+  'Houses': {
+    title: 'Astrological Houses',
+    content: 'The 12 divisions of the chart representing different life areas. Each house governs specific experiences and themes.',
+    example: '1st: Self, 2nd: Money, 3rd: Communication, 4th: Home, 5th: Creativity, 6th: Work, 7th: Partnerships, 8th: Transformation, 9th: Philosophy, 10th: Career, 11th: Community, 12th: Spirituality'
+  },
+  'Aspects': {
+    title: 'Planetary Aspects',
+    content: 'The angular relationships between planets. They show how planetary energies interact and influence each other.',
+    example: 'Conjunction (0°): Blending, Trine (120°): Harmony, Square (90°): Tension, Opposition (180°): Balance'
+  },
+  'Elements': {
+    title: 'The Four Elements',
+    content: 'Fire, Earth, Air, and Water represent fundamental energies. Your elemental balance shapes your temperament.',
+    example: 'Fire: Passion, Earth: Practicality, Air: Ideas, Water: Emotions'
+  },
+  'Modalities': {
+    title: 'Cardinal, Fixed, Mutable',
+    content: 'The three modes describe how signs express their energy and approach life.',
+    example: 'Cardinal: Initiating, Fixed: Sustaining, Mutable: Adapting'
+  },
+  'Transits': {
+    title: 'Planetary Transits',
+    content: 'Current planetary positions and their aspects to your birth chart. They trigger events and growth opportunities.',
+    example: 'Saturn Return (ages 29-30): Major life restructuring and maturation'
+  },
+  'Progressions': {
+    title: 'Secondary Progressions',
+    content: 'A predictive technique where one day after birth equals one year of life. Shows internal psychological development.',
+    example: 'Progressed Moon changes signs every 2.5 years, shifting emotional focus'
+  },
+  'Synastry': {
+    title: 'Synastry & Compatibility',
+    content: 'The comparison of two birth charts to understand relationship dynamics, attraction, and challenges.',
+    example: 'Venus-Mars aspects show romantic chemistry and attraction'
+  },
+  'Astrocartography': {
+    title: 'Astrocartography',
+    content: 'Locational astrology showing how planetary energies manifest in different geographical locations.',
+    example: 'Venus line: Favorable for love and creativity in that location'
+  },
+  'Life Path': {
+    title: 'Life Path Number',
+    content: 'In numerology, your Life Path number (from birth date) reveals your core purpose and main life lessons.',
+    example: 'Life Path 7: The Seeker - spiritual growth, analysis, inner wisdom'
+  },
+  'Destiny Number': {
+    title: 'Destiny Number',
+    content: 'Calculated from your full birth name, it shows your life\'s purpose and what you\'re meant to achieve.',
+    example: 'Destiny 1: Leadership, independence, pioneering new paths'
+  },
+  'Soul Urge': {
+    title: 'Soul Urge Number',
+    content: 'Derived from vowels in your name, it reveals your inner motivations and heart\'s desires.',
+    example: 'Soul Urge 6: Desire to nurture, create harmony, serve others'
+  },
+  'Chinese Zodiac': {
+    title: 'Chinese Zodiac',
+    content: 'A 12-year cycle where each year is represented by an animal. Your birth year determines your animal sign and element.',
+    example: 'Water Dragon: Charismatic, intuitive, adaptable, visionary'
+  },
+
+  // Chart Features
+  'Stellium': {
+    title: 'Stellium',
+    content: 'Three or more planets in the same sign or house. Creates a strong concentration of energy in that area.',
+    example: 'Stellium in 10th House: Intense focus on career and public recognition'
+  },
+  'Retrograde': {
+    title: 'Retrograde Planets',
+    content: 'When a planet appears to move backward. Natal retrograde planets suggest internalized or unconventional expression of that energy.',
+    example: 'Mercury Retrograde: Introspective thinking, communication challenges as growth opportunities'
+  },
+  'Chart Ruler': {
+    title: 'Chart Ruler',
+    content: 'The planet that rules your Ascendant sign. It has special importance in your chart and life path.',
+    example: 'Scorpio Rising → Mars/Pluto as chart ruler: Intensity drives your life'
+  }
+};
+
+const AstroTooltip: React.FC<AstroTooltipProps> = ({
+  term,
+  children,
+  variant = 'info',
+  position = 'top'
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  const definition = ASTRO_DEFINITIONS[term];
+
+  useEffect(() => {
+    if (isVisible && triggerRef.current && tooltipRef.current) {
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+
+      let top = 0;
+      let left = 0;
+
+      switch (position) {
+        case 'top':
+          top = triggerRect.top - tooltipRect.height - 10;
+          left = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2);
+          break;
+        case 'bottom':
+          top = triggerRect.bottom + 10;
+          left = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2);
+          break;
+        case 'left':
+          top = triggerRect.top + (triggerRect.height / 2) - (tooltipRect.height / 2);
+          left = triggerRect.left - tooltipRect.width - 10;
+          break;
+        case 'right':
+          top = triggerRect.top + (triggerRect.height / 2) - (tooltipRect.height / 2);
+          left = triggerRect.right + 10;
+          break;
+      }
+
+      // Boundary checks
+      if (left < 10) left = 10;
+      if (left + tooltipRect.width > window.innerWidth - 10) {
+        left = window.innerWidth - tooltipRect.width - 10;
+      }
+      if (top < 10) top = triggerRect.bottom + 10;
+
+      setTooltipPosition({ top, left });
+    }
+  }, [isVisible, position]);
+
+  if (!definition) {
+    // If no definition, just render children or term
+    return <>{children || term}</>;
+  }
+
+  const Icon = variant === 'help' ? HelpCircle : Info;
+
+  return (
+    <>
+      <div
+        ref={triggerRef}
+        className="inline-flex items-center gap-1 cursor-help"
+        onMouseEnter={() => setIsVisible(true)}
+        onMouseLeave={() => setIsVisible(false)}
+        onClick={() => setIsVisible(!isVisible)}
+      >
+        {children || <span className="underline decoration-dotted decoration-indigo-400/50">{term}</span>}
+        <Icon size={14} className="text-indigo-400/60 hover:text-indigo-300 transition-colors" />
+      </div>
+
+      {isVisible && (
+        <div
+          ref={tooltipRef}
+          className="fixed z-[999] pointer-events-none animate-fadeIn"
+          style={{
+            top: `${tooltipPosition.top}px`,
+            left: `${tooltipPosition.left}px`,
+          }}
+        >
+          <div className="bg-slate-900/95 backdrop-blur-xl border border-indigo-500/30 rounded-2xl shadow-2xl shadow-indigo-500/20 p-4 max-w-sm">
+            <h4 className="text-sm font-bold text-indigo-300 mb-2">{definition.title}</h4>
+            <p className="text-xs text-slate-300 leading-relaxed mb-2">{definition.content}</p>
+            {definition.example && (
+              <div className="mt-3 pt-3 border-t border-white/10">
+                <p className="text-[10px] text-slate-400 italic">
+                  <span className="text-indigo-400 font-semibold">Example:</span> {definition.example}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AstroTooltip;