// Hobbies.jsx — ZhuZhu Website Hobbies Section

const Hobbies = () => {
  const items = [
    {
      title: 'Skiing',
      desc: 'From Northeast China to Alps in Europe \u2014 I love the speed, the cold air, and the quiet at the top of the mountain.',
      color: '#D4EEF7',
      blobs: [
        { w: 130, h: 115, bg: '#C8E8F4', radius: '60% 40% 55% 45% / 50% 60% 40% 50%', top: '-20px', left: '-22px', opacity: 0.85 },
        { w: 70, h: 65, bg: '#FFD6CC', radius: '50%', bottom: '-18px', right: '-12px', opacity: 0.75 },
      ],
      photo: 'assets/skiing-photo.png',
      photoPos: 'center top',
    },
    {
      title: 'Hiking',
      desc: 'Trail walking clears my head in a way nothing else does. I enjoy multi-day treks \u2014 the slower the pace, the more I notice. Do you have any recommendations for hiking trails?',
      color: '#A8E6CF',
      blobs: [
        { w: 110, h: 100, bg: '#C8F0DF', radius: '55% 45% 50% 50% / 50% 55% 45% 50%', top: '-24px', right: '-18px', opacity: 0.85 },
        { w: 85, h: 75, bg: '#FFF0A0', radius: '60% 40% 55% 45% / 50% 60% 40% 50%', bottom: '-20px', left: '-22px', opacity: 0.7 },
      ],
      photo: 'assets/hiking-photo.png',
      photoPos: 'center center',
    },
    {
      title: 'Cooking',
      desc: 'Cooking is how I unwind and explore. I experiment with Chinese home cooking and Mediterranean flavours \u2014 the kitchen is my creative space.',
      color: '#FFE066',
      blobs: [
        { w: 100, h: 90, bg: '#FFF0A0', radius: '60% 40% 55% 45% / 50% 60% 40% 50%', top: '-20px', left: '-18px', opacity: 0.9 },
        { w: 75, h: 70, bg: '#E8D8F0', radius: '50%', bottom: '-16px', right: '-18px', opacity: 0.75 },
      ],
      photo: 'assets/cooking-spread.png',
      photoPos: 'center center',
    },
  ];

  return (
    <section id="hobbies" style={hobbyStyles.section}>
      {/* Top-right hero illustration — small, faded, hugging the corner */}
      <img
        src="assets/hobby-doodle.png"
        alt=""
        style={hobbyStyles.topRightIllus}
      />

      <div style={{ ...hobbyStyles.inner, position: 'relative', zIndex: 1 }}>
        <div style={hobbyStyles.sectionLabel}>Beyond Work</div>
        <h2 style={hobbyStyles.h2}>Outside the Office</h2>
        <p style={hobbyStyles.sub}>When I'm not analysing health systems data, you'll find me on a mountain, a trail, or in the kitchen.</p>

        <div style={hobbyStyles.cards}>
          {items.map((item, i) => (
            <div key={i} style={hobbyStyles.card}>
              <div style={hobbyStyles.photoWrap}>
                {/* Organic blobs sitting around the photo */}
                {item.blobs.map((b, bi) => (
                  <div
                    key={bi}
                    style={{
                      position: 'absolute',
                      width: b.w + 'px', height: b.h + 'px',
                      background: b.bg,
                      borderRadius: b.radius,
                      top: b.top, left: b.left, right: b.right, bottom: b.bottom,
                      opacity: b.opacity,
                      zIndex: 0,
                    }}
                  ></div>
                ))}
                {/* The photo */}
                <img
                  src={item.photo}
                  alt={item.title}
                  style={{
                    ...hobbyStyles.photoImg,
                    objectPosition: item.photoPos,
                  }}
                />
              </div>
              <div style={{
                display: 'inline-block', background: item.color,
                borderRadius: '2px', padding: '3px 10px',
                fontFamily: "'Space Grotesk', sans-serif",
                fontSize: '10px', fontWeight: 700,
                letterSpacing: '0.10em', textTransform: 'uppercase',
                color: '#000', marginBottom: '10px', alignSelf: 'flex-start',
              }}>{item.title}</div>
              <div style={hobbyStyles.cardTitle}>{item.title}</div>
              <div style={hobbyStyles.cardDesc}>{item.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const hobbyStyles = {
  section: {
    borderTop: '2px solid #000', padding: '64px 48px 72px',
    background: '#F5F5F0', position: 'relative', overflow: 'hidden',
  },
  topRightIllus: {
    position: 'absolute',
    top: '-30px', right: '-30px',
    width: '210px', height: 'auto',
    opacity: 0.45,
    zIndex: 0,
    pointerEvents: 'none',
  },
  inner: { maxWidth: '1280px', margin: '0 auto' },
  sectionLabel: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '12px', fontWeight: 700,
    letterSpacing: '0.15em', textTransform: 'uppercase', color: '#E8503A', marginBottom: '8px',
  },
  h2: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800,
    fontSize: 'clamp(36px, 4.6vw, 56px)', lineHeight: 1.02,
    letterSpacing: '-0.02em', color: '#000', margin: 0,
  },
  sub: {
    fontFamily: "'DM Sans', sans-serif", fontSize: '16px', color: '#555',
    lineHeight: 1.55, marginTop: '10px', marginBottom: '36px', maxWidth: '560px',
  },
  cards: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
    gap: '48px 40px',
    alignItems: 'start',
  },
  card: { display: 'flex', flexDirection: 'column' },
  photoWrap: {
    position: 'relative',
    width: '100%',
    aspectRatio: '4 / 5',
    marginBottom: '22px',
  },
  photoImg: {
    position: 'absolute', inset: 0, zIndex: 1,
    width: '100%', height: '100%',
    objectFit: 'cover',
    borderRadius: '8px',
    display: 'block',
  },
  cardTitle: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800,
    fontSize: '22px', color: '#000', marginBottom: '8px', letterSpacing: '-0.01em',
  },
  cardDesc: {
    fontFamily: "'DM Sans', sans-serif", fontSize: '15px',
    lineHeight: 1.65, color: '#444',
  },
};

Object.assign(window, { Hobbies });