/* global React, Nav, Footer, Eyebrow, SectionHead, BookHero, Steps, Checklist, FAQItem */

const HEADLINES = {
  v1: { lead: "Stop overhauling.", em: "Start shifting.", tail: "" },
  v2: { lead: "The diet for people who", em: "quit every diet.", tail: "" },
  v3: { lead: "Small habits.", em: "Real results.", tail: "" },
};

// ─── Home page ─────────────────────────────────────────

function HomePage({ headline, ctaText, setPage, onBuy }) {
  const h = HEADLINES[headline] || HEADLINES.v1;
  return (
    <main data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero" data-comment-anchor="home-hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <Eyebrow>Idiot-Proof Habits for Weight Loss</Eyebrow>
              <h1>
                {h.lead} <em>{h.em}</em>{h.tail && ` ${h.tail}`}
              </h1>
              <p className="lede">
                A stress-free, bite-sized blueprint for weight loss that
                actually sticks. No confusing rules, no starvation, no
                willpower required — just small daily habits that compound.
              </p>
              <div className="hero-actions">
                <a className="btn btn-accent btn-lg" onClick={onBuy}>{ctaText}</a>
                <a className="btn btn-ghost btn-lg" onClick={() => setPage("method")}>How it works</a>
              </div>
              <div className="hero-stats">
                <div>
                  <div className="stat-num">16<span style={{ color: "var(--accent-deep)" }}>pg</span></div>
                  <div className="stat-lbl">Concise guide — no filler, no fluff</div>
                </div>
                <div>
                  <div className="stat-num">7<span style={{ color: "var(--accent-deep)" }}>day</span></div>
                  <div className="stat-lbl">Jumpstart menu included</div>
                </div>
                <div>
                  <div className="stat-num">6<span style={{ color: "var(--accent-deep)" }}>habits</span></div>
                  <div className="stat-lbl">Tracked daily on the printable tracker</div>
                </div>
              </div>
            </div>
            <BookHero />
          </div>
        </div>
      </section>

      {/* why diets fail */}
      <section className="section" data-comment-anchor="home-why">
        <div className="container">
          <SectionHead
            eyebrow="Why most diets fail"
            title={<>The problem isn't <em style={{ color: "var(--brand)", fontStyle: "italic", fontFamily: "var(--font-display)" }}>willpower.</em></>}
            lede="Weight loss doesn't fail because you lack discipline — it fails because most diets are complicated, rigid, and fight against your natural biology. This guide strips away the guesswork."
          />
          <div className="steps">
            <div className="step">
              <div className="step-num">01</div>
              <h3>Shift your identity, not just your scale</h3>
              <p>Process goals — the small actions you control today — build the habits that get you there. Outcome goals alone don't.</p>
            </div>
            <div className="step">
              <div className="step-num">02</div>
              <h3>Stack tiny habits into big change</h3>
              <p>The Two-Minute Rule, habit stacking, and environment design turn "I should" into "I automatically do."</p>
            </div>
            <div className="step">
              <div className="step-num">03</div>
              <h3>Move without burning out</h3>
              <p>A gentle movement approach that burns fat without spiking hunger or crashing your energy.</p>
            </div>
          </div>
        </div>
      </section>

      {/* inside the book */}
      <section className="section-tight" data-comment-anchor="home-inside">
        <div className="container">
          <div className="inside">
            <div className="inside-book">
              <img src="assets/new-inside-cover.webp" alt="Idiot-Proof Habits for Weight Loss — alternate angle" style={{ width: "100%", maxWidth: "360px", aspectRatio: "3/4", objectFit: "cover", margin: "0 auto", boxShadow: "var(--shadow-book)", transform: "rotate(2deg)", display: "block" }} />
            </div>
            <div>
              <Eyebrow>What's inside</Eyebrow>
              <h2 className="h-display" style={{ fontSize: "clamp(36px, 4vw, 56px)", margin: "12px 0 16px" }}>
                Seven short chapters. Two printable tools.
              </h2>
              <p style={{ color: "var(--ink-muted)", margin: 0, maxWidth: "52ch" }}>
                Built to be used, not just read — the tracker and grocery
                checklist are designed to go on your fridge.
              </p>
              <Checklist
                items={[
                  { title: "The Core Philosophy", body: "Why there's no single 'perfect' diet, and how to find the deficit that fits your life." },
                  { title: "Small Habits That Stick", body: "Simple daily shifts, easy environment tweaks, no willpower marathon." },
                  { title: "The Master Food Guide", body: "What to eat abundantly, what to minimize, and an idiot-proof swap guide for your favorites." },
                  { title: "Sustainable Movement", body: "A low-stress way to move more, without exhausting workouts." },
                  { title: "The 7-Day Jumpstart Menu", body: "A full week of simple lunches and dinners to get you started immediately." },
                ]}
              />
            </div>
          </div>
        </div>
      </section>

      {/* author bio */}
      <section className="section-tight">
        <div className="container">
          <div className="author-bio">
            <div className="author-photo">
              <img src="assets/melissa-brown.jpg" alt="Melissa Brown" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div>
              <Eyebrow>Meet the author</Eyebrow>
              <h2 className="h-display" style={{ fontSize: "clamp(36px, 4vw, 56px)", margin: "12px 0 24px" }}>
                Melissa Brown wrote the book she wished existed.
              </h2>
              <p style={{ fontSize: 18, color: "var(--ink-muted)", lineHeight: 1.65 }}>
                After years of quitting rigid diets, Melissa rebuilt her
                approach around small, sustainable habits instead of
                willpower. This guide is the stress-free blueprint that
                finally stuck.
              </p>
              <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <span className="badge-pill"><span className="dot"></span>16-page guide</span>
                <span className="badge-pill"><span className="dot"></span>2026 edition</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* get the guide (no price) */}
      <section className="section">
        <div className="container">
          <div className="pricing">
            <div>
              <Eyebrow style={{ color: "var(--accent)" }}>Get the guide</Eyebrow>
              <h2 style={{ color: "#fff" }}>Small habits. No overhaul required.</h2>
              <p style={{ color: "rgba(255,255,255,.75)", maxWidth: "44ch", fontSize: 18, lineHeight: 1.55 }}>
                Instant download. Read it on your phone, tablet, or print the
                tracker and grocery checklist for your fridge.
              </p>
              <div className="guarantee">Money-back guarantee if it doesn't work for you</div>
            </div>
            <div className="price-card">
              <Checklist
                items={[
                  { title: "The complete 16-page guide", body: "PDF, instant download" },
                  { title: "The 7-Day Jumpstart Menu", body: "Ready to start this week" },
                  { title: "Printable habit tracker", body: "Fridge-ready, one page" },
                  { title: "Grocery checklist", body: "Frictionless whole-food shopping" },
                ]}
              />
              <a className="btn btn-accent btn-lg" style={{ width: "100%", marginTop: 8 }} onClick={onBuy}>{ctaText} →</a>
            </div>
          </div>
        </div>
      </section>

      {/* faq teaser */}
      <section className="section-tight">
        <div className="container-narrow">
          <SectionHead
            eyebrow="Quick answers"
            title="The four questions everyone asks first."
            align="stack"
          />
          <div className="faq-list">
            <FAQItem
              q="Do I have to count calories?"
              a="Not strictly. Understanding your caloric deficit and BMR is a helpful starting point, but the guide is built around habits and process goals — not obsessive tracking."
              defaultOpen={true}
            />
            <FAQItem
              q="Do I have to exercise?"
              a="No gym required. The guide's movement strategy is low-stress by design — it burns fat without spiking hunger or draining your energy."
            />
            <FAQItem
              q="What if I slip up?"
              a="Slips are a normal part of building habits. The guide's last chapter is entirely about staying compassionate and consistent instead of letting one off day spiral."
            />
            <FAQItem
              q="Is this a subscription?"
              a="No. You buy the guide once and own it forever."
            />
          </div>
          <div style={{ textAlign: "center", marginTop: 40 }}>
            <a className="btn btn-text" onClick={() => setPage("faq")}>See all questions</a>
          </div>
        </div>
      </section>

      <section className="final-cta">
        <div className="container-narrow">
          <h2>The diet for people who <em>quit</em> every diet.</h2>
          <p className="lede" style={{ margin: "0 auto 32px" }}>
            One short guide. Small daily habits. No willpower required.
          </p>
          <a className="btn btn-accent btn-lg" onClick={onBuy}>{ctaText}</a>
        </div>
      </section>
    </main>
  );
}

// ─── Handbook (product detail) ─────────────────────────

function HandbookPage({ ctaText, onBuy, setPage }) {
  return (
    <main data-screen-label="02 The Handbook">
      <section className="container product-hero" style={{ paddingTop: 56 }}>
        <BookHero rotate={-2} />
        <div>
          <Eyebrow>Idiot-Proof Habits for Weight Loss</Eyebrow>
          <h1>A stress-free, bite-sized blueprint for weight loss that actually sticks.</h1>
          <p className="lede">
            No confusing rules. No starvation. No willpower required — just a
            straightforward guide that resets your habits one small shift at
            a time.
          </p>
          <div className="product-features">
            <div><div className="pf-label">Format</div><div className="pf-val">PDF</div></div>
            <div><div className="pf-label">Length</div><div className="pf-val">16 pages</div></div>
            <div><div className="pf-label">Includes</div><div className="pf-val">Tracker + checklist</div></div>
          </div>
          <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
            <a className="btn btn-accent btn-lg" onClick={onBuy}>{ctaText}</a>
            <a className="btn btn-ghost btn-lg" onClick={() => setPage("faq")}>See the FAQ</a>
          </div>
          <p style={{ marginTop: 24, color: "var(--ink-soft)", fontSize: 13 }}>
            ✦ Instant download · Money-back guarantee · Own it forever
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Why it works"
            title={<>Built for people who've<br/>quit every other diet.</>}
            lede="No calorie-counting spreadsheets, no banned foods, no grueling workouts — just small daily shifts that compound into real results."
          />
          <div className="steps">
            <div className="step">
              <div className="step-num">01</div>
              <h3>Habits, not willpower</h3>
              <p>Tiny, repeatable actions replace the all-or-nothing rules that made every other diet collapse by week two.</p>
            </div>
            <div className="step">
              <div className="step-num">02</div>
              <h3>Eat real food, your way</h3>
              <p>A simple food guide and swap list — no eliminating entire food groups, no shakes, no gimmicks.</p>
            </div>
            <div className="step">
              <div className="step-num">03</div>
              <h3>Move without the gym</h3>
              <p>A low-stress movement approach that fits into a busy life instead of demanding an hour you don't have.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="inside">
            <div className="inside-book">
              <img src="assets/new-handbook-detail-cover.webp" alt="Idiot-Proof Habits for Weight Loss — alternate angle" style={{ width: "100%", maxWidth: "360px", aspectRatio: "3/4", objectFit: "cover", margin: "0 auto", boxShadow: "var(--shadow-book)", transform: "rotate(2deg)", display: "block" }} />
            </div>
            <div>
              <Eyebrow>What you'll get</Eyebrow>
              <h2 className="h-display" style={{ fontSize: "clamp(36px, 4vw, 56px)", margin: "12px 0 16px" }}>
                A short guide you'll actually finish.
              </h2>
              <p style={{ color: "var(--ink-muted)", margin: 0, maxWidth: "52ch" }}>
                Sixteen pages, no filler. Read it in one sitting tonight and
                start your first habit shift before bed.
              </p>
              <Checklist
                items={[
                  { title: "A simple, sustainable approach", body: "No fad rules — just the handful of habits that actually make weight loss stick." },
                  { title: "A ready-to-eat 7-day menu", body: "Skip the decision fatigue in week one with a done-for-you jumpstart plan." },
                  { title: "A printable habit tracker", body: "Fridge-ready — check off your small daily wins." },
                  { title: "A frictionless grocery checklist", body: "Shop with confidence, no label-reading required." },
                ]}
              />
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="pricing">
            <div>
              <Eyebrow style={{ color: "var(--accent)" }}>Ready?</Eyebrow>
              <h2 style={{ color: "#fff" }}>Small habits. No overhaul required.</h2>
              <p style={{ color: "rgba(255,255,255,.75)", maxWidth: "44ch", fontSize: 18 }}>
                Download instantly and start tonight with the Two-Minute
                Rule. If it doesn't work for you, you're covered.
              </p>
              <div className="guarantee">Money-back guarantee if it doesn't work for you</div>
            </div>
            <div className="price-card">
              <Checklist
                items={[
                  { title: "The complete 16-page guide", body: "PDF, instant download" },
                  { title: "Printable habit tracker", body: "Fridge-ready, one page" },
                  { title: "Grocery checklist", body: "Frictionless whole-food shopping" },
                ]}
              />
              <a className="btn btn-accent btn-lg" style={{ width: "100%", marginTop: 8 }} onClick={onBuy}>{ctaText}</a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── How it works / method page ────────────────────────

function MethodPage({ ctaText, onBuy, setPage }) {
  return (
    <main data-screen-label="03 How It Works">
      <section className="hero">
        <div className="container">
          <Eyebrow>The method</Eyebrow>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(48px, 6vw, 88px)", letterSpacing: "-0.015em",
            lineHeight: 1, margin: "20px 0 24px", maxWidth: "18ch",
          }}>
            Small habits, <em style={{ color: "var(--brand)", fontStyle: "italic" }}>plainly explained.</em>
          </h1>
          <p className="lede">
            Long-term weight loss isn't a massive overhaul. It's small daily
            choices, repeated, that compound over time.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Steps
            items={[
              { title: "Focus on today, not the scale", body: "Small, repeatable actions beat big outcome goals you can't control day to day." },
              { title: "Start smaller than feels useful", body: "A new habit should feel almost too easy to skip — that's what makes it stick." },
              { title: "Let your surroundings help", body: "Make the healthy choice the easy choice, and the tempting one a little harder to reach." },
            ]}
          />
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="inside" style={{ gridTemplateColumns: "1fr 0.8fr" }}>
            <div>
              <SectionHead
                eyebrow="Movement"
                title="Why low-stress movement beats the gym."
                lede="We'll show you the low-stress way to introduce exercise and keep it consistent — without wearing yourself out and quitting."
                align="stack"
              />
            </div>
            <img src="assets/movement-walking.png" alt="Low-stress daily movement" style={{ width: "100%", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow)" }} />
          </div>
        </div>
      </section>

      <section className="final-cta">
        <div className="container-narrow">
          <h2>If the method makes sense, <em>get the guide.</em></h2>
          <a className="btn btn-accent btn-lg" onClick={onBuy}>{ctaText}</a>
        </div>
      </section>
    </main>
  );
}

// ─── FAQ page ──────────────────────────────────────────

function FAQPage({ ctaText, onBuy }) {
  const groups = [
    {
      label: "The method",
      items: [
        ["Do I have to count calories?", "Not strictly. Understanding your caloric deficit and BMR (the guide includes the Mifflin-St Jeor formula) is a helpful starting point, but the core method is habit-based, not tracking-obsessed."],
        ["Is this just another restrictive diet?", "No. The guide is built around process goals — small, repeatable actions — instead of rigid outcome goals. There are no 'good' or 'bad' foods, just what works for you."],
        ["What if I slip up?", "Slips are a natural part of building habits. The guide's final chapter is entirely about staying compassionate and consistent — one off meal doesn't undo your progress."],
        ["Do I have to give up my favorite foods?", "No — the Idiot-Proof Swap Guide gives you higher-energy alternatives for sodas, bread, pasta, chips, cereal, and more, so you keep the textures you like."],
      ],
    },
    {
      label: "Movement",
      items: [
        ["Do I need a gym membership?", "No. The guide's movement strategy is low-stress by design — it burns fat without spiking hunger or draining your energy."],
        ["What if I have a busy desk job?", "The guide includes several easy ways to add more movement to your day without blocking out gym time."],
        ["What if the weather's bad?", "The guide covers simple indoor options for days you can't get outside."],
      ],
    },
    {
      label: "Buying & getting started",
      items: [
        ["What do I actually get?", "A 16-page PDF guide, downloadable immediately, plus a printable daily habit tracker and a frictionless whole-food grocery checklist."],
        ["Is this a subscription?", "No. You buy the guide once and own it forever."],
        ["Can I read it on my phone?", "Yes. The PDF works on any device."],
      ],
    },
    {
      label: "Food & results",
      items: [
        ["What's the Master Food Guide?", "A simple two-list system: foods to enjoy abundantly (proteins, healthy fats, low-carb veggies, low-sugar fruits) and foods to minimize (refined sugars, processed grains, industrial seed oils, fake diet foods)."],
        ["How much weight will I lose?", "A deficit of roughly 500–1,000 calories a day typically supports about 1–2 lbs per week. If that feels like too much, even a 200–300 calorie deficit still moves the needle and is easier to sustain."],
        ["Do I have to hit exact macros?", "No — the guide gives a starting-point range (roughly 30–35% protein, 25–30% fat, 35–45% carbs) to adjust based on your activity and hunger, not a rule to follow exactly."],
      ],
    },
  ];

  return (
    <main data-screen-label="05 FAQ">
      <section className="hero">
        <div className="container">
          <Eyebrow>FAQ</Eyebrow>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(48px, 6vw, 88px)", letterSpacing: "-0.015em",
            lineHeight: 1, margin: "20px 0 24px", maxWidth: "16ch",
          }}>
            Everything we get asked, <em style={{ color: "var(--brand)", fontStyle: "italic" }}>answered.</em>
          </h1>
        </div>
      </section>

      <section className="section-tight">
        <div className="container-narrow">
          {groups.map((g, gi) => (
            <div key={gi} style={{ marginBottom: 64 }}>
              <Eyebrow>{g.label}</Eyebrow>
              <div className="faq-list" style={{ marginTop: 24 }}>
                {g.items.map(([q, a], i) => (
                  <FAQItem key={i} q={q} a={a} defaultOpen={gi === 0 && i === 0} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="final-cta">
        <div className="container-narrow">
          <h2>Out of questions?</h2>
          <p className="lede" style={{ margin: "0 auto 32px" }}>
            One guide. Small daily habits. No willpower required.
          </p>
          <a className="btn btn-accent btn-lg" onClick={onBuy}>{ctaText}</a>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, HandbookPage, MethodPage, FAQPage, PrivacyPage, TermsPage, RefundPage });

// ─── Refund policy ──────────────────────────────────────

function RefundPage() {
  const today = new Date().toLocaleDateString("en-US", { year: "numeric", month: "long" });
  return (
    <LegalPage label="08 Refund Policy" title="Refund Policy" updated={today}>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>Handled by Lulu</h2>
        <p>Purchases of this guide are processed and fulfilled entirely through Lulu Press, our distribution partner. Refunds are handled by Lulu, not by us directly.</p>
      </section>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>Requesting a refund</h2>
        <p>If you're not satisfied with your purchase, contact Lulu Support with your order number and they can issue a refund on their end.</p>
      </section>
    </LegalPage>
  );
}

// ─── Privacy & Terms (generic legal pages) ─────────────

function LegalPage({ label, title, updated, children }) {
  return (
    <main data-screen-label={label}>
      <section className="section-tight">
        <div className="container-narrow">
          <Eyebrow>Legal</Eyebrow>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(36px, 5vw, 56px)", letterSpacing: "-0.01em",
            lineHeight: 1.05, margin: "16px 0 8px",
          }}>{title}</h1>
          <p style={{ color: "var(--ink-soft)", fontSize: 13, marginBottom: 40 }}>Last updated: {updated}</p>
          <div style={{ color: "var(--ink-muted)", fontSize: 16, lineHeight: 1.75, display: "flex", flexDirection: "column", gap: 28 }}>
            {children}
          </div>
        </div>
      </section>
    </main>
  );
}

function PrivacyPage() {
  const today = new Date().toLocaleDateString("en-US", { year: "numeric", month: "long" });
  return (
    <LegalPage label="06 Privacy" title="Privacy Policy" updated={today}>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>Information we collect</h2>
        <p>We collect information you provide directly, such as your name and email address when you contact us or sign up for updates, and standard technical data (like browser type and pages visited) collected automatically when you use this site.</p>
      </section>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>How we use it</h2>
        <p>We use this information to operate and improve the site, respond to your questions, and send you updates you've asked for. We do not sell your personal information.</p>
      </section>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>Purchases</h2>
        <p>Purchases of the ebook are processed by a third-party platform. Review that platform's own privacy policy for details on how your payment information is handled — we don't store payment details ourselves.</p>
      </section>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>Cookies</h2>
        <p>This site may use basic cookies or similar technologies to remember preferences and understand site usage. You can disable cookies in your browser settings.</p>
      </section>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>Your choices</h2>
        <p>You may request access to, correction of, or deletion of your personal information at any time by contacting us.</p>
      </section>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>Contact</h2>
        <p>Questions about this policy can be sent to our support email listed on the site.</p>
      </section>
    </LegalPage>
  );
}

function TermsPage() {
  const today = new Date().toLocaleDateString("en-US", { year: "numeric", month: "long" });
  return (
    <LegalPage label="07 Terms" title="Terms of Service" updated={today}>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>Acceptance of terms</h2>
        <p>By accessing or using this site, or purchasing the ebook, you agree to these terms. If you don't agree, please don't use the site.</p>
      </section>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>The product</h2>
        <p>The ebook is a digital product sold as-is for personal use. Upon purchase you receive a personal, non-transferable license to use the content — you may not resell, redistribute, or publicly share it.</p>
      </section>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>Not medical advice</h2>
        <p>Content on this site and in the ebook is for educational purposes only and isn't medical advice. Consult a doctor before starting any new diet or exercise routine, especially if you have underlying health conditions, are pregnant, or are taking medication. Individual results vary.</p>
      </section>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>Limitation of liability</h2>
        <p>We aren't liable for any indirect, incidental, or consequential damages arising from your use of the site or the ebook, to the fullest extent permitted by law.</p>
      </section>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>Changes to these terms</h2>
        <p>We may update these terms from time to time. Continued use of the site after changes means you accept the updated terms.</p>
      </section>
      <section>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>Contact</h2>
        <p>Questions about these terms can be sent to our support email listed on the site.</p>
      </section>
    </LegalPage>
  );
}