const simonStyles = {
  wrap: { padding: '120px 0', background: 'var(--yellow)', color: 'var(--ink)', position: 'relative', overflow: 'hidden' },
  head: { textAlign: 'center', maxWidth: 900, margin: '0 auto 64px', paddingBottom: 32, borderBottom: '2px solid var(--ink)' },
  chapterLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--pink-deep)', marginBottom: 18 },
  chapter: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 0.98, color: 'var(--ink)', letterSpacing: '-0.045em' },
  highlight: { background: 'var(--ink)', color: 'var(--yellow)', display: 'inline-flex', alignItems: 'center', padding: '0.10em 0.30em 0.14em', verticalAlign: '-0.32em' },
  titleLogo: { height: '1.3em', width: 'auto', display: 'block' },
  dek: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 'clamp(18px, 2vw, 22px)', lineHeight: 1.5, color: 'rgba(30,88,100,.78)', marginTop: 24, maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' },

  spread: { display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 64, alignItems: 'flex-start' },
  imgWrap: { position: 'relative' },
  img: { width: '100%', aspectRatio: '4/5', objectFit: 'cover', borderRadius: 20, display: 'block' },

  playBtn: { position: 'absolute', top: '50%', left: '50%', width: 78, height: 78, borderRadius: 999, background: 'var(--yellow)', color: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 4, border: '2px solid rgba(30,88,100,.12)', boxShadow: '0 10px 28px rgba(0,0,0,.30)', pointerEvents: 'none', transition: 'opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1)' },

  stamp: { position: 'absolute', bottom: -22, left: -22, background: 'var(--pink)', color: '#fff', padding: '14px 18px', borderRadius: 14, fontFamily: 'Caveat, cursive', fontWeight: 700, fontSize: 24, lineHeight: 1.1, transform: 'rotate(-4deg)', boxShadow: '0 14px 30px rgba(0,0,0,.18)', zIndex: 5 },

  body: { fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.7 },
  lead: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 600, fontSize: 22, color: 'var(--ink)', lineHeight: 1.45, marginBottom: 18, letterSpacing: '-0.015em' },
  pquote: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(26px, 3vw, 38px)', lineHeight: 1.15, color: 'var(--ink)', borderTop: '2px solid var(--ink)', borderBottom: '2px solid var(--ink)', padding: '20px 0', margin: '32px 0', letterSpacing: '-0.03em' },
  pquoteAttrib: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'rgba(30,88,100,.55)', marginTop: 12 },

  twoRoles: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 24, marginBottom: 24 },
  role: { padding: 16, borderRadius: 14, background: 'rgba(30,88,100,.06)', border: '1px solid rgba(30,88,100,.12)' },
  roleLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(30,88,100,.6)', marginBottom: 6 },
  roleText: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 700, fontSize: 14.5, color: 'var(--ink)', letterSpacing: '-0.01em', lineHeight: 1.35 },

  stats: { marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 },
  stat: { background: 'rgba(30,88,100,.06)', borderRadius: 14, padding: 18, border: '1px solid rgba(30,88,100,.12)' },
  statNum: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 32, color: 'var(--ink)', letterSpacing: '-0.04em', lineHeight: 1 },
  statLbl: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 12.5, color: 'rgba(30,88,100,.65)', marginTop: 6, letterSpacing: '0.02em' },

  press: { marginTop: 56, paddingTop: 28, borderTop: '1px solid rgba(30,88,100,.18)' },
  pressLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'rgba(30,88,100,.55)', marginBottom: 16 },
  pressList: { display: 'flex', gap: 18, flexWrap: 'wrap', alignItems: 'center' },
  pressItem: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 700, fontSize: 18, color: 'var(--ink)', letterSpacing: '-0.02em' },
  pressDot: { color: 'var(--pink-deep)', fontSize: 14 },
};

function SimonMedia() {
  const videoRef = React.useRef(null);
  const [hovering, setHovering] = React.useState(false);
  const [playing, setPlaying] = React.useState(false);
  const [canHover, setCanHover] = React.useState(true);

  React.useEffect(function () {
    if (window.matchMedia) setCanHover(window.matchMedia('(hover: hover) and (pointer: fine)').matches);
  }, []);

  // Desktop: reveal on hover or while playing. Touch: reveal only while playing.
  const revealed = playing || (hovering && canHover);
  // Desktop: button shows on hover. Touch: button shows on the photo (when not playing).
  const btnVisible = canHover ? hovering : !playing;

  const toggle = function () {
    const v = videoRef.current;
    if (!v) return;
    if (v.paused) {
      const p = v.play();
      if (p && p.catch) p.catch(function () {});
    } else {
      v.pause(); // pause keeps currentTime, so it resumes where they left off
    }
  };

  const btnStyle = Object.assign({}, simonStyles.playBtn, {
    opacity: btnVisible ? 1 : 0,
    transform: btnVisible ? 'translate(-50%,-50%) scale(1)' : 'translate(-50%,-50%) scale(0.78)',
  });

  return (
    <div style={simonStyles.imgWrap}>
      <div
        className={'ss-media' + (revealed ? ' is-revealed' : '')}
        onMouseEnter={function () { setHovering(true); }}
        onMouseLeave={function () { setHovering(false); }}
        onClick={toggle}
      >
        <video
          ref={videoRef}
          className="ss-media__video"
          src="assets/simon-video.mp4"
          poster="assets/simon-video-poster.jpg"
          preload="none"
          playsInline
          onPlay={function () { setPlaying(true); }}
          onPause={function () { setPlaying(false); }}
          onEnded={function () { setPlaying(false); }}
        />
        <div className="ss-media__shadow" aria-hidden="true"></div>
        <span aria-hidden="true" style={btnStyle}>
          {playing
            ? <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h4v14H6zM14 5h4v14h-4z" /></svg>
            : <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" style={{ marginLeft: 3 }}><path d="M8 5v14l11-7z" /></svg>}
        </span>
        <div className="ss-cover" aria-hidden={revealed}>
          <img src="assets/simon-book.jpg" alt="Simon Squibb with What's Your Dream?" />
        </div>
      </div>
      <div style={simonStyles.stamp} className="ss-stamp">The face of<br/>#GiveWithoutTake</div>
    </div>
  );
}

function SimonSection() {
  return (
    <section id="simon" style={simonStyles.wrap}>
      <div className="container">
        <div style={simonStyles.head}>
          <div style={simonStyles.chapterLabel}>● Up close · the co-founder &amp; the engine</div>
          <h2 style={simonStyles.chapter}>The man behind <span style={{ ...simonStyles.highlight, verticalAlign: 'baseline', padding: '0.04em 0.24em 0.12em' }}>#GiveWithoutTake</span></h2>
          <p style={simonStyles.dek}>
            Simon Squibb is the co-founder, and the audience and credibility every Dream company launches behind. The most-followed business personality in the UK, a #1 Sunday Times bestseller, and the most distributed entrepreneurship brand on the planet.
          </p>
        </div>

        <div style={simonStyles.spread} className="ss-spread">
          <SimonMedia />

          <div>
            <p style={simonStyles.lead}>
              At fifteen, Simon's dad died and he found himself homeless. He started a gardening business to survive, and that, he says, is when his entrepreneurial muscle woke up.
            </p>
            <p style={simonStyles.body}>
              Thirty years on: nineteen companies started, eighty-plus startups backed, and Fluid (the Hong Kong agency he built) sold to PwC for more money than he'll ever need. So he stopped trying to make money, and started trying to give it back.
            </p>

            <div style={simonStyles.pquote}>
              "I want to help people find their dream, and help them make it real."
              <div style={simonStyles.pquoteAttrib}>- Simon Squibb</div>
            </div>

            <p style={simonStyles.body}>
              His #1 Sunday Times bestseller <strong>What's Your Dream?</strong> and the #GiveWithoutTake movement have built a 22M+ following and made him the most-followed business personality in the UK. Inside the group he plays one role: keep building the megaphone, so every dreamer we exist to help gets heard.
            </p>

            <div style={simonStyles.twoRoles}>
              <div style={simonStyles.role}>
                <div style={simonStyles.roleLabel}>● Inside Dream</div>
                <div style={simonStyles.roleText}>The trust, audience &amp; distribution engine of the group.</div>
              </div>
              <div style={simonStyles.role}>
                <div style={simonStyles.roleLabel}>● His mission</div>
                <div style={simonStyles.roleText}>Help 10 million people start their dream business.</div>
              </div>
            </div>

            <div style={simonStyles.stats}>
              <div style={simonStyles.stat}>
                <div style={simonStyles.statNum}>22M+</div>
                <div style={simonStyles.statLbl}>Followers across platforms</div>
              </div>
              <div style={simonStyles.stat}>
                <div style={simonStyles.statNum}>200-400M+</div>
                <div style={simonStyles.statLbl}>Impressions every month</div>
              </div>
              <div style={simonStyles.stat}>
                <div style={simonStyles.statNum}>#1</div>
                <div style={simonStyles.statLbl}>Sunday Times bestseller</div>
              </div>
              <div style={simonStyles.stat}>
                <div style={simonStyles.statNum}>82+</div>
                <div style={simonStyles.statLbl}>Startup investments</div>
              </div>
            </div>

            <div style={simonStyles.press}>
              <div style={simonStyles.pressLabel}>● Featured in</div>
              <div style={simonStyles.pressList}>
                <span style={simonStyles.pressItem}>BBC</span>
                <span style={simonStyles.pressDot}>●</span>
                <span style={simonStyles.pressItem}>Sunday Times</span>
                <span style={simonStyles.pressDot}>●</span>
                <span style={simonStyles.pressItem}>Forbes</span>
                <span style={simonStyles.pressDot}>●</span>
                <span style={simonStyles.pressItem}>Entrepreneur</span>
                <span style={simonStyles.pressDot}>●</span>
                <span style={simonStyles.pressItem}>The Times</span>
                <span style={simonStyles.pressDot}>●</span>
                <span style={simonStyles.pressItem}>Tech Radar</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .ss-media { position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; perspective: 1600px; background: #15110b; cursor: pointer; box-shadow: 0 22px 50px rgba(0,0,0,.20); }
        .ss-media__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; z-index: 0; }
        .ss-media__shadow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .55s ease .08s; background: linear-gradient(212deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.16) 32%, rgba(0,0,0,0) 58%); }
        .ss-cover { position: absolute; inset: 0; z-index: 3; transition: opacity .4s ease; will-change: opacity; }
        .ss-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .ss-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,.12) 73%, rgba(255,255,255,.62) 100%); }
        /* Touch / no-hover default: simple fade back to the photo, no peel */
        .ss-media.is-revealed .ss-cover { opacity: 0; pointer-events: none; }

        /* Desktop only: the sticker peels off the top-right corner with sheen + cast shadow */
        @media (hover: hover) and (pointer: fine) {
          .ss-cover { transform-origin: 0% 0%; transition: transform .9s cubic-bezier(.34,.02,.2,1), opacity .5s ease .42s; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, opacity; }
          .ss-media.is-revealed .ss-cover { transform: translateZ(60px) rotate3d(1, 1, 0, -172deg); opacity: 0; }
          .ss-media.is-revealed .ss-cover::after { opacity: 1; }
          .ss-media.is-revealed .ss-media__shadow { opacity: 1; }
        }

        @media (prefers-reduced-motion: reduce) {
          .ss-cover { transition: opacity .3s ease !important; transform: none !important; }
          .ss-media.is-revealed .ss-cover { transform: none !important; }
        }

        @media (max-width: 980px) {
          .ss-spread { grid-template-columns: 1fr !important; gap: 48px !important; }
          .ss-stamp { left: 12px !important; bottom: 12px !important; }
        }
      `}</style>
    </section>
  );
}