const { SiteHeader, SiteFooter, SectionHeading, Eyebrow, Button, Card, Badge, Tag, Quote, ImageCard, StepMarker, Tabs, Accordion, Field, Input, Textarea, Select, Checkbox, Switch, Radio, Dialog, Toast, Tooltip, Logo, IconButton, ScriptLink, SketchIcon } = window.DesignSystem_da6ab2;

const Body = ({ children, style }) => <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--text-body)", maxWidth: 620, margin: "0 0 var(--space-4)", ...style }}>{children}</p>;

function Typewriter({ text, highlightFrom, style, highlightStyle }) {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (n >= text.length) return;
    const t = setTimeout(() => setN(n + 1), 95);
    return () => clearTimeout(t);
  }, [n, text]);
  const shown = text.slice(0, n);
  const splitAt = highlightFrom != null ? Math.max(0, Math.min(n, highlightFrom)) : n;
  return (
    <span style={style}>
      {shown.slice(0, splitAt)}
      {shown.length > splitAt && <span style={highlightStyle}>{shown.slice(splitAt)}</span>}
      <span style={{ opacity: n < text.length ? 1 : 0, transition: "opacity 120ms" }}>|</span>
    </span>
  );
}

function Reveal({ children, delay = 0 }) {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const io = new IntersectionObserver(es => { if (es[0].isIntersecting) { setOn(true); io.disconnect(); } }, { threshold: .2 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} style={{ opacity: on ? 1 : 0, transform: on ? "none" : "translateY(22px)", transition: "opacity 760ms var(--ease-brand) " + delay + "ms,transform 760ms var(--ease-brand) " + delay + "ms" }}>{children}</div>;
}

const HeadBlock = ({ eyebrow, title, width = 720, style }) => (
  <div style={{ maxWidth: width, ...style }}>
    {eyebrow && <div style={{ font: "700 var(--size-eyebrow)/1.4 var(--font-body)", letterSpacing: "var(--tracking-eyebrow)", textTransform: "uppercase", color: "var(--clay-500)", marginBottom: "var(--space-4)" }}>{eyebrow}</div>}
    <h2 style={{ font: "400 var(--size-h2)/var(--leading-heading) var(--font-display)", letterSpacing: "var(--tracking-heading)", color: "var(--ink-900)", margin: 0 }}>{title}</h2>
  </div>
);

function Hero({ onCta }) {
  return (
    <section style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", minHeight: 780, background: "var(--linen-500)" }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "var(--space-9) 6vw", boxSizing: "border-box" }}>
        <h1 style={{ font: "400 42px/1.14 var(--font-display)", letterSpacing: "-.015em", color: "var(--ink-900)", margin: 0, maxWidth: 460, minHeight: "2.3em" }}>
          <Typewriter text="Personalized nutrition built for real life." highlightFrom={31} highlightStyle={{ fontStyle: "italic" }} />
        </h1>
        <div style={{ width: "100%", maxWidth: 380, aspectRatio: "1 / 1", overflow: "hidden", background: "var(--oat-200)", margin: "var(--space-7) 0" }}>
          <img src={B + "assets/imagery/cutting-strawberries.jpg"} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
        <p style={{ font: "400 16px/1.85 var(--font-body)", color: "var(--text-body)", margin: "0 0 var(--space-5)", maxWidth: 480 }}>Eve Nutrition is a personalized nutrition practice founded by nutritionist Roxana Cristache, helping busy adults lose weight sustainably, improve their metabolic health, and build habits that actually fit their lives.</p>
        <p style={{ font: "400 16px/1.85 var(--font-body)", color: "var(--text-body)", margin: "0 0 var(--space-7)", maxWidth: 480 }}>No rigid diets. No starting over every Monday. We build a realistic approach around your health, your schedule, your goals and the way you actually live.</p>
        <ScriptLink size={14} onClick={onCta}>book a consultation</ScriptLink>
      </div>
      <div style={{ position: "relative", overflow: "hidden", minHeight: 520, background: "var(--oat-200)" }}>
        <img src={B + "assets/imagery/roxana-kitchen.jpg"} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      </div>
    </section>
  );
}

function Pattern() {
  return (
    <section style={{ background: "var(--linen-500)", padding: "var(--space-10) 0" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,.9fr) minmax(0,1.1fr)", gap: "var(--space-10)", alignItems: "start" }}>
          <div style={{ position: "sticky", top: 190 }}>
            <h2 style={{ font: "400 48px/1.08 var(--font-display)", letterSpacing: "-.02em", color: "var(--ink-900)", margin: 0 }}>It's time to stop <span style={{ color: "var(--sage-700)", fontStyle: "italic" }}>starting over.</span></h2>
            <div style={{ marginTop: "var(--space-7)", aspectRatio: "4 / 5", overflow: "hidden", background: "var(--oat-200)" }}>
              <img src={B + "assets/imagery/salmon-couscous-bowl.jpg"} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>
          <div style={{ paddingTop: 118 }}>
            <p style={{ font: "400 17px/1.7 var(--font-body)", color: "var(--text-body)", margin: "0 0 var(--space-8)", maxWidth: 560 }}>You have probably tried more than one way of eating. Maybe it worked for a while. Then work got busy, you traveled, you ate out more, your routine changed, or you simply got tired of thinking about food all the time.</p>
            <p style={{ font: "300 30px/1.32 var(--font-display)", color: "var(--clay-500)", margin: "0 0 var(--space-8)", maxWidth: 520 }}>That does not mean you need more discipline.</p>
            <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--text-body)", margin: "0 0 var(--space-6)", maxWidth: 560 }}>Most people who come to me already know what they should be doing. Knowing is not the problem. Making it work consistently in real life is.</p>
            <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--text-body)", margin: 0, maxWidth: 560 }}>At Eve, we take everything into account: your health, your history, your schedule, your habits, what you enjoy eating and what is actually realistic for you. Together, we create the structure you need to make progress without requiring your entire life to revolve around nutrition.</p>
          </div>
        </div>
        <div style={{ borderTop: "1px solid var(--border-subtle)", marginTop: "var(--space-10)", paddingTop: "var(--space-8)", display: "grid", gridTemplateColumns: "minmax(0,.9fr) minmax(0,1.1fr)", gap: "var(--space-10)", alignItems: "start" }}>
          <p style={{ font: "300 26px/1.4 var(--font-display)", color: "var(--ink-900)", margin: 0 }}>Most plans work when life is predictable. The problem is that life rarely stays that way.</p>
          <div>
            <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--text-body)", margin: "0 0 var(--space-6)", maxWidth: 560 }}>Work gets busy. You travel. You eat out. You have family dinners, weekends and days when nothing goes according to plan. If your nutrition only works when everything else is perfectly organized, it is going to be very difficult to maintain.</p>
            <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--text-body)", margin: 0, maxWidth: 560 }}>That is why I do not start by asking you to try harder. I start by looking at what is actually realistic for you.</p>
            <div style={{ marginTop: "var(--space-7)" }}><ScriptLink size={13} onClick={() => window.__go("method")}>see how the method works</ScriptLink></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ApproachIntro() {
  return (
    <section style={{ position: "relative", minHeight: 620, display: "flex", alignItems: "center", overflow: "hidden" }}>
      <img src={B + "assets/imagery/leaf-macro.jpg"} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(100deg, rgba(26,24,21,.82) 0%, rgba(26,24,21,.66) 52%, rgba(26,24,21,.34) 100%)" }} />
      <div style={{ position: "relative", maxWidth: "var(--container)", margin: "0 auto", padding: "var(--space-9) var(--gutter)", width: "100%", boxSizing: "border-box", display: "grid", gridTemplateColumns: "minmax(0,1.1fr) minmax(0,.9fr)", gap: "var(--space-9)", alignItems: "end" }}>
        <Reveal>
        <div>
          <Eyebrow tone="light" style={{ opacity: .8 }}>Approach</Eyebrow>
          <h2 style={{ font: "400 42px/1.12 var(--font-display)", letterSpacing: "-.015em", color: "var(--linen-500)", margin: "var(--space-5) 0 0" }}>My approach is simple: nutrition has to work in your <span style={{ color: "var(--sage-300)", fontStyle: "italic" }}>real life.</span></h2>
        </div>
        </Reveal>
        <Reveal delay={140}>
        <div>
          <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--linen-500)", margin: "0 0 var(--space-5)", maxWidth: 460 }}>Together, we look at your schedule, your habits, your health, your goals and what has or has not worked before. Then we build enough structure to make everyday decisions easier without adding another long list of rules to your life.</p>
          <p style={{ font: "300 22px/1.5 var(--font-display)", color: "var(--linen-500)", margin: 0 }}>It runs in three phases.</p>
        </div>
        </Reveal>
      </div>
    </section>
  );
}

function Phases() {
  const phases = [
    ["Reset", "Rebuilding metabolic stability, reducing the constant background noise around food, and creating consistency you are not fighting for.", "platter-mezze.jpg", "sprout"],
    ["Structure", "Personalized nutrition built around your actual week. Travel, restaurants, family dinners, the days that fall apart. This is where confidence comes from, because you stop needing the week to cooperate.", "movement-flatlay.jpg", "plate"],
    ["Sustain", "Maintenance, independence, and the part that matters most, which is never having to start over again.", "roxana-bowl.jpg", "cycle"]
  ];
  return (
    <section style={{ background: "var(--oat-200)" }}>
      <div style={{ position: "relative" }}>
        {phases.map(([t, d, img, icon], i) => {
          const flip = i % 2 === 1;
          return (
            <div key={t} style={{ position: "sticky", top: 0, zIndex: i + 1, height: "100vh", minHeight: 560, display: "grid", gridTemplateColumns: "minmax(0,1.05fr) minmax(0,1fr)", alignItems: "stretch", background: "var(--oat-200)", borderTop: "1px solid var(--oat-500)" }}>
              <div style={{ order: flip ? 2 : 1, position: "relative", overflow: "hidden", background: "var(--oat-300)" }}>
                <img src={B + "assets/imagery/" + img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div style={{ order: flip ? 1 : 2, position: "relative", display: "flex", flexDirection: "column", justifyContent: "center", padding: "var(--space-9) 7vw", boxSizing: "border-box" }}>
                <div style={{ position: "relative", maxWidth: 440 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: "var(--space-4)", marginBottom: "var(--space-5)", color: "var(--clay-500)" }}>
                    <SketchIcon name={icon} size={44} />
                  </div>
                  <h3 style={{ font: "400 46px/1.05 var(--font-display)", letterSpacing: "-.02em", color: "var(--ink-900)", margin: "0 0 var(--space-5)" }}>{t}</h3>
                  <div style={{ width: 56, height: 1, background: "var(--clay-400)", marginBottom: "var(--space-5)" }} />
                  <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--text-body)", margin: 0 }}>{d}</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ position: "relative", zIndex: 5, background: "var(--sage-500)", borderTop: "1px solid var(--oat-500)", padding: "var(--space-8) var(--gutter)", textAlign: "center" }}>
        <ScriptLink size={13} onClick={() => window.__go("method")}>see how the method works</ScriptLink>
      </div>
    </section>
  );
}

function Personalized() {
  return (
    <Section tone="linen">
      <div style={{ display: "grid", gridTemplateColumns: "1.15fr .85fr", gap: "var(--space-9)", alignItems: "center" }}>
        <Reveal>
        <div>
          <Eyebrow tone="muted">What personalized actually means</Eyebrow>
          <h2 style={{ font: "400 var(--size-h2)/var(--leading-heading) var(--font-display)", letterSpacing: "var(--tracking-heading)", color: "var(--ink-900)", margin: "var(--space-5) 0 var(--space-6)", maxWidth: 620 }}>Two people can have the exact same goal and still need completely different plans.</h2>
          <Body style={{ margin: 0 }}>A twelve-hour workday, family meals and frequent travel all create different needs. I do not use a template and ask you to make your life fit around it. We build your nutrition around your schedule, your history, what you will realistically do and the things you still want to enjoy.</Body>
          <div style={{ marginTop: "var(--space-7)" }}><ScriptLink size={13} onClick={() => window.__go("work")}>book a consultation</ScriptLink></div>
        </div>
        </Reveal>
        <Reveal delay={120}><ImageCard src={B + "assets/imagery/avocado-toast.jpg"} ratio="4 / 5" /></Reveal>
      </div>
    </Section>
  );
}

function WhoFor() {
  return (
    <section style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,.85fr)", alignItems: "stretch", background: "var(--sage-700)" }}>
      <div style={{ padding: "var(--space-10) 6vw", boxSizing: "border-box", display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <div style={{ font: "700 var(--size-eyebrow)/1.4 var(--font-body)", letterSpacing: "var(--tracking-eyebrow)", textTransform: "uppercase", color: "var(--linen-500)", opacity: .8, marginBottom: "var(--space-5)" }}>Who this is for</div>
        <p style={{ font: "300 28px/1.34 var(--font-display)", color: "var(--linen-500)", margin: "0 0 var(--space-7)", maxWidth: 560 }}>This is for people who have already done the reading, already tried the protocols, and want <span style={{ color: "var(--sage-300)", fontStyle: "italic" }}>a structure rather than another plan.</span></p>
        <p style={{ font: "400 17px/1.75 var(--font-body)", color: "var(--linen-500)", margin: "0 0 var(--space-4)", maxWidth: 520 }}>It works best when you are willing to change how your week is built, not just what is on the plate.</p>
        <p style={{ font: "400 17px/1.75 var(--font-body)", color: "var(--linen-500)", margin: 0, maxWidth: 520 }}>It is not a quick weight loss program and it is not the cheapest option available. If what you want is a meal plan to follow for thirty days, there are better places to spend your money.</p>
        <div style={{ marginTop: "var(--space-7)" }}><ScriptLink tone="linen" size={13} onClick={() => window.__go("method")}>see how the method works</ScriptLink></div>
      </div>
      <div style={{ position: "relative", overflow: "hidden", minHeight: 540, background: "var(--sage-400)" }}>
        <img src={B + "assets/imagery/greens-foam.jpg"} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      </div>
    </section>
  );
}

const SAMPLE_RESULTS = [
  ["Sarah", "Lost 18 pounds over four months", "She was eating one real meal a day and calling it discipline. We put breakfast back, moved her biggest meal to lunch, and the weight came off without her tracking a thing.", "berries-board.jpg", "Four months"],
  ["Ana", "Energy back by the third week", "The 3pm crash had been normal for years. It turned out to be lunch, not sleep. She now eats the same three lunches on repeat and has stopped needing the afternoon coffee.", "roxana-portrait.jpg", "Six months"],
  ["Dan", "Bloods normalized in one quarter", "Fasting glucose and triglycerides both came down into range. Nothing was banned. He cooks four nights a week now, which he had never done before.", "platter-couscous.jpg", "Three months"],
  ["Marta", "Twelve weeks without starting over", "Two work trips, a house move and a birthday week, and the structure held through all of it. That had never happened on any plan she had tried.", "kitchen-overhead.jpg", "Three months"],
  ["Ioana", "Stopped thinking about food all day", "The mental noise was the real complaint. With the decisions made in advance, she got the hours back and lost 9 pounds along the way.", "cutting-tomatoes.jpg", "Five months"],
  ["Elena", "Maintained for a full year", "She finished the program and kept the result through a year of ordinary life, with one session a month and no plan to return to.", "roxana-laptop.jpg", "One year"]
];

function Results() {
  const rail = React.useRef(null);
  const nudge = dir => { if (rail.current) rail.current.scrollBy({ left: dir * 460, behavior: "smooth" }); };
  return (
    <section style={{ background: "var(--linen-500)", padding: "var(--space-10) 0" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)", textAlign: "center" }}>
        <HeadBlock title="Real clients, real results" width={520} style={{ margin: "0 auto" }} />
      </div>

      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--space-8) var(--gutter) var(--space-5)", display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: "var(--space-6)" }}>
        {SAMPLE_RESULTS.slice(0, 4).map(([name, stat, story, img, dur], i) => (
          <Reveal key={name} delay={i * 90}>
          <figure style={{ margin: 0 }}>
            <div style={{ aspectRatio: "4 / 3", overflow: "hidden", background: "var(--oat-300)" }}>
              <img src={B + "assets/imagery/" + img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <figcaption>
              <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--space-4)", borderTop: "1px solid var(--border-subtle)", marginTop: "var(--space-5)", paddingTop: "var(--space-4)", font: "700 11px/1.4 var(--font-body)", letterSpacing: ".14em", textTransform: "uppercase", color: "var(--text-muted)" }}>
                <span style={{ color: "var(--ink-900)" }}>{name}</span><span>{dur}</span>
              </div>
              <h3 style={{ font: "400 22px/1.25 var(--font-display)", color: "var(--ink-900)", margin: "var(--space-4) 0 var(--space-4)" }}>{stat}</h3>
              <p style={{ font: "400 15px/1.7 var(--font-body)", color: "var(--text-body)", margin: 0 }}>{story}</p>
            </figcaption>
          </figure>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function Roxana() {
  return (
    <Section tone="sage">
      <div style={{ display: "grid", gridTemplateColumns: "1.15fr .85fr", gap: "var(--space-9)", alignItems: "center" }}>
        <Reveal><ImageCard src={B + "assets/imagery/roxana-desk.jpg"} ratio="4 / 5" /></Reveal>
        <Reveal delay={120}>
        <div>
          <Eyebrow tone="light" style={{ opacity: .85 }}>Meet Roxana</Eyebrow>
          <h2 style={{ font: "400 28px/1.28 var(--font-display)", letterSpacing: "-.005em", color: "var(--linen-500)", margin: "var(--space-5) 0 var(--space-6)", maxWidth: 620 }}>I have spent more than 12 years helping people understand that knowing what to eat is rarely the hardest part.</h2>
          <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--linen-500)", maxWidth: 620, margin: "0 0 var(--space-4)" }}>Most of the people who come to me have already tried multiple diets, plans and approaches. They are smart, motivated and usually know a lot about nutrition. What they are missing is not more information or more willpower. It is a way of eating that actually works with their life.</p>
          <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--linen-500)", maxWidth: 620, margin: "0 0 var(--space-4)" }}>Over the years, my approach has become less about asking people to follow the perfect plan and much more about understanding the person in front of me. Your schedule, your habits, your health, the way you live and what is actually realistic for you all matter.</p>
          <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--linen-500)", maxWidth: 620, margin: 0 }}>That is what I want Eve to give you: structure without restriction, guidance without obsession, and the confidence to eventually do this without me.</p>
          <div style={{ marginTop: "var(--space-7)" }}><ScriptLink tone="linen" size={13} onClick={() => window.__go("about")}>read my story</ScriptLink></div>
        </div>
        </Reveal>
      </div>
    </Section>
  );
}

function Newsletter() {
  const [first, setFirst] = React.useState("");
  const [last, setLast] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  return (
    <section style={{ background: "var(--linen-500)", padding: "var(--space-9) 0" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)", display: "grid", gridTemplateColumns: "minmax(0,1.05fr) minmax(0,.95fr)", gap: "var(--space-9)", alignItems: "center" }}>
        <div>
          <h2 style={{ font: "400 var(--size-h2)/var(--leading-heading) var(--font-display)", letterSpacing: "var(--tracking-heading)", color: "var(--ink-900)", margin: "0 0 var(--space-5)", maxWidth: 540 }}>Nutrition should make your life <span style={{ color: "var(--sage-700)", fontStyle: "italic" }}>easier</span>, not take up more of it.</h2>
          <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--text-body)", margin: "0 0 var(--space-5)", maxWidth: 520 }}>Join Eve Notes for practical nutrition guidance from Roxana on sustainable weight loss, metabolic health, eating out, travel, habits and building a way of eating that works in real life.</p>
          <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--text-body)", margin: 0, maxWidth: 520 }}>No trends to chase. No new diet every week. Just useful guidance you can actually use.</p>
        </div>
        <div style={{ borderTop: "1px solid var(--ink-900)", paddingTop: "var(--space-6)" }}>
          {sent ? (
            <div>
              <p style={{ font: "300 28px/1.4 var(--font-display)", color: "var(--ink-900)", margin: "0 0 var(--space-4)" }}>You're in.</p>
              <p style={{ font: "400 15px/1.7 var(--font-body)", color: "var(--text-muted)", margin: 0 }}>Check your inbox to confirm Eve Notes.</p>
            </div>
          ) : (
            <form onSubmit={e => { e.preventDefault(); if (email.includes("@")) setSent(true); }} style={{ display: "grid", gap: "var(--space-4)" }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4)" }}>
                <input type="text" required value={first} onChange={e => setFirst(e.target.value)} placeholder="First name"
                  style={{ font: "400 16px/1.3 var(--font-display)", color: "var(--ink-900)", background: "none", border: 0, borderBottom: "1px solid var(--border-strong)", padding: "var(--space-3) 0", outline: "none" }} />
                <input type="text" required value={last} onChange={e => setLast(e.target.value)} placeholder="Last name"
                  style={{ font: "400 16px/1.3 var(--font-display)", color: "var(--ink-900)", background: "none", border: 0, borderBottom: "1px solid var(--border-strong)", padding: "var(--space-3) 0", outline: "none" }} />
              </div>
              <input id="nl-email" type="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder="Email address"
                style={{ font: "400 16px/1.3 var(--font-display)", color: "var(--ink-900)", background: "none", border: 0, borderBottom: "1px solid var(--border-strong)", padding: "var(--space-3) 0", outline: "none" }} />
              <button type="submit" style={{ justifySelf: "start", marginTop: "var(--space-3)", background: "none", border: 0, cursor: "pointer", padding: 0, font: "600 12px/1 var(--font-body)", letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ink-900)", borderBottom: "1px solid var(--ink-900)", paddingBottom: 4 }}>Join Eve Notes →</button>
              <p style={{ font: "400 13px/1.6 var(--font-body)", color: "var(--text-muted)", margin: 0 }}>Thoughtful nutrition notes, delivered to your inbox. Unsubscribe anytime.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Close({ onCta }) {
  return (
    <section style={{ position: "relative", overflow: "hidden", minHeight: 620, display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "var(--space-10) var(--gutter)", boxSizing: "border-box" }}>
      <img src={B + "assets/imagery/cutting-tomatoes.jpg"} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "relative", width: "100%", maxWidth: 1060, margin: "0 auto", background: "var(--clay-100)", padding: "var(--space-9) var(--space-9)", boxSizing: "border-box" }}>
        <div style={{ maxWidth: 720, margin: "0 auto" }}>
          <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--ink-900)", margin: "0 0 var(--space-6)" }}>You have tried the diets. You have collected the information. You know how to start.</p>
          <h2 style={{ font: "400 var(--size-h2)/var(--leading-heading) var(--font-display)", letterSpacing: "var(--tracking-heading)", color: "var(--ink-900)", margin: "0 0 var(--space-6)" }}>Now let's build the way of eating you do not have to <span style={{ color: "var(--sage-700)", fontStyle: "italic" }}>keep starting over.</span></h2>
          <p style={{ font: "400 17px/1.8 var(--font-body)", color: "var(--ink-900)", margin: "0 auto var(--space-8)", maxWidth: 620 }}>The goal is not perfection. It is knowing what works for you, why it works, and how to keep doing it when real life happens.</p>
          <ScriptLink size={13} onClick={onCta}>book a consultation</ScriptLink>
        </div>
      </div>
    </section>
  );
}

function Home({ onCta }) {
  return <>
    <Hero onCta={onCta} />
    <Pattern />
    <ApproachIntro />
    <Phases />
    <Personalized />
    <WhoFor />
    <Results />
    <Roxana />
    <Newsletter />
    <Close onCta={onCta} />
  </>;
}
Object.assign(window, { Home });
