import React from 'react';
import Image from 'next/image';
import { experiences } from '@/data/experience';
import styles from './ExperienceSection.module.css';

export const ExperienceSection: React.FC = () => {
  return (
    <section id="experience" className={styles.experienceSection}>
      <div className="content-container">
        <div className="section-header">
          <div className="section-title-wrap">
            <h2 className="section-title">Where I&apos;ve Made an Impact</h2>
            <div className="section-underline" />
          </div>
        </div>

        {/* Timeline Container */}
        <div className={styles.timeline}>
          {experiences.map((item, index) => (
            <article key={item.id} className={styles.timelineItem}>
              {/* Vertical Spine & Node Indicator */}
              <div className={styles.spineColumn}>
                <div
                  className={`${styles.nodeDot} ${
                    item.isCurrent ? styles.nodeCurrent : ''
                  }`}
                  aria-hidden="true"
                />
                {index < experiences.length - 1 && (
                  <div className={styles.verticalLine} />
                )}
              </div>

              {/* Item Content Layout: Left Identity & Right Details */}
              <div className={styles.itemContent}>
                {/* Left Identity Column */}
                <div className={styles.identityCol}>
                  <div className={styles.metaRow}>
                    <span className={styles.dateBadge}>{item.date}</span>
                    <div className={styles.locationWrapper}>
                      <svg
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        aria-hidden="true"
                        className={styles.locationIcon}
                      >
                        <path
                          fill="currentColor"
                          fillRule="evenodd"
                          d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 4.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"
                          clipRule="evenodd"
                        />
                      </svg>
                      <span className={styles.locationText}>{item.location}</span>
                    </div>
                  </div>

                  <div className={styles.roleIdentityRow}>
                    <div className={styles.logoContainer}>
                      <Image
                        src={item.logo}
                        alt={`${item.company} logo`}
                        width={72}
                        height={72}
                        className={styles.logoImage}
                      />
                    </div>

                    <div className={styles.roleTitles}>
                      <h3 className={styles.roleTitle}>{item.role}</h3>
                      <div className={styles.companyName}>{item.company}</div>
                    </div>
                  </div>
                </div>

                {/* Right Details Column */}
                <div className={styles.detailsCol}>
                  <p className={styles.summary}>{item.summary}</p>

                  <ul className={styles.bulletList}>
                    {item.bullets.map((bullet, bIdx) => (
                      <li key={bIdx} className={styles.bulletItem}>
                        <span className={styles.bulletDot} aria-hidden="true" />
                        <span className={styles.bulletText}>{bullet}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};