/* global React */

/* ============================================
   EXPERIENCE TIMELINE
   ============================================ */

const EXP = [
  { y: 'Mar 2023 — Present', role: 'Software Engineer', co: 'Beam Lab Pvt. Ltd.', desc: 'Develop and maintain responsive, reusable components, integrating APIs and ensuring cross-browser compatibility. Optimized web apps for speed and scalability with thorough testing.' },
  { y: 'Nov 2022 — Feb 2023', role: 'Teaching Assistant / Frontend Developer', co: 'Islington College', desc: 'Developed and maintained frontend features using Django, ensuring usability and performance. Assisted students and provided classroom support, fostering a positive learning environment.' },
  { y: 'Jul 2022 — Nov 2022', role: 'Frontend Developer', co: 'Eagle Vision IT', desc: 'Developed and maintained WordPress frontends using PHP and MySQL. Enhanced website performance and user experience through optimization, testing, and clear technical documentation.' },
];

function Experience() {
  return (
    <section id="experience" data-screen-label="05 Experience">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 30, flexWrap: 'wrap' }}>
          <div className="reveal">
            <span className="eyebrow eyebrow-dot">/ 04 — Journey</span>
            <h2 className="section-title" style={{ marginTop: 22 }}>
              Professional <span className="alt">experience</span>,<br/>
              growing with every role.
            </h2>
          </div>
          <p className="section-lead reveal reveal-delay-2" style={{ maxWidth: 380 }}>
            A path through frontend development, teaching, and WordPress —
            building stronger skills and delivering real impact at every step.
          </p>
        </div>

        <div className="exp-timeline">
          {EXP.map((e, i) => (
            <div key={i} className={`exp-item ${i % 2 === 0 ? 'left' : 'right'} reveal`}>
              {i % 2 === 0 ? (
                <>
                  <div className="exp-card cursor-target">
                    <div className="y">{e.y}</div>
                    <h4>{e.role}</h4>
                    <div className="co">@ {e.co}</div>
                    <p>{e.desc}</p>
                  </div>
                  <div className="node"></div>
                  <div className="spacer"></div>
                </>
              ) : (
                <>
                  <div className="spacer"></div>
                  <div className="node"></div>
                  <div className="exp-card cursor-target">
                    <div className="y">{e.y}</div>
                    <h4>{e.role}</h4>
                    <div className="co">@ {e.co}</div>
                    <p>{e.desc}</p>
                  </div>
                </>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   TESTIMONIALS
   ============================================ */

const TESTIMONIALS = [
  {
    body: 'Dependable and sharp. When deadlines are tight, Ashma remains calm and productive. Her ability to juggle complex state management and conduct UI/UX tests is impressive.',
    name: 'Nikesh Bhattrai', role: 'Project Manager',
    initials: 'NB', c1: '#5ef3ff', c2: '#a26bff', c3: '#ff7ad1',
  },
  {
    body: 'Working with Ashma was a fantastic experience. Her deep understanding of Vue.js and attention to UI/UX details is excellent. Her attention to detail and commitment to quality are unmatched.',
    name: 'Diya Shrestha', role: 'Senior Frontend Developer',
    initials: 'DS', c1: '#a26bff', c2: '#ff7ad1', c3: '#4d9fff',
  },
  {
    body: 'Collaborating with Ashma on SparkJoy\'s frontend was smooth and efficient. She demonstrated strong ownership of her work — contributing thoughtfully during planning sessions and following through consistently all the way to production.',
    name: 'Kripal Shrestha', role: 'Software Engineer',
    initials: 'KS', c1: '#4d9fff', c2: '#7af0c2', c3: '#5ef3ff',
  },
  {
    body: 'Ashma consistently delivers stable and well-tested features. She takes QA feedback seriously and responds quickly to bug reports.',
    name: 'Sandesh Neupane', role: 'QA Engineer',
    initials: 'SN', c1: '#ff7ad1', c2: '#a26bff', c3: '#5ef3ff',
  },
  {
    body: 'Ashma is great at integrating frontend components with backend APIs. She asks the right questions, handles edge cases gracefully, and helps ensure our contracts stay consistent across the stack.',
    name: 'Aashna Shrestha', role: 'Backend Developer',
    initials: 'AS', c1: '#7af0c2', c2: '#4d9fff', c3: '#a26bff',
  },
  {
    body: 'Ashma writes clean, build-friendly frontend code and communicates clearly about deployment needs. Her attention to performance has made our CI/CD pipelines run more reliably.',
    name: 'Pratik Amatya', role: 'DevOps Engineer',
    initials: 'PA', c1: '#5ef3ff', c2: '#ff7ad1', c3: '#7af0c2',
  },
];

function Testimonials() {
  const trackRef = React.useRef(null);
  const scrollBy = (dir) => {
    const t = trackRef.current;
    if (!t) return;
    const card = t.querySelector('.testi-card');
    const w = card ? card.getBoundingClientRect().width + 22 : 500;
    t.scrollBy({ left: dir * w, behavior: 'smooth' });
  };

  // autoplay
  React.useEffect(() => {
    const t = trackRef.current;
    if (!t) return;
    let paused = false;
    const onEnter = () => { paused = true; };
    const onLeave = () => { paused = false; };
    t.addEventListener('mouseenter', onEnter);
    t.addEventListener('mouseleave', onLeave);
    const id = setInterval(() => {
      if (paused) return;
      const max = t.scrollWidth - t.clientWidth - 4;
      if (t.scrollLeft >= max) {
        t.scrollTo({ left: 0, behavior: 'smooth' });
      } else {
        scrollBy(1);
      }
    }, 5500);
    return () => {
      clearInterval(id);
      t.removeEventListener('mouseenter', onEnter);
      t.removeEventListener('mouseleave', onLeave);
    };
  }, []);

  return (
    <section id="voices" data-screen-label="06 Voices">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 30, flexWrap: 'wrap' }}>
          <div className="reveal">
            <span className="eyebrow eyebrow-dot">/ 05 — Voices</span>
            <h2 className="section-title" style={{ marginTop: 22 }}>
              Kind words from <span className="alt">collaborators</span>.
            </h2>
          </div>
          <div className="testi-controls reveal reveal-delay-2">
            <button className="testi-arrow" onClick={() => scrollBy(-1)} aria-label="Previous">
              <Arrow className="flip" />
              <style>{`.testi-arrow .flip { transform: rotate(180deg); }`}</style>
            </button>
            <button className="testi-arrow" onClick={() => scrollBy(1)} aria-label="Next">
              <Arrow />
            </button>
          </div>
        </div>
      </div>

      <div className="container">
        <div className="testi-track reveal" ref={trackRef}>
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className="testi-card cursor-target">
              <span className="quote-mark">"</span>
              <p className="body">{t.body}</p>
              <div className="who">
                <div className="avatar" data-initials={t.initials} style={{ '--c1': t.c1, '--c2': t.c2, '--c3': t.c3 }}></div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Experience, Testimonials, EXP, TESTIMONIALS });