// Projects.jsx — ZhuZhu Website Projects Section

const ProjectCard = ({ title, period, org, description, tags }) => {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      style={{
        ...projStyles.card,
        ...(hovered ? projStyles.cardHover : {}),
      }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <div style={projStyles.cardHeader}>
        <div style={projStyles.org}>{org}</div>
        <div style={projStyles.period}>{period}</div>
      </div>
      <div style={projStyles.title}>{title}</div>
      <p style={projStyles.desc}>{description}</p>
      <div style={projStyles.tags}>
        {tags.map(t => (
          <span key={t} style={{
            ...projStyles.tag,
            ...(hovered ? projStyles.tagHover : {}),
          }}>{t}</span>
        ))}
      </div>
    </div>
  );
};

const Projects = () => {
  const projects = [
    {
      title: 'Bristol-Myers Squibb Colombia — Strategic Growth Plan',
      period: 'Mar 2026',
      org: 'Imperial College Business School',
      description: 'Five-year commercial growth strategy for BMS Colombia across immuno-oncology, CAR-T cell therapy, and cardiovascular. Conducted market entry analysis on EPS reimbursement, INVIMA regulatory pathways, disease burden and the competitive landscape, applying PESTEL, SWOT and VRIO frameworks. Proposed a cross-border CAR-T model via Fiocruz partnership cutting cost, plus outcome-based payer-risk mechanisms. Built scenario financials projecting 8–10% annual revenue growth and operating breakeven by late 2027.',
      tags: ['Market Access', 'Strategy', 'Financial Modelling'],
    },
    {
      title: 'Commercial Strategy consultant — Mzi\'s Garden',
      period: 'Feb 2026',
      org: 'Imperial College London',
      description: 'Pro-bono business consultant for a local Cape Town business. Led 12 structured stakeholder interviews, built a bottom-up financial model, and proposed a business model pivot from product sales to a paid immersive garden experience. Delivered full brand identity, pricing poster, and live website within one week.',
      tags: ['Financial Modelling', 'Business Strategy', 'Pricing', 'Marketing Strategy', 'Primary Research'],
    },
    {
      title: 'Cost-Utility Analysis of Small Renal Mass Treatment',
      period: 'Oct – Nov 2025',
      org: 'Imperial College London',
      description: 'Built an Excel cost model drawing on NHS data to quantify full-pathway direct medical costs of cryoablation vs. robotic nephrectomy. Calculated QALYs using EQ-5D-5L utility values; derived ICER and Net Monetary Benefit against NICE thresholds. Constructed a decision tree model and completed one-way sensitivity analysis under an AI-assisted biopsy scenario.',
      tags: ['Health Economics', 'Decision Tree', 'Sensitivity Analysis'],
    },
    {
      title: 'WeChat Mini Programme — Student Records',
      period: 'Oct 2021 – Oct 2024',
      org: 'Surrey International Institution Student Union',
      description: 'As President, digitised student record management for 500+ members. Catalogued archival data into a database and developed a WeChat Mini Programme enabling students to independently track their application information.',
      tags: ['Product Development', 'Data Management', 'Leadership'],
    },
  ];

  return (
    <section id="projects" style={projStyles.section}>
      {/* Background blobs */}
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
        <div style={{ position: 'absolute', width: '280px', height: '240px', background: '#FFF0A0', borderRadius: '55% 45% 50% 50%/45% 55% 45% 55%', top: '-50px', right: '80px', opacity: 0.55 }}></div>
        <div style={{ position: 'absolute', width: '160px', height: '150px', background: '#C8F0DF', borderRadius: '50%', bottom: '160px', left: '40px', opacity: 0.4 }}></div>
      </div>
      <div style={projStyles.inner}>
        <div style={projStyles.sectionLabel}>Projects</div>
        <h2 style={projStyles.h2}>Selected work.</h2>
        <div style={projStyles.grid}>
          {projects.map((p, i) => (
            <ProjectCard key={i} {...p} />
          ))}
        </div>
        <div style={projStyles.illustRow}>
          <img src="assets/MessyDoodle.svg" alt="" style={projStyles.illus} />
        </div>
      </div>
    </section>
  );
};

const projStyles = {
  section: { borderTop: '2px solid #000', padding: '96px 48px 32px', background: '#fff', position: 'relative' },
  inner: { maxWidth: '1280px', margin: '0 auto', position: 'relative', zIndex: 1 },
  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 0 48px',
  },
  grid: { display: 'flex', flexDirection: 'column', gap: '0' },
  card: {
    padding: '32px 0', borderBottom: '2px solid #000',
    display: 'flex', flexDirection: 'column', gap: '12px',
    transition: 'background 150ms', cursor: 'default',
  },
  cardHover: { background: '#F5F5F0', padding: '32px 24px', margin: '0 -24px' },
  cardHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  org: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '12px', fontWeight: 700,
    letterSpacing: '0.10em', textTransform: 'uppercase', color: '#E8503A',
  },
  period: {
    fontFamily: "'IBM Plex Mono', monospace", fontSize: '12px', color: '#888',
  },
  title: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: '22px',
    color: '#000', lineHeight: 1.2,
  },
  desc: {
    fontFamily: "'DM Sans', sans-serif", fontSize: '15px', lineHeight: 1.7,
    color: '#444', margin: 0,
  },
  tags: { display: 'flex', flexWrap: 'wrap', gap: '8px' },
  tag: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '11px', fontWeight: 600,
    letterSpacing: '0.07em', textTransform: 'uppercase',
    border: '2px solid #000', borderRadius: '2px',
    padding: '3px 10px', background: 'transparent', color: '#000',
    transition: 'background 150ms, color 150ms',
  },
  tagHover: { background: '#000', color: '#fff' },
  illustRow: { display: 'flex', justifyContent: 'flex-end', marginTop: '-90px', marginBottom: '0', opacity: 0.15, pointerEvents: 'none', position: 'relative', zIndex: 0 },
  illus: { width: '260px', height: 'auto' },
};

Object.assign(window, { Projects, ProjectCard });