// Landing sections, part 1: Locked History · Guesses · Record Anatomy
// Each section commits to its own composition. No three-identical-card pattern.

// ----- 2. Locked history --------------------------------------------------
// Category framing: ordinary trackers are SaaS rows. MealMark turns meals into
// portable records you can keep, open, and restore.
function SectionLockedHistory() {
  return (
    <section className="section section-locked" id="sec-how" aria-labelledby="sec-locked">
      <div className="container">
        <div className="locked-head io-rise">
          <div className="eyebrow">The category problem</div>
          <h2 id="sec-locked" className="h-section" style={{ maxWidth: 880 }}>
            Trackers are good at logging.<br/>
            <em>Bad</em> at letting you leave.
          </h2>
          <p className="body-lg" style={{ marginTop: 18, maxWidth: 640 }}>
            Most food apps keep your history useful only while you stay inside
            them. MealMark turns each meal into a portable record you can keep,
            open, and restore.
          </p>
        </div>

        <div className="silo-compare io-rise" data-io-delay="120">
          <div className="silo-side silo-side-tracker" aria-labelledby="silo-tracker-h">
            <div className="silo-side-label">
              <span className="pill pill-grey">
                <span className="pill-icon"><IconLock size={11} /></span>
                Ordinary tracker
              </span>
            </div>
            <h3 id="silo-tracker-h" className="silo-side-h">
              Your meals stay useful only inside their account.
            </h3>
            <div className="silo-stack" aria-hidden="true">
              <div className="silo-card silo-card-1">
                <div className="silo-card-name">TrackerCo</div>
                <div className="silo-card-rows">
                  <span /><span /><span /><span /><span />
                </div>
                <div className="silo-card-foot">
                  <span className="silo-lock"><IconLock size={11} /></span>
                  <span>account-bound</span>
                </div>
              </div>
              <div className="silo-card silo-card-2">
                <div className="silo-card-name">CalorieApp</div>
                <div className="silo-card-rows">
                  <span /><span /><span /><span />
                </div>
                <div className="silo-card-foot">
                  <span className="silo-lock"><IconLock size={11} /></span>
                  <span>subscription gate</span>
                </div>
              </div>
              <div className="silo-card silo-card-3">
                <div className="silo-card-name">FoodLog+</div>
                <div className="silo-card-rows">
                  <span /><span /><span /><span /><span /><span />
                </div>
                <div className="silo-card-foot">
                  <span className="silo-lock"><IconLock size={11} /></span>
                  <span>CSV at best</span>
                </div>
              </div>
            </div>
            <ul className="silo-list">
              <li><span className="silo-mark silo-mark-x" aria-hidden="true">&times;</span> Can disappear if the app shuts down</li>
              <li><span className="silo-mark silo-mark-x" aria-hidden="true">&times;</span> Can lock useful history after a subscription ends</li>
              <li><span className="silo-mark silo-mark-x" aria-hidden="true">&times;</span> No portable record. No reader outside the app</li>
            </ul>
          </div>

          <div className="silo-divider" aria-hidden="true">
            <span className="silo-divider-rail" />
            <span className="silo-divider-pill">vs.</span>
            <span className="silo-divider-rail" />
          </div>

          <div className="silo-side silo-side-mark" aria-labelledby="silo-mark-h">
            <div className="silo-side-label">
              <span className="pill pill-teal">
                <span className="pill-icon"><IconCheck size={11} /></span>
                MealMark record
              </span>
            </div>
            <h3 id="silo-mark-h" className="silo-side-h">
              A meal record you keep, open, and move.
            </h3>
            <div className="silo-record" aria-hidden="true">
              <div className="silo-record-corner silo-record-corner-tl" />
              <div className="silo-record-corner silo-record-corner-tr" />
              <div className="silo-record-corner silo-record-corner-bl" />
              <div className="silo-record-corner silo-record-corner-br" />
            <div className="silo-record-head">
              <span className="silo-record-glyph"><IconFile size={18} /></span>
              <div className="silo-record-name">
                  <span className="mono">greek-yogurt.record</span>
                  <span className="silo-record-sub">Self-issued &middot; measured</span>
              </div>
                <span className="seal" style={{ marginLeft: "auto" }} aria-hidden="true">
                  <IconCheck size={11} />
                </span>
              </div>
              <div className="silo-record-body">
                <div className="silo-record-row">
                  <span className="silo-record-k">Meal</span>
                  <span className="silo-record-v">Greek yogurt, walnuts, honey</span>
                </div>
                <div className="silo-record-row">
                  <span className="silo-record-k">kcal</span>
                  <span className="silo-record-v">320 <span className="silo-record-pm">&plusmn;9</span></span>
                </div>
                <div className="silo-record-row">
                  <span className="silo-record-k">Source</span>
                  <span className="silo-record-v">Saved on iPhone &middot; signed</span>
                </div>
              </div>
              <div className="silo-record-foot">
                <span className="silo-record-action"><IconDownload size={12} /> Export</span>
                <span className="silo-record-action"><IconFile size={12} /> Share</span>
                <span className="silo-record-action"><IconCheck size={12} /> Restore</span>
              </div>
            </div>
            <ul className="silo-list">
              <li><span className="silo-mark silo-mark-tick" aria-hidden="true"><IconCheck size={10} /></span> Survives the app, the phone, and the subscription</li>
              <li><span className="silo-mark silo-mark-tick" aria-hidden="true"><IconCheck size={10} /></span> Built to open outside one SaaS account</li>
              <li><span className="silo-mark silo-mark-tick" aria-hidden="true"><IconCheck size={10} /></span> Keeps source and confidence visible years later</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- 3. Guesses don't become records ------------------------------------
function SectionGuesses() {
  return (
    <section className="section section-guesses" aria-labelledby="sec-guesses">
      <div className="container">
        <div className="guesses-grid">
          <div className="guesses-copy io-rise">
            <div className="eyebrow">The discipline</div>
            <h2 id="sec-guesses" className="h-section">
              A guess isn’t a record.
            </h2>
            <p className="body-lg" style={{ marginTop: 18, maxWidth: 520 }}>
              Saving preserves the estimate. It does not pretend the estimate
              became truth.
            </p>
            <ul className="check-list" style={{ marginTop: 24 }}>
              <li>
                <span className="check-dot" aria-hidden="true">
                  <IconCheck size={11} />
                </span>
                <span>Drafts stay drafts until you save.</span>
              </li>
              <li>
                <span className="check-dot" aria-hidden="true">
                  <IconCheck size={11} />
                </span>
                <span>Saved estimates keep their <span className="mono">±</span> range and source label.</span>
              </li>
            </ul>
            <div className="guess-note">
              <div className="guess-note-row">
                <span className="pill pill-amber"><span className="pill-dot" /> Draft</span>
                <span className="guess-note-arrow">→</span>
                <span className="pill pill-teal"><span className="pill-dot" /> Saved</span>
              </div>
              <p>
                The record becomes part of your meal history. The confidence
                stays visible, and corrections become amendments.
              </p>
            </div>
          </div>

          <div className="guesses-stack io-rise" data-io-delay="140">
            <div className="guesses-state">
              <div className="guesses-state-label">
                <span className="pill pill-teal">
                  <span className="pill-dot" />
                  Saved · still estimated
                </span>
                <span className="guesses-state-text">Same range. Now saved.</span>
              </div>
              <RecordCard
                meal="Salmon poke bowl, avocado, rice"
                date="Sat 7:42 PM"
                calories={612}
                varKcal={95}
                macros={{ p: 31, c: 68, f: 22 }}
                recordTrust="self-issued"
                integrity="unchanged"
                sourceClass="estimated"
                imageUrl="assets/stock/hero-poke-bowl.jpg"
                imageAlt="Salmon poke bowl with avocado, rice, mango, and cucumber"
                size="compact"
                compactProvenance
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ArrowDown() {
  return (
    <svg width="22" height="34" viewBox="0 0 22 34" fill="none"
         stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M11 2v28" />
      <path d="M3 22l8 8 8-8" />
    </svg>
  );
}

// ----- 4. Record anatomy: three trust axes --------------------------------
function SectionAnatomy() {
  return (
    <section className="section section-anatomy" aria-labelledby="sec-anatomy">
      <div className="container">
        <div className="anatomy-head io-rise">
          <div className="eyebrow">The trust model</div>
          <h2 id="sec-anatomy" className="h-section" style={{ maxWidth: 760 }}>
            Know what you&rsquo;re looking at.
          </h2>
          <p className="body-lg" style={{ marginTop: 16, maxWidth: 640 }}>
            MealMark separates where a record came from, whether it changed,
            and how confident the number is.
          </p>
        </div>

        <div className="anatomy-grid io-rise" data-io-delay="120">
          <AnatomyAxis
            n="01"
            title="Source"
            sub="Where the record came from"
            states={[
              { tone: "teal",  label: "Verified",     note: "From a known brand or restaurant.",          icon: <IconCheck size={11} /> },
              { tone: "ghost", label: "Saved by you", note: "Saved on your iPhone at the moment of capture.", icon: null },
              { tone: "grey",  label: "Read-only",    note: "We can\u2019t confirm where this came from. Calm, not alarming.", icon: <IconLock size={11} /> },
            ]}
          />
          <AnatomyAxis
            n="02"
            title="State"
            sub="Whether it\u2019s been touched"
            states={[
              { tone: "teal",  label: "Unchanged",    note: "Same as when it was saved.",          icon: <IconCheck size={11} /> },
              { tone: "amber", label: "Edited",       note: "Edits are shown, never hidden.",       icon: <IconAlertTri size={11} /> },
              { tone: "grey",  label: "Cannot check", note: "We can\u2019t check this right now.",  icon: <IconLock size={11} /> },
            ]}
          />
          <AnatomyAxis
            n="03"
            title="Number confidence"
            sub="How the kcal got onto the record"
            highlight
            states={[
              { tone: "teal",  label: "Brand",     note: "From the brand\u2019s own menu data. Narrowest ±.", icon: <IconCheck size={11} /> },
              { tone: "teal",  label: "Weighed",   note: "You weighed it during capture. Narrow ±.",   icon: <IconScale size={11} /> },
              { tone: "amber", label: "Estimated", note: "Guessed from a photo or quick entry. Wide ±.", icon: <IconAlertTri size={11} /> },
              { tone: "grey",  label: "No claim",  note: "No data, no confidence range.",             icon: null },
            ]}
          />
        </div>

        <p className="anatomy-foot subtle io-rise" data-io-delay="220">
          The first two answers describe <em>the file itself</em>. The third
          describes <em>the calorie number inside it</em>, as a real <span className="mono">±</span>
          range you can see. Protein, carbs, fat are saved with every record
          but app-entered — they’re shown separately, never as part of the
          verified seal.
        </p>
      </div>
    </section>
  );
}

function AnatomyAxis({ n, title, sub, states, highlight = false }) {
  return (
    <div className={"anatomy-axis" + (highlight ? " is-highlight" : "")}>
      <div className="anatomy-axis-head">
        <span className="anatomy-axis-n mono">{n}</span>
        <div>
          <div className="h-card">{title}</div>
          <div className="subtle" style={{ fontSize: 14, marginTop: 2 }}>{sub}</div>
        </div>
      </div>
      <ul className="anatomy-states">
        {states.map((s, i) => (
          <li key={i} className="anatomy-state">
            <span className={`pill pill-${s.tone}`}>
              {s.icon && <span className="pill-icon">{s.icon}</span>}
              {s.label}
            </span>
            <span className="anatomy-state-note">{s.note}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { SectionLockedHistory, SectionGuesses, SectionAnatomy });