// SectionProductLoop — the "how it works" loop the brand was missing.
// Five moments, one record: Capture → Review → Save → Backup → Restore.
// Each step is a real product moment in a small device/web frame, not an
// icon-tile. Different content per frame, same chrome — different surface
// per phase (iPhone for capture-side, web tile for backup/restore-side).

function SectionProductLoop() {
  return (
    <section className="section section-loop" aria-labelledby="sec-loop">
      <div className="container">
        <div className="loop-head io-rise">
          <div className="eyebrow">How it works</div>
          <h2 id="sec-loop" className="h-section" style={{ maxWidth: 800 }}>
            Five moments. One record.
          </h2>
          <p className="body-lg" style={{ marginTop: 16, maxWidth: 620 }}>
            Capture on iPhone. Review the number. Save the record. Back it
            up. Restore it when your device changes.
          </p>
        </div>

        <ol className="loop-grid io-rise" data-io-delay="120">
          <LoopStep n="01" title="Capture" caption="Snap a photo or type the meal.">
            <MiniIphone>
              <div className="mi-app-title">Capture</div>
              <div className="mi-photo">
                <img src="assets/stock/hero-poke-bowl.jpg" alt="" loading="lazy" />
              </div>
              <div className="mi-line">What did you eat?</div>
              <div className="mi-input-stub">Salmon poke bowl, avocado…</div>
            </MiniIphone>
          </LoopStep>

          <LoopArrow />

          <LoopStep n="02" title="Review" caption="kcal comes with a real ± range.">
            <MiniIphone>
              <div className="mi-app-title">Review</div>
              <div className="mi-meal">Salmon poke bowl, avocado, rice</div>
              <div className="mi-kcal">
                <span className="mi-kcal-v">612</span>
                <span className="mi-kcal-pm">± 18</span>
                <span className="mi-kcal-u">kcal</span>
              </div>
              <span className="pill pill-teal" style={{ alignSelf: "flex-start" }}>
                <span className="pill-icon"><IconScale size={10} /></span>
                Weighed
              </span>
              <div className="mi-tag">Macros · app-entered</div>
            </MiniIphone>
          </LoopStep>

          <LoopArrow />

          <LoopStep n="03" title="Save" caption="It joins your meal history.">
            <MiniIphone tone="saved">
              <div className="mi-saved">
                <div className="mi-saved-tick" aria-hidden="true">
                  <IconCheck size={28} />
                </div>
                <div className="mi-saved-h">Saved</div>
                <div className="mi-saved-sub">Salmon poke bowl, avocado, rice</div>
                <div className="mi-saved-meta">Tue 9:14 AM · #437</div>
              </div>
            </MiniIphone>
          </LoopStep>

          <LoopArrow />

          <LoopStep n="04" title="Backup" caption="Encrypted, in the background.">
            <MiniWebTile>
              <div className="mw-cloud" aria-hidden="true">
                <IconCloud size={28} />
              </div>
              <div className="mw-status-h">Backed up</div>
              <div className="mw-status-sub">just now · client-encrypted</div>
              <div className="mw-list">
                <div className="mw-row"><span>Today</span><span>2</span></div>
                <div className="mw-row"><span>Month</span><span>26</span></div>
                <div className="mw-row mw-row-foot"><span>Total</span><span>169</span></div>
              </div>
            </MiniWebTile>
          </LoopStep>

          <LoopArrow />

          <LoopStep n="05" title="Restore" caption="Restore on any device.">
            <MiniWebTile>
              <div className="mw-device-row" aria-hidden="true">
                <span className="mw-device mw-device-old" title="Old phone">
                  <IconPhone size={20} />
                </span>
                <span className="mw-device-arrow" aria-hidden="true">→</span>
                <span className="mw-device mw-device-new" title="New device">
                  <IconLaptop size={22} />
                </span>
              </div>
              <div className="mw-status-h">Restored</div>
              <div className="mw-status-sub">169 records · 5 months</div>
              <div className="mw-restore-line">
                <span className="mw-pulse" aria-hidden="true" />
                <span>Same meal history. Same kit. Any device.</span>
              </div>
            </MiniWebTile>
          </LoopStep>
        </ol>

        <p className="loop-foot subtle io-rise" data-io-delay="240">
          You see meals, kcal with a visible <span className="mono">±</span>,
          and a backup that runs quietly.
        </p>
      </div>
    </section>
  );
}

// --- Building blocks ------------------------------------------------------

function LoopStep({ n, title, caption, children }) {
  return (
    <li className="loop-step">
      <div className="loop-step-screen">{children}</div>
      <div className="loop-step-meta">
        <div className="loop-step-n mono">{n}</div>
        <div className="loop-step-title">{title}</div>
        <div className="loop-step-caption">{caption}</div>
      </div>
    </li>
  );
}

function LoopArrow() {
  return (
    <li className="loop-arrow" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none"
           stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 12h16" />
        <path d="M14 6l6 6-6 6" />
      </svg>
    </li>
  );
}

function MiniIphone({ children, tone }) {
  return (
    <div className={"mini-iphone" + (tone === "saved" ? " is-saved" : "")} role="img">
      <div className="mini-iphone-bezel">
        <div className="mini-iphone-screen">
          <div className="mini-iphone-notch" />
          <div className="mini-iphone-content">{children}</div>
        </div>
      </div>
    </div>
  );
}

function MiniWebTile({ children }) {
  return (
    <div className="mini-web" role="img">
      <div className="mini-web-chrome">
        <span /><span /><span />
      </div>
      <div className="mini-web-body">{children}</div>
    </div>
  );
}

// --- Tiny icons used only in the loop -------------------------------------

const IconCloud = ({ size = 24 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
       stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M7 18a4.5 4.5 0 0 1-.6-8.95A6 6 0 0 1 18 10.5a3.5 3.5 0 1 1 0 7H7z" />
  </svg>
);
const IconPhone = ({ size = 20 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
       stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <rect x="6.5" y="2.5" width="11" height="19" rx="2" />
    <path d="M11 19h2" />
  </svg>
);
const IconLaptop = ({ size = 22 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
       stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="5" width="18" height="11" rx="1.5" />
    <path d="M2 19h20" />
  </svg>
);

Object.assign(window, { SectionProductLoop });