/* global React */
// On-site landing page for The Medical Decision Roadmap lead magnet.
// Lives at /resources/medical-decision-roadmap on the marketing site.

const QUESTIONS = [
  { n: "I",   t: "Has the true underlying condition been diagnosed, or is the treatment based on faulty assumptions?" },
  { n: "II",  t: "In a setting of multiple specialists providing input, is anyone explicitly responsible for seeing and reconciling the whole picture?" },
  { n: "III", t: "Have we rigorously re-examined the original data, such as images, pathology slides, and lab data, or are we relying on someone else’s reviews?" },
  { n: "IV",  t: "Has the list of options been developed by the right experts, or has it been constrained by the specialists who are easily accessible?" },
  { n: "V",   t: "Is this recommendation based on your specific biology and risk profile, or on population-wide guidelines?" },
  { n: "VI",  t: "Has the team carefully considered the long-term consequences of this decision, or just the next step?" },
  { n: "VII", t: "Is anyone truly accountable for making sure the plan makes sense for you, and is executed appropriately?" },
];

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>

      {/* ─── Breadcrumb ──────────────────────────────────── */}
      <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 Medical Decision Roadmap</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;01
            </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 Medical<br/>Decision Roadmap
            </h1>
            <p style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 23, lineHeight: 1.5, color: "var(--carte-text)", margin: "0 0 36px", maxWidth: "32ch" }}>
              Seven questions to ask before agreeing to any major medical procedure, treatment, or specialist referral.
            </p>
            <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 40 }}>
              <a href="/decision-roadmap/print/" className="btn btn-primary">Download PDF</a>
              <a href="/decision-roadmap/read/" className="btn btn-secondary">Read on web</a>
            </div>
            <div style={{ fontSize: 12.5, color: "var(--carte-text-muted)", letterSpacing: "0.02em" }}>
              28 pages &middot; PDF, 1.4&nbsp;MB &middot; No email required.
            </div>
          </div>

          {/* Document tile — visual stand-in for the cover. Pure type, on cream, no shadow. */}
          <a href="/decision-roadmap/read/" style={{ textDecoration: "none", color: "inherit" }}><div style={{ border: "1px solid var(--carte-rule)", background: "var(--carte-white)", 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, color: "var(--carte-text)" }}>Carte Medical</div>
                <div style={{ height: 1, background: "var(--carte-text)", 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-text-muted)", marginBottom: 16 }}>Field Guide No. 01</div>
                <div style={{ fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 32, lineHeight: 1.05, letterSpacing: "-0.01em", color: "var(--carte-text)", marginBottom: 16 }}>
                  The Medical<br/>Decision<br/>Roadmap
                </div>
                <div style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 13, lineHeight: 1.45, color: "var(--carte-text-muted)" }}>
                  Seven questions to ask before agreeing to any major medical procedure.
                </div>
              </div>
              <div style={{ borderTop: "1px solid var(--carte-rule)", paddingTop: 12, fontSize: 9.5, letterSpacing: "0.06em", color: "var(--carte-text-muted)", display: "flex", justifyContent: "space-between" }}>
                <span style={{ textTransform: "uppercase", letterSpacing: "0.06em" }}>{author}</span>
                <span>EDITION 2026.05</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 the guide ───────────────────────────── */}
      <section style={{ borderTop: "1px solid var(--carte-rule)", background: "var(--carte-cream)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "72px 40px 88px" }}>
          <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 }}>Inside</div>
              <div style={{ fontFamily: "var(--carte-font-body)", fontSize: 12.5, color: "var(--carte-text-muted)", marginTop: 18, lineHeight: 1.55, maxWidth: "22ch" }}>
                Each question is paired with a real Carte case where asking it changed the outcome.
              </div>
            </div>
            <ol style={{ listStyle: "none", margin: 0, padding: 0 }}>
              {QUESTIONS.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 === QUESTIONS.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: "52ch" }}>{q.t}</span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </section>

      {/* ─── Sample excerpt ─────────────────────────────── */}
      <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; Question I</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 }}>A real case</div>
              <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 26, lineHeight: 1.45, fontStyle: "italic", margin: "0 0 28px", color: "var(--carte-cream)" }}>
                Marilyn, in her late sixties, was scheduled for gallbladder surgery. The reason her surgeon gave: a polyp had grown from 8 millimeters to 10 millimeters across three years of imaging.
              </p>
              <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.65, color: "var(--carte-cream)", opacity: 0.86, margin: "0 0 18px" }}>
                The argument was framed to her as universal best practice. The surgeon was experienced and gallbladder removal relatively low risk; late stage gallbladder cancer catastrophic. The patient was reasonable. Marilyn didn&rsquo;t want surgery, but the case for it had been made.
              </p>
              <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.65, color: "var(--carte-cream)", opacity: 0.86, margin: "0 0 18px" }}>
                When Carte reviewed her ultrasound reports, something didn&rsquo;t fit. The most recent report — the one with the 10-millimeter measurement that had triggered the surgical recommendation — also contained the phrase <em>&ldquo;stable in appearance.&rdquo;</em>
              </p>
              <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.65, color: "var(--carte-cream)", opacity: 0.86, margin: "0 0 32px" }}>
                We pulled the original images and asked the radiologist to re-measure all three years side by side. Once imaging technique and plane of the mass had been taken into account, all three years showed a polyp at 10 millimeters. The polyp had not grown. It had simply been measured differently.
              </p>
              <a href="/decision-roadmap/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>

      {/* ─── Author + download row ───────────────────────── */}
      <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, bring it to your next consult. The questions are written to be asked aloud.
              </p>
              <div style={{ display: "flex", gap: 14 }}>
                <a href="/decision-roadmap/print/" className="btn btn-primary">Download PDF</a>
                <a href="/decision-roadmap/print/" className="btn btn-secondary">Print version</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ─── Footer ─────────────────────────────────────── */}
      <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>
  );
};
