// "Sunday starts here." — full-bleed two-column. Left: edge-to-edge food
// photo. Right: cream panel with stacked fields and a full-width gold CTA.
function EmailCapture() {
  const [done, setDone] = React.useState(false);
  return (
    <section className="capture">
      <div className="capture__img" role="img" aria-label="The Garden Chicken with The Press juices"
           style={{ backgroundImage: "url(assets/hero-02-garden.jpg)" }}/>

      <div className="capture__panel">
        <div className="capture__inner">
          <h2 className="capture__title">Sunday starts here.</h2>
          <p className="capture__sub">The weekly menu. Every Tuesday at 9am.</p>

          {done ? (
            <div className="capture__done">
              <span className="capture__done-line">Your place is held.</span>
              <span className="capture__done-meta">The first menu lands on Tuesday at 9am.</span>
            </div>
          ) : (
            <form className="capture__form" onSubmit={(e)=>{e.preventDefault(); setDone(true);}}>
              <input className="capture__field" type="text"  placeholder="First name" required/>
              <input className="capture__field" type="email" placeholder="Email"      required/>
              <button className="btn btn--gold capture__cta" type="submit">Secure my place</button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
window.EmailCapture = EmailCapture;