script.js

// --- PRE-ORGANIZED TIMELINE DATABASE ---
// Team 1676 Timeline data, organized by year and category

const historyDB = {
    "2004": {
        Projects: ["Hills & Valley in Panasonic Design Challenge"],
        Awards: [],
        Impact: [],
        Robot: []
    },
    "2005": {
        Projects: ["Matt Hayon, Pascack Valley Class of 2005, and Pascack Hills teacher, Phil Paspalas, create Team 1676."],
        Awards: [],
        Impact: [],
        Robot: []
    },
    "2006": {
        Projects: [],
        Awards: [],
        Impact: ["Assisted NJIT kickoff with kit distribution & cleanup."],
        Robot: ["Events: New Jersey Regional - Palmetto Regional."]
    },
    "2007": {
        Projects: [
            "Launched an online scouting database for robotics.",
            "Wrote the first business plan."
        ],
        Awards: [
            "Won Rookie All-Star Award.",
            "Won NJ FIRST® Vex Challenge!"
        ],
        Impact: [
            "Flood cleanup aid in River Vale.",
            "Began promoting STEAM and FIRST® at town days and parades.",
            "Started and mentored River Vale FLL team.",
            "Began hosting the FLL Bergen Qualifying Tournament."
        ],
        Robot: ["Events: Buckeye Regional - FIRST Vex Challenge Garden State Rumble."]
    },
    "2008": {
        Projects: [
            "Began to create a robot to assist disabled children for the West Virginia University Adapted Physical Education Program.",
            "Built website, integrated \"My GPS\" for Awning stress management app."
        ],
        Awards: ["Won St. Louis FIRST World Championship and FIRST® Festival of Champions."],
        Impact: [
            "Raised $5000+ for cancer research at Relay for Life; robot joined event.",
            "Attended girlPOWER off-season event.",
            "Celebrated Senior Citizens Day at Pascack Valley HS.",
            "Volunteered at the Family Promise organization.",
            "Collected 100+ STEAM toys for Toys for Tots.",
            "Collected 2200 pounds of food for local pantries; featured in the Pascack Press."
        ],
        Robot: ["Events: Greater Toronto Regional - New Jersey Regional - FIRST World Championship - Galileo Division."]
    },
    "2009": {
        Projects: [
            "Improved WVU robot based on YJCC feedback.",
            "Delivered the West Virginia University robot to benefit the Adaptive Physical Education Program.",
            "Showcased WVU robot, partnered with teacher for improved version."
        ],
        Awards: [],
        Impact: [
            "Attended girlPOWER off-season event.",
            "Shared WVU robot with disabled teens & adults at YJCC Westwood."
        ],
        Robot: ["Events: Palmetto Regional - FIRST World Championship - Galileo Division."]
    },
    "2010": {
        Projects: [
            "Brought Awning app to district health classes.",
            "Merged \"My GPS\" team app with Awning app."
        ],
        Awards: ["Ethan Hayon became the first team member to earn Dean's List Finalist."],
        Impact: [],
        Robot: [
            "Events: New Jersey Regional - Virginia Regional - FIRST World Championship - Curie Division.",
            "Competed in NJ Regional and FIRST World Championship."
        ]
    },
    "2011": {
        Projects: [
            "Created Autodesk Inventor tutorial for N.J. Regional teams.",
            "Taught Autodesk Inventor at N.J. Regional competition."
        ],
        Awards: [],
        Impact: [],
        Robot: ["Events: New Jersey Regional - Virginia Regional - FIRST World Championship - Newton Sub-Division."]
    },
    "2012": {
        Projects: ["Created PVHS school dashboard, hosted Camp Raspberry website."],
        Awards: [],
        Impact: [],
        Robot: [
            "Event: FIRST Mid-Atlantic District Championship - Mt. Olive FMA District - NYC Regional - Rutgers FMA District - FIRST World Championship - Archimedes Division.",
            "Competed at Brunswick Eruption off-season event."
        ]
    },
    "2013": {
        Projects: [
            "Launched Pi-Partners program to provide aid to developing/low-resource teams. FRC teams 4475, 5640, 5511.",
            "Pi-Partner Program - Haiti.",
            "Launched New Parent Meetings.",
            "Empowered girls in robotics hosting a Girl Scout program.",
            "Started and mentored the Woodcliff Lake FLL team.",
            "Started and mentored the Montvale FLL team.",
            "Created the \"LEGOs & a Movie\" fundraiser.",
            "Partnered with Hillsdale Library for FLL Jr. Summer Camp.",
            "Published the Lily the Learner series.",
            "Started and mentored 3 FLL Jr. teams: 1 school, 2 libraries.",
            "Crafted an Arduino curriculum for the Sakhikamva Foundation in South Africa.",
            "Pi-Partners expands to 6 teams. FRC teams 3339, 4475, 5640, 5655, 5554.",
            "Pi-Partners now include FRC Teams 4643, 6705; FTC Teams 7555, 8539.",
            "Enhanced Pi-oneer Scouting Network to allow input from other teams.",
            "Added FIRST® Core Values to Rookie Bookie."
        ],
        Awards: ["FIRST World Championship Galileo Division – Captain of Alliance 7."],
        Impact: [
            "Attended girlPOWER off-season event.",
            "Collected 500+ pounds of food for local pantries with Interact Club.",
            "Began Hillsdale Food Pantry food drives and donations.",
            "Presented to the Gifted Child Society in Allendale NJ.",
            "Guided district's new robotics class curriculum.",
            "50 people donated at the Red Cross Blood drive, partnering with the Pascack Hills Medical Club."
        ],
        Robot: [
            "Events: Bridgewater-Raritan FMA District - FIRST Mid-Atlantic District Championship - Mt. Olive FMA District - FIRST World Championship - Newton Sub-Division.",
            "Mt. Olive FMA District - FIRST World Championship - Curie Division."
        ]
    },
    "2014": {
        Projects: [
            "Began Pi-Buddies: program eases rookie transition with veteran guidance.",
            "Introduced FIRST to a school in China, and encouraged them to start a robotics team.",
            "Created Testing & Integration and Strategy Subdivisions to streamline communication and focus.",
            "Championed FIRST® with postage stamp petition.",
            "Lily the Learner became a trilogy, expanded & translated in 6 languages. \"Lily Visits a Farm\" app educates on agritech.",
            "Began \"Pi-Tech Academy,\" educational video series for children, demonstrating science concepts and experiments on YouTube. Added subtitled and translated all videos to engage a wider audience.",
            "Began attending the National Advocacy Conference in Washington, DC for STEM in NJ.",
            "Began Project Manager program: cultivates leadership skills.",
            "Held Arts in STEAM Night Out event, raised funds for robotics club in South Africa.",
            "Gave a presentation for the National Advocacy Conference at the World Championship. The team designed the NAC logo.",
            "Launched the annual Pi-oneer Senior Scholarships.",
            "Created team contract and performance reviews to boost organization and efficiency."
        ],
        Awards: ["Dean's List Semi-Finalist: Giulia DiSalvo."],
        Impact: [
            "Held the annual STEAM Fair with new activities.",
            "Collaborated with Computer Outreach, a non-profit that donates computers to underprivileged children.",
            "Began annual Car Wash Fundraiser with mentored FLL teams.",
            "Supported the AMAZING Campaign - in support of an alumni's suicide prevention program."
        ],
        Robot: [
            "Events: Clifton FMA District - FIRST Mid-Atlantic District Championship.",
            "Events: Bridgewater-Raritan FMA District - Mt. Olive FMA District - FIRST Mid-Atlantic District Championship - Waterloo Regional - FIRST World Championship - Hopper Sub-Division."
        ]
    },
    "2015": {
        Projects: [
            "Updated the Rookie Bookie.",
            "Wrote Animation Guide for robotics animation divisions.",
            "Wrote Sponsorship Guide for FIRST teams shared on team website.",
            "Wrote Rookie Bookie guide for new mentored FTC teams shared on team website.",
            "Made online safety training videos for FRC teams."
        ],
        Awards: ["FIRST Mid-Atlantic District Event Winner."],
        Impact: ["Held the annual Red Cross Blood Drive."],
        Robot: ["Events: Bridgewater-Raritan FMA District - Mt. Olive FMA District - Buckeye Regional - FIRST Mid-Atlantic District Championship - FIRST World Championship - Newton Sub-Division."]
    },
    "2016": {
        Projects: ["Updated web scouting program."],
        Awards: [],
        Impact: [],
        Robot: ["Events: Bridgewater-Raritan FMA District - FIRST Mid-Atlantic District Championship - Montgomery FMA District - Waterbury NE District - FIRST World Championship - Tesla Division."]
    },
    "2017": {
        Projects: [
            "Launched \"Ready Set Speak\" to help children with autism or apraxia of speech using Applied Behavior Analysis. Developed from 2 team members' idea with professional input.",
            "Shared Ready Set Speak with FTC Team 58 in Haiti. Partnered with PV French Honor Society to translate the program into French."
        ],
        Awards: [],
        Impact: [
            "Held 5th annual Valentine's Day Food Drive.",
            "Built a food pantry collection bin for Kings supermarket.",
            "Created and hosted Food Pantry Day at ShopRite.",
            "Collected 1500 pounds of food for local pantries in two food drives."
        ],
        Robot: ["Events: Bridgewater-Raritan FMA District - FIRST Mid-Atlantic District Championship - Montgomery FMA District - Waterbury NE District - FIRST World Championship - Darwin Sub-Division."]
    },
    "2018": {
        Projects: ["Updated the Animation Guide."],
        Awards: [],
        Impact: [],
        Robot: ["Virtual Events: Mt. Olive FMA District - FIRST Mid-Atlantic District Championship."]
    },
    "2019": {
        Projects: ["Expanded \"Ready Set Speak!\" website to Spanish for broader impact."],
        Awards: [],
        Impact: [],
        Robot: []
    },
    "2020": {
        Projects: [
            "Covid: Created virtual edition of LEGOs & Story for pediatric cancer patients at Memorial Sloan Kettering Hospital.",
            "Covid: Adapted LEGOs & a Story to a virtual format."
        ],
        Awards: [],
        Impact: [
            "Covid: Printed 1,117 mask straps for essential workers.",
            "Covid: Made and donated 425 masks to seniors, food pantries and healthcare workers.",
            "Covid: Supported Saint Mary's Hospital frontline workers with mask straps. Designed logo for a tribute t-shirt.",
            "Covid: Donated intubation boxes to hospitals/ambulance corps for safer patient care.",
            "Covid: Provided 3D printed mask straps & thank-you messages to ShopRite essential workers.",
            "Covid: \"White Ribbons for Hope\" campaign to unite community and essential workers.",
            "Safety collaboration with FRC Team 75 to distribute first aid kits to all FIRST Mid-Atlantic teams."
        ],
        Robot: ["Virtual events context (limited due to Covid)."]
    },
    "2021": {
        Projects: [],
        Awards: [],
        Impact: [
            "Partnering with the PHHS Medical Club, the team hosted a Red Cross Blood Drive to address national blood shortage.",
            "Continued volunteering for Angels Among Us.",
            "Volunteered with Angels Among Us: Down Syndrome Association of the Hudson Valley.",
            "Began Postcards for Soldiers Campaign, sending thousands of thank you postcards and goods to soldiers."
        ],
        Robot: ["Events: Virtual FIRST Mid-Atlantic District Championship - Mt. Olive FMA District."]
    },
    "2022": {
        Projects: [],
        Awards: ["FMA District Impact Award Winner."],
        Impact: ["Collected 2400 pounds of food in two food drives."],
        Robot: ["Events: Bridgewater-Raritan FMA District - Montgomery FMA District - Tech Valley Regional - FIRST Mid-Atlantic District Championship - FIRST World Championship – Newton Division."]
    },
    "2023": {
        Projects: [],
        Awards: [
            "FMA District Impact Award Winner.",
            "FIRST World Championship Johnson Division Finalist."
        ],
        Impact: [],
        Robot: ["FMA Warren Hills - Mt. Olive FMA District - FIRST Mid Atlantic District Championship - FIRST World Championship Johnson Division Finalist."]
    },
    "2024": {
        Projects: [],
        Awards: [],
        Impact: [
            "Since March 2024, collected 8,000 lbs of food for local food pantries.",
            "Built food pantry donation boxes for ShopRite."
        ],
        Robot: ["Events: Bridgewater-Raritan FMA District - Montgomery FMA District - FIRST Mid-Atlantic District Championship - Southwest Virginia CHS District - FIRST World Championship - Einstein Field - FIRST Festival of Champions."]
    },
    "2025": {
        Projects: [],
        Awards: [],
        Impact: [],
        Robot: []
    },
    "2026": {
        Projects: [],
        Awards: [],
        Impact: [],
        Robot: []
    }
};

// --- CATEGORY STYLING ---
// Colors and glow effects for each category (4 categories only)
const CATEGORY_ACCENTS = {
    Projects: { color: "#f6b25a", glow: "rgba(246, 178, 90, 0.35)" },
    Awards: { color: "#ffd166", glow: "rgba(255, 209, 102, 0.35)" },
    Impact: { color: "#5cd6b5", glow: "rgba(92, 214, 181, 0.35)" },
    Robot: { color: "#6ca9ff", glow: "rgba(108, 169, 255, 0.35)" }
};

// --- MAIN APPLICATION ---
document.addEventListener('DOMContentLoaded', () => {
    // --- CONFIGURATION ---
    const startYear = 2004;
    const endYear = 2026;
    
    // Only 4 categories now
    const baseCategories = ["Projects", "Awards", "Impact", "Robot"];

    // REPEAT Categories 4 times (16 items) for fuller wheel appearance
    const categories = [...baseCategories, ...baseCategories, ...baseCategories, ...baseCategories];

    // --- DOM ELEMENTS ---
    const container = document.getElementById('timelineContainer');
    const yearRing = document.getElementById('yearRing');
    const categoryRing = document.getElementById('categoryRing');
    const innerRingContainer = document.getElementById('innerRingContainer');
    const contentHeader = document.getElementById('contentHeader');
    const contentBody = document.getElementById('contentBody');
    const contentArea = document.querySelector('.content-area');

    // --- STATE ---
    let state = {
        years: {
            currentRotation: 0,
            currentIndex: 0,
            total: endYear - startYear + 1,
            radius: 47,
            element: yearRing,
            anglePerItem: 0
        },
        categories: {
            currentRotation: 0,
            currentIndex: 0,
            total: categories.length,
            radius: 44,
            element: categoryRing,
            anglePerItem: 0
        },
        selection: {
            year: endYear,
            category: baseCategories[0]
        }
    };

    // --- DRAG STATE ---
    let isDragging = false;
    let activeDragType = null;
    let lastX = 0;
    let lastTime = 0;
    let velocity = 0;
    let glideFrame = null;
    let debounceTimer = null;

    // --- INITIALIZATION ---
    initYearRing();
    initCategoryRing();
    setupDragEvents();
    initInstructions();

    // Initial content display
    updateContent();

    // --- INSTRUCTIONS OVERLAY ---
    function initInstructions() {
        const overlay = document.getElementById('instructionsOverlay');
        const dismissBtn = document.getElementById('dismissInstructions');
        const helpBtn = document.getElementById('helpButton');

        // Check if user has seen instructions before
        if (localStorage.getItem('pilineInstructionsSeen')) {
            overlay.classList.add('hidden');
            overlay.style.display = 'none';
        }

        // Dismiss on button click
        dismissBtn.addEventListener('click', dismissInstructions);

        // Also dismiss on any dial interaction (first time only)
        if (!localStorage.getItem('pilineInstructionsSeen')) {
            container.addEventListener('mousedown', dismissInstructions, { once: true });
            container.addEventListener('touchstart', dismissInstructions, { once: true });
        }

        // Help button opens instructions
        helpBtn.addEventListener('click', showInstructions);

        function dismissInstructions() {
            overlay.classList.add('hidden');
            localStorage.setItem('pilineInstructionsSeen', 'true');
            document.documentElement.classList.add('instructions-seen');
            setTimeout(() => overlay.style.display = 'none', 400);
        }

        function showInstructions() {
            document.documentElement.classList.remove('instructions-seen');
            overlay.style.display = 'flex';
            void overlay.offsetWidth;
            overlay.classList.remove('hidden');
        }
    }

    // --- YEAR RING LOGIC ---
    function initYearRing() {
        state.years.anglePerItem = 360 / state.years.total;

        for (let i = 0; i < state.years.total; i++) {
            const year = startYear + i;
            const item = document.createElement('div');
            item.classList.add('year-item');
            item.innerText = year;
            item.dataset.index = i;
            item.dataset.value = year;

            const itemAngle = 90 + (i * state.years.anglePerItem);
            placeItem(item, itemAngle, state.years.radius);

            item.addEventListener('click', (e) => {
                if (!isDragging) {
                    e.stopPropagation();
                    selectItem('years', i);
                }
            });

            yearRing.appendChild(item);
        }
        selectItem('years', state.years.total - 1);
    }

    // --- CATEGORY RING LOGIC ---
    function initCategoryRing() {
        state.categories.anglePerItem = 360 / state.categories.total;

        categories.forEach((cat, i) => {
            const item = document.createElement('div');
            item.classList.add('category-item');
            item.innerText = cat;
            item.dataset.index = i;
            item.dataset.value = cat;

            const itemAngle = 90 + (i * state.categories.anglePerItem);
            placeItem(item, itemAngle, state.categories.radius);

            item.addEventListener('click', (e) => {
                if (!isDragging) {
                    e.stopPropagation();
                    selectItem('categories', i);
                }
            });

            categoryRing.appendChild(item);
        });

        selectItem('categories', 0);
    }

    // --- DRAG LOGIC ---
    function setupDragEvents() {
        container.addEventListener('mousedown', handleDragStart);
        window.addEventListener('mousemove', handleDragMove);
        window.addEventListener('mouseup', handleDragEnd);

        container.addEventListener('touchstart', handleDragStart, { passive: false });
        window.addEventListener('touchmove', handleDragMove, { passive: false });
        window.addEventListener('touchend', handleDragEnd);
    }

    function handleDragStart(e) {
        if (glideFrame) cancelAnimationFrame(glideFrame);

        if (innerRingContainer.contains(e.target)) {
            activeDragType = 'categories';
        } else {
            activeDragType = 'years';
        }

        isDragging = true;
        lastX = getClientX(e);
        lastTime = Date.now();
        velocity = 0;

        state[activeDragType].element.style.transition = 'none';
        toggleItemTransitions(activeDragType, false);
    }

    function handleDragMove(e) {
        if (!isDragging) return;
        if (e.type === 'touchmove') e.preventDefault();

        const currentX = getClientX(e);
        const now = Date.now();
        const dt = now - lastTime;
        const dx = currentX - lastX;

        const sensitivity = 0.5;
        state[activeDragType].currentRotation -= (dx * sensitivity);

        state[activeDragType].element.style.transform = `rotate(${state[activeDragType].currentRotation}deg)`;

        if (dt > 0) {
            const newVel = dx / dt;
            velocity = (velocity * 0.5) + (newVel * 0.5);
        }

        lastX = currentX;
        lastTime = now;

        updateActiveClasses(activeDragType, state[activeDragType].currentRotation);
    }

    function handleDragEnd() {
        if (!isDragging) return;
        isDragging = false;

        if (Math.abs(velocity) > 0.1) {
            startGlide(activeDragType);
        } else {
            snapToNearest(activeDragType);
        }

        activeDragType = null;
    }

    function startGlide(type) {
        const s = state[type];
        s.element.style.transition = 'none';
        const friction = 0.92;
        let angularVel = -velocity * 4;

        function step() {
            angularVel *= friction;
            s.currentRotation += angularVel;
            s.element.style.transform = `rotate(${s.currentRotation}deg)`;

            updateActiveClasses(type, s.currentRotation);

            if (Math.abs(angularVel) < 0.05) {
                snapToNearest(type);
            } else {
                glideFrame = requestAnimationFrame(step);
            }
        }
        glideFrame = requestAnimationFrame(step);
    }

    function getClientX(e) {
        return e.touches ? e.touches[0].clientX : e.clientX;
    }

    function snapToNearest(type) {
        const s = state[type];
        s.element.style.transition = 'transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1)';
        toggleItemTransitions(type, true);

        const rawIndex = -(s.currentRotation / s.anglePerItem);
        const roundedIndex = Math.round(rawIndex);

        const targetRotation = roundedIndex * -s.anglePerItem;

        const total = s.total;
        const normalizedIndex = ((roundedIndex % total) + total) % total;

        s.currentRotation = targetRotation;
        s.currentIndex = normalizedIndex;
        s.element.style.transform = `rotate(${targetRotation}deg)`;

        const items = s.element.querySelectorAll(type === 'years' ? '.year-item' : '.category-item');
        items.forEach(item => {
            if (parseInt(item.dataset.index) === normalizedIndex) {
                if (type === 'years') state.selection.year = item.innerText;
                if (type === 'categories') state.selection.category = item.dataset.value;
            }
        });

        updateActiveClasses(type, targetRotation);

        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(updateContent, 500);
    }

    function toggleItemTransitions(type, enable) {
        const s = state[type];
        const selector = type === 'years' ? '.year-item' : '.category-item';
        const items = s.element.querySelectorAll(selector);
        items.forEach(item => {
            item.style.transition = enable ? '' : 'none';
        });
    }

    // --- SHARED UTILITIES ---
    function placeItem(element, angleDeg, radius) {
        const angleRad = angleDeg * (Math.PI / 180);
        const x = 50 + (radius * Math.cos(angleRad));
        const y = 50 + (radius * Math.sin(angleRad));
        element.style.left = `${x}%`;
        element.style.top = `${y}%`;
    }

    function selectItem(type, targetIndex) {
        const s = state[type];
        if (glideFrame) cancelAnimationFrame(glideFrame);

        s.element.style.transition = 'transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)';
        toggleItemTransitions(type, true);

        let diff = targetIndex - s.currentIndex;
        const total = s.total;

        if (diff > total / 2) {
            diff -= total;
        } else if (diff < -total / 2) {
            diff += total;
        }

        const degreesToMove = diff * s.anglePerItem;
        s.currentRotation -= degreesToMove;
        s.currentIndex = (targetIndex < 0) ? 0 : targetIndex;

        s.element.style.transform = `rotate(${s.currentRotation}deg)`;

        const items = s.element.querySelectorAll(type === 'years' ? '.year-item' : '.category-item');
        items.forEach(item => {
            if (parseInt(item.dataset.index) === targetIndex) {
                if (type === 'years') state.selection.year = item.innerText;
                if (type === 'categories') state.selection.category = item.dataset.value;
            }
        });

        updateActiveClasses(type, s.currentRotation);

        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(updateContent, 500);
    }

    function updateActiveClasses(type, currentRotation) {
        const s = state[type];
        const selector = type === 'years' ? '.year-item' : '.category-item';
        const items = s.element.querySelectorAll(selector);

        const rawIndex = -(currentRotation / s.anglePerItem);
        const roundedIndex = Math.round(rawIndex);
        const visualIndex = ((roundedIndex % s.total) + s.total) % s.total;

        items.forEach((item) => {
            const idx = parseInt(item.dataset.index);

            if (idx === visualIndex) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }

            item.style.transform = `translate(-50%, -50%) rotate(${-currentRotation}deg)`;
        });
    }

    // --- CONTENT DISPLAY LOGIC ---
    function splitEventText(text) {
        const trimmed = text.trim();
        const colonIndex = trimmed.indexOf(':');

        if (colonIndex > 0 && colonIndex < 32) {
            const label = trimmed.slice(0, colonIndex).trim();
            const body = trimmed.slice(colonIndex + 1).trim();
            if (body.length) {
                return { label, body };
            }
        }

        return { label: '', body: trimmed };
    }

    function updateContent() {
        const year = state.selection.year;
        const category = state.selection.category;

        const accent = CATEGORY_ACCENTS[category] || CATEGORY_ACCENTS.Projects;
        if (contentArea && accent) {
            contentArea.style.setProperty('--accent-color', accent.color);
            contentArea.style.setProperty('--accent-glow', accent.glow);
        }

        // Get events for this specific year & category
        let events = [];
        if (historyDB[year] && historyDB[year][category]) {
            events = historyDB[year][category];
        }

        const countLabel = events.length === 1 ? '1 milestone' : `${events.length} milestones`;
        contentHeader.innerHTML = `
            <div class="header-kicker">Team 1676 Timeline</div>
            <div class="header-title">
                <span class="header-year">${year}</span>
                <span class="header-category">${category}</span>
            </div>
            <div class="header-meta">${countLabel}</div>
        `;
        contentBody.innerHTML = '';

        if (events.length === 0) {
            contentBody.innerHTML = '<div class="empty-message">No events found for this category.</div>';
            return;
        }

        // Create Main Visual Timeline Container
        const timelineContainer = document.createElement('div');
        timelineContainer.className = 'main-timeline';

        events.forEach((eventText, index) => {
            const itemContainer = document.createElement('div');
            itemContainer.className = 'main-timeline-item';
            itemContainer.style.setProperty('--item-delay', `${Math.min(index * 0.05, 0.4)}s`);

            const node = document.createElement('div');
            node.className = 'main-time-node';
            node.innerText = index + 1;

            const card = document.createElement('article');
            card.className = 'main-event-card';

            const { label, body } = splitEventText(eventText);
            if (label) {
                const labelEl = document.createElement('span');
                labelEl.className = 'event-label';
                labelEl.innerText = label;
                card.appendChild(labelEl);
            }

            const textEl = document.createElement('p');
            textEl.className = 'main-event-text';
            textEl.innerText = body;
            card.appendChild(textEl);

            card.addEventListener('click', () => {
                openTimelineModal(eventText);
            });

            itemContainer.appendChild(node);
            itemContainer.appendChild(card);
            timelineContainer.appendChild(itemContainer);
        });

        contentBody.appendChild(timelineContainer);
    }

    // --- MODAL LOGIC ---
    const modal = document.getElementById("topicModal");
    const span = document.getElementsByClassName("close-button")[0];
    const modalTitle = document.getElementById("modalTitle");
    const modalBody = document.getElementById("modalBody");

    span.onclick = function () {
        closeModal();
    }

    window.onclick = function (event) {
        if (event.target == modal) {
            closeModal();
        }
    }

    function closeModal() {
        modal.classList.remove('show');
        setTimeout(() => {
            modal.style.display = "none";
        }, 300);
    }

    function openTimelineModal(text) {
        modal.style.display = "block";
        void modal.offsetWidth;
        modal.classList.add('show');

        const metadata = extractMetadata(text);
        const relatedEvents = findRelatedEvents(metadata, text);

        let titleTerms = metadata.concepts;
        if (titleTerms.length === 0) {
            titleTerms = metadata.keywords.slice(0, 3);
        }

        const titleString = titleTerms.map(t =>
            t.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
        ).join(", ");

        modalTitle.innerHTML = `Timeline: <strong style="color:var(--team-gold)">${titleString || "Related Events"}</strong>`;

        renderTimeline(relatedEvents);
    }

    // --- SEARCH CONCEPTS ---
    const CONCEPTS = [
        // Projects
        "Lily the Learner", "Ready Set Speak", "Awning", "My GPS", "Rookie Bookie", "STEM Career Cards",
        "STEM Life", "Pi-Tech Academy", "Pi-Tech", "LEGOs & a Movie", "LEGOs & a Story", "Lily's Workshop",

        // Partners/Sponsors
        "Sakhikamva", "Coderina", "Orange & Rockland", "NBC", "Universal", "ShopRite", "Picatinny",
        "Crestron", "Chromalloy", "Google", "Witco", "NASA", "Boeing", "Department of Defense",
        "Don Bosco", "Pascack Valley", "Pascack Hills", "River Vale", "Montvale", "Hillsdale", "Woodcliff Lake",

        // Locations
        "South Africa", "Nigeria", "India", "Turkey", "Haiti", "China", "Taiwan", "Singapore", "Ireland", "West Virginia",

        // Events/Activities
        "Kickoff", "Brickfest", "Showcase", "Steam Fair", "GirlPOWER", "Food Pantry", "Blood Drive",
        "Toy Drive", "Varsity Letter", "Lip Dub", "White Ribbons", "Signing Day", "Advocacy Conference",
        "NAC", "WCTV", "Relay for Life", "Science Fair", "Maker Faire", "World Science Festival",

        // Key Terms
        "Safety", "Outreach", "Mentoring", "FLL", "FTC", "FRC", "Alumni", "Scholarship", "Dean's List",
        "Woodie Flowers", "Chairman", "Impact Award", "Engineering Inspiration"
    ];

    function extractMetadata(text) {
        const lowerText = text.toLowerCase();
        const foundConcepts = new Set();

        CONCEPTS.forEach(concept => {
            if (lowerText.includes(concept.toLowerCase())) {
                foundConcepts.add(concept);
            }
        });

        const stopWords = new Set([
            "a", "an", "the", "and", "or", "but", "in", "on", "at", "to", "for", "of", "with", "by", "from",
            "up", "down", "is", "was", "were", "are", "be", "has", "have", "had", "it", "its", "that", "this",
            "these", "those", "which", "who", "whom", "whose", "what", "where", "when", "why", "how", "all",
            "any", "both", "each", "few", "more", "most", "other", "some", "such", "no", "nor", "not", "only",
            "own", "loop", "i", "we", "you", "he", "she", "they", "them", "their", "our", "us", "him", "her",
            "my", "your", "his", "team", "1676", "pi-oneers", "events", "regional", "district", "championship",
            "first", "robotics", "competition", "award", "winner", "finalist", "division", "sub-division",
            "began", "started", "held", "continued", "participated", "attended", "visited", "created", "made",
            "built", "designed", "developed", "launched", "hosted", "presented", "demonstrated", "provided",
            "received", "won", "earned", "achieved", "secured", "gained", "shared", "supported", "assisted",
            "helped", "guided", "mentored", "partnered", "collaborated", "worked", "joined", "organized"
        ]);

        const cleanText = lowerText.replace(/[^\w\s]/g, ' ');
        const tokens = cleanText.split(/\s+/);
        const keywords = new Set();

        tokens.forEach(t => {
            if (t.length > 2 && !stopWords.has(t) && isNaN(t)) {
                keywords.add(t);
            }
        });

        return { concepts: Array.from(foundConcepts), keywords: Array.from(keywords) };
    }

    function findRelatedEvents(sourceMetadata, sourceText) {
        const results = [];
        const { concepts: srcConcepts, keywords: srcKeywords } = sourceMetadata;

        const CONCEPT_WEIGHT = 10;
        const KEYWORD_WEIGHT = 1;
        const MIN_SCORE = 2;

        for (const [year, categories] of Object.entries(historyDB)) {
            for (const [cat, eventList] of Object.entries(categories)) {
                eventList.forEach(eventText => {
                    const targetMetadata = extractMetadata(eventText);

                    let score = 0;
                    const matchedTerms = [];

                    srcConcepts.forEach(c => {
                        const hasConcept = targetMetadata.concepts.some(tc => tc.toLowerCase() === c.toLowerCase());
                        if (hasConcept) {
                            score += CONCEPT_WEIGHT;
                            matchedTerms.push(c);
                        }
                    });

                    srcKeywords.forEach(k => {
                        if (targetMetadata.keywords.includes(k)) {
                            score += KEYWORD_WEIGHT;
                            matchedTerms.push(k);
                        }
                    });

                    if (score >= MIN_SCORE) {
                        results.push({
                            year: year,
                            category: cat,
                            text: eventText,
                            score: score,
                            matches: matchedTerms
                        });
                    }
                });
            }
        }

        return results.sort((a, b) => {
            if (b.score !== a.score) return b.score - a.score;
            return parseInt(b.year) - parseInt(a.year);
        });
    }

    function renderTimeline(events) {
        if (events.length === 0) {
            modalBody.innerHTML = "<p>No related events found.</p>";
            return;
        }

        let html = '<div class="timeline-container-inner">';
        events.forEach(e => {
            html += `
                <div class="timeline-entry">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year-label">
                        ${e.year} 
                        <span class="timeline-cat-label">${e.category}</span>
                    </div>
                    <div class="timeline-text">${e.text}</div>
                </div>
            `;
        });
        html += '</div>';

        modalBody.innerHTML = html;

        const rawTitle = modalTitle.innerText;
        if (rawTitle.includes(":")) {
            const parts = rawTitle.split(":");
            modalTitle.innerHTML = `Timeline <strong>${parts[1]}</strong>`;
        }
    }
});