// Hero.jsx — ZhuZhu Website Hero Section with real headshot + blob backgrounds

const Hero = ({ onNav }) => {
  return (
    <section id="hero" style={heroStyles.section}>

      {/* Background blobs */}
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
        <div style={{ position: 'absolute', width: '420px', height: '380px', background: '#FFF0A0', borderRadius: '60% 40% 55% 45% / 50% 60% 40% 50%', top: '-60px', right: '120px', opacity: 0.7 }}></div>
        <div style={{ position: 'absolute', width: '260px', height: '240px', background: '#FFD6CC', borderRadius: '40% 60% 50% 50% / 60% 40% 60% 40%', bottom: '60px', right: '40px', opacity: 0.55 }}></div>
        <div style={{ position: 'absolute', width: '180px', height: '160px', background: '#C8F0DF', borderRadius: '50%', top: '120px', left: '30px', opacity: 0.4 }}></div>
      </div>

      {/* Left: text */}
      <div style={{ ...heroStyles.left, position: 'relative', zIndex: 1 }}>
        <h1 style={heroStyles.h1}>
          Zhu<span style={{ color: '#E8503A' }}>Zhu</span>
        </h1>
        <p style={heroStyles.tagline}>
          Keep Rolling the Dice.
        </p>
        <div style={heroStyles.meta}>
          <span style={heroStyles.metaItem}>London, UK</span>
          <span style={heroStyles.dot}>·</span>
          <span style={heroStyles.metaItem}>Imperial College London</span>
          <span style={heroStyles.dot}>·</span>
          <span style={{ ...heroStyles.metaItem, color: '#E8503A', fontWeight: 700 }}>MSc Global Health Management</span>
        </div>
        <div style={heroStyles.btns}>
          <button
            style={heroStyles.btnPrimary}
            onMouseEnter={e => { e.currentTarget.style.background = '#E8503A'; e.currentTarget.style.borderColor = '#E8503A'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#000'; e.currentTarget.style.borderColor = '#000'; }}
            onClick={() => onNav && onNav('experience')}
          >
            Explore my journey
          </button>
          <button
            style={heroStyles.btnOutline}
            onMouseEnter={e => { e.currentTarget.style.background = '#000'; e.currentTarget.style.color = '#fff'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#000'; }}
            onClick={() => onNav && onNav('contact')}
          >
            Get in Touch
          </button>
        </div>
        <div style={heroStyles.quickLinks}>
          <a
            href="https://www.linkedin.com/in/zhu-zhu-955aa8383"
            target="_blank"
            rel="noopener noreferrer"
            style={heroStyles.quickLink}
            onMouseEnter={e => { e.currentTarget.style.color = '#E8503A'; e.currentTarget.style.borderColor = '#E8503A'; }}
            onMouseLeave={e => { e.currentTarget.style.color = '#000'; e.currentTarget.style.borderColor = '#000'; }}
          >
            <span style={heroStyles.quickLinkIcon} aria-hidden="true">in</span>
            LinkedIn Profile
          </a>
          <a
            href="assets/ZhuZhu-CV.pdf"
            download="ZhuZhu-CV.pdf"
            target="_blank"
            rel="noopener"
            style={heroStyles.quickLink}
            onMouseEnter={e => { e.currentTarget.style.color = '#E8503A'; e.currentTarget.style.borderColor = '#E8503A'; }}
            onMouseLeave={e => { e.currentTarget.style.color = '#000'; e.currentTarget.style.borderColor = '#000'; }}
          >
            <span style={{ ...heroStyles.quickLinkIcon, background: '#FFE066' }} aria-hidden="true">↓</span>
            Download CV (PDF)
          </a>
        </div>
      </div>

      {/* Right: headshot */}
      <div style={{ ...heroStyles.right, position: 'relative', zIndex: 1 }}>
        <div style={heroStyles.headshotWrap}>
          <img
            src="assets/headshot.jpg"
            alt="Zhu Zhu"
            style={heroStyles.headshotImg}
          />
          {/* Floating illustration */}
          <div style={heroStyles.illustFloat}>
            <img src="assets/FloatDoodle.svg" alt="" style={{ width: '120px', height: 'auto', opacity: 0.6 }} />
          </div>
        </div>
      </div>
    </section>
  );
};

const heroStyles = {
  section: {
    minHeight: '100vh', display: 'flex', alignItems: 'center',
    padding: '96px 48px 64px', gap: '48px', maxWidth: '1280px', margin: '0 auto',
    position: 'relative',
  },
  left: { flex: '1 1 500px', display: 'flex', flexDirection: 'column', gap: '20px' },
  label: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '13px', fontWeight: 700,
    letterSpacing: '0.12em', textTransform: 'uppercase', color: '#E8503A',
  },
  h1: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800,
    fontSize: 'clamp(72px, 8vw, 120px)', lineHeight: 1.0,
    letterSpacing: '-0.03em', color: '#000', margin: 0,
  },
  tagline: {
    fontFamily: "'DM Sans', sans-serif", fontSize: '20px', lineHeight: 1.6,
    color: '#333', fontWeight: 400,
  },
  meta: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' },
  metaItem: { fontFamily: "'DM Sans', sans-serif", fontSize: '14px', color: '#555', fontWeight: 500 },
  dot: { color: '#bbb', fontSize: '14px' },
  btns: { display: 'flex', gap: '12px', flexWrap: 'wrap', marginTop: '8px' },
  btnPrimary: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: '14px',
    background: '#000', color: '#fff', border: '2px solid #000', borderRadius: '6px',
    padding: '13px 30px', cursor: 'pointer', transition: 'background 150ms, border-color 150ms',
    letterSpacing: '0.02em',
  },
  btnOutline: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: '14px',
    background: 'transparent', color: '#000', border: '2px solid #000', borderRadius: '6px',
    padding: '13px 30px', cursor: 'pointer', transition: 'background 150ms, color 150ms',
    letterSpacing: '0.02em',
  },
  quickLinks: {
    display: 'flex', gap: '20px', flexWrap: 'wrap', marginTop: '6px',
    alignItems: 'center',
  },
  quickLink: {
    fontFamily: "'DM Sans', sans-serif", fontSize: '14px', fontWeight: 600,
    color: '#000', textDecoration: 'none',
    display: 'inline-flex', alignItems: 'center', gap: '8px',
    borderBottom: '2px solid #000', paddingBottom: '2px',
    transition: 'color 150ms, border-color 150ms',
  },
  quickLinkIcon: {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    width: '22px', height: '22px', background: '#C8E8F4', color: '#000',
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800, fontSize: '11px',
    borderRadius: '4px', letterSpacing: 0,
  },
  right: { flex: '0 0 420px', display: 'flex', justifyContent: 'center', alignItems: 'center' },
  headshotWrap: { position: 'relative' },
  headshotImg: {
    width: '340px', height: '420px',
    objectFit: 'cover', objectPosition: '90% top',
    borderRadius: '4px',
    display: 'block',
  },
  illustFloat: {
    position: 'absolute', bottom: '-24px', right: '-40px',
  },
};

Object.assign(window, { Hero });