// IPhoneCapture — phone-native MealMark screens used in product visuals.
// The hero uses the saved-record screen; secondary product lanes can still use
// the capture-confirmation screen.

function IPhoneCapture({
  variant = "capture",
  mealName = "Greek yogurt, walnuts, honey",
  date = "Tue \u00b7 May 26 \u00b7 9:14 AM",
  calories = 320,
  varKcal = 9,
  macros = { p: 16, c: 28, f: 14 },
  recordTrust = "self-issued",
  integrity = "unchanged",
  sourceClass = "measured",
  source = "Saved on your iPhone",
  imageUrl,
  imageAlt = "",
}) {
  const cls = (window.SOURCE_CLASS || {})[sourceClass] || { label: "Measured", tone: "teal" };
  const trust = (window.RECORD_TRUST || {})[recordTrust] || { label: "Saved by you", tone: "ghost" };
  const state = (window.INTEGRITY || {})[integrity] || { label: "Unchanged", tone: "teal" };
  const pillTone =
    cls.tone === "teal"  ? "pill pill-teal"  :
    cls.tone === "amber" ? "pill pill-amber" :
                           "pill pill-grey";
  const trustTone =
    trust.tone === "teal"  ? "pill pill-teal"  :
    trust.tone === "grey"  ? "pill pill-grey"  :
                             "pill pill-ghost";
  const stateTone =
    state.tone === "teal"  ? "pill pill-teal"  :
    state.tone === "amber" ? "pill pill-amber" :
                             "pill pill-grey";
  const showRange = sourceClass !== "unknown" && typeof varKcal === "number";
  const isRecord = variant === "record";

  return (
    <div
      className={`iphone${isRecord ? " iphone-record-mode" : ""}`}
      role="img"
      aria-label={isRecord ? "iPhone showing a saved MealMark meal record" : "iPhone showing a meal being captured for confirmation"}
    >
      <div className="iphone-bezel">
        <div className="iphone-screen">
          <div className="iphone-status">
            <span>9:14</span>
            <div className="iphone-status-right">
              <IphoneSignal />
              <IphoneWifi />
              <IphoneBattery />
            </div>
          </div>

          {isRecord ? (
            <React.Fragment>
              <div className="iphone-record-head">
                <span className="iphone-record-title">Meal record</span>
                <span className="iphone-record-date">{date}</span>
              </div>

              <div className="iphone-photo iphone-record-photo">
                {imageUrl ? (
                  <img src={imageUrl} alt={imageAlt} loading="lazy" />
                ) : (
                  <div className="iphone-photo-ph" />
                )}
                <div className="iphone-photo-pill">
                  <span className={pillTone}>
                    <span className="pill-dot" />
                    {cls.label}
                  </span>
                </div>
              </div>

              <div className="iphone-record-body">
                <div className="iphone-record-meal">{mealName}</div>
                <div className="iphone-record-kcal">
                  <span className="iphone-kcal-v">{calories.toLocaleString()}</span>
                  {showRange && <span className="iphone-kcal-pm">± {varKcal}</span>}
                  <span className="iphone-kcal-u">kcal</span>
                </div>

                <div className="iphone-record-macro-panel">
                  <span className="iphone-macros-tag">Macros · app-entered</span>
                  <span className="iphone-macros-vals">
                    P {macros.p}g · C {macros.c}g · F {macros.f}g
                  </span>
                </div>

                <div className="iphone-record-facts">
                  <div>
                    <span className="iphone-record-fact-k">Source</span>
                    <span className={trustTone}>{trust.label}</span>
                    <span className="iphone-record-fact-note">{source}</span>
                  </div>
                  <div>
                    <span className="iphone-record-fact-k">State</span>
                    <span className={stateTone}>{state.label}</span>
                    <span className="iphone-record-fact-note">Same as when it was saved</span>
                  </div>
                </div>

                <div className="iphone-backup-line">
                  <span className="seal" aria-hidden="true"><IconCheck size={9} /></span>
                  <span>Protected backup · Plus</span>
                </div>
              </div>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <div className="iphone-app-header">
                <span className="iphone-app-title">Capture</span>
                <span className="iphone-app-meta">Step 2 of 2</span>
              </div>

              <div className="iphone-photo">
                {imageUrl ? (
                  <img src={imageUrl} alt="" loading="lazy" />
                ) : (
                  <div className="iphone-photo-ph" />
                )}
                <div className="iphone-photo-pill">
                  <span className={pillTone}>
                    <span className="pill-dot" />
                    {cls.label}
                  </span>
                </div>
              </div>

              <div className="iphone-meta">
                <div className="iphone-meal">{mealName}</div>
                <div className="iphone-kcal">
                  <span className="iphone-kcal-v">{calories.toLocaleString()}</span>
                  {showRange && <span className="iphone-kcal-pm">± {varKcal}</span>}
                  <span className="iphone-kcal-u">kcal</span>
                </div>
                <div className="iphone-macros">
                  <span className="iphone-macros-tag">Macros · app-entered</span>
                  <span className="iphone-macros-vals">
                    P {macros.p}g · C {macros.c}g · F {macros.f}g
                  </span>
                </div>
              </div>

              <div className="iphone-cta">
                <button type="button" className="iphone-btn-primary" tabIndex={-1}>
                  Save record
                </button>
                <button type="button" className="iphone-btn-ghost" tabIndex={-1}>
                  Edit numbers first
                </button>
                <p className="iphone-fine">A draft until you save. Nothing is silently saved.</p>
              </div>
            </React.Fragment>
          )}
        </div>
        <div className="iphone-notch" />
        <div className="iphone-btn-mute" />
        <div className="iphone-btn-volup" />
        <div className="iphone-btn-voldn" />
        <div className="iphone-btn-power" />
      </div>
    </div>
  );
}

const IphoneSignal = () => (
  <svg width="14" height="9" viewBox="0 0 14 9" fill="currentColor" aria-hidden="true">
    <rect x="0" y="6" width="2" height="3" rx="0.5" />
    <rect x="3.5" y="4" width="2" height="5" rx="0.5" />
    <rect x="7" y="2" width="2" height="7" rx="0.5" />
    <rect x="10.5" y="0" width="2" height="9" rx="0.5" />
  </svg>
);
const IphoneWifi = () => (
  <svg width="13" height="9" viewBox="0 0 13 9" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" aria-hidden="true">
    <path d="M1 3.5 A8 8 0 0 1 12 3.5" />
    <path d="M3 5.5 A5 5 0 0 1 10 5.5" />
    <path d="M5 7.5 A2 2 0 0 1 8 7.5" />
  </svg>
);
const IphoneBattery = () => (
  <svg width="22" height="10" viewBox="0 0 22 10" fill="none" aria-hidden="true">
    <rect x="0.5" y="0.5" width="18" height="9" rx="2" stroke="currentColor" strokeWidth="0.8" opacity="0.5" />
    <rect x="2" y="2" width="13" height="6" rx="1" fill="currentColor" />
    <rect x="19.5" y="3" width="1.5" height="4" rx="0.6" fill="currentColor" opacity="0.5" />
  </svg>
);

Object.assign(window, { IPhoneCapture });