// Landing sections, part 3: Future Devices + FAQ
// ============================================================
// Future Devices — deeper Open Source page proof. The home page uses the
// shorter SectionFutureTeaser from pages.jsx.

function SectionFutureDevices() {
  return (
    <section className="section section-future" aria-labelledby="sec-future">
      <div className="container">
        <div className="future-head io-rise">
          <div className="eyebrow">What this is for</div>
          <h2 id="sec-future" className="h-section" style={{ maxWidth: 880 }}>
            Portable records for the interfaces after <em>the phone</em>.
          </h2>
          <p className="body-lg" style={{ marginTop: 18, maxWidth: 720 }}>
            MealMark starts with iPhone, web, export, and recovery. Grain is
            the preparation layer: a portable food-record format that can be
            adapted for kitchen displays, restaurant QR, coach tools, wearables,
            and future devices when those integrations are ready.
          </p>
          <p className="future-disclaimer">
            This is the product direction, not a claim that every surface is
            shipping today.
          </p>
        </div>

        <div className="open-future-shell io-rise" data-io-delay="120">
          <div className="open-future-product">
            <div className="open-record-card" aria-label="Portable Grain record">
              <div className="open-record-corner open-record-corner-tl" />
              <div className="open-record-corner open-record-corner-tr" />
              <div className="open-record-corner open-record-corner-bl" />
              <div className="open-record-corner open-record-corner-br" />
              <div className="open-record-head">
                <span className="open-record-icon" aria-hidden="true"><IconFile size={22} /></span>
                <div>
                  <div className="open-record-name mono">salmon-bowl.record</div>
                  <div className="open-record-sub">Portable Grain record</div>
                </div>
              </div>
              <div className="open-record-rows">
                <div><span>Source</span><strong>Brand &middot; signed</strong></div>
                <div><span>Meal</span><strong>Salmon poke bowl</strong></div>
                <div><span>kcal</span><strong>612 <em>&plusmn;4</em></strong></div>
                <div><span>State</span><strong>Unchanged</strong></div>
              </div>
              <div className="open-record-seal">
                <span className="seal" aria-hidden="true"><IconCheck size={11} /></span>
                <span>Record shape designed to travel</span>
              </div>
            </div>

            <div className="open-phone-stage" aria-label="MealMark iPhone capture preview">
              <IPhoneCapture
                mealName="Salmon poke bowl, avocado, rice"
                calories={612}
                varKcal={18}
                sourceClass="measured"
                imageUrl="assets/stock/hero-poke-bowl.jpg"
              />
            </div>
          </div>

          <div className="open-future-lanes" aria-label="MealMark current surfaces and future direction">
            <FutureLane
              eyebrow="Works today"
              title="Phone capture, meal history, export, recovery."
              items={["iPhone capture", "Meal history", "Export", "Recovery"]}
            />
            <FutureLane
              eyebrow="Prepared for future interfaces"
              title="Portable records can adapt when new surfaces are ready."
              items={["Kitchen displays", "Wearables", "Restaurants / QR", "Coach tools", "Future devices"]}
              muted
            />
            <p className="open-future-note">
              Direction, not a shipping claim for every surface today. The point
              is to keep the record usable when the interface changes.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function FutureLane({ eyebrow, title, items, muted = false }) {
  return (
    <article className={`open-future-lane${muted ? " is-direction" : ""}`}>
      <div className="open-future-lane-eyebrow">{eyebrow}</div>
      <h3>{title}</h3>
      <div className="open-future-chip-row">
        {items.map(item => (
          <span className="open-future-chip" key={item}>{item}</span>
        ))}
      </div>
    </article>
  );
}

function SurfaceCard({ pos, status, kind, title, children }) {
  return (
    <li className={`future-surface future-surface-${pos} is-${status}`}>
      <div className="future-surface-tagbar">
        <span className={`future-surface-status status-${status}`}>
          {status === "today" ? "Today" : "Direction"}
        </span>
        <span className="future-surface-kind">{kind}</span>
      </div>
      <div className="future-surface-stage">{children}</div>
      <div className="future-surface-title">{title}</div>
    </li>
  );
}

// ====================================================================
// FAQ — the first working product FAQ. Disclosure pattern via <details>.
// Sells the bigger product position without overpromising.

function SectionFAQ() {
  const items = [
    {
      q: "Is MealMark just another calorie counter?",
      a: (
        <React.Fragment>
          <p>
            No. A normal tracker answers, “What did I eat today?” MealMark asks
            a different question: “Who will own my meal history five years from now?”
          </p>
          <p>
            You can log meals, save the history, restore it on a new device,
            and take the data with you.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "Why should I own my meal history at all?",
      a: (
        <React.Fragment>
          <p>
            Over time, it becomes more than a list of meals. It becomes your
            habits, recipes, reactions, family dishes, routines, experiments,
            and the things that actually worked for you.
          </p>
          <p>
            That history should not disappear because a phone broke, an app
            shut down, or a subscription changed.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "How is MealMark different from a normal SaaS app?",
      a: (
        <React.Fragment>
          <p>
            In a normal SaaS product, your history lives inside someone else’s
            database. If the app changes, shuts down, or stops fitting you, you
            depend on that app.
          </p>
          <p>
            MealMark is built around Grain records: portable records you can
            export, open, verify, and use outside one application.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "What if I leave MealMark later?",
      a: (
        <React.Fragment>
          <p>
            That is part of the idea. MealMark should not become a closed
            account for your data.
          </p>
          <p>
            You should be able to take your meal history with you: to another
            app, a new device, a personal backup, a doctor, a coach, or a future
            system that does not exist yet.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "How accurate are the numbers?",
      a: (
        <React.Fragment>
          <p>
            MealMark shows how each number was created. Weighed or brand-provided
            meals can have tighter ranges. Photo or quick-entry meals keep wider
            ranges.
          </p>
          <p>
            Saving a record preserves the estimate. It does not pretend the
            estimate became perfect.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "What happens if I stop paying?",
      a: (
        <React.Fragment>
          <p>
            You keep access to your saved records and exports. Your meal history
            stays accessible even if a subscription changes.
          </p>
          <p>
            Plus-only continuity features, such as protected backup and restore,
            stop renewing unless you keep Plus active.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "Why not just use Apple Health, iCloud, or Drive?",
      a: (
        <React.Fragment>
          <p>
            Those tools can store files or health summaries. MealMark keeps the
            meal record itself readable: meal, source, state, confidence, export,
            and restore context stay together.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "Is this medical advice or a diet plan?",
      a: (
        <React.Fragment>
          <p>
            No. MealMark is a record and recovery tool for meal history. It can
            help you review what you ate, but it does not diagnose, prescribe,
            or replace a clinician.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "What is futuristic about a meal record?",
      a: (
        <React.Fragment>
          <p>
            Today it looks like a meal record. Tomorrow it can be a language
            that phones, the web, wearables, kitchens, restaurants, medical
            offices, and future devices can understand.
          </p>
          <p>
            Grain is not tied to the MealMark interface. It is designed as a
            portable object: created once, understandable by many systems.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "Give me an example of the future this is for.",
      a: (
        <React.Fragment>
          <p>
            You cook dinner, such as avocado toast with salmon or homemade
            risotto. MealMark saves more than “calories”: ingredients,
            portions, substitutions, cooking method, and the final record.
          </p>
          <p>
            Years later, a different kitchen tool or assistant could read that
            compatible record and repeat the meaning of the dish, not the
            MealMark screen.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "Why QR or Grain codes? Isn’t that just a link?",
      a: (
        <React.Fragment>
          <p>
            No. The idea is not “open a website from a QR code.” The idea is
            that a food, dish, or portion can be handed off as a verifiable record.
          </p>
          <p>
            A restaurant, school, caterer, or friend at home could give you a
            Grain code for a dish. You scan it, see the source, ingredients,
            and record status, then add it without manually retyping everything.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "What other use cases does this open?",
      a: (
        <React.Fragment>
          <p>
            A restaurant can offer dish records instead of a PDF menu. Glasses
            can show what you are being offered and add a meal without a phone
            in your hand.
          </p>
          <p>
            A doctor or dietitian can review a portable history instead of
            screenshots. Family recipes can become living records that can be
            repeated years later.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "What am I buying with Plus?",
      a: (
        <React.Fragment>
          <p>
            Not access to a normal calorie counter. Basic meal records should
            stay accessible even if a subscription changes.
          </p>
          <p>
            Plus is for preservation: protected backup, restore on a new
            device, a Recovery Kit, richer export, and confidence that your
            history will not disappear with your phone.
          </p>
        </React.Fragment>
      ),
    },
    {
      q: "Why believe this is more than nice words?",
      a: (
        <React.Fragment>
          <p>
            MealMark is built around the Grain protocol, not a closed table:
            portable records, visible source, verifiable origin, QR scanning,
            backup, export, and a model where the server does not have to be
            the only source of truth.
          </p>
          <p>
            The futuristic surfaces still need to be built, but the foundation
            is chosen for them: meals as your portable memory, not a row in
            someone else’s SaaS.
          </p>
        </React.Fragment>
      ),
    },
  ];
  return (
    <section className="section section-faq" aria-labelledby="sec-faq">
      <div className="container">
        <div className="faq-head io-rise">
          <div className="eyebrow">FAQ</div>
          <h2 id="sec-faq" className="h-section" style={{ maxWidth: 800 }}>
            Clear answers before you trust MealMark with your meal history.
          </h2>
        </div>

        <ul className="faq-list io-rise" data-io-delay="120">
          {items.map((it, i) => (
            <li key={i} className="faq-item">
              <details>
                <summary>
                  <span className="faq-q">{it.q}</span>
                  <span className="faq-chev" aria-hidden="true">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="none"
                         stroke="currentColor" strokeWidth="1.7"
                         strokeLinecap="round" strokeLinejoin="round">
                      <path d="M6 9l6 6 6-6" />
                    </svg>
                  </span>
                </summary>
                <div className="faq-a">{it.a}</div>
              </details>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

Object.assign(window, { SectionFutureDevices, SectionFAQ });