// Bento.jsx — playful bento-grid finale
function Bento() {
  return (
    <section className="w-section w-section--yellow" id="bento">
      <span className="w-ov w-ov-pin w-ov-bento1" aria-hidden></span>
      <span className="w-ov w-ov-pin w-ov-bento2" aria-hidden></span>
      <div className="w-wrap">
        <div className="w-section__head" data-reveal>
          <p className="w-eyebrow w-section__eyebrow">Ready when you are</p>
          <h2 className="w-section__title">Let&rsquo;s make<br />the <span className="w-hl">call</span></h2>
        </div>
        <div className="w-bento" data-reveal>
          <div className="w-bento__cell w-bento__a">
            <h3 style={{ fontSize: 'clamp(22px,2vw,30px)' }}>Always senior engineers, end to end.</h3>
            <div className="w-bento__big">12+ yrs<br />in data</div>
          </div>
          <a className="w-bento__cell w-bento__b" href="#contact" style={{ textDecoration: 'none', color: 'inherit' }}>
            <h3>Book a discovery call</h3>
            <span className="w-arrow" aria-hidden>↗</span>
          </a>
          <div className="w-bento__cell w-bento__c">
            <h3>Raw data → decisions</h3>
            <p>It&rsquo;s the whole point.</p>
          </div>
          <div className="w-bento__cell w-bento__d">
            <h3>Field Notes</h3>
            <span className="w-arrow" aria-hidden>↗</span>
          </div>
          <a className="w-bento__cell w-bento__b" href="mailto:hello@myra.co" style={{ textDecoration: 'none', color: 'inherit', background: 'var(--w-ink)', color: 'var(--w-yellow)' }}>
            <h3>hello@myra.co</h3>
            <p style={{ opacity: 0.8 }}>A senior engineer replies — usually within a business day.</p>
          </a>
          <div className="w-bento__cell w-bento__c" style={{ background: 'var(--w-violet)' }}>
            <h3>Find us</h3>
            <p style={{ fontWeight: 700 }}>LinkedIn · GitHub</p>
          </div>
          <div className="w-bento__cell w-bento__d" style={{ background: 'var(--w-mint)' }}>
            <h3>No guesswork.</h3>
            <p>Just decisions.</p>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Bento });