/* NutriDMS — Book Demo Flow */
const { useState: useBState, useEffect: useBEffect } = React;

const _BDCtx = { role: "super-admin", page: "book-demo", setPage: () => { }, lang: "en", setLang: () => { }, openCmd: () => { }, openNotif: () => { } };

function Stepper({ step, total }) {
  return (
    <div className="bd-stepper">
      {Array.from({ length: total }).map((_, i) =>
        <div key={i} className={`seg ${i < step ? "done" : i === step ? "current" : ""}`} />
      )}
    </div>);

}

function Step1({ data, set, next }) {
  const can = data.firstName && data.lastName && data.workEmail && data.company && data.role;
  return (
    <div>
      <div className="bd-step-label">Step 1 of 3 — About you</div>
      <h1 className="bd-h1">Tell us a little about your team.</h1>
      <p className="bd-sub">Your dedicated account manager uses this to prepare a tailored walkthrough. We never share or sell your details.</p>
      <div className="bd-form">
        <div className="bd-row">
          <div className="bd-field"><label>First name<span className="req">*</span></label><input value={data.firstName} onChange={(e) => set("firstName", e.target.value)} placeholder="Sarah" /></div>
          <div className="bd-field"><label>Last name<span className="req">*</span></label><input value={data.lastName} onChange={(e) => set("lastName", e.target.value)} placeholder="Chen" /></div>
        </div>
        <div className="bd-row">
          <div className="bd-field"><label>Work email<span className="req">*</span></label><input type="email" value={data.workEmail} onChange={(e) => set("workEmail", e.target.value)} placeholder="sarah@yourcompany.com" /><div className="hint">We'll send the confirmation here.</div></div>
          <div className="bd-field"><label>Phone (optional)</label><input value={data.phone} onChange={(e) => set("phone", e.target.value)} placeholder="+1 (555) 000-0000" /></div>
        </div>
        <div className="bd-row">
          <div className="bd-field"><label>Company<span className="req">*</span></label><input value={data.company} onChange={(e) => set("company", e.target.value)} placeholder="Acme Foods" /></div>
          <div className="bd-field"><label>Your role<span className="req">*</span></label>
            <select value={data.role} onChange={(e) => set("role", e.target.value)}>
              <option value="">Select a role…</option>
              <option>Head of Compliance</option><option>Head of Operations</option>
              <option>VP / Director, Nutrition</option><option>Quality Manager</option>
              <option>R&amp;D Lead</option><option>IT / Procurement</option><option>Founder / Executive</option><option>Other</option>
            </select>
          </div>
        </div>
        <div className="bd-row">
          <div className="bd-field"><label>Team size</label>
            <select value={data.teamSize} onChange={(e) => set("teamSize", e.target.value)}>
              <option>1–10</option><option>11–50</option><option>51–200</option><option>201–1,000</option><option>1,000+</option>
            </select>
          </div>
          <div className="bd-field"><label>Industry</label>
            <select value={data.industry} onChange={(e) => set("industry", e.target.value)}>
              <option>Food Manufacturing</option><option>Restaurants / QSR</option><option>Healthcare / Clinical</option>
              <option>Meal Prep / D2C</option><option>Wellness Platform</option><option>Enterprise Kitchens</option><option>Other</option>
            </select>
          </div>
        </div>
      </div>
      <div className="bd-actions">
        <span style={{ fontSize: 13, color: "var(--gray-500)" }}><Icon name="lock" size={13} stroke={2.2} /> Encrypted &amp; private</span>
        <button className="btn primary" disabled={!can} onClick={next}>Continue <Icon name="arrow-right" size={14} stroke={2.4} /></button>
      </div>
    </div>);

}

const USE_CASES = [
  { id: "recipe", ic: "chef-hat", t: "Recipe management & approvals" },
  { id: "compliance", ic: "shield-check", t: "Compliance & audit readiness" },
  { id: "ai", ic: "lightbulb", t: "AI validation with Laura.ai" },
  { id: "workflow", ic: "git-branch", t: "Workflow automation" },
  { id: "roles", ic: "users", t: "Multi-team role management" },
  { id: "evaluation", ic: "scale", t: "Evaluating NutriDMS for procurement" }];


function Step2({ data, set, next, back }) {
  const toggle = (id) => {
    const cur = new Set(data.useCases || []);
    cur.has(id) ? cur.delete(id) : cur.add(id);
    set("useCases", [...cur]);
  };
  return (
    <div>
      <div className="bd-step-label">Step 2 of 3 — What you're solving</div>
      <h1 className="bd-h1">What would you like to see in the demo?</h1>
      <p className="bd-sub">Pick anything that's relevant — your account manager will weight the agenda accordingly.</p>
      <div className="bd-pickgrid">
        {USE_CASES.map((u) => {
          const on = (data.useCases || []).includes(u.id);
          return (
            <button key={u.id} className={`bd-pick ${on ? "on" : ""}`} onClick={() => toggle(u.id)}>
              <span className="ic"><Icon name={u.ic} size={16} stroke={2.2} /></span>
              {u.t}
              {on && <Icon name="check" size={16} stroke={2.6} style={{ marginLeft: "auto", color: "var(--green-700)" }} />}
            </button>);

        })}
      </div>
      <div className="bd-form" style={{ marginTop: 24 }}>
        <div className="bd-field">
          <label>Anything specific you'd like the demo to cover?</label>
          <textarea value={data.notes} onChange={(e) => set("notes", e.target.value)} placeholder="e.g. We're a meal prep company migrating off spreadsheets — interested in the audit log and Laura.ai for our 200+ recipes." />
        </div>
      </div>
      <div className="bd-actions">
        <button className="btn ghost" onClick={back}><Icon name="arrow-left" size={14} stroke={2.4} /> Back</button>
        <button className="btn primary" onClick={next}>Continue <Icon name="arrow-right" size={14} stroke={2.4} /></button>
      </div>
    </div>);

}

function Step3({ data, set, next, back }) {
  // Generate 5 weekday slots starting from tomorrow
  const days = [];
  const today = new Date();
  let i = 1;
  while (days.length < 5) {
    const d = new Date(today); d.setDate(today.getDate() + i);
    if (d.getDay() !== 0 && d.getDay() !== 6) days.push(d);
    i++;
  }
  const dow = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  const slots = ["09:00", "10:30", "12:00", "14:00", "15:30", "17:00"];
  return (
    <div>
      <div className="bd-step-label">Step 3 of 3 — Pick a time</div>
      <h1 className="bd-h1">Pick a preferred time.</h1>
      <p className="bd-sub">All times shown in your local timezone. Your account manager will confirm within 24 hours and propose alternates if needed.</p>
      <label style={{ display: "block", fontSize: 13, fontWeight: 600, marginBottom: 10, color: "var(--text-primary)" }}>Preferred day</label>
      <div className="bd-daygrid">
        {days.map((d, idx) => {
          const key = d.toISOString().slice(0, 10);
          const on = data.day === key;
          return (
            <button key={idx} className={`bd-day ${on ? "on" : ""}`} onClick={() => set("day", key)}>
              <div className="dow">{dow[d.getDay()]}</div>
              <div className="num">{d.getDate()}</div>
            </button>);

        })}
      </div>
      <label style={{ display: "block", fontSize: 13, fontWeight: 600, marginBottom: 10, color: "var(--text-primary)" }}>Preferred time</label>
      <div className="bd-slotgrid">
        {slots.map((s) =>
          <button key={s} className={`bd-slot ${data.slot === s ? "on" : ""}`} onClick={() => set("slot", s)}>{s}</button>
        )}
      </div>
      <div className="bd-form" style={{ marginTop: 24 }}>
        <div className="bd-row">
          <div className="bd-field">
            <label>Timezone</label>
            <select value={data.tz} onChange={(e) => set("tz", e.target.value)}>
              <option>America/New_York (EST)</option><option>America/Los_Angeles (PST)</option>
              <option>Europe/London (GMT)</option><option>Europe/Paris (CET)</option>
              <option>Asia/Singapore (SGT)</option><option>Asia/Tokyo (JST)</option>
              <option>Australia/Sydney (AEDT)</option>
            </select>
          </div>
          <div className="bd-field">
            <label>Duration</label>
            <select value={data.duration} onChange={(e) => set("duration", e.target.value)}>
              <option>30 minutes</option><option>45 minutes</option><option>60 minutes</option>
            </select>
          </div>
        </div>
      </div>
      <div className="bd-actions">
        <button className="btn ghost" onClick={back}><Icon name="arrow-left" size={14} stroke={2.4} /> Back</button>
        <button className="btn primary" disabled={!data.day || !data.slot} onClick={next}><Icon name="calendar-check" size={14} stroke={2.4} /> Confirm Booking</button>
      </div>
    </div>);

}

function SuccessView({ data, reset }) {
  const dayStr = data.day ? new Date(data.day).toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric" }) : "—";
  return (
    <div style={{ padding: "40px 24px", minHeight: "100vh", background: "var(--ld-bg, #F8FAFC)" }}>
      <div className="bd-success">
        <div className="check-circle"><Icon name="check" size={42} stroke={3} /></div>
        <h1>Request received, {data.firstName || "there"}.</h1>
        <p className="lede">Your dedicated NutriDMS account manager will reach out within <strong>24 hours</strong> to confirm your demo and finalize the agenda.</p>

        <div className="summary">
          <h3>Demo Request Summary</h3>
          <div className="row"><span className="l">Name</span><span className="v">{data.firstName} {data.lastName}</span></div>
          <div className="row"><span className="l">Company</span><span className="v">{data.company}</span></div>
          <div className="row"><span className="l">Preferred slot</span><span className="v">{dayStr} · {data.slot || "—"}</span></div>
          <div className="row"><span className="l">Duration</span><span className="v">{data.duration}</span></div>
          <div className="row"><span className="l">Timezone</span><span className="v">{data.tz}</span></div>
        </div>

        <div className="next">
          <div className="ic"><Icon name="user-round" size={16} stroke={2.4} /></div>
          <div>
            <h4>What happens next</h4>
            <p>A NutriDMS account manager will email <strong>{data.workEmail || "you"}</strong> within 24 hours with a calendar confirmation, a pre-demo questionnaire, and your dedicated demo workspace.</p>
          </div>
        </div>

        <div style={{ display: "flex", gap: 10, justifyContent: "center" }}>
          <a href="Landing.html" className="btn secondary"><Icon name="arrow-left" size={14} stroke={2.4} /> Back to home</a>
          <a href="documentation.html" className="btn primary"><Icon name="book-open" size={14} stroke={2.2} /> Read the docs while you wait</a>
        </div>
      </div>
    </div>);

}

function BookDemoApp() {
  const [step, setStep] = useBState(0);
  const [done, setDone] = useBState(false);
  const [data, setData] = useBState({
    firstName: "", lastName: "", workEmail: "", phone: "",
    company: "", role: "", teamSize: "11–50", industry: "Food Manufacturing",
    useCases: [], notes: "",
    day: "", slot: "", tz: "America/New_York (EST)", duration: "30 minutes"
  });
  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));

  if (done) return (
    <AppCtx.Provider value={_BDCtx}>
      <SuccessView data={data} reset={() => { setDone(false); setStep(0); }} />
    </AppCtx.Provider>);


  return (
    <AppCtx.Provider value={_BDCtx}>
      <div className="bd-wrap">
        <div className="bd-left">
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 32 }}>
            <a href="Landing.html" className="bd-back" style={{ marginBottom: 0 }}><Icon name="arrow-left" size={14} stroke={2.4} /> Back to NutriDMS</a>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <LangSwitch />
              <ThemeToggle />
            </div>
          </div>
          <a href="Landing.html" className="ld-logo" style={{ marginBottom: 16 }}>
            <NutriHoriz height={40} />
          </a>
          <Stepper step={step} total={3} />
          {step === 0 && <Step1 data={data} set={set} next={() => setStep(1)} />}
          {step === 1 && <Step2 data={data} set={set} next={() => setStep(2)} back={() => setStep(0)} />}
          {step === 2 && <Step3 data={data} set={set} next={() => setDone(true)} back={() => setStep(1)} />}
        </div>

        <div className="bd-right">
          <span className="ld-eyebrow"><Icon name="user-round" size={12} stroke={2.5} /> Dedicated Account Manager</span>
          <h2>A human-led walkthrough, tailored to your operation.</h2>
          <p className="lede">No automated sales bots. A dedicated account manager prepares your demo based on your role, industry, and use case.</p>

          <div className="bd-am-card">
            <div className="row">
              <div className="av">MJ</div>
              <div>
                <div className="nm">MaryJoe Udochi</div>
                <div className="rl">Director, Enterprise · NutriDMS</div>
              </div>
              <span style={{ marginLeft: "auto", fontSize: 11, fontWeight: 700, padding: "4px 10px", borderRadius: 999, background: "rgba(105,159,42,.2)", color: "#B6DC85" }}>Online</span>
            </div>
            <div className="quote">"Most enterprises pick NutriDMS because of how Laura.ai compresses their compliance review time. Tell me what you're solving, I'll bring the right team."</div>
          </div>

          <div className="bd-promise">
            <div className="item">
              <div className="ic"><Icon name="clock" size={16} stroke={2.4} /></div>
              <div><h4>Response within 24 hours</h4><p>Your account manager will confirm your demo and propose alternate slots if needed.</p></div>
            </div>
            <div className="item">
              <div className="ic"><Icon name="presentation" size={16} stroke={2.4} /></div>
              <div><h4>Tailored agenda</h4><p>Built from your role, industry, and the use cases you selected, not a generic deck.</p></div>
            </div>
            <div className="item">
              <div className="ic"><Icon name="users" size={16} stroke={2.4} /></div>
              <div><h4>Right team in the room</h4><p>We'll loop in a solutions architect or compliance specialist if the use case warrants it.</p></div>
            </div>
            <div className="item">
              <div className="ic"><Icon name="rocket" size={16} stroke={2.4} /></div>
              <div><h4>Sandbox after the call</h4><p>Hands on access to your demo workspace pre loaded with sample recipes.</p></div>
            </div>
          </div>

          <div className="bd-trust-foot">
            <span className="item"><Icon name="shield-check" size={13} stroke={2.4} /> Enterprise-ready</span>
            <span className="item"><Icon name="lock" size={13} stroke={2.4} /> Auditability by design</span>
            <span className="item"><Icon name="server" size={13} stroke={2.4} /> 99.99% SLA</span>
            <span className="item"><Icon name="users" size={13} stroke={2.4} /> SSO / SAML</span>
          </div>
        </div>
      </div>
    </AppCtx.Provider>);

}

function BookDemoRoot() { return <I18nProvider><BookDemoApp /></I18nProvider>; }

ReactDOM.createRoot(document.getElementById("root")).render(<BookDemoRoot />);