; }); } function formatInline(s) { return s .replace(/&/g, "&").replace(/$1") .replace(/\*(.+?)\*/g, "$1"); } // ---- Date helpers function getWeekNumber(d) { const date = new Date(d); date.setHours(0, 0, 0, 0); date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7); const week1 = new Date(date.getFullYear(), 0, 4); return 1 + Math.round(((date - week1) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7); } const NL_DAYS = ["Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag"]; const NL_MONTHS = ["januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december"]; // ---- Shared UI function SiteHeader({ active = "coach" }) { const now = new Date(); const wk = getWeekNumber(now); const day = NL_DAYS[now.getDay()]; const dateStr = `${now.getDate()} ${NL_MONTHS[now.getMonth()]} ${now.getFullYear()}`; return (

Gratis AI moestuincoach · geen account Beta · Claude AI

{/* Mascot + intro — left/right grid */}

Hallo, ik ben Moos.

Jouw AI moestuincoach — stel je vraag in gewoon Nederlands en krijg meteen een eerlijk antwoord. Diagnoses, zaaiadvies, plantgidsen.

{/* The centerpiece input */}

setText(e.target.value)}
            onKeyDown={e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); } }}
            rows={2}
          />
          <button className="ask" onClick={submit} disabled={busy || !text.trim()}>
            <span>Vraag</span>
            <span className="arrow">→</span>
          </button>
        </div>
        <div className="ask-meta">
          <span><span className="free">● Gratis</span>  ·  geen registratie · onbeperkt</span>
          <span>Enter om te versturen</span>
        </div>

<div className="starters">
          <div className="lbl">— Of probeer een van deze vragen</div>
          <div className="chips">
            {STARTERS.map(s =>
              <button className="chip" key={s.q} onClick={() => onAsk(s.q)}>
                <span className="cat">{s.cat}</span>
                {s.q}
              </button>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function ChatView({ messages, busy, onAsk, onReset }) {
  const endRef = useRef(null);
  const [text, setText] = useState("");

useEffect(() => {
    window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
  }, [messages.length, busy]);

function submit() {
    const t = text.trim();
    if (!t || busy) return;
    onAsk(t);
    setText("");
  }

return (
    <section className="chat-view">
      <div className="wrap">
        <div className="chat-stream">
          {messages.map((m, i) =>
            <div className={`msg ${m.role}`} key={i}>
              {m.role === "bot"
                ? <MascotAvatar />
                : <div className="avatar">?</div>
              }
              <div>
                <div className="who">{m.role === "user" ? "Jij" : "Moos · moestuincoach"}</div>
                <div className="body">
                  {m.role === "user"
                    ? m.text
                    : m.text
                      ? renderMarkdown(m.text)
                      : <div className="thinking">
                          <span>Even nadenken</span>
                          <span className="dots"><span></span><span></span><span></span></span>
                        </div>
                  }
                </div>
              </div>
            </div>
          )}
          <div ref={endRef}></div>
        </div>

<div className="chat-actions">
          <button className="primary" onClick={onReset}>↺ Nieuwe vraag</button>
          <button onClick={() => onAsk("Geef me meer details")}>↪ Meer details</button>
          <button onClick={() => onAsk("Welk product of gereedschap heb ik hiervoor nodig?")}>↪ Wat heb ik nodig?</button>
          <button onClick={() => onAsk("Hoe voorkom ik dit volgend seizoen?")}>↪ Volgend jaar voorkomen</button>
        </div>

<div className="ask-box compact">
          <textarea
            className="input"
            placeholder="Vraag iets vervolgs..."
            value={text}
            onChange={e => setText(e.target.value)}
            onKeyDown={e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); } }}
            rows={1}
          />
          <button className="ask" onClick={submit} disabled={busy || !text.trim()}>
            <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <section className="how">
      <div className="wrap">
        <div className="section-head" style={{ borderBottomColor: "var(--ink)", marginBottom: 40 }}>
          <h2>Hoe het <span className="it">werkt.</span></h2>
          <p className="intro">Drie dingen om te weten voor je aan de slag gaat.</p>
          <span className="meta">In beta sinds mei 2026</span>
        </div>
        <div className="grid">
          <div className="step">
            <div className="num">01</div>
            <h3>Stel een vraag, in gewoon Nederlands.</h3>
            <p>"Waarom krullen mijn tomatenblaadjes?" of "Wat zaai ik in mei?" — geen tuinjargon nodig. Hoe specifieker, hoe beter het antwoord.</p>
          </div>
          <div className="step">
            <div className="num">02</div>
            <h3>Krijg een direct antwoord — geen account.</h3>
            <p>Moos geeft een korte diagnose, drie tot vijf concrete stappen, en zegt het als-ie het niet zeker weet. Geen ruis, geen pop-ups.</p>
          </div>
          <div className="step">
            <div className="num">03</div>
            <h3>Vraag door tot je verder kan.</h3>
            <p>Bouw op het vorige antwoord door. Of klik op "wat heb ik nodig?" voor een tool- of zadenadvies — daar verdienen we wat aan, daarom is de coach zelf gratis.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- API call — via /api/chat (proxied by server.js to keep the key server-side)

async function callCoach(conversationMessages) {
  const response = await fetch("/api/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ system: COACH_SYSTEM_PROMPT, messages: conversationMessages }),
  });
  if (!response.ok) {
    const err = await response.text().catch(() => "");
    throw new Error(`Server antwoordde ${response.status}: ${err}`);
  }
  const data = await response.json();
  return data.content[0].text;
}

// ---- Main app

function CoachApp() {
  const [messages, setMessages] = useState([]);
  const [busy, setBusy]         = useState(false);

useEffect(() => { window.MoestuinCoach.seedIfEmpty(); }, []);

async function askCoach(question) {
    setBusy(true);
    setMessages(prev => [...prev, { role: "user", text: question }, { role: "bot", text: "" }]);
    window.MoestuinCoach.logQuestion(question);

try {
      const history = [...messages, { role: "user", text: question }]
        .filter(m => m.text)
        .map(m => ({ role: m.role === "bot" ? "assistant" : "user", content: m.text }));

const reply = await callCoach(history);

setMessages(prev => {
        const copy = [...prev];
        copy[copy.length - 1] = { role: "bot", text: reply };
        return copy;
      });

function reset() {
    setMessages([]);
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

const inChat = messages.length > 0;

return (
    <>
      <SiteHeader active="coach" />
      {inChat
        ? <ChatView messages={messages} busy={busy} onAsk={askCoach} onReset={reset} />
        : <CoachHero onAsk={askCoach} busy={busy} />
      }
      {!inChat && <Wall onAsk={askCoach} />}
      {!inChat && <HowItWorks />}
      <SiteFooter />
    </>
  );
}

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

Wat anderen vroegen

Hallo, ik ben Moos.