// Experience.jsx — Fan Card Timeline with hover + month timeline for ZhuZhu Website

const ORIGIN_YEAR = 2021, ORIGIN_MONTH = 9;
const toM = (y, m) => (y - ORIGIN_YEAR) * 12 + (m - ORIGIN_MONTH);
const TOTAL_M = toM(2026, 9);
const pct = (m) => (m / TOTAL_M) * 100;

const EXPERIENCE_CARDS = [
  {
    id: 0, type: 'Education',
    title: 'BSc International Business',
    org: 'University of Surrey / DUFE',
    period: 'Sep 2021 \u2013 Jun 2025', location: 'China',
    start: toM(2021,9), end: toM(2025,6),
    color: '#A8E6CF', blobColor: '#C8F0DF',
    illus: 'assets/ReadingSideDoodle.svg',
    photo: 'assets/graduation-photo.png',
    bullets: ['First Class Honours \u00b7 GPA 3.98/5.0', 'Outstanding Graduate of Dalian', 'First-Class Scholarship', 'President, Surrey International Student Union \u2014 500+ members'],
  },
  {
    id: 1, type: 'Internship',
    title: 'Digital Content & Analytics',
    org: 'Waterdrop Health',
    period: 'Jul \u2013 Aug 2024', location: 'Beijing, China',
    start: toM(2024,7), end: toM(2024,8),
    color: '#FFE066', blobColor: '#FFF0A0',
    illus: 'assets/MessyDoodle.svg',
    photo: 'assets/waterdrop-photo.png',
    slug: 'waterdrop',
    bullets: ['20+ health insurance short-video scripts', 'Top videos reached 5K+ likes', 'User segmentation & funnel analysis', '10,000+ followers growth across 50+ videos'],
  },
  {
    id: 2, type: 'Internship',
    title: 'Market Strategy Intern',
    org: 'IQVIA',
    period: 'Mar \u2013 Jun 2025', location: 'Shanghai, China',
    start: toM(2025,3), end: toM(2025,6),
    color: '#E8503A', blobColor: '#FFD6CC',
    illus: 'assets/FloatDoodle.svg',
    photo: 'assets/iqvia-photo.png',
    slug: 'iqvia',
    bullets: ['5 market research reports for J&J', 'Sports medicine market mapping', 'CAGR & YoY growth analysis in Excel', 'VBP & US\u2013China tariff impact assessment'],
  },
  {
    id: 3, type: 'Education',
    title: 'MSc Global Health Management',
    org: 'Imperial College London',
    period: 'Sep 2025 \u2013 present', location: 'London, UK',
    start: toM(2025,9), end: toM(2026,9),
    color: '#E8D8F0', blobColor: '#F0E8FF',
    illus: 'assets/DogJumpDoodle.svg',
    photo: 'assets/imperial-photo.png',
    bullets: ['Health Economics \u00b7 Health Systems Policy', 'Population Health Analytics', 'Global Business Challenge \u2014 Cape Town', 'Cost-Utility Analysis of Renal Mass Treatment'],
  },
  {
    id: 4, type: 'Project',
    title: 'Pro-Bono Consultant',
    org: 'Global Business Challenge',
    period: 'Feb 2026', location: 'Cape Town, South Africa',
    start: toM(2026,2), end: toM(2026,2),
    color: '#D4EEF7', blobColor: '#C8E8F4',
    illus: 'assets/PlantDoodle.svg',
    photo: 'assets/capetown-photo.png',
    slug: 'cape-town',
    bullets: ['12 structured stakeholder interviews', 'Bottom-up financial model', 'Business model pivot proposal', 'Full brand identity delivered in 1 week'],
  },
];

const MILESTONES = [
  { label: 'Sep\n2021', months: toM(2021,9) },
  { label: 'Jul–Aug\n2024', months: toM(2024,7) + 0.5 },
  { label: 'Mar\n2025', months: toM(2025,3) },
  { label: 'Jun\n2025', months: toM(2025,6) },
  { label: 'Sep\n2025', months: toM(2025,9) },
  { label: 'Feb\n2026', months: toM(2026,2) },
  { label: 'Sep\n2026', months: toM(2026,9) },
];

const getExpFanProps = (index, total, hoveredIndex) => {
  const step = 170;
  const offset = (index - (total - 1) / 2) * step;
  const isHovered = index === hoveredIndex;
  return {
    rotate: 0,
    x: offset,
    y: isHovered ? -40 : 0,
    scale: isHovered ? 1.12 : 1,
    opacity: hoveredIndex === null ? 1 : isHovered ? 1 : 0.42,
    zIndex: isHovered ? 20 : index + 1,
  };
};

const ExpCardFront = ({ card }) => (
  <div style={{ position: 'absolute', inset: 0, borderRadius: '14px', background: '#fff', boxShadow: '0 6px 20px rgba(0,0,0,0.12)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
    <div style={{ flex: 1, background: card.photo ? '#000' : card.blobColor, position: 'relative', overflow: 'hidden' }}>
      {card.photo ? (
        <img
          src={card.photo}
          alt={card.title}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center center', display: 'block' }}
        />
      ) : (
        <>
          <div style={{ position: 'absolute', width: '120px', height: '100px', background: card.color, borderRadius: '60% 40% 55% 45% / 50% 60% 40% 50%', top: '12px', left: '18px', opacity: 0.75 }}></div>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: `url('${card.illus}')`, backgroundSize: '140px auto', backgroundPosition: 'center center', backgroundRepeat: 'no-repeat', zIndex: 1 }}></div>
        </>
      )}
    </div>
    <div style={{ padding: '10px 12px 12px', background: '#fff', flexShrink: 0 }}>
      <div style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '9px', color: '#bbb', marginBottom: '3px' }}>{card.period}</div>
      <div style={{ fontFamily: "'Space Grotesk',sans-serif", fontWeight: 800, fontSize: '12px', color: card.type === 'Education' ? '#E8503A' : '#000', lineHeight: 1.2, marginBottom: '2px' }}>{card.title}</div>
      <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '10px', color: '#777', lineHeight: 1.3 }}>{card.org}</div>
      <div style={{ marginTop: '8px', height: '3px', borderRadius: '2px', background: card.color }}></div>
    </div>
  </div>
);

const ExpCardBack = ({ card }) => {
  const isDark = card.color === '#E8503A';
  const tc = isDark ? '#fff' : '#000';
  const mc = isDark ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,0.55)';
  const dc = isDark ? 'rgba(255,255,255,0.38)' : 'rgba(0,0,0,0.32)';
  const bc = isDark ? 'rgba(255,255,255,0.88)' : 'rgba(0,0,0,0.75)';
  return (
    <div style={{ position: 'absolute', inset: 0, borderRadius: '14px', background: card.color, boxShadow: '0 24px 60px rgba(0,0,0,0.22)', overflow: 'hidden', padding: '20px 18px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
      <div style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: '10px', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', background: isDark ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.09)', color: tc, padding: '3px 9px', borderRadius: '2px', alignSelf: 'flex-start' }}>{card.type}</div>
      <div style={{ fontFamily: "'Space Grotesk',sans-serif", fontWeight: 800, fontSize: '16px', color: card.type === 'Education' && !isDark ? '#E8503A' : tc, lineHeight: 1.2 }}>{card.title}</div>
      <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '13px', color: mc }}>{card.org}</div>
      <div style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '10px', color: dc, marginBottom: '2px' }}>{card.period}  {card.location}</div>
      <div style={{ height: '1px', background: isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.10)', flexShrink: 0 }}></div>
      <ul style={{ paddingLeft: '16px', display: 'flex', flexDirection: 'column', gap: '7px', flex: 1, overflow: 'hidden' }}>
        {card.bullets.map((b, i) => (
          <li key={i} style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '12px', lineHeight: 1.55, color: bc }}>{b}</li>
        ))}
      </ul>
    </div>
  );
};

const ExpCard = ({ card, index, total, hoveredIndex, onHover }) => {
  const fan = getExpFanProps(index, total, hoveredIndex);
  const isHovered = hoveredIndex === card.id;
  const Wrapper = card.slug ? 'a' : 'div';
  const wrapperProps = card.slug ? { href: `project.html?id=${card.slug}` } : {};
  return (
    <Wrapper
      {...wrapperProps}
      onMouseEnter={() => onHover(card.id)}
      onMouseLeave={() => onHover(null)}
      style={{
        position: 'absolute',
        width: '240px', height: '320px',
        left: '50%', top: '50%',
        marginLeft: '-120px', marginTop: '-160px',
        transformOrigin: 'center bottom',
        transform: `rotate(${fan.rotate}deg) translateX(${fan.x}px) translateY(${fan.y}px) scale(${fan.scale})`,
        opacity: fan.opacity,
        zIndex: fan.zIndex,
        transition: 'transform 0.38s cubic-bezier(0.23,1,0.32,1), opacity 0.25s ease',
        cursor: card.slug ? 'pointer' : 'default',
        textDecoration: 'none', color: 'inherit', display: 'block',
      }}
    >
      <div style={{ position: 'absolute', inset: 0, opacity: isHovered ? 0 : 1, transition: 'opacity 0.22s ease', pointerEvents: isHovered ? 'none' : 'auto' }}>
        <ExpCardFront card={card} />
      </div>
      <div style={{ position: 'absolute', inset: 0, opacity: isHovered ? 1 : 0, transition: 'opacity 0.22s ease', pointerEvents: isHovered ? 'auto' : 'none' }}>
        <ExpCardBack card={card} />
      </div>
    </Wrapper>
  );
};

const ExpTimeline = ({ hoveredIndex }) => {
  const hovCard = hoveredIndex !== null ? EXPERIENCE_CARDS.find(c => c.id === hoveredIndex) : null;
  return (
    <div style={{ padding: '0 80px', position: 'relative' }}>
      <div style={{ position: 'relative', height: '2px', background: '#ddd', borderRadius: '1px' }}>
        {hovCard && (
          <div style={{
            position: 'absolute',
            left: `${pct(hovCard.start)}%`,
            width: `${Math.max(pct(hovCard.end - hovCard.start), 1.5)}%`,
            top: '-3px', height: '8px',
            background: hovCard.color,
            borderRadius: '4px',
            border: '2px solid #000',
            transition: 'left 0.3s ease, width 0.3s ease',
          }}></div>
        )}
        {MILESTONES.map((m, i) => {
          const isActive = hovCard && m.months >= hovCard.start && m.months <= hovCard.end;
          return (
            <div key={i} style={{ position: 'absolute', left: `${pct(m.months)}%`, transform: 'translateX(-50%)', top: '-5px' }}>
              <div style={{
                width: isActive ? '12px' : '7px',
                height: isActive ? '12px' : '7px',
                borderRadius: '50%',
                background: isActive ? hovCard.color : '#ccc',
                border: isActive ? '2px solid #000' : '2px solid #ccc',
                marginLeft: isActive ? '-2px' : '0',
                marginTop: isActive ? '-2px' : '0',
                transition: 'all 0.25s ease',
              }}></div>
              <div style={{
                position: 'absolute', top: '14px',
                transform: 'translateX(-50%)',
                fontFamily: "'IBM Plex Mono',monospace",
                fontSize: '9px', lineHeight: 1.3,
                color: isActive ? '#000' : '#bbb',
                fontWeight: isActive ? 700 : 400,
                whiteSpace: 'pre', textAlign: 'center',
                transition: 'color 0.25s',
              }}>{m.label}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const Experience = () => {
  const [hovered, setHovered] = React.useState(null);
  return (
    <section id="experience" style={{ borderTop: '2px solid #000', background: '#F5F5F0', paddingTop: '48px' }}>
      <div style={{ padding: '0 48px', maxWidth: '1280px', margin: '0 auto' }}>
        <div style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: '12px', fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', color: '#E8503A', marginBottom: '8px' }}>My Journey</div>
        <h2 style={{ fontFamily: "'Space Grotesk',sans-serif", fontWeight: 800, fontSize: 'clamp(40px,5vw,64px)', letterSpacing: '-0.02em', color: '#000', lineHeight: 1.0, margin: 0 }}>Education &amp; Internship</h2>
        <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '16px', color: '#666', marginTop: '10px', lineHeight: 1.6 }}>Hover a card to reveal details &amp; click to know more.</p>
      </div>

      {/* Fan area — centered */}
      <div style={{ position: 'relative', height: '360px', marginTop: '8px' }}>
        {EXPERIENCE_CARDS.map((card, i) => (
          <ExpCard key={card.id} card={card} index={i} total={EXPERIENCE_CARDS.length} hoveredIndex={hovered} onHover={setHovered} />
        ))}
      </div>

      {/* Month timeline */}
      <div style={{ padding: '8px 0 64px' }}>
        <ExpTimeline hoveredIndex={hovered} />
      </div>
    </section>
  );
};

Object.assign(window, { Experience });