// MealMark — root composition. Header, Hero, and product sections.

const HERO_MEAL = {
  meal: "Salmon poke bowl, avocado, rice",
  date: "Tue \u00b7 May 26 \u00b7 9:14 AM",
  calories: 612,
  varKcal: 18,
  macros: { p: 31, c: 68, f: 22 },
  recordTrust: "self-issued",
  integrity: "unchanged",
  sourceClass: "measured",
  source: "Saved on your iPhone",
  imageUrl: "assets/stock/hero-poke-bowl.jpg",
  imageAlt: "Salmon poke bowl with avocado, rice, mango, and cucumber",
};

// IntersectionObserver hook: adds .in to .io-rise once they scroll into view.
function useScrollReveal() {
  React.useEffect(() => {
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const els = document.querySelectorAll(".io-rise");
    if (reduced) {
      els.forEach(el => el.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          const el = e.target;
          const delay = parseInt(el.dataset.ioDelay || "0", 10);
          if (delay) el.style.transitionDelay = `${delay}ms`;
          el.classList.add("in");
          io.unobserve(el);
        }
      });
    }, { rootMargin: "0px 0px -8% 0px", threshold: 0.08 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// --- Header --------------------------------------------------------------
function SiteHeader() {
  return (
    <header className="site-header">
      <div className="container site-header-inner">
        <a href="MealMark.html#top" className="wordmark" aria-label="MealMark home">
          <em>MealMark</em>
          <span className="seal" aria-hidden="true"><IconCheck size={11} /></span>
        </a>
        <nav className="site-nav" aria-label="Primary">
          <a href="MealMark.html#sec-how">How it works</a>
          <a href="Records.html">Records</a>
          <a href="Recovery.html">Recovery</a>
          <a href="OpenSource.html">Open records</a>
          <a href="MealMark.html#sec-price">Pricing</a>
        </nav>
        <div className="site-actions">
          <a href="https://app.usemealmark.com/">Sign in</a>
          <a className="btn btn-primary btn-sm" href="https://app.usemealmark.com/#/pricing">Start 7-day trial</a>
        </div>
      </div>
    </header>
  );
}

// --- Hero ---------------------------------------------------------------
function Hero() {
  const p = HERO_MEAL;
  return (
    <section className="hero" id="top" aria-labelledby="hero-h">
      <div className="container hero-grid">
        <div className="hero-copy">
          <span className="hero-eyebrow reveal" data-delay="1">
            <span className="seal" aria-hidden="true"><IconCheck size={9} /></span>
            <span>Meal history you own</span>
          </span>
          <h1 id="hero-h" className="h-display reveal" data-delay="2" style={{ marginTop: 18 }}>
            Your meal history should <em>outlive</em> your phone.
          </h1>
          <p className="hero-sub reveal" data-delay="3">
            Save meals on iPhone. Search them on the web. Export or restore
            the same meal history when your phone changes.
          </p>
          <div className="hero-ctas reveal" data-delay="4">
            <a className="btn btn-primary" href="https://app.usemealmark.com/#/pricing">Start 7-day trial</a>
          </div>
          <p className="hero-fine reveal" data-delay="5">
            Start with Plus free for 7 days. Your saved records stay exportable;
            Plus adds protected backup, Recovery Kit, and restore.
          </p>
          <div className="hero-proof-row reveal" data-delay="5" aria-label="MealMark ownership proof points">
            <span><strong>Local</strong> records</span>
            <span><strong>Export</strong> anytime</span>
            <span><strong>Restore</strong> with Plus</span>
          </div>
        </div>

        <div className="hero-visual reveal" data-delay="6">
          <div className="hero-visual-stage">
            <div className="hero-iphone" aria-hidden="false">
              <IPhoneCapture
                variant="record"
                mealName={p.meal}
                date={p.date}
                calories={p.calories}
                varKcal={p.varKcal}
                macros={p.macros}
                recordTrust={p.recordTrust}
                integrity={p.integrity}
                sourceClass={p.sourceClass}
                source={p.source}
                imageUrl={p.imageUrl}
                imageAlt={p.imageAlt}
              />
            </div>
          </div>
        </div>
      </div>

    </section>
  );
}

// --- App root ------------------------------------------------------------
function App() {
  useScrollReveal();
  const pathname = window.location.pathname.toLowerCase();
  const page =
    pathname.includes("recovery") ? "recovery" :
    pathname.includes("opensource") ? "open-source" :
    pathname.includes("sharing") ? "sharing" :
    pathname.includes("records") ? "records" :
    "home";

  React.useEffect(() => {
    const scrollToHash = () => {
      const id = decodeURIComponent(window.location.hash.replace(/^#/, ""));
      if (!id) return;
      window.requestAnimationFrame(() => {
        window.setTimeout(() => {
          const target = document.getElementById(id);
          if (target) target.scrollIntoView({ block: "start" });
        }, 40);
      });
    };

    scrollToHash();
    window.addEventListener("hashchange", scrollToHash);
    return () => window.removeEventListener("hashchange", scrollToHash);
  }, [page]);

  return (
    <React.Fragment>
      <SiteHeader />
      <main>
        {page === "home" && (
          <React.Fragment>
            <Hero />
            <SectionLockedHistory />
            <SectionDashboard />
            <SectionPricing />
            <SectionFutureTeaser />
            <SectionFAQ />
            <SectionFinalCTA />
          </React.Fragment>
        )}
        {page === "recovery" && <RecoveryPage />}
        {page === "open-source" && <OpenSourcePage />}
        {page === "records" && <RecordsPage />}
        {page === "sharing" && <SharingPage />}
      </main>
      <SiteFooter />
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);