class ExecutiveTimeline extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 2rem 0;
        }
        .timeline-container {
          max-width: 800px;
          margin: 0 auto;
        }
        .timeline-header {
          text-align: center;
          margin-bottom: 3rem;
        }
        .timeline-header h2 {
          font-family: 'Playfair Display', serif;
          font-size: 2.25rem;
          color: var(--primary-800);
          margin-bottom: 1rem;
        }
        .timeline-item {
          position: relative;
          padding-left: 3rem;
          margin-bottom: 3rem;
          border-left: 2px solid var(--primary-300);
        }
        .timeline-item:last-child {
          margin-bottom: 0;
        }
        .timeline-item:before {
          content: '';
          position: absolute;
          left: -11px;
          top: 0;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: var(--primary-600);
          border: 4px solid white;
          box-shadow: 0 0 0 3px var(--primary-200);
        }
        .timeline-date {
          font-weight: 600;
          color: var(--primary-600);
          margin-bottom: 0.5rem;
        }
        .timeline-title {
          font-size: 1.25rem;
          font-weight: 600;
          color: var(--primary-900);
          margin-bottom: 0.5rem;
        }
        .timeline-company {
          font-weight: 500;
          color: var(--primary-700);
          margin-bottom: 0.75rem;
        }
        .timeline-description {
          color: var(--primary-500);
          line-height: 1.6;
        }
      </style>
      <div class="timeline-container">
        <div class="timeline-header">
          <h2 class="executive-heading">Professional Journey</h2>
          <p>My career milestones and achievements</p>
        </div>
        
        <div class="timeline-item">
          <div class="timeline-date">2020 - Present</div>
          <h3 class="timeline-title">Senior Executive Assistant</h3>
          <div class="timeline-company">Global Tech Solutions</div>
          <p class="timeline-description">
            Supporting C-level executives with strategic planning, complex scheduling, 
            and high-level administrative support for international operations.
          </p>
        </div>
        
        <div class="timeline-item">
          <div class="timeline-date">2016 - 2020</div>
          <h3 class="timeline-title">Executive Assistant</h3>
          <div class="timeline-company">Innovate Corp</div>
          <p class="timeline-description">
            Managed executive calendars, coordinated international travel, 
            and acted as liaison between executives and stakeholders.
          </p>
        </div>
        
        <div class="timeline-item">
          <div class="timeline-date">2012 - 2016</div>
          <h3 class="timeline-title">Administrative Coordinator</h3>
          <div class="timeline-company">Strategic Partners LLC</div>
          <p class="timeline-description">
            Provided comprehensive support to multiple executives, 
            organized corporate events, and implemented new filing systems.
          </p>
        </div>
      </div>
    `;
  }
}

customElements.define('executive-timeline', ExecutiveTimeline);