// MealMark page-level sections and dedicated pages.
// Home stays commercial and short. Recovery / Open records / Records
// carry the heavier proof detail.

function ShareRecordPage() {
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Records"
        title={<>Open a meal record people can actually trust.</>}
        body="Show the meal, source, state, and kcal confidence in one clean view. It is the useful sharing surface for a coach, dietitian, doctor, family member, or your future self."
      >
        <div className="page-hero-actions">
          <a className="btn btn-primary" href="#sec-open">View the record example</a>
          <a className="btn btn-secondary" href="MealMark.html#top">Back to MealMark</a>
        </div>
      </PageHero>
      <section className="section page-proof-section">
        <div className="container page-proof-grid">
          <ProofBlock title="Coach or dietitian">
            Share the exact meals and confidence labels behind a routine
            instead of rebuilding the story from screenshots.
          </ProofBlock>
          <ProofBlock title="Doctor visit">
            Bring a clean 30 or 90 day view where measured, estimated, and
            app-entered details remain separated.
          </ProofBlock>
          <ProofBlock title="Family care">
            Keep meals that worked easy to reopen when someone else helps with
            shopping, cooking, or recovery.
          </ProofBlock>
          <ProofBlock title="Your future self">
            Open the record later and still know what was saved, where it came
            from, and whether the record changed.
          </ProofBlock>
        </div>
      </section>
      <SectionOpenRecord />
      <SectionAnatomy />
      <SectionGuesses />
    </React.Fragment>
  );
}

function SharingPage() {
  return <ShareRecordPage />;
}

function SectionFutureTeaser() {
  return (
    <section className="section section-future-teaser" id="sec-future" aria-labelledby="sec-future-h">
      <div className="container">
        <div className="future-teaser-grid">
          <div className="future-teaser-copy io-rise">
            <div className="eyebrow">Where this goes</div>
            <h2 id="sec-future-h" className="h-section">
              Built so your records can move.
            </h2>
            <p className="body-lg" style={{ marginTop: 18, maxWidth: 620 }}>
              Today, MealMark is iPhone capture, web history, export, sharing,
              and recovery. Grain keeps the record shape portable so future
              tools can read the same history without starting over.
            </p>
            <p className="future-teaser-note">
              Those integrations arrive in stages. The point is to keep your
              history ready for the next interface without pretending it all
              ships today.
            </p>
          </div>

          <div className="future-teaser-board io-rise" data-io-delay="140">
            <img
              className="future-teaser-photo"
              src="assets/stock/restaurant-qr-scan.jpg"
              alt="Phone scanning a restaurant QR code"
            />
            <div className="future-teaser-panel" aria-label="Current and future MealMark surfaces">
              <div className="future-panel-group">
                <span className="future-panel-label">Works now</span>
                <div className="future-chip-row">
                  <span className="surface-chip is-now">iPhone capture</span>
                  <span className="surface-chip is-now">Meal history</span>
                  <span className="surface-chip is-now">Export</span>
                </div>
              </div>
              <div className="future-panel-group">
                <span className="future-panel-label">Can support later</span>
                <div className="future-chip-row">
                  <span className="surface-chip is-next">Kitchen display</span>
                  <span className="surface-chip is-next">Glasses</span>
                  <span className="surface-chip is-next">Future devices</span>
                  <span className="surface-chip is-next">Coach tools</span>
                  <span className="surface-chip is-next">Restaurant QR</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function IconGithub({ size = 18 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
      <path d="M12 2.25a9.75 9.75 0 0 0-3.08 19c.49.09.67-.21.67-.47v-1.7c-2.72.59-3.29-1.16-3.29-1.16-.45-1.13-1.09-1.43-1.09-1.43-.89-.61.07-.6.07-.6.98.07 1.5 1.01 1.5 1.01.87 1.49 2.29 1.06 2.85.81.09-.63.34-1.06.62-1.31-2.17-.25-4.45-1.09-4.45-4.84 0-1.07.38-1.94 1.01-2.63-.1-.25-.44-1.25.1-2.59 0 0 .82-.26 2.69 1 .78-.22 1.61-.33 2.44-.33.83 0 1.66.11 2.44.33 1.87-1.26 2.69-1 2.69-1 .54 1.34.2 2.34.1 2.59.63.69 1.01 1.56 1.01 2.63 0 3.76-2.29 4.58-4.47 4.83.35.3.66.9.66 1.82v2.7c0 .26.18.57.68.47A9.75 9.75 0 0 0 12 2.25Z" />
    </svg>
  );
}

function RecoveryPage() {
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Recovery"
        title={<>Keep your meal history when your phone is gone.</>}
        body="Plus keeps your meal history recoverable with protected backup and a Recovery Kit you verify before you need it."
      >
        <div className="page-hero-actions">
          <a className="btn btn-primary" href="MealMark.html#sec-price">Protect my history with Plus</a>
          <a className="btn btn-secondary" href="MealMark.html#top">Back to overview</a>
        </div>
      </PageHero>
      <section className="section page-proof-section">
        <div className="container page-proof-grid">
          <ProofBlock title="Protected backup">
            Your meal history is encrypted before backup. MealMark stores the
            protected backup, not a plain copy of your meal history.
          </ProofBlock>
          <ProofBlock title="Recovery Kit">
            A small downloadable file you save somewhere safe. Verify it once,
            then use it later to restore your meal history on a new browser or device.
          </ProofBlock>
          <ProofBlock title="More than file storage">
            File storage can hold a download. MealMark recovery knows how to
            restore the protected backup, check the kit, and reconnect records to your account.
          </ProofBlock>
          <ProofBlock title="Exports still belong to you">
            You can still export records to your own folder. The Recovery Kit
            is for restoring the protected backup, not replacing personal exports.
          </ProofBlock>
        </div>
      </section>
      <SectionRecovery />
      <section className="section page-honest-section">
        <div className="container">
          <div className="honest-panel">
            <h2 className="h-section">Private backup has a real tradeoff.</h2>
            <p className="body-lg">
              If every recovery path is lost, MealMark cannot decrypt the
              backup for you. That is part of the privacy model.
            </p>
          </div>
        </div>
      </section>
      <section className="section page-next-section">
        <div className="container">
          <div className="page-next-panel">
            <div>
              <div className="eyebrow">Next step</div>
              <h2 className="h-section">Ready when your phone is not.</h2>
              <p className="body-lg">
                Plus starts with a 7-day trial and adds protected backup,
                Recovery Kit, and restore when you need continuity.
              </p>
            </div>
            <div className="page-next-actions">
              <a className="btn btn-primary" href="https://app.usemealmark.com/#/pricing">Start Plus trial</a>
              <a className="btn btn-secondary" href="MealMark.html#top">Back to MealMark</a>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function OpenSourcePage() {
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Open records"
        title={<>Your meal records should open outside MealMark.</>}
        body="MealMark uses Grain, an open-source format for portable meal records. That means your history can be exported, opened, and understood outside one app."
      >
        <div className="page-hero-actions">
          <a
            className="github-link"
            href="https://github.com/IvGolovach/grain-protocol"
            target="_blank"
            rel="noreferrer"
          >
            <IconGithub size={18} />
            <span>View Grain records on GitHub</span>
          </a>
          <a className="btn btn-secondary" href="Records.html">View a record example</a>
        </div>
      </PageHero>
      <section className="section page-proof-section">
        <div className="container page-proof-grid">
          <ProofBlock title="Records you can take with you">
            A Grain record is a portable meal record: what you ate, where the
            information came from, which nutrition values were saved, and what
            confidence came with them.
          </ProofBlock>
          <ProofBlock title="QR handoff, without re-entry">
            A kitchen, restaurant, device, or friend can hand off a meal record
            through a QR code or offline file when integrations exist.
          </ProofBlock>
          <ProofBlock title="Independent readers">
            Other tools can build readers, adapters, and importers for the same
            format. MealMark should be one good home, not the only possible home.
          </ProofBlock>
          <ProofBlock title="Less app lock-in">
            Plus can protect backup and recovery, but it should not block access
            to your own records.
          </ProofBlock>
        </div>
      </section>
      <SectionFutureDevices />
    </React.Fragment>
  );
}

function RecordsPage() {
  return <ShareRecordPage />;
}

function PageHero({ eyebrow, title, body, children }) {
  return (
    <section className="page-hero" id="top" aria-label={eyebrow}>
      <div className="container page-hero-inner">
        <div className="eyebrow">{eyebrow}</div>
        <h1 className="h-display">{title}</h1>
        <p className="body-lg">{body}</p>
        {children}
      </div>
    </section>
  );
}

function ProofBlock({ title, children }) {
  return (
    <article className="proof-block">
      <h2 className="h-card">{title}</h2>
      <p>{children}</p>
    </article>
  );
}

Object.assign(window, {
  SectionFutureTeaser,
  ShareRecordPage,
  SharingPage,
  RecoveryPage,
  OpenSourcePage,
  RecordsPage,
});