// Nutritionist overview — marketing page for prospective nutritionists/dietitians. Spatial Cinema language.

const NU_RPR = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;

function NuReveal({ children, delay = 0, style = {} }) {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(NU_RPR);
  React.useEffect(() => {
    if (NU_RPR || !ref.current) return;
    const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { setOn(true); io.disconnect(); } }), { threshold: 0.1 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} style={{ opacity: on ? 1 : 0, transform: on ? "none" : "translateY(34px)", transition: `opacity .75s ease ${delay}ms, transform .75s ease ${delay}ms`, ...style }}>{children}</div>;
}

// ---------- Hero ----------
function NutHero() {
  return (
    <section style={{ padding: "40px 72px 30px", position: "relative", overflow: "hidden", minHeight: "78vh", display: "flex", alignItems: "center" }}>
      <div aria-hidden style={{ position: "absolute", width: 660, height: 660, top: "-20%", right: "-8%", borderRadius: "50%", filter: "blur(85px)", opacity: 0.32, background: `radial-gradient(circle, ${TEAL}, transparent 70%)`, pointerEvents: "none" }} />
      <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative", width: "100%", display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: 72, alignItems: "center" }}>
        <div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "7px 14px", borderRadius: 999, background: "rgba(10,197,168,0.12)", border: "1px solid rgba(10,197,168,0.35)", fontFamily: mono, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: TEAL, marginLeft: -15, marginBottom: 28 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: TEAL }}></span>
            For nutritionists
          </div>
          <h1 style={{ fontFamily: serif, fontSize: "clamp(52px, 7vw, 108px)", letterSpacing: "-0.045em", fontWeight: 300, margin: 0, lineHeight: 0.92, color: INK }}>
            Shape how<br />
            people <em style={{ fontStyle: "italic", fontWeight: 600, color: "transparent", WebkitTextStroke: `1.4px ${INK}` }}>eat.</em>
          </h1>
          <p style={{ fontFamily: sans, fontSize: 18, color: "rgba(242,237,228,0.74)", margin: "32px 0 0", maxWidth: 540, lineHeight: 1.55 }}>
            Members are already tracking meals, logging macros, and looking for guidance. Shape puts you where they are — ready to listen, ready to commit, and ready to let you shape their nutrition.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 40, flexWrap: "wrap" }}>
            <a href="SignupNutritionist.html" style={{ padding: "16px 30px", borderRadius: 2, background: TEAL, color: PAPER, border: 0, fontFamily: sans, fontSize: 14.5, fontWeight: 600, cursor: "pointer" }}>Apply now — it's free</a>
            <a href="Marketplace.html?role=Nutritionist" style={{ padding: "16px 30px", borderRadius: 2, background: "transparent", color: INK, border: "1px solid rgba(242,237,228,0.25)", fontFamily: sans, fontSize: 14.5, fontWeight: 600 }}>See nutritionists</a>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          {/* Receipt-style meal plan card — narrow column, mono-numeric, double rules, totals at the bottom */}
          <div style={{
            background: "linear-gradient(180deg, rgba(11,14,12,0.62) 0%, rgba(6,8,10,0.5) 100%)",
            border: "1px solid rgba(242,237,228,0.14)",
            borderRadius: 4,
            padding: "26px 26px 22px",
            position: "relative",
            boxShadow: "0 30px 80px rgba(0,0,0,0.5)",
            backdropFilter: "blur(10px)",
            WebkitBackdropFilter: "blur(10px)",
          }}>
            {/* Header */}
            <div style={{ textAlign: "center", marginBottom: 18 }}>
              <div style={{ fontFamily: mono, fontSize: 9.5, letterSpacing: "0.32em", color: TEAL, textTransform: "uppercase" }}>Today's plan</div>
              <div style={{ fontFamily: serif, fontStyle: "italic", fontSize: 22, color: INK, marginTop: 4, letterSpacing: "-0.01em" }}>Tuesday · Apr 15</div>
              <div style={{ fontFamily: mono, fontSize: 9, letterSpacing: "0.2em", color: "rgba(242,237,228,0.45)", marginTop: 6 }}>RX BY RAE LINDQVIST, RD</div>
            </div>

            {/* Macro ring + targets */}
            <div style={{ display: "grid", gridTemplateColumns: "78px 1fr", gap: 18, alignItems: "center", padding: "16px 0", borderTop: `1px dashed rgba(242,237,228,0.18)`, borderBottom: `1px dashed rgba(242,237,228,0.18)` }}>
              <svg viewBox="0 0 80 80" style={{ width: 78, height: 78 }}>
                <circle cx="40" cy="40" r="34" stroke="rgba(242,237,228,0.1)" strokeWidth="6" fill="none" />
                <circle cx="40" cy="40" r="34" stroke={TEAL_BRIGHT} strokeWidth="6" fill="none" strokeLinecap="round" strokeDasharray={`${2 * Math.PI * 34 * 0.62} ${2 * Math.PI * 34}`} transform="rotate(-90 40 40)" />
                <text x="40" y="38" textAnchor="middle" fontFamily="Fraunces, serif" fontSize="20" fontWeight="400" fill={INK}>1,210</text>
                <text x="40" y="52" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="rgba(242,237,228,0.5)" letterSpacing="1">/1950 KCAL</text>
              </svg>
              <div style={{ display: "grid", gap: 6 }}>
                {[
                  { l: "Protein", v: 112, g: 175, c: TEAL },
                  { l: "Carbs",   v: 116, g: 180, c: "#e8b14a" },
                  { l: "Fat",     v: 42,  g: 65,  c: "#d2693f" },
                ].map((m, i) => {
                  const pct = Math.min(1, m.v / m.g);
                  return (
                    <div key={i} style={{ display: "grid", gridTemplateColumns: "52px 1fr 60px", gap: 8, alignItems: "center" }}>
                      <div style={{ fontFamily: mono, fontSize: 9.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(242,237,228,0.7)" }}>{m.l}</div>
                      <div style={{ height: 4, background: "rgba(242,237,228,0.08)", borderRadius: 2, overflow: "hidden" }}>
                        <div style={{ width: `${pct * 100}%`, height: "100%", background: m.c }} />
                      </div>
                      <div style={{ fontFamily: mono, fontSize: 10, color: "rgba(242,237,228,0.7)", textAlign: "right" }}>{m.v}<span style={{ color: "rgba(242,237,228,0.35)" }}>/{m.g}g</span></div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Receipt rows — meals checked off as the day goes */}
            <div style={{ padding: "12px 0", display: "grid", gap: 8 }}>
              {[
                { time: "07:15", kind: "BREAKFAST", item: "Oats · berries · whey",         kcal: 460, done: true },
                { time: "10:30", kind: "SNACK",     item: "Apple + almonds",                kcal: 220, done: true },
                { time: "13:00", kind: "LUNCH",     item: "Chicken bowl · brown rice",      kcal: 530, done: true },
                { time: "16:00", kind: "SNACK",     item: "Whey shake · banana",            kcal: 290, done: false },
                { time: "19:30", kind: "DINNER",    item: "Salmon · sweet potato · greens", kcal: 450, done: false },
              ].map((m, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "16px 50px 1fr auto", gap: 10, alignItems: "baseline", padding: "5px 0", borderBottom: i === 4 ? "none" : `1px dotted rgba(242,237,228,0.08)` }}>
                  <div style={{ width: 12, height: 12, borderRadius: 3, border: `1px solid ${m.done ? TEAL : "rgba(242,237,228,0.25)"}`, background: m.done ? TEAL : "transparent", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    {m.done && <span style={{ color: PAPER, fontSize: 8.5, lineHeight: 1, fontWeight: 700 }}>✓</span>}
                  </div>
                  <div style={{ fontFamily: mono, fontSize: 10, color: "rgba(242,237,228,0.55)", letterSpacing: "0.04em" }}>{m.time}</div>
                  <div>
                    <div style={{ fontFamily: mono, fontSize: 8.5, letterSpacing: "0.18em", textTransform: "uppercase", color: m.kind === "SNACK" ? "#e8b14a" : TEAL, marginBottom: 2 }}>{m.kind}</div>
                    <div style={{ fontFamily: serif, fontSize: 14, color: m.done ? "rgba(242,237,228,0.55)" : INK, letterSpacing: "-0.005em", textDecoration: m.done ? "line-through" : "none", textDecorationColor: "rgba(242,237,228,0.4)" }}>{m.item}</div>
                  </div>
                  <div style={{ fontFamily: mono, fontSize: 10.5, color: "rgba(242,237,228,0.7)", letterSpacing: "0.02em" }}>{m.kcal}</div>
                </div>
              ))}
            </div>

            {/* Totals footer — receipt-style */}
            <div style={{ borderTop: `2px solid rgba(242,237,228,0.22)`, marginTop: 10, paddingTop: 12, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <div style={{ fontFamily: mono, fontSize: 9.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(242,237,228,0.55)" }}>Hydration · 1.8 / 3 L</div>
              <div style={{ fontFamily: mono, fontSize: 9.5, letterSpacing: "0.16em", textTransform: "uppercase", color: TEAL }}>On plan ●</div>
            </div>
          </div>
          {/* Small stamp tag */}
          <div style={{ position: "absolute", top: -14, right: 18, background: TEAL, color: PAPER, padding: "5px 10px", borderRadius: 999, fontFamily: mono, fontSize: 9, letterSpacing: "0.2em", fontWeight: 700, textTransform: "uppercase", boxShadow: "0 6px 18px rgba(0,0,0,0.35)" }}>RX · Week 4</div>
        </div>
      </div>
    </section>
  );
}

// ---------- Value strip ----------
function NutStats() {
  const items = [
    { k: "Weekly", v: "Payouts direct to your bank, or instant any day." },
    { k: "Verified", v: "Every RD, RDN, CNS, and license checked on intake." },
    { k: "Yours", v: "Your practice, your pricing, your clients. No lock-in." },
  ];
  return (
    <section style={{ padding: "80px 72px", borderTop: "1px solid rgba(242,237,228,0.08)", borderBottom: "1px solid rgba(242,237,228,0.08)" }}>
      <div className="nu-stats" style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }}>
        {items.map((it, i) => (
          <div key={i} style={{ padding: "12px 32px", borderLeft: i ? "1px solid rgba(242,237,228,0.1)" : "none" }}>
            <div style={{ fontFamily: serif, fontSize: it.k.length > 6 ? 42 : 58, letterSpacing: "-0.04em", fontWeight: 300, color: INK, lineHeight: 1 }}>{it.k}</div>
            <div style={{ fontFamily: sans, fontSize: 13, color: "rgba(242,237,228,0.6)", marginTop: 14, lineHeight: 1.5, maxWidth: 220 }}>{it.v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- Why Shape ----------
function NutWhy() {
  const pillars = [
    { n: "01", title: "Keep your license clean", body: "HIPAA-aligned client records. Scope-of-practice flags. RD/CSSD/CNS credentials verified on intake. Built with licensed dietitians, not by moving fast and breaking rules." },
    { n: "02", title: "Plans clients actually follow", body: "Meal plan builder with macro targets and food logging. Swap rules clients can use. Import from Cronometer, MyFitnessPal, or your own templates." },
    { n: "03", title: "Demand that fits your practice", body: "Members search by specialty — endurance fueling, gut health, plant-forward, clinical. You set scope, Shape sends you the right people." },
  ];
  return (
    <section style={{ padding: "40px 72px 140px" }}>
      <NuReveal>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.25em", textTransform: "uppercase", color: TEAL, marginBottom: 20 }}>Why Shape</div>
          <h2 style={{ fontFamily: serif, fontSize: "clamp(44px, 5.5vw, 82px)", letterSpacing: "-0.04em", fontWeight: 300, margin: "0 0 80px", lineHeight: 0.98, color: INK, maxWidth: 1100 }}>
            Built for the <em style={{ fontStyle: "italic", fontWeight: 600, color: TEAL }}>nuance of nutrition.</em>
          </h2>
          <div className="nu-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48 }}>
            {pillars.map((p, i) => (
              <NuReveal key={i} delay={i * 80}>
                <div style={{ fontFamily: mono, fontSize: 12, color: TEAL, letterSpacing: "0.16em", marginBottom: 24 }}>{p.n}</div>
                <h3 style={{ fontFamily: serif, fontSize: 32, letterSpacing: "-0.02em", fontWeight: 400, margin: "0 0 16px", lineHeight: 1.12, color: INK }}>{p.title}</h3>
                <p style={{ fontFamily: sans, fontSize: 15.5, color: "rgba(242,237,228,0.66)", lineHeight: 1.62, margin: 0 }}>{p.body}</p>
              </NuReveal>
            ))}
          </div>
        </div>
      </NuReveal>
    </section>
  );
}

// ---------- How it works ----------
function NutHow() {
  const steps = [
    { n: "01", t: "Apply with credentials", b: "RD, RDN, CNS, CSSD, or licensed dietitian. Upload your CDR number or state license. We verify every one.", time: "10 min" },
    { n: "02", t: "Review in 2–3 days", b: "Our clinical team reads every application. Licensed dietitians review yours. Approvals come with onboarding notes.", time: "2–3 days" },
    { n: "03", t: "Set up your practice", b: "Build intake forms, set session pricing, connect your calendar, upload plan templates. Import from existing clients.", time: "1–2 hrs" },
    { n: "04", t: "Start getting matched", b: "Members searching by specialty find your profile. First consults usually book within the first two weeks.", time: "Ongoing" },
  ];
  return (
    <section style={{ padding: "140px 72px", background: INK, color: PAPER }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 80, gap: 40, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 680 }}>
            <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.25em", textTransform: "uppercase", color: TEAL, marginBottom: 20 }}>How it works</div>
            <h2 style={{ fontFamily: serif, fontSize: "clamp(44px, 5.5vw, 82px)", letterSpacing: "-0.04em", fontWeight: 300, margin: 0, lineHeight: 0.98 }}>From application to first consult in <em style={{ fontStyle: "italic", fontWeight: 600, color: TEAL }}>under two weeks.</em></h2>
          </div>
          <a href="SignupNutritionist.html" style={{ padding: "15px 26px", borderRadius: 2, background: PAPER, color: INK, fontFamily: sans, fontSize: 13, fontWeight: 600, whiteSpace: "nowrap" }}>Start application →</a>
        </div>
        <div className="nu-steps" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid rgba(26,22,18,0.12)" }}>
          {steps.map((s, i) => (
            <div key={i} style={{ padding: "40px 32px 72px 0", borderLeft: i ? "1px solid rgba(26,22,18,0.12)" : "none", paddingLeft: i ? 32 : 0 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28 }}>
                <div style={{ fontFamily: mono, fontSize: 12, color: TEAL, letterSpacing: "0.14em" }}>{s.n}</div>
                <div style={{ fontFamily: mono, fontSize: 10.5, color: "rgba(26,22,18,0.45)", letterSpacing: "0.08em" }}>{s.time}</div>
              </div>
              <h3 style={{ fontFamily: serif, fontSize: 26, letterSpacing: "-0.02em", fontWeight: 400, margin: "0 0 14px", lineHeight: 1.15 }}>{s.t}</h3>
              <p style={{ fontFamily: sans, fontSize: 14, color: "rgba(26,22,18,0.7)", lineHeight: 1.55, margin: 0 }}>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Earnings calculator ----------
function NutEarnings() {
  const [clients, setClients] = React.useState(18);
  const [price, setPrice] = React.useState(140);
  const PLATFORM_FEE_RATE = 0.15;
  const grossMonthly = clients * price * 2;
  const feeMonthly = grossMonthly * PLATFORM_FEE_RATE;
  const monthly = grossMonthly - feeMonthly;
  const yearly = monthly * 12;
  return (
    <section style={{ padding: "140px 72px" }}>
      <NuReveal>
        <div className="nu-earn" style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.25em", textTransform: "uppercase", color: TEAL, marginBottom: 20 }}>Earnings</div>
            <h2 style={{ fontFamily: serif, fontSize: "clamp(44px, 5vw, 78px)", letterSpacing: "-0.04em", fontWeight: 300, margin: "0 0 28px", lineHeight: 0.96, color: INK }}>Your rate. <em style={{ fontStyle: "italic", fontWeight: 600, color: TEAL }}>See your take-home.</em></h2>
            <p style={{ fontFamily: sans, fontSize: 16, color: "rgba(242,237,228,0.68)", lineHeight: 1.62, margin: "0 0 28px", maxWidth: 500 }}>
              Set your own session and plan pricing and keep what you earn. No monthly dues, no setup fees, no per-booking cuts — Shape only takes a small platform fee when you get paid. Cancel any time.
            </p>
            <div style={{ background: "rgba(11,14,12,0.62)", border: "1px solid rgba(242,237,228,0.1)", borderRadius: 6, padding: "22px 24px", marginBottom: 28, maxWidth: 500 }}>
              <div style={{ fontFamily: mono, fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: TEAL, marginBottom: 10 }}>What Shape covers</div>
              <div style={{ fontFamily: sans, fontSize: 14, color: "rgba(242,237,228,0.72)", lineHeight: 1.55 }}>
                Client acquisition through the Shape marketplace, in-app messaging and video, meal plan hosting, scheduling, and liability coverage. Standard card processing is separate.
              </div>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
              {["No monthly fee — you only pay Shape when you earn", "Link your existing Stripe account, or set one up in 5 minutes", "Weekly payouts direct to your bank"].map(t => (
                <li key={t} style={{ fontFamily: sans, fontSize: 14.5, color: "rgba(242,237,228,0.76)", display: "flex", gap: 12, alignItems: "baseline" }}>
                  <span style={{ color: TEAL }}>→</span>{t}
                </li>
              ))}
            </ul>
          </div>
          <div style={{ background: "rgba(11,14,12,0.62)", border: "1px solid rgba(242,237,228,0.12)", borderRadius: 8, padding: 44, position: "relative", overflow: "hidden" }}>
            <div aria-hidden style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: `linear-gradient(90deg, ${TEAL}, ${RUST})`, opacity: 0.7 }} />
            <div style={{ fontFamily: mono, fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase", color: TEAL, marginBottom: 32 }}>Estimate your take-home</div>
            <div style={{ marginBottom: 32 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
                <label style={{ fontFamily: sans, fontSize: 13, color: "rgba(242,237,228,0.7)" }}>Active clients</label>
                <div style={{ fontFamily: serif, fontSize: 30, color: INK, letterSpacing: "-0.02em" }}>{clients}</div>
              </div>
              <input type="range" min="5" max="40" value={clients} onChange={e => setClients(+e.target.value)} style={{ width: "100%", accentColor: TEAL }} />
            </div>
            <div style={{ marginBottom: 32 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
                <label style={{ fontFamily: sans, fontSize: 13, color: "rgba(242,237,228,0.7)" }}>Consult / plan price</label>
                <div style={{ fontFamily: serif, fontSize: 30, color: INK, letterSpacing: "-0.02em" }}>${price}</div>
              </div>
              <input type="range" min="60" max="400" step="10" value={price} onChange={e => setPrice(+e.target.value)} style={{ width: "100%", accentColor: TEAL }} />
            </div>
            <div style={{ padding: "22px 0 0", borderTop: "1px solid rgba(242,237,228,0.1)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10 }}>
                <div style={{ fontFamily: sans, fontSize: 13, color: "rgba(242,237,228,0.6)" }}>Gross monthly</div>
                <div style={{ fontFamily: mono, fontSize: 14, color: "rgba(242,237,228,0.75)" }}>${grossMonthly.toLocaleString()}</div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", paddingBottom: 18, borderBottom: "1px dashed rgba(242,237,228,0.12)" }}>
                <div style={{ fontFamily: sans, fontSize: 13, color: "rgba(242,237,228,0.6)" }}>Platform fee</div>
                <div style={{ fontFamily: mono, fontSize: 14, color: "rgba(242,237,228,0.55)" }}>-${Math.round(feeMonthly).toLocaleString()}</div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 18 }}>
                <div style={{ fontFamily: sans, fontSize: 13, color: INK }}>Your take-home</div>
                <div style={{ fontFamily: serif, fontSize: 58, color: INK, letterSpacing: "-0.04em", lineHeight: 1 }}>${monthly.toLocaleString()}</div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 10 }}>
                <div style={{ fontFamily: sans, fontSize: 12.5, color: "rgba(242,237,228,0.45)" }}>Annualized</div>
                <div style={{ fontFamily: mono, fontSize: 14, color: TEAL }}>${yearly.toLocaleString()}/yr</div>
              </div>
            </div>
            <div style={{ marginTop: 28, fontFamily: sans, fontSize: 11.5, color: "rgba(242,237,228,0.4)", lineHeight: 1.5 }}>
              Estimate assumes 2 billable touchpoints per client per month, less Shape's small platform fee. Actual earnings vary by specialty and practice model.
            </div>
          </div>
        </div>
      </NuReveal>
    </section>
  );
}

// ---------- Tools ----------
function NutTools() {
  const tools = [
    { t: "Meal plan builder", b: "Macro targets, swap rules, grocery lists that auto-generate. Save any plan as a template, reuse across clients." },
    { t: "Food log review", b: "Client logs land in one thread. Flag outliers, leave timestamped notes. Logs integrate with Cronometer, MFP, Apple Health." },
    { t: "Client roster", b: "Adherence, weight trend, flagged clients, upcoming consults — all one screen. Filter by specialty or protocol." },
    { t: "Scheduling", b: "Two-way sync with Google, Apple, Outlook. Clients book 20-min check-ins or 60-min consults. Auto-reminders, intake forms." },
    { t: "Messaging", b: "Secure client chat. Voice notes, photos of meals and labs, saved replies for the questions you answer weekly." },
    { t: "Payouts & docs", b: "Weekly direct deposit, or instant for 1%. Clean monthly statements. Tax docs when January comes." },
  ];
  return (
    <section style={{ padding: "140px 72px" }}>
      <NuReveal>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.25em", textTransform: "uppercase", color: TEAL, marginBottom: 20 }}>The toolkit</div>
          <h2 style={{ fontFamily: serif, fontSize: "clamp(44px, 5.5vw, 82px)", letterSpacing: "-0.04em", fontWeight: 300, margin: "0 0 72px", lineHeight: 0.98, color: INK, maxWidth: 1000 }}>Built for <em style={{ fontStyle: "italic", fontWeight: 600, color: TEAL }}>real practice.</em></h2>
          <div className="nu-tools" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderTop: "1px solid rgba(242,237,228,0.1)", borderLeft: "1px solid rgba(242,237,228,0.1)" }}>
            {tools.map((t, i) => (
              <div key={i} style={{ padding: "40px 36px", borderRight: "1px solid rgba(242,237,228,0.1)", borderBottom: "1px solid rgba(242,237,228,0.1)", background: "rgba(11,14,12,0.6)" }}>
                <h3 style={{ fontFamily: serif, fontSize: 24, letterSpacing: "-0.02em", fontWeight: 400, margin: "0 0 14px", color: INK }}>{t.t}</h3>
                <p style={{ fontFamily: sans, fontSize: 14, color: "rgba(242,237,228,0.62)", lineHeight: 1.55, margin: 0 }}>{t.b}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 48, textAlign: "center" }}>
            <a href="NutritionistDashboard.html" style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: TEAL, borderBottom: "1px solid rgba(10,197,168,0.3)", paddingBottom: 3 }}>See the full dashboard →</a>
          </div>
        </div>
      </NuReveal>
    </section>
  );
}

// ---------- Featured ----------
function NutFeatured() {
  const pros = [
    { name: "Rae Lindqvist", loc: "Lisbon", cred: "RD, CSSD · 11 yrs", spec: "Endurance · Plant-based · Race fueling", quote: "I stopped hating Mondays. Admin used to eat my morning — now I spend it writing plans and reading logs.", clients: "28 active" },
    { name: "Noor Haddad", loc: "Toronto", cred: "RD · 8 yrs", spec: "Gut health · IBS · Low-FODMAP", quote: "My clients finally log food because the interface isn't hostile. Adherence is up 40% since I switched.", clients: "24 active" },
    { name: "Chen Wu", loc: "Remote", cred: "CNS · 6 yrs", spec: "Body recomp · Hormonal · Perimenopause", quote: "Shape brings me the right clients. Specialty search actually works — I barely need to market anymore.", clients: "31 active" },
  ];
  return (
    <section style={{ padding: "140px 72px", background: INK, color: PAPER }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.25em", textTransform: "uppercase", color: TEAL, marginBottom: 20 }}>Nutritionists on Shape</div>
        <h2 style={{ fontFamily: serif, fontSize: "clamp(44px, 5.5vw, 82px)", letterSpacing: "-0.04em", fontWeight: 300, margin: "0 0 72px", lineHeight: 0.98 }}>In good <em style={{ fontStyle: "italic", fontWeight: 600, color: TEAL }}>company.</em></h2>
        <div className="nu-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {pros.map((p, i) => (
            <div key={i} style={{ background: "rgba(26,22,18,0.04)", border: "1px solid rgba(26,22,18,0.1)", borderRadius: 6, padding: 32 }}>
              <div style={{ display: "flex", gap: 16, alignItems: "center", marginBottom: 24 }}>
                <Ph label="" ratio="1/1" tone="light" style={{ width: 56, height: 56, borderRadius: 999, flexShrink: 0 }} />
                <div>
                  <div style={{ fontFamily: serif, fontSize: 22, fontWeight: 400, letterSpacing: "-0.01em", lineHeight: 1.1 }}>{p.name}</div>
                  <div style={{ fontFamily: sans, fontSize: 12, color: "rgba(26,22,18,0.55)", marginTop: 4 }}>{p.loc} · {p.cred}</div>
                </div>
              </div>
              <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: TEAL, marginBottom: 18 }}>{p.spec}</div>
              <p style={{ fontFamily: serif, fontSize: 18, lineHeight: 1.5, color: "rgba(26,22,18,0.85)", margin: "0 0 24px", fontStyle: "italic" }}>"{p.quote}"</p>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 18, borderTop: "1px solid rgba(26,22,18,0.08)" }}>
                <div style={{ fontFamily: mono, fontSize: 11, color: "rgba(26,22,18,0.55)" }}>{p.clients}</div>
                <a href="NutritionistPublic.html" style={{ fontFamily: sans, fontSize: 12.5, color: TEAL }}>View profile →</a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function NutFAQ() {
  const faqs = [
    { q: "What credentials do I need?", a: "RD, RDN, CNS, CDN, or state-licensed dietitian. CSSD (sports) or IFMCP (functional) help but aren't required. Non-licensed health/nutrition coaches accepted under a distinct scope-of-practice tier." },
    { q: "What does Shape cost?", a: "You keep the vast majority of everything your clients pay you. No monthly dues, no listing fees — Shape only takes a small platform fee when you get paid. Standard card processing is separate." },
    { q: "How does Shape handle HIPAA and scope of practice?", a: "Client records are encrypted at rest and in transit. Scope-of-practice tiers are enforced by credential — non-RDs can't access medical nutrition therapy flows. BAAs available for practices that need them." },
    { q: "Can I bring my existing clients?", a: "Yes. Most nutritionists migrate within the first month. We help with transition emails, pricing continuity, and importing plan templates." },
    { q: "Payouts?", a: "Weekly, direct to your bank. Instant payouts available for 1% any day. 1099s auto-generated every January." },
    { q: "Plans only, no consults — is that a thing?", a: "Yes. Publish meal plans as one-time or recurring products. Many nutritionists earn 30–40% of revenue from plan sales alone." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: "140px 72px" }}>
      <NuReveal>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.25em", textTransform: "uppercase", color: TEAL, marginBottom: 20 }}>Questions</div>
          <h2 style={{ fontFamily: serif, fontSize: "clamp(44px, 5.5vw, 82px)", letterSpacing: "-0.04em", fontWeight: 300, margin: "0 0 64px", lineHeight: 0.98, color: INK }}>Everything <em style={{ fontStyle: "italic", fontWeight: 600, color: TEAL }}>nutritionists ask.</em></h2>
          <div style={{ borderTop: "1px solid rgba(242,237,228,0.1)" }}>
            {faqs.map((f, i) => (
              <div key={i} style={{ borderBottom: "1px solid rgba(242,237,228,0.1)" }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: "100%", padding: "28px 0", background: "transparent", border: 0, display: "flex", justifyContent: "space-between", alignItems: "center", cursor: "pointer", textAlign: "left" }}>
                  <span style={{ fontFamily: serif, fontSize: 25, fontWeight: 400, letterSpacing: "-0.015em", color: INK }}>{f.q}</span>
                  <span style={{ fontFamily: mono, fontSize: 20, color: TEAL, marginLeft: 24, transform: open === i ? "rotate(45deg)" : "none", transition: "transform 0.2s" }}>+</span>
                </button>
                {open === i && (
                  <div style={{ padding: "0 0 28px", fontFamily: sans, fontSize: 15, color: "rgba(242,237,228,0.7)", lineHeight: 1.65, maxWidth: 760 }}>{f.a}</div>
                )}
              </div>
            ))}
          </div>
        </div>
      </NuReveal>
    </section>
  );
}

// ---------- Final CTA ----------
function NutCTA() {
  return (
    <section style={{ padding: "140px 72px", background: INK, color: PAPER }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", textAlign: "center" }}>
        <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.3em", textTransform: "uppercase", color: TEAL, marginBottom: 28 }}>Ready?</div>
        <h2 style={{ fontFamily: serif, fontSize: "clamp(40px, 5.2vw, 84px)", letterSpacing: "-0.04em", fontWeight: 300, margin: "0 0 40px", lineHeight: 0.95 }}>
          Apply in <em style={{ fontStyle: "italic", fontWeight: 600, color: TEAL }}>10 minutes.</em>
        </h2>
        <p style={{ fontFamily: sans, fontSize: 18, color: "rgba(26,22,18,0.7)", lineHeight: 1.55, margin: "0 auto 48px", maxWidth: 560 }}>
          Free to join. No lock-in. Licensed dietitians review every application within 2–3 days.
        </p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="SignupNutritionist.html" style={{ padding: "18px 34px", borderRadius: 2, background: TEAL, color: PAPER, fontFamily: sans, fontSize: 15, fontWeight: 600 }}>Start your application →</a>
        </div>
      </div>
    </section>
  );
}

// ---------- Page ----------
function NutritionistOverviewPage() {
  return (
    <div style={{ background: INK_DEEP, color: INK, fontFamily: sans, minHeight: "100vh", position: "relative" }}>
      <div aria-hidden style={{ position: "fixed", inset: 0, zIndex: 0, backgroundImage: "url('/Nutrition%202.png')", backgroundSize: "cover", backgroundPosition: "center", pointerEvents: "none", opacity: 0.9 }} />
      <div aria-hidden style={{ position: "fixed", inset: 0, zIndex: 0, pointerEvents: "none", background: "radial-gradient(120% 90% at 50% 6%, rgba(26,24,19,0.28) 0%, rgba(11,14,12,0.52) 55%, rgba(11,14,12,0.74) 100%)" }} />
      <div style={{ position: "relative", zIndex: 1 }}>
        <Header active="Nutritionist Overview" />
        <NutHero />
        <NutWhy />
        <NutHow />
        <NutEarnings />
        <NutTools />
        <NutFAQ />
        <NutCTA />
        <Footer />
      </div>
      <style>{`
        @media (max-width: 980px) {
          .nu-stats { grid-template-columns: repeat(2, 1fr) !important; }
          .nu-3 { grid-template-columns: 1fr !important; }
          .nu-steps { grid-template-columns: 1fr 1fr !important; }
          .nu-tools { grid-template-columns: 1fr 1fr !important; }
          .nu-earn { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 620px) {
          .nu-stats, .nu-steps, .nu-tools { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<NutritionistOverviewPage />);
