// About.jsx — ZhuZhu Website About Section with mint background + blobs

const About = () => {
  const skills = ['Health Economics', 'Market Strategy', 'Data Analytics', 'Financial Modelling', 'HTA', 'Market Access', 'Market Intelligence', 'Data Visualization'];
  const tools = ['Excel', 'SQL', 'SPSS', 'PowerPoint', 'Power BI'];

  return (
    <section id="about" style={aboutStyles.section}>

      {/* Background blobs */}
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', width: '300px', height: '260px', background: '#A8E6CF', borderRadius: '50% 40% 60% 50% / 40% 55% 45% 60%', top: '-40px', right: '-60px', opacity: 0.45 }}></div>
        <div style={{ position: 'absolute', width: '180px', height: '160px', background: '#FFD6CC', borderRadius: '50%', bottom: '40px', left: '60px', opacity: 0.35 }}></div>
      </div>

      <div style={{ ...aboutStyles.inner, position: 'relative', zIndex: 1 }}>
        <div style={aboutStyles.header}>
          <div style={aboutStyles.sectionLabel}>About</div>
          <h2 style={aboutStyles.h2}>Hi, I'm Zhu Zhu.</h2>
        </div>

        <div style={aboutStyles.body}>
          <div style={aboutStyles.textCol}>
            <p style={aboutStyles.p}>
              I'm a global health management student at Imperial College London with a First Class BSc in International Business Management. I bridge the worlds of healthcare policy, market analytics, and strategic consulting.
            </p>
            <p style={aboutStyles.p}>
              Previously, I worked at IQVIA in Shanghai, producing market research across sports medicine, sutures and oncology for Johnson &amp; Johnson. Before that, I led content strategy and performance analytics at Waterdrop Health in Beijing.
            </p>
            <p style={aboutStyles.p}>
              I'm fluent in English and Mandarin, and deeply comfortable with quantitative analysis, stakeholder research, and turning complexity into clear narratives.
            </p>
            <div style={aboutStyles.skillsLabel}>Skills</div>
            <div style={aboutStyles.skills}>
              {skills.map(s => (
                <span key={s} style={aboutStyles.tag}>{s}</span>
              ))}
            </div>
            <div style={aboutStyles.skillsLabel}>Tools</div>
            <div style={aboutStyles.skills}>
              {tools.map(s => (
                <span key={s} style={aboutStyles.tagTool}>{s}</span>
              ))}
            </div>
          </div>

          <div style={aboutStyles.illustCol}>
            <img src="assets/ReadingSideDoodle.svg" alt="" style={aboutStyles.illus} />
          </div>
        </div>
      </div>
    </section>
  );
};

const aboutStyles = {
  section: {
    borderTop: '2px solid #000', padding: '96px 48px',
    background: '#fff', position: 'relative',
  },
  inner: { maxWidth: '1280px', margin: '0 auto' },
  header: { marginBottom: '48px' },
  sectionLabel: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '12px', fontWeight: 700,
    letterSpacing: '0.15em', textTransform: 'uppercase', color: '#E8503A', marginBottom: '10px',
  },
  h2: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800,
    fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 1.0,
    letterSpacing: '-0.02em', color: '#000', margin: 0,
  },
  body: { display: 'flex', gap: '64px', alignItems: 'flex-start', flexWrap: 'wrap' },
  textCol: { flex: '1 1 400px', display: 'flex', flexDirection: 'column', gap: '20px' },
  p: { fontFamily: "'DM Sans', sans-serif", fontSize: '17px', lineHeight: 1.75, color: '#222', fontWeight: 400, margin: 0 },
  skillsLabel: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '11px', fontWeight: 700,
    letterSpacing: '0.12em', textTransform: 'uppercase', color: '#555', marginTop: '8px',
  },
  skills: { display: 'flex', flexWrap: 'wrap', gap: '8px' },
  tag: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '12px', fontWeight: 600,
    letterSpacing: '0.06em', textTransform: 'uppercase',
    borderRadius: '2px', padding: '4px 12px',
    background: '#FFF0A0', color: '#000',
  },
  tagPrimary: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '12px', fontWeight: 800,
    letterSpacing: '0.08em', textTransform: 'uppercase',
    borderRadius: '2px', padding: '4px 12px',
    background: '#000', color: '#FFF0A0',
  },
  tagTool: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '12px', fontWeight: 600,
    letterSpacing: '0.06em', textTransform: 'uppercase',
    borderRadius: '2px', padding: '4px 12px',
    background: '#C8EFD4', color: '#0F3D24',
  },
  illustCol: { flex: '0 0 300px', display: 'flex', justifyContent: 'center', alignItems: 'center' },
  illus: { width: '280px', height: 'auto', opacity: 0.85 },
};

Object.assign(window, { About });