function Problem() {
  const bodyBg = (window.__resources && window.__resources.bodyArtisan) || '/assets/photos/body-artisan.webp';
  return (
    <section className="prob">
      <style>{`
        .prob { padding: 72px var(--gutter); }
        @media (min-width: 768px) { .prob { padding: 96px var(--gutter); } }
        .prob-grid { display: grid; gap: 40px; grid-template-columns: 1fr; max-width: 1080px; margin: 0 auto; align-items: center; }
        @media (min-width: 768px) { .prob-grid { grid-template-columns: 1fr 1.1fr; gap: 64px; } }
        .prob-img { aspect-ratio: 4/5; background-size: cover; background-position: center; }
        .prob h2 { margin-bottom: 18px; max-width: 16ch; }
        .prob .lede { font-size: 17px; line-height: 1.6; color: var(--color-text); margin-bottom: 18px; }
        .prob .preface { font-size: 15px; color: var(--color-text-muted); margin-bottom: 14px; }
        .prob ul { padding: 0; margin: 0 0 18px 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
        .prob ul li { padding-left: 20px; position: relative; font-size: 16px; line-height: 1.55; }
        .prob ul li::before { content: "—"; position: absolute; left: 0; color: var(--color-primary); font-weight: 600; }
        .prob .quiet { font-size: 15px; color: var(--color-text-muted); margin-bottom: 14px; font-style: italic; }
        .prob .bold-line { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.3; max-width: 30ch; }
      `}</style>
      <div className="prob-grid">
        <div className="prob-img" style={{ backgroundImage: `url('${bodyBg}')` }} aria-hidden="true"></div>
        <div>
          <h2>What's the fastest way to start baking sourdough at home?</h2>
          <p className="lede">Let me guess. You want that first crackle, that proud little ear, that "I made this" moment.</p>
          <p className="preface">Here's the part no one says out loud:</p>
          <ul>
            <li>Starting from scratch can take weeks.</li>
            <li>Daily feedings feel like a part-time job.</li>
            <li>"Is that mold?" becomes a nightly Google.</li>
          </ul>
          <p className="quiet">Half the attempts… don't make it.</p>
          <p className="bold-line">The quiet truth? You don't have to start from scratch. Begin with a heritage culture that wakes up fast, rises reliably, and lets you bake real bread — sooner.</p>
        </div>
      </div>
    </section>
  );
}
window.Problem = Problem;