'use client';
import { motion } from 'framer-motion';
import { experience } from '@/content/experience';
import styles from './Experience.module.scss';

export default function Experience() {
  return (
    <section className={styles.section} id="experience">
      <div className={styles.container}>
        <motion.header
          className={styles.header}
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
        >
          <span className={styles.eyebrow}>Experience</span>
          <h2 className={styles.heading}>
            Where I've worked<span className={styles.dot}>.</span>
          </h2>
        </motion.header>

        <div className={styles.grid}>
          {experience.map((item, i) => (
            <motion.article
              key={item.id}
              className={styles.card}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-20px' }}
              transition={{ duration: 0.45, delay: i * 0.1, ease: [0.22, 0.61, 0.36, 1] }}
            >
              <div className={styles.cardHeader}>
                <span className={styles.period}>{item.period}</span>
                <h3 className={styles.role}>{item.role}</h3>
                {item.companyUrl ? (
                  <a href={item.companyUrl} className={styles.company} target="_blank" rel="noopener noreferrer">
                    {item.company} ↗
                  </a>
                ) : (
                  <span className={styles.company}>{item.company}</span>
                )}
              </div>
              <p className={styles.desc}>{item.description}</p>
              <ul className={styles.highlights}>
                {item.highlights.map((h, j) => (
                  <li key={j}>{h}</li>
                ))}
              </ul>
            </motion.article>
          ))}
        </div>
      </div>
    </section>
  );
}