// Landing sections, part 2: Open a record · Web dashboard · Recovery kit
// · Pricing · Final CTA · Footer

// ----- 5. Open a record: valid vs untrusted -------------------------------
function SectionOpenRecord() {
  return (
    <section className="section section-open" aria-labelledby="sec-open">
      <div className="container">
        <div className="open-head io-rise">
          <div className="eyebrow">Sharing without screenshots</div>
          <h2 id="sec-open" className="h-section" style={{ maxWidth: 800 }}>
            Share a record, not a blurry screenshot.
          </h2>
          <p className="body-lg" style={{ marginTop: 16, maxWidth: 680 }}>
            Save the meal once, keep the source and confidence visible, and
            share a clean read-only view with a friend, trainer, dietitian, or
            future you. If MealMark can&rsquo;t check a file, it opens calmly without
            pretending to trust it.
          </p>
        </div>

        <div className="open-grid">
          <div className="open-col io-rise" data-io-delay="100">
            <div className="open-col-head">
              <span className="open-col-label">Your saved dish</span>
              <span className="open-col-sub">A record you can share.</span>
            </div>
            <RecordCard
              meal="Salmon poke bowl, avocado, rice"
              date={"Tue \u00b7 May 26 \u00b7 1:08 PM"}
              calories={612}
              varKcal={18}
              macros={{ p: 31, c: 68, f: 22 }}
              recordTrust="self-issued"
              integrity="unchanged"
              sourceClass="measured"
              imageUrl="assets/stock/hero-poke-bowl.jpg"
              imageAlt="Salmon poke bowl with avocado, rice, mango, and cucumber"
            />
          </div>

          <div className="open-col io-rise" data-io-delay="200">
            <div className="open-col-head">
              <span className="open-col-label">Opened elsewhere</span>
              <span className="open-col-sub">Safe when source cannot be checked.</span>
            </div>
            <RecordCard
              meal="Salmon poke bowl, avocado, rice"
              date={"Tue \u00b7 May 26 \u00b7 1:08 PM"}
              source="We can’t confirm where it came from"
              calories={612}
              macros={{ p: 31, c: 68, f: 22 }}
              recordTrust="untrusted"
              integrity="cannot-verify"
              sourceClass="unknown"
              imageUrl="assets/stock/hero-poke-bowl.jpg"
              imageAlt="Salmon poke bowl with avocado, rice, mango, and cucumber"
            />
          </div>
        </div>

        <div className="open-notes io-rise" data-io-delay="280">
          <div className="open-note">
            <span className="open-note-k mono">No trust accent</span>
            <span className="open-note-v">in the untrusted state. The trust accent is reserved for things we can actually trust.</span>
          </div>
          <div className="open-note">
            <span className="open-note-k mono">No confidence range</span>
            <span className="open-note-v">on an unverifiable file. We make no claim about a number whose origin we can’t name.</span>
          </div>
          <div className="open-note">
            <span className="open-note-k mono">No panic state</span>
            <span className="open-note-v">on an unverifiable file. Untrusted is a state, not an emergency. The file opens; we just don’t vouch for it.</span>
          </div>
        </div>

        <div className="open-howto io-rise" data-io-delay="340">
          <span className="label" style={{ color: "var(--ink)" }}>The everyday use case</span>
          <p>
            You create the record. A friend, trainer, dietitian, or family
            member can open the clean version without needing your phone,
            screenshots, or a rebuilt story from memory.
          </p>
        </div>
      </div>
    </section>
  );
}

// ----- 6. Web: searchable meal history, export, ownership -----------------
function SectionDashboard() {
  return (
    <section className="section section-dashboard" id="sec-web" aria-labelledby="sec-dash">
      <div className="container">
        <div className="dash-grid">
            <div className="dash-copy io-rise">
            <div className="eyebrow">Web history</div>
            <h2 id="sec-dash" className="h-section">
              Search every meal you saved.
            </h2>
            <p className="body-lg" style={{ marginTop: 18, maxWidth: 540 }}>
              Capture on iPhone. Review on web when you need more control:
              search by meal or month, export records, share a clean proof view,
              and restore access when devices change.
            </p>
            <ul className="check-list" style={{ marginTop: 22 }}>
              <li>
                <span className="check-dot"><IconCheck size={11} /></span>
                <span>Search by meal, ingredient, day, month, or routine.</span>
              </li>
              <li>
                <span className="check-dot"><IconCheck size={11} /></span>
                <span>Export portable Grain record bundles when you want your own copy.</span>
              </li>
              <li>
                <span className="check-dot"><IconCheck size={11} /></span>
                <span>Recover access when your phone or browser changes.</span>
              </li>
            </ul>
          </div>

          <div className="dash-visual io-rise" data-io-delay="140" aria-hidden="false">
            <div className="dash-window">
              <BrowserChrome url="mealmark.app/history" />
              <div className="dash-inner">
                <div className="dash-side">
                  <div className="dash-side-head label">Months</div>
                  <ul className="dash-years">
                    <li>May 2026 <span>26</span></li>
                    <li>Apr 2026 <span>54</span></li>
                    <li>Mar 2026 <span>48</span></li>
                    <li>Feb 2026 <span>32</span></li>
                    <li>Jan 2026 <span>9</span></li>
                    <li className="dash-since">First signed Jan 8, 2026</li>
                  </ul>
                </div>
                <div className="dash-main">
                  <div className="dash-month">May 2026</div>
                  <div className="dash-search">
                    <span className="dash-search-icon" aria-hidden="true">
                      <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
                           stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
                        <circle cx="11" cy="11" r="6.5" />
                        <path d="M16.5 16.5L21 21" />
                      </svg>
                    </span>
                    <span className="dash-search-text">Search 169 records</span>
                  </div>
                  <ul className="dash-list">
                    <DashRow d="Tue 26" t="1:08 PM"  meal="Salmon poke bowl, avocado, rice"      kcal="612" pm="4"   tone="teal"  cls="Brand" />
                    <DashRow d="Tue 26" t="9:14 AM"  meal="Greek yogurt, walnuts, honey"          kcal="320" pm="9"   tone="ghost" cls="Weighed" />
                    <DashRow d="Mon 25" t="7:36 PM"  meal="Tonkotsu ramen, soft egg, scallion"    kcal="780" pm="110" tone="amber" cls="Estimated" />
                    <DashRow d="Mon 25" t="12:42 PM" meal="Cobb salad, blue cheese, no bacon"    kcal="498" pm="18"  tone="ghost" cls="Weighed" />
                    <DashRow d="Sun 24" t="8:02 PM"  meal="Lentil dal, basmati, cucumber raita"  kcal="610" pm="22"  tone="ghost" cls="Weighed" />
                  </ul>
                  <div className="dash-foot">
                    <span className="subtle" style={{ fontSize: 13 }}>Showing 5 of 26 in May 2026</span>
                    <button className="btn btn-secondary btn-sm" type="button" tabIndex={-1}>
                      Export May
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DashRow({ d, t, meal, kcal, pm, tone = "ghost", cls = "Weighed" }) {
  return (
    <li className="dash-row">
      <div className="dash-row-date">
        <div className="dash-row-d">{d}</div>
        <div className="dash-row-t">{t}</div>
      </div>
      <div className="dash-row-meal">{meal}</div>
      <div className="dash-row-cal">
        <span>{kcal}</span>
        {pm && <span className="dash-row-pm">±{pm}</span>}
        <span className="dash-row-unit">kcal</span>
      </div>
      <span className={`pill pill-${tone}`}>
        {cls === "Brand"     && <span className="pill-icon"><IconCheck size={10} /></span>}
        {cls === "Weighed"   && <span className="pill-icon"><IconScale size={10} /></span>}
        {cls === "Estimated" && <span className="pill-icon"><IconAlertTri size={10} /></span>}
        {cls}
      </span>
    </li>
  );
}

function BrowserChrome({ url }) {
  return (
    <div className="browser-chrome">
      <div className="browser-dots" aria-hidden="true">
        <span /><span /><span />
      </div>
      <div className="browser-url">
        <span className="mono">{url}</span>
      </div>
      <div className="browser-spacer" />
    </div>
  );
}

// ----- 7. Backup & recovery kit (paid climax) -----------------------------
// Recovery kit is a downloadable FILE, not a physical card. Three-step flow:
// Save \u2192 Verify \u2192 Enable Protected Backup. Honest note: if every recovery
// path is lost, MealMark can't decrypt your backup.
function SectionRecovery() {
  return (
    <section className="section section-recovery" aria-labelledby="sec-rec">
      <div className="container">
        <div className="rec-grid">
          <div className="rec-copy io-rise">
            <div className="eyebrow">Recovery Kit</div>
            <h2 id="sec-rec" className="h-section">
              Your backup only works<br/>
              <em>if you can unlock it.</em>
            </h2>
            <p className="body-lg" style={{ marginTop: 18, maxWidth: 540 }}>
              Your Recovery Kit is a small file. Save it offline, verify it
              once, then enable Protected Backup. If a phone is lost or a
              browser wiped, the kit restores your meal history on a new device.
            </p>

            <ol className="rec-steps" aria-label="Recovery kit flow">
              <li className="rec-step">
                <span className="rec-step-n mono">01</span>
                <div>
                  <div className="rec-step-k">Save Recovery Kit</div>
                  <div className="rec-step-v">
                    Download <span className="mono">recovery-kit.mkit</span> and store
                    it where you keep other important files.
                  </div>
                </div>
              </li>
              <li className="rec-step">
                <span className="rec-step-n mono">02</span>
                <div>
                  <div className="rec-step-k">Verify Recovery Kit</div>
                  <div className="rec-step-v">
                    Re-open the file and confirm it unlocks before you ever
                    need it. A tested kit is the one you can trust later.
                  </div>
                </div>
              </li>
              <li className="rec-step">
                <span className="rec-step-n mono">03</span>
                <div>
                  <div className="rec-step-k">Enable Protected Backup</div>
                  <div className="rec-step-v">
                    Protected Backup turns on. Restore on a new browser or
                    device, anytime, with the kit.
                  </div>
                </div>
              </li>
            </ol>

            <p className="rec-honest">
              MealMark cannot decrypt your backup if every recovery path is
              lost. That&rsquo;s the point &mdash; <em>if we could, so could someone else.</em>
            </p>
          </div>

          <div className="rec-kit io-rise" data-io-delay="160" aria-label="Downloadable recovery kit file">
            <div className="rec-kit-paper">
              <div className="rec-kit-filebar">
                <span className="rec-kit-filebar-dots" aria-hidden="true"><span /><span /><span /></span>
                <span className="rec-kit-filebar-name mono">recovery-kit.mkit</span>
                <span className="rec-kit-filebar-dl" aria-hidden="true">
                  <IconDownload size={13} />
                </span>
              </div>
              <div className="rec-kit-head">
                <div>
                  <div className="rec-kit-eyebrow">MealMark</div>
                  <div className="rec-kit-title">Recovery Kit</div>
                </div>
                <div className="rec-kit-seal">
                  <span className="seal seal-lg"><IconCheck size={16} /></span>
                </div>
              </div>

              <div className="rec-kit-meta">
                <div>
                  <div className="rec-kit-meta-k">Issued</div>
                  <div className="rec-kit-meta-v">May 26, 2026</div>
                </div>
                <div>
                  <div className="rec-kit-meta-k">Kit ID</div>
                  <div className="rec-kit-meta-v mono">MK-9F4A-1C2B-77E0</div>
                </div>
                <div>
                  <div className="rec-kit-meta-k">For</div>
                  <div className="rec-kit-meta-v">Your protected backup</div>
                </div>
              </div>

              <div className="rec-kit-words-head label">
                <span>Recovery code</span>
                <span className="rec-kit-words-hint">Hidden on screen. Reveal to verify.</span>
              </div>
              <ol className="rec-kit-words">
                {[
                  "harbor","willow","quartz","resin",
                  "lantern","brook","oxide","crescent",
                  "thistle","ember","pollen","drift"
                ].map((w, i) => (
                  <li key={i} className="rec-kit-word">
                    <span className="rec-kit-word-n">{String(i + 1).padStart(2, "0")}</span>
                    <span className="rec-kit-word-v">●●●●●●</span>
                  </li>
                ))}
              </ol>

              <div className="rec-kit-actionbar">
                <span className="rec-kit-action rec-kit-action-primary">
                  <IconDownload size={12} />
                  Download
                </span>
                <span className="rec-kit-action">
                  <IconCheck size={12} />
                  Verify
                </span>
                <span className="rec-kit-action">
                  <IconLock size={12} />
                  Enable backup
                </span>
              </div>

              <div className="rec-kit-foot">
                <span className="mono">Save offline. Test restore before you need to.</span>
                <span className="mono">v1 · MealMark</span>
              </div>
            </div>
            <div className="rec-kit-shadow" aria-hidden="true" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- 8. Pricing ----------------------------------------------------------
// Sells continuity, not locked features. Plus pays for backup, recovery,
// analysis, and convenience.
function SectionPricing() {
  return (
    <section className="section section-pricing" id="sec-price" aria-labelledby="sec-price-h">
      <div className="container">
        <div className="price-head io-rise">
          <div className="eyebrow">Pricing</div>
          <h2 id="sec-price-h" className="h-section" style={{ maxWidth: 800 }}>
            Protect the history you are <em>building</em>.
          </h2>
          <p className="body-lg" style={{ marginTop: 16, maxWidth: 660 }}>
            Start Plus with a 7-day trial, then choose $6.99/month or
            $69.99/year. Plus adds protected backup, restore, higher analysis
            limits, and richer web history. Your records are never paywalled.
          </p>
        </div>

        <div className="price-grid">
          <div className="price-card price-card-plus io-rise" data-io-delay="100">
            <div className="price-card-head">
              <div className="price-tier">
                Plus
                <span className="seal" aria-hidden="true" style={{ marginLeft: 8 }}>
                  <IconCheck size={11} />
                </span>
              </div>
              <div className="price-amount">
                <span className="price-zero">$6.99</span>
                <span className="price-cadence">/month</span>
              </div>
              <div className="price-alt">7-day free trial, then $6.99/month or $69.99/year.</div>
            </div>
            <p className="price-pitch">
              Plus keeps your meal history alive across phones, browsers, and years.
            </p>
            <p className="price-proofline">
              Lose a phone or switch browsers; restore the same history with
              your Recovery Kit.
            </p>
            <ul className="price-feat">
              <PriceFeat strong>Higher AI meal and photo-analysis allowance</PriceFeat>
              <PriceFeat strong>Protected backup and restore features</PriceFeat>
              <PriceFeat strong>Richer web history views and exports</PriceFeat>
              <PriceFeat strong>Private sharing workflows as they roll out</PriceFeat>
              <PriceFeat strong>Coming soon: personal nutrition analysis</PriceFeat>
            </ul>
            <div className="price-cta">
              <a className="btn btn-primary" href="https://app.usemealmark.com/#/pricing">Start Plus trial</a>
              <span className="price-cta-note">7-day trial, then monthly or yearly. Cancel anytime.</span>
            </div>
          </div>

          <div className="price-card price-card-lifetime io-rise" data-io-delay="180">
            <div className="price-badge">First 100 buyers</div>
            <div className="price-card-head">
              <div className="price-tier">Founding Lifetime</div>
              <div className="price-amount">
                <span className="price-zero">$69.90</span>
                <span className="price-cadence">once</span>
              </div>
              <div className="price-alt">Lifetime Plus for early supporters.</div>
            </div>
            <p className="price-pitch">
              Pay once for Lifetime Plus while the first 100 founder spots are
              available.
            </p>
            <ul className="price-feat">
              <PriceFeat strong>Lifetime Plus access for one personal account</PriceFeat>
              <PriceFeat strong>No recurring subscription for founding buyers</PriceFeat>
              <PriceFeat strong>Future Plus features, subject to fair use</PriceFeat>
              <PriceFeat strong>Founder status inside MealMark</PriceFeat>
            </ul>
            <div className="price-cta">
              <a className="btn btn-secondary price-lifetime-btn" href="https://app.usemealmark.com/#/pricing?plan=lifetime">Claim Lifetime Plus</a>
              <span className="price-cta-note">One payment. First 100 buyers.</span>
            </div>
          </div>
        </div>

        <p className="price-foot subtle io-rise" data-io-delay="260">
          MealMark does not charge you to access, export, or delete your own
          saved records. Plus features are informational, not medical advice or
          a weight-loss program. Founding Lifetime is for one personal account,
          non-transferable, and subject to reasonable personal-use limits.
        </p>
      </div>
    </section>
  );
}

function PriceFeat({ children, strong = false }) {
  return (
    <li className={"price-feat-row" + (strong ? " is-strong" : "")}>
      <span className="price-feat-mark" aria-hidden="true">
        <IconCheck size={11} />
      </span>
      <span>{children}</span>
    </li>
  );
}

// ----- 9. Final CTA -------------------------------------------------------
function SectionFinalCTA() {
  return (
    <section className="section section-final" aria-labelledby="sec-final">
      <div className="container">
        <div className="final-block io-rise">
          <h2 id="sec-final" className="h-display" style={{ fontSize: "clamp(40px, 5.6vw, 68px)" }}>
            Start Plus trial. <em>Keep your meal history.</em>
          </h2>
          <p className="body-lg" style={{ marginTop: 18, maxWidth: 540, marginLeft: "auto", marginRight: "auto" }}>
            Try Plus for 7 days, then choose monthly, yearly, or Founding Lifetime.
          </p>
          <div className="final-ctas">
            <a className="btn btn-primary" href="https://app.usemealmark.com/#/pricing">Start 7-day trial</a>
            <a className="btn btn-secondary" href="MealMark.html#sec-price">
              <IconFile size={14} />
              See plans
            </a>
          </div>
          <div className="final-fine subtle">
            iPhone capture · web history · export anytime
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- Footer -------------------------------------------------------------
function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="container site-footer-inner">
        <div className="site-footer-brand">
          <span className="wordmark"><em>MealMark</em><span className="seal" aria-hidden="true"><IconCheck size={11} /></span></span>
          <span className="subtle" style={{ fontSize: 13, marginTop: 8, maxWidth: 260, display: "block" }}>
            A meal history that outlives your phone.
          </span>
        </div>
        <div className="site-footer-cols">
          <FooterCol title="Product" items={[
            { label: "iPhone capture", href: "MealMark.html#top" },
            { label: "Web history", href: "MealMark.html#sec-web" },
            { label: "Records", href: "Records.html" },
            { label: "Pricing", href: "MealMark.html#sec-price" },
          ]} />
          <FooterCol title="Trust" items={[
            { label: "Records", href: "Records.html" },
            { label: "Recovery", href: "Recovery.html" },
            { label: "Open records", href: "OpenSource.html" },
            { label: "GitHub", href: "https://github.com/IvGolovach/grain-protocol" },
          ]} />
          <FooterCol title="More" items={[
            { label: "Open records", href: "OpenSource.html" },
            { label: "Grain notes", href: "OpenSource.html" },
            { label: "Record example", href: "Records.html" },
            { label: "Contact", href: "mailto:hello@mealmark.app" },
          ]} />
        </div>
      </div>
      <div className="container site-footer-base">
        <span className="subtle" style={{ fontSize: 12.5 }}>© 2026 MealMark. Records you keep.</span>
        <span className="subtle" style={{ fontSize: 12.5 }}>protected backup · open records · export anytime</span>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div className="site-footer-col">
      <div className="label" style={{ marginBottom: 12 }}>{title}</div>
      <ul>
        {items.map((it, i) => {
          const external = it.href.startsWith("http");
          return (
            <li key={i}>
              <a
                href={it.href}
                target={external ? "_blank" : undefined}
                rel={external ? "noreferrer" : undefined}
              >
                {it.label}
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

Object.assign(window, {
  SectionOpenRecord, SectionDashboard, SectionRecovery,
  SectionPricing, SectionFinalCTA, SiteFooter,
});