/* global React, HierarchyPyramid */
// On-site landing page for "The Health Hierarchy" — Field Guide No. 02.
// Substitutes the retired "Five Critical Numbers" slot. Cover field: Forest Ink
// (#2a3a2c) — the color chosen for the Five Numbers edition, carried forward here.

const LAYERS = [
  { n: "01", t: "Stop the bleeding &mdash; resolve the unresolved significant question." },
  { n: "02", t: "Automate the maintenance &mdash; the appointments, monitoring, and follow-ups." },
  { n: "03", t: "Do the boring basics excellently &mdash; sleep, strength, stress management, whole foods." },
  { n: "04", t: "Be strategic on the higher-variance choices &mdash; peptides, panels, the new interventions." },
];

const COVER_FIELD = "#2a3a2c";

window.LandingPage = function LandingPage({ author = "Gina Siddiqui, MD", authorBio = "Founder, Carte Medical" }) {
  return (
    <div style={{ background: "var(--carte-cream)", color: "var(--carte-text)", minHeight: "100%", fontFamily: "var(--carte-font-body)" }}>
      {/* Nav */}
      <nav style={{ borderBottom: "1px solid var(--carte-rule-soft)", background: "var(--carte-cream)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 40px", maxWidth: 1200, margin: "0 auto" }}>
          <a href="/" style={{ fontFamily: "var(--carte-font-display)", fontWeight: 500, fontSize: 22, color: "var(--carte-text)", textDecoration: "none" }}>Carte</a>
          <ul style={{ display: "flex", gap: 28, listStyle: "none", margin: 0, padding: 0, alignItems: "center", fontSize: 14 }}>
            {["How We Work","Services","Physicians","Resources","About"].map(l => (
              <li key={l}>
                <a href={({ "How We Work": "/method/", "Services": "/services/", "Physicians": "/about/#team", "Resources": "/resources/", "About": "/about/" })[l] || "/"} style={{ color: "var(--carte-text)", opacity: l === "Resources" ? 1 : 0.78, textDecoration: "none", borderBottom: l === "Resources" ? "1px solid var(--carte-text)" : "none", paddingBottom: 2 }}>{l}</a>
              </li>
            ))}
            <li>
              <a href="/inquire/" className="btn btn-primary">Tell us what&rsquo;s going on</a>
            </li>
          </ul>
        </div>
      </nav>

      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "20px 40px 0", fontSize: 12, letterSpacing: "0.04em", color: "var(--carte-text-muted)" }}>
        <a href="/resources/" style={{ color: "inherit", textDecoration: "none" }}>Resources</a>
        <span style={{ margin: "0 8px", opacity: 0.5 }}>/</span>
        <span>The Health Hierarchy</span>
      </div>

      {/* Hero */}
      <header style={{ maxWidth: 1200, margin: "0 auto", padding: "56px 40px 88px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 96, alignItems: "start" }}>
          <div>
            <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 13, fontWeight: 500, marginBottom: 28, display: "flex", alignItems: "center", gap: 14 }}>
              <span style={{ width: 22, height: 1, background: "var(--carte-text)" }} />
              Field Guide&nbsp;&middot;&nbsp;No.&nbsp;02
            </div>
            <h1 style={{ fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 72, lineHeight: 1.04, letterSpacing: "-0.012em", margin: "0 0 28px", maxWidth: "16ch" }}>
              The Health<br/>Hierarchy
            </h1>
            <p style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 23, lineHeight: 1.5, color: "var(--carte-text)", margin: "0 0 36px", maxWidth: "34ch" }}>
              A finance-style framework for anyone whose health efforts are not paying off the way they should.
            </p>
            <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 40 }}>
              <a href="/the-hierarchy/print/" className="btn btn-primary">Download PDF</a>
              <a href="/the-hierarchy/read/" className="btn btn-secondary">Read on web</a>
            </div>
            <div style={{ fontSize: 12.5, color: "var(--carte-text-muted)", letterSpacing: "0.02em" }}>
              12 pages &middot; PDF, 1.1&nbsp;MB &middot; No email required.
            </div>
          </div>

          {/* Cover tile — Forest Ink */}
          <a href="/the-hierarchy/read/" style={{ textDecoration: "none", color: "inherit" }}><div style={{ background: COVER_FIELD, color: "var(--carte-cream)", padding: "44px 36px 36px", aspectRatio: "8.5 / 11", display: "flex", flexDirection: "column", justifyContent: "space-between", position: "relative" }}>
              <div>
                <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.36em", fontSize: 10, fontWeight: 500 }}>Carte Medical</div>
                <div style={{ height: 1, background: "var(--carte-accent-green)", margin: "14px 0 0", width: 36 }} />
              </div>
              <div>
                <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 10, color: "var(--carte-accent-green)", marginBottom: 16 }}>Field Guide No. 02</div>
                <div style={{ fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 34, lineHeight: 1.05, letterSpacing: "-0.01em", marginBottom: 16 }}>
                  The<br/>Health<br/>Hierarchy
                </div>
                <div style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 13, lineHeight: 1.45, opacity: 0.85 }}>
                  Why your health efforts aren&rsquo;t compounding &mdash; and the four layers that make them.
                </div>
              </div>
              <div style={{ borderTop: "1px solid rgba(250,250,250,0.3)", paddingTop: 12, fontSize: 9.5, letterSpacing: "0.06em", opacity: 0.7, display: "flex", justifyContent: "space-between" }}>
                <span style={{ textTransform: "uppercase", letterSpacing: "0.06em" }}>{author}</span>
                <span>EDITION 2026.07</span>
              </div>
            </div></a>
        </div>
      </header>

      {/* Talk live CTA (below the fold) */}
      <section style={{ background: "var(--carte-navy-deep)", color: "var(--carte-cream)" }}>
        <div style={{ maxWidth: 820, margin: "0 auto", padding: "64px 40px 72px", textAlign: "center" }}>
          <h2 style={{ fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 40, lineHeight: 1.15, letterSpacing: "-0.005em", margin: "0 0 20px", color: "var(--carte-cream)" }}>
            Want to talk this topic over with us live?
          </h2>
          <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 19, lineHeight: 1.6, color: "var(--carte-cream)", opacity: 0.86, margin: "0 auto 30px", maxWidth: "56ch" }}>
            Tell us about your situation. We&rsquo;ll schedule you with one of our physicians shortly. On the call, you&rsquo;ll get their read on your case and at least one concrete next step.
          </p>
          <a href="/inquire/" className="btn btn-primary on-navy">Speak with a physician</a>
          <p style={{ marginTop: 14, fontFamily: "var(--mono)", fontSize: 14, letterSpacing: "0.03em", lineHeight: 1.5, color: "var(--brass-on-navy)", maxWidth: "36ch", marginLeft: "auto", marginRight: "auto" }}>
            30 minutes. Get a next step whether you work with us or not.
          </p>
        </div>
      </section>

      {/* Inside */}
      <section style={{ borderTop: "1px solid var(--carte-rule)", background: "var(--carte-cream)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "72px 40px 40px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 80 }}>
            <div>
              <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 13, fontWeight: 500 }}>The four layers</div>
              <div style={{ fontFamily: "var(--carte-font-body)", fontSize: 12.5, color: "var(--carte-text-muted)", marginTop: 18, lineHeight: 1.55, maxWidth: "24ch" }}>
                People in excellent health build them in order &mdash; the same order people in excellent financial health build wealth. Almost no one has all four.
              </div>
            </div>
            <ol style={{ listStyle: "none", margin: 0, padding: 0 }}>
              {LAYERS.map((q, i) => (
                <li key={q.n} style={{ display: "grid", gridTemplateColumns: "72px 1fr", gap: 24, padding: "22px 0", borderTop: i === 0 ? "1px solid var(--carte-text)" : "1px solid var(--carte-rule)", borderBottom: i === LAYERS.length - 1 ? "1px solid var(--carte-text)" : "none", alignItems: "baseline" }}>
                  <span style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.16em", fontSize: 13, color: "var(--carte-text-muted)" }}>{q.n}</span>
                  <span style={{ fontFamily: "var(--carte-font-display)", fontSize: 22, lineHeight: 1.35, color: "var(--carte-text)", maxWidth: "60ch" }} dangerouslySetInnerHTML={{ __html: q.t }} />
                </li>
              ))}
            </ol>
          </div>
        </div>
      </section>

      {/* Pyramid — the signature visual */}
      <section style={{ background: "var(--carte-cream)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "40px 40px 88px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 80, alignItems: "start" }}>
            <div>
              <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 13, fontWeight: 500 }}>The parallel</div>
              <div style={{ fontFamily: "var(--carte-font-body)", fontSize: 12.5, color: "var(--carte-text-muted)", marginTop: 18, lineHeight: 1.55, maxWidth: "24ch" }}>
                The wealth hierarchy on the left. The health hierarchy on the right. Same shape, same order.
              </div>
            </div>
            <div style={{ maxWidth: 760 }}>
              <HierarchyPyramid mode="paired" scale={0.98}/>
            </div>
          </div>
        </div>
      </section>

      {/* Sample excerpt — brand navy */}
      <section style={{ background: "var(--carte-navy-deep)", color: "var(--carte-cream)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "88px 40px 96px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 80 }}>
            <div>
              <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 13, fontWeight: 500, color: "var(--carte-cream)", opacity: 0.7 }}>From the guide</div>
              <div style={{ fontFamily: "var(--carte-font-body)", fontSize: 12, color: "var(--carte-cream)", opacity: 0.55, marginTop: 18, lineHeight: 1.55 }}>Excerpt &middot; Layer 01</div>
            </div>
            <div style={{ maxWidth: 720 }}>
              <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 12, color: "var(--carte-accent-green)", marginBottom: 18 }}>Stop the bleeding</div>
              <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 26, lineHeight: 1.45, fontStyle: "italic", margin: "0 0 28px" }}>
                In finance, you pay off high-interest debt first &mdash; not because the amount is large, but because the rate at which it compounds against you dwarfs the gains you make elsewhere.
              </p>
              <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.65, opacity: 0.86, margin: "0 0 18px" }}>
                Health bleeds work the same way. While you spend time on training and sleep and diet, a specific unresolved question &mdash; a back pain never cleanly explained, a fatigue never traced to its cause, an imaging finding that never got its follow-up &mdash; compounds against you faster than the good work compounds for you.
              </p>
              <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.65, opacity: 0.86, margin: "0 0 32px" }}>
                The standard system is built to allocate a specialist to an organ inside a fifteen-minute visit &mdash; not to spend the forty-five minutes of thinking a real answer requires. So the highest-interest problem stays unresolved. Sometimes for years. The Forensic Review is what we built to stop that specific bleed.
              </p>
              <a href="/the-hierarchy/read/" style={{ color: "var(--carte-cream)", borderBottom: "1px solid var(--carte-accent-green)", paddingBottom: 2, textDecoration: "none", fontFamily: "var(--carte-font-body)", fontSize: 14 }}>Continue reading on web</a>
            </div>
          </div>
        </div>
      </section>

      {/* Architecture strip */}
      <section style={{ borderTop: "1px solid var(--carte-rule)", background: "var(--carte-cream)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "56px 40px" }}>
          <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 13, fontWeight: 500, marginBottom: 22 }}>It&rsquo;s the architecture, not the effort</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 56, alignItems: "baseline" }}>
            <div>
              <div style={{ fontFamily: "var(--carte-font-display)", fontSize: 56, lineHeight: 1, letterSpacing: "-0.01em", marginBottom: 12 }}>4</div>
              <div style={{ fontSize: 13, color: "var(--carte-text-muted)", maxWidth: "32ch", lineHeight: 1.5 }}>Layers that determine whether your health efforts compound. The order they are built in matters.</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--carte-font-display)", fontSize: 56, lineHeight: 1, letterSpacing: "-0.01em", marginBottom: 12 }}>0&ndash;2</div>
              <div style={{ fontSize: 13, color: "var(--carte-text-muted)", maxWidth: "32ch", lineHeight: 1.5 }}>How many of the four layers most people actually have &mdash; and the returns on their health show up accordingly.</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--carte-font-display)", fontSize: 56, lineHeight: 1, letterSpacing: "-0.01em", marginBottom: 12 }}>1</div>
              <div style={{ fontSize: 13, color: "var(--carte-text-muted)", maxWidth: "32ch", lineHeight: 1.5 }}>Independent party organized to hold the whole picture on your behalf, over time, with no product to sell.</div>
            </div>
          </div>
        </div>
      </section>

      {/* Author + download */}
      <section style={{ borderTop: "1px solid var(--carte-rule)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "72px 40px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
            <div>
              <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 13, fontWeight: 500, marginBottom: 18 }}>Authored by</div>
              <div style={{ fontFamily: "var(--carte-font-display)", fontSize: 28, lineHeight: 1.25, marginBottom: 14 }}>{author}</div>
              <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 17, lineHeight: 1.6, color: "var(--carte-text-muted)", margin: 0, maxWidth: "48ch" }}>{authorBio}</p>
            </div>
            <div style={{ borderLeft: "1px solid var(--carte-rule)", paddingLeft: 56 }}>
              <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 13, fontWeight: 500, marginBottom: 18 }}>Take it with you</div>
              <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 17, lineHeight: 1.6, margin: "0 0 24px", maxWidth: "44ch" }}>
                Print it, mark it up, map your own four layers against it. Each layer is written so you can tell which ones you&rsquo;re missing.
              </p>
              <div style={{ display: "flex", gap: 14 }}>
                <a href="/the-hierarchy/print/" className="btn btn-primary">Download PDF</a>
                <a href="/the-hierarchy/print/" className="btn btn-secondary">Print version</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer style={{ borderTop: "1px solid var(--carte-rule-soft)", padding: "26px 0 30px", fontSize: 12, color: "var(--carte-text-muted)", letterSpacing: "0.02em" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto 14px", padding: "0 40px", fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 12.5, lineHeight: 1.55, color: "var(--carte-text)" }}>
          <b style={{ fontStyle: "normal", fontWeight: 500, letterSpacing: "0.04em", color: "#6d4f1c", marginRight: 6, textTransform: "uppercase", fontSize: 11 }}>Not for emergencies.</b>
          If you are experiencing a medical emergency, call 911. Content on this website is educational and for informational purposes only. It does not constitute medical advice, and individual medical decisions should always be discussed with your treating physicians.
        </div>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "14px 40px 0", borderTop: "1px solid var(--carte-rule-soft)", display: "flex", flexWrap: "wrap", gap: 16, justifyContent: "space-between", alignItems: "baseline" }}>
          <span style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.36em", fontSize: 13, fontWeight: 500 }}>Carte Medical</span>
          <span>&copy; 2026 Carte Clinics Inc. &middot; VIRGINIA | CALIFORNIA | NATIONAL ADVISORY</span>
          <span><a href="/privacy/" style={{ color: "inherit" }}>Privacy</a> &middot; <a href="/terms/" style={{ color: "inherit" }}>Terms</a> &middot; <a href="/inquire/" style={{ color: "inherit" }}>Inquire</a></span>
        </div>
      </footer>
    </div>
  );
};
