Create INDIAN-SCRIPTURE-MAP-JSX

INDIAN-SCRIPTURE-MAP-JSX

@@ -0,0 +1,583 @@
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import { 
+  BookOpen, Clock, User, Info, Link as LinkIcon, Search, X, Feather, 
+  Library, ScrollText, Sparkles, LayoutGrid, Network, Move
+} from 'lucide-react';
+
+// --- COMPREHENSIVE DATASET BASED ON THE FLOWCHART ---
+// Redesigned with massive canvas spacing to prevent any overlapping and allow beautiful wire routing.
+const SCRIPTURES = [
+  // LEVEL 0: ROOT
+  { id: 'root', name: 'Hindu Scriptures', category: 'Root', timePeriod: 'Various', writer: 'Various Sages', description: 'The vast body of sacred texts in Hinduism, traditionally divided into Shruti (what is heard) and Smriti (what is remembered).', x: 0, y: 0, parentId: null, relatedTo: ['shruti', 'smriti'] },
+  
+  // LEVEL 1: BROAD CLASSIFICATIONS
+  { id: 'shruti', name: 'Shruti (श्रुति)', category: 'Classification', timePeriod: 'Pre-1500 BCE', writer: 'Revealed to Rishis', description: '"That which was heard" - the most authoritative, ancient religious texts comprising the central canon of Hinduism.', x: -800, y: 150, parentId: 'root', relatedTo: ['rigveda', 'samaveda', 'yajurveda', 'atharvaveda'] },
+  { id: 'smriti', name: 'Smriti (स्मृति)', category: 'Classification', timePeriod: 'Post-500 BCE', writer: 'Various Human Authors', description: '"That which is remembered" - a body of Hindu texts usually attributed to an author, traditionally written down and constantly revised.', x: 800, y: 150, parentId: 'root', relatedTo: ['dharmashastras', 'puranas', 'vedangas', 'darshana', 'upaveda', 'itihaas', 'agamas'] },
+
+  // LEVEL 2: SHRUTI BRANCH (THE VEDAS)
+  { id: 'rigveda', name: 'Rigveda', category: 'Veda', timePeriod: 'c. 1500 – 1000 BCE', writer: 'Various Rishis', description: 'The oldest sacred book of Hinduism, consisting of 1,028 hymns dedicated to various deities.', x: -1400, y: 350, parentId: 'shruti', relatedTo: ['karmakanda', 'gyanakanda'] },
+  { id: 'samaveda', name: 'Samaveda', category: 'Veda', timePeriod: 'c. 1200 – 1000 BCE', writer: 'Various Rishis', description: 'The Veda of melodies and chants, mostly drawn from the Rigveda, set to musical notation.', x: -1000, y: 350, parentId: 'shruti', relatedTo: ['karmakanda', 'gyanakanda'] },
+  { id: 'yajurveda', name: 'Yajurveda', category: 'Veda', timePeriod: 'c. 1200 – 1000 BCE', writer: 'Various Rishis', description: 'The Veda of prose mantras containing ritual offering formulas.', x: -600, y: 350, parentId: 'shruti', relatedTo: ['karmakanda', 'gyanakanda'] },
+  { id: 'atharvaveda', name: 'Atharvaveda', category: 'Veda', timePeriod: 'c. 1000 – 900 BCE', writer: 'Atharvan and Angiras rishis', description: 'The "knowledge storehouse of the procedures for everyday life", dealing with spells and charms.', x: -200, y: 350, parentId: 'shruti', relatedTo: ['karmakanda', 'gyanakanda'] },
+
+  // LEVEL 3: KANDAS (SUBSECTIONS OF VEDAS)
+  { id: 'karmakanda', name: 'Karma kanda (कर्मकाण्ड)', category: 'Kanda', timePeriod: 'Ancient', writer: 'Various', description: 'The section of the Vedas dealing with rituals, sacrifices, and duties. Includes Samhitas and Brahmanas.', x: -1200, y: 500, parentId: 'shruti', relatedTo: ['rigveda', 'yajurveda'] },
+  { id: 'gyanakanda', name: 'Gyana kanda (ज्ञानकाण्ड)', category: 'Kanda', timePeriod: 'Ancient', writer: 'Various', description: 'The section of the Vedas dealing with knowledge and spirituality. Includes Aranyakas and Upanishads.', x: -400, y: 500, parentId: 'shruti', relatedTo: ['upanishads'] },
+
+  // LEVEL 4: UPANISHADS (UNDER GYANA KANDA)
+  { id: 'aiteriya', name: 'Aitareya', category: 'Upanishad', timePeriod: 'c. 800 - 500 BCE', writer: 'Mahidasa Aitareya', description: 'Discusses three philosophical themes: the world, the soul (Atman), and the concept of ultimate reality (Brahman).', x: -600, y: 650, parentId: 'gyanakanda', relatedTo: ['rigveda'] },
+  { id: 'chandogya', name: 'Chaandogya', category: 'Upanishad', timePeriod: 'c. 800 - 600 BCE', writer: 'Various Sages', description: 'One of the oldest and largest Upanishads, focusing on the chanting of Om and the realization of Brahman.', x: -600, y: 730, parentId: 'gyanakanda', relatedTo: ['samaveda'] },
+  { id: 'kena', name: 'Kena', category: 'Upanishad', timePeriod: 'c. 1st millennium BCE', writer: 'Unknown', description: 'Investigates the nature of knowledge, inquiring "by whom" (Kena) the mind and senses are directed.', x: -600, y: 810, parentId: 'gyanakanda', relatedTo: ['samaveda'] },
+  { id: 'katha', name: 'Kathaka (Katha)', category: 'Upanishad', timePeriod: 'c. 5th century BCE', writer: 'Unknown', description: 'Features the famous dialogue between the young boy Nachiketa and Yama (the deity of death).', x: -600, y: 890, parentId: 'gyanakanda', relatedTo: ['yajurveda'] },
+  { id: 'taittiriya', name: 'Taittariya', category: 'Upanishad', timePeriod: 'c. 6th century BCE', writer: 'Taittiri Sages', description: 'Explores the five layers (Koshas) of human existence and the nature of bliss.', x: -600, y: 970, parentId: 'gyanakanda', relatedTo: ['yajurveda'] },
+  { id: 'isha', name: 'Ishavasya', category: 'Upanishad', timePeriod: 'c. 1st millennium BCE', writer: 'Unknown', description: 'A short but profound text discussing the immanence of the Lord (Isha) in everything.', x: -600, y: 1050, parentId: 'gyanakanda', relatedTo: ['yajurveda'] },
+  { id: 'brihadaaranyaka', name: 'Brihadaranyaka', category: 'Upanishad', timePeriod: 'c. 900 - 600 BCE', writer: 'Yajnavalkya', description: 'The "Great Forest" Upanishad. A massive text dealing with the Atman, karma, and rebirth.', x: -600, y: 1130, parentId: 'gyanakanda', relatedTo: ['yajurveda'] },
+  { id: 'prashna', name: 'Prashna', category: 'Upanishad', timePeriod: 'c. 1st millennium BCE', writer: 'Pippalada', description: 'Structured around six questions (Prashna) asked by students regarding life, breath, and the ultimate reality.', x: -200, y: 650, parentId: 'gyanakanda', relatedTo: ['atharvaveda'] },
+  { id: 'mundaka', name: 'Mundaka', category: 'Upanishad', timePeriod: 'c. 1st millennium BCE', writer: 'Angiras', description: 'Distinguishes between higher knowledge (of Brahman) and lower knowledge (rituals), famous for "Satyameva Jayate".', x: -200, y: 730, parentId: 'gyanakanda', relatedTo: ['atharvaveda'] },
+  { id: 'mandukya', name: 'Maandukya', category: 'Upanishad', timePeriod: 'c. 1st millennium BCE', writer: 'Unknown', description: 'The shortest Upanishad, analyzing the four states of consciousness mapping to the syllable OM.', x: -200, y: 810, parentId: 'gyanakanda', relatedTo: ['atharvaveda'] },
+  { id: 'kaushitaki', name: 'Kaushitaki', category: 'Upanishad', timePeriod: 'c. 800 - 500 BCE', writer: 'Unknown', description: 'Explores the nature of the self (Atman) and the ultimate reality (Brahman), emphasizing Prana (breath/life force).', x: -200, y: 890, parentId: 'gyanakanda', relatedTo: ['rigveda'] },
+  { id: 'shvetashvatara', name: 'Shvetashvatara', category: 'Upanishad', timePeriod: 'c. 6th - 4th century BCE', writer: 'Shvetashvatara', description: 'Discusses Shiva as the supreme Lord, introducing elements of Yoga, Samkhya, and Bhakti within a Vedantic framework.', x: -200, y: 970, parentId: 'gyanakanda', relatedTo: ['yajurveda'] },
+  { id: 'maitrayani', name: 'Maitrayani', category: 'Upanishad', timePeriod: 'c. 1st millennium BCE', writer: 'Maitri', description: 'Focuses on the concept of Atman and introduces the idea of the Trimurti (Brahma, Vishnu, Shiva) as manifestations of the Supreme.', x: -200, y: 1050, parentId: 'gyanakanda', relatedTo: ['yajurveda'] },
+
+  // LEVEL 2: SMRITI BRANCH CATEGORIES
+  { id: 'dharmashastras', name: 'Dharmashastra', category: 'Category', timePeriod: 'Various', writer: 'Various', description: 'Treatises on Dharma (law, duty, and correct behavior).', x: 200, y: 350, parentId: 'smriti', relatedTo: ['manusmriti'] },
+  { id: 'itihaas', name: 'Ithihaasa', category: 'Category', timePeriod: 'Various', writer: 'Various', description: '"History" - narrative epics containing profound philosophical teachings embedded in stories.', x: 500, y: 350, parentId: 'smriti', relatedTo: ['ramayana', 'mahabharat'] },
+  { id: 'puranas', name: 'Purana', category: 'Category', timePeriod: 'Various', writer: 'Vyasa (traditionally)', description: 'Ancient lore containing narratives of the history of the universe, genealogies of kings, and myths of deities.', x: 900, y: 350, parentId: 'smriti', relatedTo: [] },
+  { id: 'vedangas', name: 'Vedanga', category: 'Category', timePeriod: 'Ancient', writer: 'Various', description: 'Six auxiliary disciplines for understanding and preserving the Vedas.', x: 1300, y: 350, parentId: 'smriti', relatedTo: [] },
+  { id: 'agamas', name: 'Agama', category: 'Category', timePeriod: 'Various', writer: 'Various', description: 'Theological treatises and practical manuals of divine worship (temple construction, rituals).', x: 1600, y: 350, parentId: 'smriti', relatedTo: [] },
+  { id: 'darshana', name: 'Darshana', category: 'Category', timePeriod: 'Various', writer: 'Various', description: 'The six orthodox schools of Hindu philosophy.', x: 1900, y: 350, parentId: 'smriti', relatedTo: [] },
+  { id: 'upaveda', name: 'Upavedas', category: 'Category', timePeriod: 'Various', writer: 'Various', description: 'Applied knowledge disciplines associated with the specific Vedas.', x: 2200, y: 350, parentId: 'smriti', relatedTo: [] },
+
+  // LEVEL 3: SMRITI CHILDREN (Vertical Layouts mapped by increasing Y with huge spacing)
+  // Dharmashastras
+  { id: 'manusmriti', name: 'Manu', category: 'Dharmashastra', timePeriod: 'c. 200 BCE – 300 CE', writer: 'Attributed to Manu', description: 'An ancient legal text outlining codes of conduct, laws, and social duties.', x: 200, y: 500, parentId: 'dharmashastras', relatedTo: [] },
+  { id: 'yagyavalkyasmriti', name: 'Yajnavalkya', category: 'Dharmashastra', timePeriod: 'c. 3rd-5th century CE', writer: 'Yajnavalkya', description: 'One of the most systematically structured texts on Dharma, influential in Hindu law.', x: 200, y: 580, parentId: 'dharmashastras', relatedTo: [] },
+  { id: 'apastamba', name: 'Apastamba etc.', category: 'Dharmashastra', timePeriod: 'c. 600 - 300 BCE', writer: 'Apastamba', description: 'One of the best-preserved Dharmasutras, offering detailed aphorisms on law, duty, and Vedic rituals.', x: 200, y: 660, parentId: 'dharmashastras', relatedTo: [] },
+
+  // Itihaas
+  { id: 'ramayana', name: 'Ramayana', category: 'Itihasa', timePeriod: 'c. 500 BCE – 100 BCE', writer: 'Valmiki', description: 'The epic narrating the life of Rama, exploring human values and the concept of dharma.', x: 500, y: 500, parentId: 'itihaas', relatedTo: ['mahabharat'] },
+  { id: 'mahabharat', name: 'Mahabharata', category: 'Itihasa', timePeriod: 'c. 400 BCE – 400 CE', writer: 'Vyasa', description: 'The massive epic narrating the Kurukshetra War. It contains profound philosophical teachings.', x: 500, y: 580, parentId: 'itihaas', relatedTo: ['ramayana', 'gita'] },
+  { id: 'gita', name: 'Gita', category: 'Itihasa', timePeriod: 'c. 400 BCE – 200 CE', writer: 'Vyasa', description: 'A 700-verse philosophical dialogue embedded in the Mahabharata between Prince Arjuna and Krishna regarding duty (Dharma) and righteous action.', x: 500, y: 660, parentId: 'mahabharat', relatedTo: ['upanishads'] },
+
+  // Puranas (18 Mahapuranas split into two columns widely separated)
+  // Column 1
+  { id: 'brahmapurana', name: 'Brahma', category: 'Purana', timePeriod: 'c. 1st millennium CE', writer: 'Vyasa', description: 'One of the Mahapuranas, dealing with cosmology and geography, specifically regions around Godavari river.', x: 800, y: 500, parentId: 'puranas', relatedTo: [] },
+  { id: 'padmapurana', name: 'Padma', category: 'Purana', timePeriod: 'c. 4th-15th century CE', writer: 'Vyasa', description: 'A massive text detailing cosmology, geography, and legends, often with a strong Vaishnava focus.', x: 800, y: 580, parentId: 'puranas', relatedTo: [] },
+  { id: 'vishnupurana', name: 'Vishnu', category: 'Purana', timePeriod: 'c. 400 BCE - 900 CE', writer: 'Parashara', description: 'An important Pancharatra text detailing myths, cosmology, and genealogies centered on Vishnu.', x: 800, y: 660, parentId: 'puranas', relatedTo: [] },
+  { id: 'vayupurana', name: 'Vayu', category: 'Purana', timePeriod: 'c. 300-500 CE', writer: 'Vyasa', description: 'One of the oldest Puranas, dedicated to Vayu (the wind god), containing extensive kingly genealogies.', x: 800, y: 740, parentId: 'puranas', relatedTo: [] },
+  { id: 'bhagavatam', name: 'Bhagavata', category: 'Purana', timePeriod: 'c. 800 – 1000 CE', writer: 'Vyasa', description: 'Revered Purana promoting bhakti (devotion) to Krishna.', x: 800, y: 820, parentId: 'puranas', relatedTo: ['mahabharat'] },
+  { id: 'naradapurana', name: 'Narada', category: 'Purana', timePeriod: 'c. 10th-12th century CE', writer: 'Vyasa', description: 'A text presented as teachings from the sage Narada, emphasizing devotion (Bhakti) to Vishnu.', x: 800, y: 900, parentId: 'puranas', relatedTo: [] },
+  { id: 'markandeya', name: 'Markandeya', category: 'Purana', timePeriod: 'c. 3rd-4th century CE', writer: 'Vyasa', description: 'Features conversations between sages and includes the famous Devi Mahatmya (glory of the Goddess).', x: 800, y: 980, parentId: 'puranas', relatedTo: [] },
+  { id: 'agnipurana', name: 'Agni', category: 'Purana', timePeriod: 'c. 8th-11th century CE', writer: 'Vyasa', description: 'An encyclopedic Purana covering diverse topics like ritual worship, cosmology, astrology, and martial arts.', x: 800, y: 1060, parentId: 'puranas', relatedTo: [] },
+  { id: 'bhavishya', name: 'Bhavishya', category: 'Purana', timePeriod: 'c. 11th century CE', writer: 'Vyasa', description: 'A Purana notable for containing prophecies regarding future events and dynasties.', x: 800, y: 1140, parentId: 'puranas', relatedTo: [] },
+  // Column 2
+  { id: 'brahmavaivarta', name: 'Brahmavaivarta', category: 'Purana', timePeriod: 'c. 8th-16th century CE', writer: 'Vyasa', description: 'Focuses heavily on the life and deeds of Krishna and his consort Radha.', x: 1000, y: 500, parentId: 'puranas', relatedTo: [] },
+  { id: 'lingapurana', name: 'Linga', category: 'Purana', timePeriod: 'c. 5th-10th century CE', writer: 'Vyasa', description: 'Dedicated to Shiva, emphasizing his worship through the Lingam and detailing Shaiva philosophy.', x: 1000, y: 580, parentId: 'puranas', relatedTo: [] },
+  { id: 'varaha', name: 'Varaha', category: 'Purana', timePeriod: 'c. 10th-12th century CE', writer: 'Vyasa', description: 'Narrated by Vishnu in his boar avatar (Varaha), focusing on devotion and pilgrimage sites.', x: 1000, y: 660, parentId: 'puranas', relatedTo: [] },
+  { id: 'skanda', name: 'Skanda', category: 'Purana', timePeriod: 'c. 8th century CE onwards', writer: 'Vyasa', description: 'The largest Mahapurana, containing numerous geographical and pilgrimage guides (Tirtha Mahatmyas).', x: 1000, y: 740, parentId: 'puranas', relatedTo: [] },
+  { id: 'vamana', name: 'Vamana', category: 'Purana', timePeriod: 'c. 9th-11th century CE', writer: 'Vyasa', description: 'Centered around the dwarf avatar (Vamana) of Vishnu, but contains substantial Shaiva material.', x: 1000, y: 820, parentId: 'puranas', relatedTo: [] },
+  { id: 'kurma', name: 'Kurma', category: 'Purana', timePeriod: 'c. 8th century CE', writer: 'Vyasa', description: 'Narrated by Vishnu in his tortoise avatar (Kurma), covering mythology and the Kurma Gita.', x: 1000, y: 900, parentId: 'puranas', relatedTo: [] },
+  { id: 'matsyapurana', name: 'Matsya', category: 'Purana', timePeriod: 'c. 3rd century CE', writer: 'Vyasa', description: 'Named after the fish avatar of Vishnu, containing diverse encyclopedic topics.', x: 1000, y: 980, parentId: 'puranas', relatedTo: [] },
+  { id: 'garuda', name: 'Garuda', category: 'Purana', timePeriod: 'c. 1st millennium CE', writer: 'Vyasa', description: 'A Vaishnava text famous for its detailed descriptions of death, the afterlife, and funeral rites.', x: 1000, y: 1060, parentId: 'puranas', relatedTo: [] },
+  { id: 'brahmanda', name: 'Brahmanda', category: 'Purana', timePeriod: 'c. 4th-6th century CE', writer: 'Vyasa', description: 'Details the \'cosmic egg\' (Brahmanda) cosmology, genealogies, and the famous Lalita Sahasranama.', x: 1000, y: 1140, parentId: 'puranas', relatedTo: [] },
+  { id: 'shivapurana', name: 'Shiva', category: 'Purana', timePeriod: 'c. 10th-11th century CE', writer: 'Romaharshana/Vyasa', description: 'A major text centered on the Hindu god Shiva and his consort Parvati.', x: 900, y: 1220, parentId: 'puranas', relatedTo: [] }, // Centered below columns
+
+  // Vedangas
+  { id: 'shiksha', name: 'Shiksha (phonetics)', category: 'Vedanga', timePeriod: 'Ancient', writer: 'Various', description: 'Phonetics, phonology, and pronunciation of Vedic mantras.', x: 1300, y: 500, parentId: 'vedangas', relatedTo: [] },
+  { id: 'vyakarana', name: 'Vyakarana (grammar)', category: 'Vedanga', timePeriod: 'Ancient', writer: 'Panini (notable)', description: 'Grammar and linguistic analysis.', x: 1300, y: 580, parentId: 'vedangas', relatedTo: [] },
+  { id: 'kalpa', name: 'Kalpasutra (Rites)', category: 'Vedanga', timePeriod: 'Ancient', writer: 'Various', description: 'Ritual instructions, rules, and geometry.', x: 1300, y: 660, parentId: 'vedangas', relatedTo: [] },
+  { id: 'jyotisha', name: 'Jyotisha (Astronomy)', category: 'Vedanga', timePeriod: 'Ancient', writer: 'Lagadha (notable)', description: 'Auspicious timekeeping and astronomy for rituals.', x: 1300, y: 740, parentId: 'vedangas', relatedTo: [] },
+  { id: 'nirukta', name: 'Nirukta (Etymology)', category: 'Vedanga', timePeriod: 'Ancient', writer: 'Yaska (notable)', description: 'Etymology and explanation of complex Vedic words.', x: 1300, y: 820, parentId: 'vedangas', relatedTo: [] },
+  { id: 'chhanda', name: 'Chhanda (metre)', category: 'Vedanga', timePeriod: 'Ancient', writer: 'Pingala (notable)', description: 'Study of poetic meters in Vedic texts.', x: 1300, y: 900, parentId: 'vedangas', relatedTo: [] },
+
+  // Agamas
+  { id: 'pancharatra', name: 'Pancharatra', category: 'Agama', timePeriod: 'Various', writer: 'Various', description: 'Agamas centered on the worship of Lord Vishnu/Narayana.', x: 1600, y: 500, parentId: 'agamas', relatedTo: [] },
+  { id: 'shaiva', name: 'Shaiva', category: 'Agama', timePeriod: 'Various', writer: 'Various', description: 'Agamas detailing the rituals and philosophy of Shaivism.', x: 1600, y: 580, parentId: 'agamas', relatedTo: [] },
+  { id: 'shakta', name: 'Shaakta', category: 'Agama', timePeriod: 'Various', writer: 'Various', description: 'Tantric texts focusing on the worship of the Goddess (Devi / Shakti).', x: 1600, y: 660, parentId: 'agamas', relatedTo: [] },
+
+  // Darshana
+  { id: 'nyaya', name: 'Nyaaya', category: 'Darshana', timePeriod: 'Ancient', writer: 'Gautama', description: 'School focused on logic and epistemology.', x: 1900, y: 500, parentId: 'darshana', relatedTo: ['vaisheshika'] },
+  { id: 'vaisheshika', name: 'Vaisheshika', category: 'Darshana', timePeriod: 'Ancient', writer: 'Kanada', description: 'School of atomism, postulating that all objects in the physical universe are reducible to atoms.', x: 1900, y: 580, parentId: 'darshana', relatedTo: ['nyaya'] },
+  { id: 'samkhya', name: 'Sankhya', category: 'Darshana', timePeriod: 'Ancient', writer: 'Kapila', description: 'Strongly dualistic school identifying reality as consciousness (Purusha) and matter (Prakriti).', x: 1900, y: 660, parentId: 'darshana', relatedTo: ['yoga'] },
+  { id: 'yoga', name: 'Yoga', category: 'Darshana', timePeriod: 'Ancient', writer: 'Patanjali', description: 'School focusing on meditation, contemplation and liberation (closely linked to Samkhya).', x: 1900, y: 740, parentId: 'darshana', relatedTo: ['samkhya'] },
+  { id: 'purva_mimamsa', name: 'Purva Mimamsa', category: 'Darshana', timePeriod: 'Ancient', writer: 'Sage Jaimini', description: 'Also known as "Karma Mimamsa". Focuses on the Karma-kanda (ritualistic portion of the Vedas). It emphasizes the correct performance of Vedic rituals and achieving salvation through Dharma. Key Text: Mimamsa Sutra.', x: 1900, y: 820, parentId: 'darshana', relatedTo: ['uttara_mimamsa', 'karmakanda'] },
+  { id: 'uttara_mimamsa', name: 'Uttara Mimamsa (Vedanta)', category: 'Darshana', timePeriod: 'Ancient', writer: 'Sage Badarayana (Vyasa)', description: 'Also known as "Jnana Mimamsa" or Vedanta. Focuses on the Jnana-kanda (knowledge portion of the Vedas). Explores the nature of Brahman (Universal Soul), Atman, and Moksha. Key Text: Brahma Sutra.', x: 1900, y: 900, parentId: 'darshana', relatedTo: ['purva_mimamsa', 'gyanakanda', 'upanishads'] },
+
+  // Upaveda
+  { id: 'arthashastra', name: 'Arthashastra', category: 'Upaveda', timePeriod: 'Ancient', writer: 'Chanakya (Kautilya)', description: 'The science of statecraft, economic policy, and military strategy.', x: 2200, y: 500, parentId: 'upaveda', relatedTo: [] },
+  { id: 'ayurveda', name: 'Ayurveda', category: 'Upaveda', timePeriod: 'Ancient', writer: 'Various', description: 'The ancient Indian system of medicine and life science (associated with Rigveda/Atharvaveda).', x: 2200, y: 580, parentId: 'upaveda', relatedTo: ['rigveda', 'atharvaveda'] },
+  { id: 'gandharvaveda', name: 'Gandharvaveda', category: 'Upaveda', timePeriod: 'Ancient', writer: 'Various', description: 'The science of music, dance, and arts (associated with Samaveda).', x: 2200, y: 660, parentId: 'upaveda', relatedTo: ['samaveda'] },
+  { id: 'dhanurveda', name: 'Dhanurveda', category: 'Upaveda', timePeriod: 'Ancient', writer: 'Various', description: 'The science of archery and warfare (associated with Yajurveda).', x: 2200, y: 740, parentId: 'upaveda', relatedTo: ['yajurveda'] },
+  { id: 'shilpasthapatya', name: 'Shilpa-Sthapatya', category: 'Upaveda', timePeriod: 'Ancient', writer: 'Various', description: 'The science of architecture, engineering, and fine arts.', x: 2200, y: 820, parentId: 'upaveda', relatedTo: [] }
+];
+
+// --- COLOR THEMES BASED ON CATEGORY ---
+const CATEGORY_COLORS = {
+  'Root': { bg: 'bg-indigo-600', border: 'border-indigo-800', text: 'text-indigo-50', light: 'bg-indigo-600', icon: 'text-indigo-200', badge: 'bg-indigo-800 text-indigo-100', node: 'bg-indigo-600 text-white border-indigo-800 shadow-indigo-500/50' },
+  'Classification': { bg: 'bg-violet-500', border: 'border-violet-700', text: 'text-violet-50', light: 'bg-violet-500', icon: 'text-violet-200', badge: 'bg-violet-700 text-violet-100', node: 'bg-violet-500 text-white border-violet-700 shadow-violet-500/40' },
+  'Category': { bg: 'bg-blue-500', border: 'border-blue-700', text: 'text-blue-50', light: 'bg-blue-500', icon: 'text-blue-200', badge: 'bg-blue-700 text-blue-100', node: 'bg-blue-500 text-white border-blue-700 shadow-blue-500/30' },
+  'Veda': { bg: 'bg-amber-100', border: 'border-amber-400', text: 'text-amber-900', light: 'bg-amber-50', icon: 'text-amber-600', badge: 'bg-amber-200 text-amber-800', node: 'bg-amber-100 text-amber-900 border-amber-400 shadow-amber-900/10' },
+  'Kanda': { bg: 'bg-orange-100', border: 'border-orange-400', text: 'text-orange-900', light: 'bg-orange-50', icon: 'text-orange-600', badge: 'bg-orange-200 text-orange-800', node: 'bg-orange-100 text-orange-900 border-orange-400 shadow-orange-900/10' },
+  'Upanishad': { bg: 'bg-cyan-100', border: 'border-cyan-400', text: 'text-cyan-900', light: 'bg-cyan-50', icon: 'text-cyan-600', badge: 'bg-cyan-200 text-cyan-800', node: 'bg-cyan-100 text-cyan-900 border-cyan-400 shadow-cyan-900/10' },
+  'Itihasa': { bg: 'bg-rose-100', border: 'border-rose-400', text: 'text-rose-900', light: 'bg-rose-50', icon: 'text-rose-600', badge: 'bg-rose-200 text-rose-800', node: 'bg-rose-100 text-rose-900 border-rose-400 shadow-rose-900/10' },
+  'Purana': { bg: 'bg-purple-100', border: 'border-purple-400', text: 'text-purple-900', light: 'bg-purple-50', icon: 'text-purple-600', badge: 'bg-purple-200 text-purple-800', node: 'bg-purple-100 text-purple-900 border-purple-400 shadow-purple-900/10' },
+  'Darshana': { bg: 'bg-emerald-100', border: 'border-emerald-400', text: 'text-emerald-900', light: 'bg-emerald-50', icon: 'text-emerald-600', badge: 'bg-emerald-200 text-emerald-800', node: 'bg-emerald-100 text-emerald-900 border-emerald-400 shadow-emerald-900/10' },
+  'Dharmashastra': { bg: 'bg-slate-100', border: 'border-slate-400', text: 'text-slate-900', light: 'bg-slate-50', icon: 'text-slate-600', badge: 'bg-slate-200 text-slate-800', node: 'bg-slate-100 text-slate-900 border-slate-400 shadow-slate-900/10' },
+  'Vedanga': { bg: 'bg-lime-100', border: 'border-lime-400', text: 'text-lime-900', light: 'bg-lime-50', icon: 'text-lime-600', badge: 'bg-lime-200 text-lime-800', node: 'bg-lime-100 text-lime-900 border-lime-400 shadow-lime-900/10' },
+  'Agama': { bg: 'bg-fuchsia-100', border: 'border-fuchsia-400', text: 'text-fuchsia-900', light: 'bg-fuchsia-50', icon: 'text-fuchsia-600', badge: 'bg-fuchsia-200 text-fuchsia-800', node: 'bg-fuchsia-100 text-fuchsia-900 border-fuchsia-400 shadow-fuchsia-900/10' },
+  'Upaveda': { bg: 'bg-sky-100', border: 'border-sky-400', text: 'text-sky-900', light: 'bg-sky-50', icon: 'text-sky-600', badge: 'bg-sky-200 text-sky-800', node: 'bg-sky-100 text-sky-900 border-sky-400 shadow-sky-900/10' },
+};
+
+// Wire colors mapped directly to target node categories
+const WIRE_COLORS = {
+  'Classification': '#8b5cf6', 'Veda': '#f59e0b', 'Kanda': '#f97316',
+  'Upanishad': '#06b6d4', 'Category': '#3b82f6', 'Dharmashastra': '#64748b',
+  'Itihasa': '#f43f5e', 'Purana': '#a855f7', 'Vedanga': '#84cc16',
+  'Agama': '#d946ef', 'Darshana': '#10b981', 'Upaveda': '#0ea5e9',
+};
+
+const DEFAULT_COLOR = { bg: 'bg-gray-100', border: 'border-gray-400', text: 'text-gray-900', light: 'bg-gray-50', icon: 'text-gray-600', badge: 'bg-gray-200 text-gray-800', node: 'bg-gray-100 text-gray-900 border-gray-400' };
+
+export default function App() {
+  const [viewMode, setViewMode] = useState('grid'); // 'grid' | 'mindmap'
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('All');
+  const [activeScriptureId, setActiveScriptureId] = useState(null);
+
+  // Filter Categories out of general views if they are structural nodes
+  const displayableScriptures = SCRIPTURES.filter(s => !['Root', 'Classification', 'Category'].includes(s.category));
+
+  // Extract unique filterable categories
+  const filterCategories = ['All', ...Array.from(new Set(displayableScriptures.map(s => s.category)))];
+
+  // Grid Filter logic
+  const filteredScriptures = useMemo(() => {
+    return displayableScriptures.filter(scripture => {
+      const matchesSearch = scripture.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                            scripture.writer.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesCategory = selectedCategory === 'All' || scripture.category === selectedCategory;
+      return matchesSearch && matchesCategory;
+    });
+  }, [searchQuery, selectedCategory]);
+
+  const activeScripture = SCRIPTURES.find(s => s.id === activeScriptureId);
+  const getScriptureById = (id) => SCRIPTURES.find(s => s.id === id);
+
+  // Global Key Shortcut for toggling view
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      // Ignore if typing in an input
+      if (e.target.tagName.toLowerCase() === 'input') return;
+      
+      if (e.key === 'z' || e.key === 'Z') {
+        setViewMode(prev => prev === 'grid' ? 'mindmap' : 'grid');
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return (
+    <div className={`min-h-screen bg-stone-50 font-sans text-stone-900 selection:bg-orange-200 flex flex-col ${viewMode === 'mindmap' ? 'overflow-hidden' : ''}`}>
+      
+      {/* HEADER */}
+      <header className="bg-gradient-to-r from-orange-600 via-red-500 to-amber-500 text-white shadow-md z-20 flex-shrink-0 relative">
+        <div className="max-w-[1400px] mx-auto px-4 py-4 md:py-6">
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-white/20 rounded-full backdrop-blur-sm">
+                <Library size={28} className="text-white" />
+              </div>
+              <div>
+                <h1 className="text-xl md:text-2xl font-bold tracking-tight leading-tight">Ancient Indian Scriptures</h1>
+                <p className="text-white/80 text-xs md:text-sm font-medium">Explore the interconnected wisdom of millennia</p>
+              </div>
+            </div>
+            
+            <div className="flex items-center gap-3 w-full md:w-auto">
+              {viewMode === 'grid' && (
+                <div className="relative flex-grow md:w-64 lg:w-72">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-white/60" size={16} />
+                  <input 
+                    type="text" 
+                    placeholder="Search text or author..." 
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="w-full pl-9 pr-4 py-2 text-sm rounded-full bg-white/10 border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-white/50 backdrop-blur-sm transition-all"
+                  />
+                </div>
+              )}
+              
+              <button 
+                onClick={() => setViewMode(v => v === 'grid' ? 'mindmap' : 'grid')}
+                className="flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 border border-white/30 rounded-full transition-all text-sm font-semibold whitespace-nowrap"
+                title="Shortcut: Press 'Z'"
+              >
+                {viewMode === 'grid' ? <Network size={16} /> : <LayoutGrid size={16} />}
+                <span className="hidden sm:inline">{viewMode === 'grid' ? 'Flowchart View' : 'Grid View'}</span>
+                <kbd className="hidden sm:inline ml-1 bg-white/20 px-1.5 py-0.5 rounded text-[10px]">Z</kbd>
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* DYNAMIC MAIN CONTENT AREA */}
+      <div className="flex-grow relative flex flex-col">
+        {viewMode === 'grid' ? (
+          <main className="max-w-[1400px] mx-auto px-4 py-8 w-full">
+            {/* FILTER BAR */}
+            <div className="flex flex-wrap gap-2 mb-8 justify-center">
+              {filterCategories.map(cat => {
+                const isSelected = selectedCategory === cat;
+                const colors = cat === 'All' ? { badge: 'bg-stone-200 text-stone-800 border-stone-300' } : (CATEGORY_COLORS[cat] || DEFAULT_COLOR);
+                
+                return (
+                  <button
+                    key={cat}
+                    onClick={() => setSelectedCategory(cat)}
+                    className={`px-3 py-1.5 rounded-full text-xs sm:text-sm font-semibold transition-all border ${
+                      isSelected 
+                        ? `ring-2 ring-offset-2 ring-orange-400 shadow-sm ${colors.badge}`
+                        : 'bg-white border-stone-200 text-stone-600 hover:bg-stone-100'
+                    }`}
+                  >
+                    {cat}
+                  </button>
+                )
+              })}
+            </div>
+
+            {/* SCRIPTURES GRID */}
+            {filteredScriptures.length > 0 ? (
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                {filteredScriptures.map((scripture) => {
+                  const theme = CATEGORY_COLORS[scripture.category] || DEFAULT_COLOR;
+                  
+                  return (
+                    <div 
+                      key={scripture.id}
+                      onClick={() => setActiveScriptureId(scripture.id)}
+                      className={`relative group cursor-pointer overflow-hidden rounded-2xl border-2 ${theme.border} ${theme.light} hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col h-full`}
+                    >
+                      <div className={`p-5 flex-grow flex flex-col`}>
+                        <div className="flex justify-between items-start mb-3">
+                          <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full uppercase tracking-wider ${theme.badge}`}>
+                            {scripture.category}
+                          </span>
+                          <BookOpen size={16} className={`${theme.icon} opacity-50 group-hover:opacity-100 transition-opacity`} />
+                        </div>
+                        
+                        <h2 className={`text-xl font-extrabold mb-2 ${theme.text}`}>
+                          {scripture.name}
+                        </h2>
+                        
+                        <div className="space-y-1.5 mb-3 flex-grow">
+                          <div className="flex items-center gap-2 text-xs text-stone-600">
+                            <Clock size={12} className={theme.icon} />
+                            <span>{scripture.timePeriod}</span>
+                          </div>
+                          <div className="flex items-center gap-2 text-xs text-stone-600">
+                            <Feather size={12} className={theme.icon} />
+                            <span className="truncate">{scripture.writer}</span>
+                          </div>
+                        </div>
+                        
+                        <p className="text-xs sm:text-sm text-stone-700 line-clamp-3 leading-relaxed mb-4">
+                          {scripture.description}
+                        </p>
+
+                        <div className="mt-auto pt-3 border-t border-black/5 flex items-center justify-between">
+                          <div className="flex items-center gap-1 text-[10px] sm:text-xs font-semibold text-stone-500">
+                            <LinkIcon size={10} />
+                            <span>{scripture.relatedTo ? scripture.relatedTo.length : 0} Links</span>
+                          </div>
+                          <span className={`text-xs font-bold flex items-center gap-1 ${theme.icon} group-hover:translate-x-1 transition-transform`}>
+                            View <Sparkles size={12} />
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="text-center py-20">
+                <ScrollText size={48} className="mx-auto text-stone-300 mb-4" />
+                <h3 className="text-xl font-bold text-stone-500">No scriptures found matching your search.</h3>
+                <button 
+                  onClick={() => {setSearchQuery(''); setSelectedCategory('All');}}
+                  className="mt-4 px-6 py-2 bg-orange-100 text-orange-700 rounded-full font-medium hover:bg-orange-200 transition-colors"
+                >
+                  Clear Filters
+                </button>
+              </div>
+            )}
+          </main>
+        ) : (
+          <MindMapView onNodeClick={setActiveScriptureId} />
+        )}
+      </div>
+
+      {/* MODAL - SCRIPTURE DETAILS */}
+      {activeScripture && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div 
+            className="absolute inset-0 bg-stone-900/60 backdrop-blur-sm transition-opacity"
+            onClick={() => setActiveScriptureId(null)}
+          ></div>
+          
+          <div className="relative w-full max-w-2xl bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh] animate-in fade-in zoom-in-95 duration-200">
+            {(() => {
+              const theme = CATEGORY_COLORS[activeScripture.category] || DEFAULT_COLOR;
+              const isStructural = ['Root', 'Classification', 'Category'].includes(activeScripture.category);
+              return (
+                <>
+                  <div className={`p-6 sm:p-8 ${theme.bg} border-b ${theme.border} relative`}>
+                    <button 
+                      onClick={() => setActiveScriptureId(null)}
+                      className="absolute top-4 right-4 p-2 bg-white/50 hover:bg-white rounded-full transition-colors z-10"
+                    >
+                      <X size={20} className={theme.text} />
+                    </button>
+                    
+                    <span className={`inline-block text-[10px] sm:text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider mb-3 bg-white/60 ${theme.text}`}>
+                      {activeScripture.category}
+                    </span>
+                    
+                    <h2 className={`text-2xl sm:text-4xl font-extrabold mb-4 ${theme.text}`}>
+                      {activeScripture.name}
+                    </h2>
+                    
+                    {!isStructural && (
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                        <div className="flex items-center gap-3 bg-white/40 px-4 py-2 rounded-xl backdrop-blur-sm">
+                          <Clock size={16} className={theme.icon} />
+                          <div>
+                            <p className="text-[10px] text-black/50 font-bold uppercase">Time Period</p>
+                            <p className={`text-sm font-semibold ${theme.text}`}>{activeScripture.timePeriod}</p>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-3 bg-white/40 px-4 py-2 rounded-xl backdrop-blur-sm">
+                          <User size={16} className={theme.icon} />
+                          <div>
+                            <p className="text-[10px] text-black/50 font-bold uppercase">Authorship</p>
+                            <p className={`text-sm font-semibold ${theme.text}`}>{activeScripture.writer}</p>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="p-6 sm:p-8 overflow-y-auto">
+                    <div className="mb-6">
+                      <h3 className="text-base sm:text-lg font-bold text-stone-800 flex items-center gap-2 mb-2">
+                        <Info size={18} className="text-orange-500" /> 
+                        Overview
+                      </h3>
+                      <p className="text-sm sm:text-base text-stone-600 leading-relaxed">
+                        {activeScripture.description}
+                      </p>
+                    </div>
+
+                    {/* Hierarchy Relationships (Parent/Children) */}
+                    <div className="mb-6">
+                      {activeScripture.parentId && (
+                        <div className="mb-4">
+                          <h4 className="text-xs font-bold text-stone-400 uppercase mb-2">Belongs To</h4>
+                          <RelatedButton id={activeScripture.parentId} onClick={setActiveScriptureId} />
+                        </div>
+                      )}
+                      
+                      {SCRIPTURES.filter(s => s.parentId === activeScripture.id).length > 0 && (
+                        <div>
+                          <h4 className="text-xs font-bold text-stone-400 uppercase mb-2">Contains</h4>
+                          <div className="flex flex-wrap gap-2">
+                            {SCRIPTURES.filter(s => s.parentId === activeScripture.id).map(child => (
+                              <RelatedButton key={child.id} id={child.id} onClick={setActiveScriptureId} />
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Conceptual Relationships */}
+                    {activeScripture.relatedTo && activeScripture.relatedTo.length > 0 && (
+                      <div className="border-t border-stone-100 pt-6">
+                        <h3 className="text-base sm:text-lg font-bold text-stone-800 flex items-center gap-2 mb-4">
+                          <LinkIcon size={18} className="text-orange-500" /> 
+                          Thematically Related
+                        </h3>
+                        <div className="flex flex-wrap gap-2">
+                          {activeScripture.relatedTo.map(relatedId => (
+                            <RelatedButton key={relatedId} id={relatedId} onClick={setActiveScriptureId} />
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </>
+              );
+            })()}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Helper component for related buttons in modal
+function RelatedButton({ id, onClick }) {
+  const item = SCRIPTURES.find(s => s.id === id);
+  if (!item) return null;
+  const theme = CATEGORY_COLORS[item.category] || DEFAULT_COLOR;
+  
+  return (
+    <button
+      onClick={() => onClick(item.id)}
+      className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border ${theme.border} ${theme.light} hover:shadow-md hover:-translate-y-0.5 transition-all group text-left`}
+    >
+      <BookOpen size={12} className={theme.icon} />
+      <div>
+        <p className={`font-bold text-xs ${theme.text} group-hover:underline decoration-2 underline-offset-2`}>
+          {item.name}
+        </p>
+      </div>
+    </button>
+  );
+}
+
+// --- DRAGGABLE INFINITE CANVAS COMPONENT ---
+function MindMapView({ onNodeClick }) {
+  const containerRef = useRef(null);
+  const [pan, setPan] = useState({ x: 0, y: 0 }); // Center by default below
+  const [zoom, setZoom] = useState(0.5); // Started zoomed out slightly more for the massive canvas
+  const [isDragging, setIsDragging] = useState(false);
+  const [startPan, setStartPan] = useState({ x: 0, y: 0 });
+
+  // Initialize center
+  useEffect(() => {
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      setPan({ x: rect.width / 2, y: rect.height / 4 }); // Start higher up to show root
+    }
+  }, []);
+
+  const handlePointerDown = (e) => {
+    // Only pan if we click the background, not the nodes
+    if (e.target.closest('.mindmap-node')) return;
+    setIsDragging(true);
+    setStartPan({ x: e.clientX - pan.x, y: e.clientY - pan.y });
+    e.target.setPointerCapture(e.pointerId);
+  };
+
+  const handlePointerMove = (e) => {
+    if (!isDragging) return;
+    setPan({
+      x: e.clientX - startPan.x,
+      y: e.clientY - startPan.y,
+    });
+  };
+
+  const handlePointerUp = (e) => {
+    setIsDragging(false);
+    e.target.releasePointerCapture(e.pointerId);
+  };
+
+  const handleWheel = (e) => {
+    // Zoom around center of screen for simplicity
+    const zoomFactor = -e.deltaY * 0.001;
+    setZoom(z => Math.min(Math.max(0.1, z + zoomFactor), 2.5));
+  };
+
+  return (
+    <div 
+      ref={containerRef}
+      className="absolute inset-0 bg-[#f4f0ec] overflow-hidden cursor-grab active:cursor-grabbing touch-none"
+      style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '40px 40px', backgroundPosition: `${pan.x}px ${pan.y}px` }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerUp}
+      onWheel={handleWheel}
+    >
+      <div className="absolute top-4 left-4 z-10 flex flex-col gap-2 bg-white/80 p-3 rounded-xl shadow-sm backdrop-blur-sm border border-stone-200">
+        <div className="flex items-center gap-2 text-xs font-semibold text-stone-600">
+          <Move size={14} /> Drag canvas to pan
+        </div>
+        <div className="flex items-center gap-2 text-xs font-semibold text-stone-600">
+          <Search size={14} /> Scroll to zoom ({Math.round(zoom * 100)}%)
+        </div>
+      </div>
+
+      {/* Transforms the entire map coordinate space */}
+      <div 
+        className="absolute origin-top-left will-change-transform"
+        style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})` }}
+      >
+        {/* SVG layer for drawing hierarchical colored connections */}
+        <svg className="absolute inset-0 overflow-visible pointer-events-none" style={{ width: 1, height: 1 }}>
+          {SCRIPTURES.map(node => {
+            if (!node.parentId) return null;
+            const parent = SCRIPTURES.find(p => p.id === node.parentId);
+            if (!parent) return null;
+            
+            // Calculate entry/exit points for a top-down tree aesthetic
+            const startX = parent.x;
+            const startY = parent.y + 20; // Bottom of parent node approx
+            const endX = node.x;
+            const endY = node.y - 20;   // Top of child node approx
+            
+            // Curved vertical path for sleek organic look
+            const pathData = `M ${startX} ${startY} C ${startX} ${startY + Math.abs(endY - startY)/2}, ${endX} ${startY + Math.abs(endY - startY)/2}, ${endX} ${endY}`;
+            
+            // Map the wire color to the child node's category
+            const strokeColor = WIRE_COLORS[node.category] || '#94a3b8';
+            const isMainBranch = parent.id === 'root' || parent.id === 'shruti' || parent.id === 'smriti';
+
+            return (
+              <path
+                key={`edge-${node.id}`}
+                d={pathData}
+                fill="none"
+                stroke={strokeColor}
+                strokeWidth={isMainBranch ? "6" : "3"}
+                strokeOpacity={0.7}
+                strokeLinecap="round"
+                className="transition-all duration-500 drop-shadow-sm"
+              />
+            );
+          })}
+        </svg>
+
+        {/* Nodes Layer */}
+        {SCRIPTURES.map(node => {
+          const theme = CATEGORY_COLORS[node.category] || DEFAULT_COLOR;
+          const isStructural = ['Root', 'Classification', 'Category'].includes(node.category);
+          
+          return (
+            <div
+              key={node.id}
+              className={`mindmap-node absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer transition-transform hover:scale-110 active:scale-95 ${
+                isStructural ? 'z-20' : 'z-10'
+              }`}
+              style={{ left: node.x, top: node.y }}
+              onClick={(e) => { e.stopPropagation(); onNodeClick(node.id); }}
+            >
+              <div className={`
+                ${isStructural ? 'px-6 py-3 font-bold text-lg rounded-xl border-2' : 'px-4 py-2 font-semibold text-sm rounded-lg border'}
+                shadow-sm backdrop-blur-sm whitespace-nowrap text-center
+                ${theme.node || `${theme.bg} ${theme.text} ${theme.border}`}
+              `}>
+                {node.name}
+                {!isStructural && (
+                  <div className={`text-[10px] mt-1 opacity-70`}>{node.category}</div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}