/* MacroGuide.jsx ---------------- Sibling to FreeResource (the 3-Week Reset section). Sits AFTER the Reset section on the marketing site. Different interaction model: - No calculator — the guide IS the calculator (the PDF teaches you to do the math yourself). - Public preview baked into the modal: first 2 sections of the guide render as actual readable content. The visitor LEARNS something before hitting the email gate. - Single CTA on the card ("Read The Guide") opens the combined preview-and-gate modal. Content for the 2 public sections comes from Content's final body copy (file ID 1ApcSM1tRx0OkVNIK8DSEDbSO0dAdKIRtUbwqVw_imuk in Drive). Section 3 onward is email-gated. Em dash rule respected — periods and commas only inside sentences. */ const MacroGuide = () => { const [open, setOpen] = React.useState(false); return ( <>
{/* Left: mock + CTA */}
Read the first two sections free.
Email to unlock the rest.
{/* Right: the pitch */}
Free Resource · Nutrition

The Free
Macro Guide.

Most macro guides hand you a number. This one teaches you to find it. Six steps. Two worked client examples. Three honest reviews of the apps you might actually use. Free.

    {[ ['01', 'The 3 macros and what they\u2019re doing', 'Protein, carbs, fat. The role of each. Why one is non-negotiable and one is the variable.'], ['02', 'The TDEE formula, worked twice', 'Mifflin-St Jeor explained simply. Two real client calculations from scratch.'], ['03', 'What to do when the scale won\u2019t move', 'The 2-week trend rule. When to add 100 cal. When to remove 200. What stays anchored.'], ['04', 'Honest reviews of the 3 main calorie tracking apps', 'MyFitnessPal, Cronometer, Lose It. No sponsored language. Just the honest read.'], ].map(([n, t, b]) => (
  • {n}
    {t}
    {b}
    • ))}
setOpen(false)} /> ); }; // ---------------------------------------------------------------- // MacroGuideMock — cover visual, parallels ResetMock // ---------------------------------------------------------------- const MacroGuideMock = () => (
{/* Back stack — sense of depth */}
{/* Front cover */}
REP BY REP
EARNED EVERY DAY
The Free Macro Guide
CALCULATE
YOUR OWN.
The math behind your plate
{/* Mini macro density strip — echoes the PDF page 3 visual */}
{[ ['Protein', '4'], ['Carbs', '4'], ['Fat', '9'], ].map(([name, val]) => (
{val}
{name}
cal / g
))}
12 pages · 6 steps EARNED EVERY DAY
); // ---------------------------------------------------------------- // MacroGuideModal — preview content + email gate, combined flow // ---------------------------------------------------------------- const MacroGuideModal = ({ open, onClose }) => { const [name, setName] = React.useState(''); const [email, setEmail] = React.useState(''); const [submitted, setSubmitted] = React.useState(false); // Reset state when modal closes React.useEffect(() => { if (!open) { setTimeout(() => { setName(''); setEmail(''); setSubmitted(false); }, 300); } }, [open]); // Lock body scroll when modal is open React.useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); const valid = name && emailValid; if (!open) return null; return (
{ if (e.target === e.currentTarget) onClose(); }} >
{!submitted ? ( <> {/* Header */}
The Free Macro Guide · Preview

Most Guides Hand You
A Number.

This one teaches you to find it.
{/* PREVIEW SECTION 1 — WHY THIS GUIDE EXISTS */}
01 · Why It Exists

Most macro guides hand you a number and send you on your way. Here's your protein target. Here are your carbs. Good luck. They skip the part where you actually understand what you're looking at, why it matters, and what to do when the scale doesn't move for 2 weeks.

This guide doesn't do that.

By the time you finish reading, you'll know how to calculate your own numbers from scratch, what they mean, how to adjust them when things stall, and which tools are actually worth using to track them. No guesswork. No gimmicks. Just the math and the logic behind it, explained the way a coach would explain it across a table from you.

The Line

If you want someone to just hand you a number, that's what the coaching program is for. If you want to understand the number, keep reading.

{/* PREVIEW SECTION 2 — WHAT A MACRO ACTUALLY IS */}
02 · The Foundation
What A Macro
Actually Is.

Macro is short for macronutrient. There are 3 of them. Protein, fat, and carbohydrates. Everything you eat is made up of some combination of those 3. Alcohol is technically a 4th, but that's a conversation for another day and probably not the one you want to have with your coach.

Each macro carries a caloric value per gram. That's the foundation. Every calorie you consume comes from one of those 3 sources. Once you understand that, the math starts to make sense.

{/* Macro density strip — full-size, echoes the PDF page 3 visual */}
{[ ['Protein', '4', 'The non-negotiable. Builds and preserves muscle. Highest thermic effect of any macro.'], ['Carbs', '4', 'The flexible one. Goes up bulking, down cutting. Takes the hit when targets change.'], ['Fat', '9', 'More than twice the density of the others. Essential for hormones. Easy to overshoot.'], ].map(([name, val, note], i) => (
0 ? '1px solid var(--border)' : '0', }}>
{name}
{val}cal / g

{note}

))}
{/* GATE PANEL */}
There's More

Get The Rest
Of The Guide.

Six worked steps, two real client calculations, three honest app reviews, and the part nobody else tells you about eating out.

    {[ 'Step 1: Find your TDEE', 'Step 4: Set your fat', 'Step 2: Activity multiplier', 'Step 5: Carbs as the variable', 'Step 3: Set your protein', 'Step 6: Adjust at the trend', '3 app reviews, honest', 'The Honest Take', ].map(t => (
  • {t}
    • ))}
We never sell your email. Unsubscribe with one click.
) : (
{name.toUpperCase()}, IT'S ON ITS WAY.
The Free Macro Guide is on its way to {email}. Check your inbox in the next few minutes.
Tip: If you don't see it, check your spam folder or Promotions tab. Drag it to your inbox so the next note doesn't get lost.
)}
); }; // ---------------------------------------------------------------- // MgField — small form primitive, inline so we don't depend on // FreeResource.jsx's RxField (those aren't on window scope). // ---------------------------------------------------------------- const MgField = ({ label, type = 'text', value, onChange }) => (
onChange(e.target.value)} style={{ fontFamily: 'var(--font-body)', fontSize: 14, padding: '11px 12px', borderRadius: 6, border: '1px solid var(--border-strong)', background: '#fff', color: 'var(--fg)', }} />
); Object.assign(window, { MacroGuide, MacroGuideMock, MacroGuideModal });