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 Work({ onSent }) {
  const [form, setForm] = React.useState({ name: "", email: "", format: "In person", note: "" });
  const [plan, setPlan] = React.useState("3m");
  const [list, setList] = React.useState(true);
  const [err, setErr] = React.useState(false);
  const set = k => e => setForm({ ...form, [k]: e.target.value });
  const submit = e => {
    e.preventDefault();
    if (!form.email.includes("@")) { setErr(true); return; }
    setErr(false); onSent();
  };
  return <>
    <Section tone="linen" pad="var(--space-9)">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "var(--space-9)", alignItems: "start" }}>
        <div>
          <SectionHeading eyebrow="Work with me" title="Start with one conversation" lead="Tell me where you are. I reply within two working days." />
          <div style={{ marginTop: "var(--space-7)", display: "grid", gap: "var(--space-4)" }}>
            <Radio name="plan" label="Initial consultation" description="60 minutes · in person or online" checked={plan === "1"} onChange={() => setPlan("1")} />
            <Radio name="plan" label="Three-month program" description="Six fortnightly sessions and a written protocol" checked={plan === "3m"} onChange={() => setPlan("3m")} />
            <Radio name="plan" label="Ongoing practice" description="Monthly, for existing clients" checked={plan === "m"} onChange={() => setPlan("m")} />
          </div>
        </div>
        <Card padding="var(--space-7)">
          <form onSubmit={submit} style={{ display: "grid", gap: "var(--space-5)" }}>
            <Field label="Full name" htmlFor="w-name" required><Input id="w-name" value={form.name} onChange={set("name")} placeholder="Your name" /></Field>
            <Field label="Email" htmlFor="w-email" required error={err ? "Enter a valid email address." : undefined} hint="Used only to reply to this enquiry.">
              <Input id="w-email" type="email" invalid={err} value={form.email} onChange={set("email")} placeholder="you@example.com" />
            </Field>
            <Field label="Preferred format" htmlFor="w-fmt"><Select id="w-fmt" value={form.format} onChange={set("format")}><option>In person</option><option>Online</option><option>Either</option></Select></Field>
            <Field label="What would you like help with?" htmlFor="w-note" hint="A sentence is plenty."><Textarea id="w-note" rows={4} value={form.note} onChange={set("note")} /></Field>
            <Checkbox label="Send me the monthly note" checked={list} onChange={e => setList(e.target.checked)} />
            <Button type="submit" size="lg">Send enquiry</Button>
          </form>
        </Card>
      </div>
    </Section>
    <Section tone="oat" pad="var(--space-7)">
      <div style={{ display: "flex", gap: "var(--space-8)", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between" }}>
        <div><Eyebrow tone="muted">Practice</Eyebrow><div style={{ font: "400 24px/1.4 var(--font-display)", color: "var(--ink-900)", marginTop: 8 }}>Bucharest · Online · hello@evenutrition.com</div></div>
        <Tooltip content="Replies within two working days"><span style={{ font: "400 14px/1 var(--font-body)", color: "var(--text-muted)", borderBottom: "1px dotted var(--ink-300)" }}>Response time</span></Tooltip>
      </div>
    </Section>
  </>;
}
Object.assign(window, { Work });