class CustomTimeline extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .timeline {
                    position: relative;
                    max-width: 1200px;
                    margin: 0 auto;
                }
                
                .timeline::after {
                    content: '';
                    position: absolute;
                    width: 4px;
                    background: linear-gradient(to bottom, #4f46e5, #ec4899);
                    top: 0;
                    bottom: 0;
                    left: 50%;
                    margin-left: -2px;
                    border-radius: 4px;
                }
                
                .timeline-item {
                    padding: 10px 40px;
                    position: relative;
                    width: 50%;
                    box-sizing: border-box;
                }
                
                .timeline-item::after {
                    content: '';
                    position: absolute;
                    width: 24px;
                    height: 24px;
                    right: -12px;
                    background: linear-gradient(135deg, #4f46e5, #ec4899);
                    border: 3px solid #0f172a;
                    top: 15px;
                    border-radius: 50%;
                    z-index: 1;
                }
                
                .left {
                    left: 0;
                }
                
                .right {
                    left: 50%;
                }
                
                .left::before {
                    content: " ";
                    height: 0;
                    position: absolute;
                    top: 22px;
                    width: 0;
                    z-index: 1;
                    right: 30px;
                    border: medium solid rgba(255, 255, 255, 0.1);
                    border-width: 10px 0 10px 10px;
                    border-color: transparent transparent transparent rgba(255, 255, 255, 0.1);
                }
                
                .right::before {
                    content: " ";
                    height: 0;
                    position: absolute;
                    top: 22px;
                    width: 0;
                    z-index: 1;
                    left: 30px;
                    border: medium solid rgba(255, 255, 255, 0.1);
                    border-width: 10px 10px 10px 0;
                    border-color: transparent rgba(255, 255, 255, 0.1) transparent transparent;
                }
                
                .right::after {
                    left: -12px;
                }
                
                .timeline-content {
                    padding: 20px 30px;
                    background: rgba(30, 41, 59, 0.7);
                    border-radius: 12px;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    backdrop-filter: blur(10px);
                    -webkit-backdrop-filter: blur(10px);
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                }
                
                .timeline-content:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
                }
                
                .timeline-date {
                    color: #ec4899;
                    font-weight: 600;
                    margin-bottom: 8px;
                }
                
                .timeline-title {
                    font-size: 1.25rem;
                    font-weight: 600;
                    margin-bottom: 8px;
                    color: white;
                }
                
                .timeline-desc {
                    color: rgba(255, 255, 255, 0.8);
                    line-height: 1.6;
                }
                
                @media screen and (max-width: 768px) {
                    .timeline::after {
                        left: 31px;
                    }
                    
                    .timeline-item {
                        width: 100%;
                        padding-left: 70px;
                        padding-right: 25px;
                    }
                    
                    .timeline-item::before {
                        left: 60px;
                        border: medium solid rgba(255, 255, 255, 0.1);
                        border-width: 10px 10px 10px 0;
                        border-color: transparent rgba(255, 255, 255, 0.1) transparent transparent;
                    }
                    
                    .left::after, .right::after {
                        left: 19px;
                    }
                    
                    .right {
                        left: 0%;
                    }
                }
            </style>
            
            <div class="timeline">
                <div class="timeline-item left animate-on-scroll">
                    <div class="timeline-content">
                        <div class="timeline-date">2015</div>
                        <h3 class="timeline-title">Foundation</h3>
                        <p class="timeline-desc">SuperNova was founded by a group of passionate developers with a vision to push the boundaries of technology and create innovative solutions.</p>
                    </div>
                </div>
                
                <div class="timeline-item right animate-on-scroll">
                    <div class="timeline-content">
                        <div class="timeline-date">2017</div>
                        <h3 class="timeline-title">First Major Project</h3>
                        <p class="timeline-desc">Developed a groundbreaking AI solution for a Fortune 500 company, establishing our reputation in the industry.</p>
                    </div>
                </div>
                
                <div class="timeline-item left animate-on-scroll">
                    <div class="timeline-content">
                        <div class="timeline-date">2019</div>
                        <h3 class="timeline-title">Global Expansion</h3>
                        <p class="timeline-desc">Opened offices in three new countries and grew our team to over 50 world-class developers and engineers.</p>
                    </div>
                </div>
                
                <div class="timeline-item right animate-on-scroll">
                    <div class="timeline-content">
                        <div class="timeline-date">2021</div>
                        <h3 class="timeline-title">Education Initiative</h3>
                        <p class="timeline-desc">Launched our coding education platform to train the next generation of developers with cutting-edge courses.</p>
                    </div>
                </div>
                
                <div class="timeline-item left animate-on-scroll">
                    <div class="timeline-content">
                        <div class="timeline-date">2023</div>
                        <h3 class="timeline-title">Quantum Computing Division</h3>
                        <p class="timeline-desc">Established a new research division focused on quantum computing and its applications in software development.</p>
                    </div>
                </div>
            </div>
        `;
    }
}

customElements.define('custom-timeline', CustomTimeline);