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 } = window.DesignSystem_da6ab2;
function Method() {
  const [tab, setTab] = React.useState("one");
  const steps = [
    ["Assess", "A full intake: medical history, recent bloods, training load, sleep, and a normal week of eating recorded as it actually happens."],
    ["Structure", "A written protocol — meals, timing, portions and a short shopping list. Built from whole food, around your schedule."],
    ["Practice", "Fortnightly sessions. We adjust the protocol as results, seasons and training change, rather than restarting it."],
    ["Maintain", "Once the structure holds without effort, sessions step down to monthly with a quarterly bloods review."]
  ];
  const panels = {
    one: "One to one is the default: a private protocol, fortnightly sessions, and message support between them.",
    group: "A six-week group program covering the same system in a cohort of eight, with one individual session at the start.",
    corp: "Workplace sessions for teams — a talk, a practical structure, and optional individual consultations."
  };
  return <>
    <Section tone="linen" pad="var(--space-8)" style={{ paddingTop: "var(--space-9)" }}>
      <SectionHeading eyebrow="The method" title="Clear structure, repeated" lead="Eve Nutrition is not a meal plan you follow for six weeks. It is a system you keep." />
    </Section>
    <Section tone="oat">
      <div style={{ display: "grid", gap: "var(--space-7)" }}>
        {steps.map(([t, d], i) => (
          <div key={t} style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: "var(--space-7)", alignItems: "start", borderTop: "1px solid var(--oat-500)", paddingTop: "var(--space-5)" }}>
            <StepMarker n={i + 1} connector={false} />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "var(--space-7)" }}>
              <h3 style={{ font: "400 32px/1.15 var(--font-display)", color: "var(--ink-900)", margin: 0 }}>{t}</h3>
              <p style={{ font: "400 16px/1.65 var(--font-body)", color: "var(--text-body)", margin: 0, maxWidth: 520 }}>{d}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
    <Section tone="linen">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-9)", alignItems: "start" }}>
        <div>
          <SectionHeading eyebrow="Formats" title="Same system, three settings" />
          <Tabs items={[{ value: "one", label: "One to one" }, { value: "group", label: "Group program" }, { value: "corp", label: "Workplace" }]} value={tab} onChange={setTab} style={{ margin: "var(--space-6) 0 var(--space-5)" }} />
          <p style={{ font: "400 16px/1.65 var(--font-body)", color: "var(--text-body)", maxWidth: 520 }}>{panels[tab]}</p>
          <div style={{ display: "flex", gap: 8, marginTop: "var(--space-5)" }}><Tag>Gut health</Tag><Tag>Hormones</Tag><Tag>Training nutrition</Tag></div>
        </div>
        <ImageCard src={B + "assets/imagery/structure-in-practice.png"} ratio="4 / 3" eyebrow="Structure in practice" caption="Nutrition and movement, one system" />
      </div>
    </Section>
    <Section tone="linen" pad="var(--space-8)" style={{ paddingTop: 0 }}>
      <SectionHeading eyebrow="Questions" title="Before you book" style={{ marginBottom: "var(--space-6)" }} />
      <Accordion items={[
        { q: "Do I need a referral?", a: "No. Book an initial consultation and we start from where you are. If something needs a GP, I will tell you plainly." },
        { q: "Will you give me a meal plan?", a: "You get a protocol, not a menu: structure, timing and portions built from food you already eat. Menus stop working the first week life changes." },
        { q: "Do I have to give up anything?", a: "Nothing is banned. The work is in what you repeat, not what you avoid once." },
        { q: "How soon will I see a change?", a: "Most clients notice energy and digestion within three weeks. Anything measured in bloods takes a quarter." }
      ]} />
    </Section>
  </>;
}
Object.assign(window, { Method });
