/* global React */
// On-site landing page for "The Coordination Blueprint" — Field Guide No. 03.
// Cover field: Oxblood. Site palette stays cream/navy across the set.

const STEPS = [
  { n: "I",    t: "Consolidate records in one place" },
  { n: "II",   t: "Reconcile the full medication list" },
  { n: "III",  t: "Map the specialists and their roles" },
  { n: "IV",   t: "Schedule in the right sequence, at the right facilities" },
  { n: "V",    t: "Track action items after every visit" },
  { n: "VI",   t: "Screen beyond the standard panel" },
  { n: "VII",  t: "Designate a central point of contact" },
  { n: "VIII", t: "Identify one or two keystone daily actions" },
];

const COVER_FIELD = "#3a1f2a";

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 Coordination Blueprint</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;03
            </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 Coordination<br/>Blueprint
            </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" }}>
              Eight steps families need covered when managing complex health for a loved one.
            </p>
            <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 40 }}>
              <a href="/coordination-blueprint/print/" className="btn btn-primary">Download PDF</a>
              <a href="/coordination-blueprint/read/" className="btn btn-secondary">Read on web</a>
            </div>
            <div style={{ fontSize: 12.5, color: "var(--carte-text-muted)", letterSpacing: "0.02em" }}>
              24 pages &middot; PDF, 1.3&nbsp;MB &middot; No email required.
            </div>
          </div>

          {/* Cover tile — Oxblood */}
          <a href="/coordination-blueprint/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. 03</div>
                <div style={{ fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 32, lineHeight: 1.05, letterSpacing: "-0.01em", marginBottom: 16 }}>
                  The<br/>Coordination<br/>Blueprint
                </div>
                <div style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 13, lineHeight: 1.45, opacity: 0.85 }}>
                  Eight steps families need covered when managing complex health for a loved one.
                </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.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 */}
      <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 step describes the work that needs to be done &mdash; and how Carte makes sure it gets done.
              </div>
            </div>
            <ol style={{ listStyle: "none", margin: 0, padding: 0 }}>
              {STEPS.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 === STEPS.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 — 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; Step II</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 }}>Why it matters</div>
              <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 26, lineHeight: 1.45, fontStyle: "italic", margin: "0 0 28px" }}>
                Polypharmacy &mdash; being on more than five medications simultaneously &mdash; doubles fall risk and significantly raises the rate of drug-drug interactions.
              </p>
              <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.65, opacity: 0.86, margin: "0 0 18px" }}>
                Medication errors are one of the leading preventable causes of hospitalization. Most patients on five or more medications are receiving prescriptions from three or more physicians who are not coordinating with each other.
              </p>
              <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 18, lineHeight: 1.65, opacity: 0.86, margin: "0 0 32px" }}>
                On every Stewardship engagement, our physicians review the complete medication list, check for high-risk medications, reconcile across all prescribers, and propose de-prescribing wherever the risk-benefit math has shifted &mdash; with the prescribing physician&rsquo;s input, not around them.
              </p>
              <a href="/coordination-blueprint/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>

      {/* Stats 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 }}>The shape of the gap</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 }}>3+</div>
              <div style={{ fontSize: 13, color: "var(--carte-text-muted)", maxWidth: "32ch", lineHeight: 1.5 }}>Physicians, on average, prescribing for a patient on five or more medications &mdash; without coordinating with each other.</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--carte-font-display)", fontSize: 56, lineHeight: 1, letterSpacing: "-0.01em", marginBottom: 12 }}>2&times;</div>
              <div style={{ fontSize: 13, color: "var(--carte-text-muted)", maxWidth: "32ch", lineHeight: 1.5 }}>Increase in fall risk for older adults on five or more medications (polypharmacy).</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--carte-font-display)", fontSize: 56, lineHeight: 1, letterSpacing: "-0.01em", marginBottom: 12 }}>0</div>
              <div style={{ fontSize: 13, color: "var(--carte-text-muted)", maxWidth: "32ch", lineHeight: 1.5 }}>People in the system whose explicit job is integrating the eight specialists&rsquo; recommendations into one coherent plan.</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, share it with siblings or co-caregivers. Each step is written so a non-clinician can act on it.
              </p>
              <div style={{ display: "flex", gap: 14 }}>
                <a href="/coordination-blueprint/print/" className="btn btn-primary">Download PDF</a>
                <a href="/coordination-blueprint/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>
  );
};
