// src/Welcome.jsx — welcome screen with big Alcy mascot

const Welcome = ({ onAsk, kid }) => {
  const [text, setText] = React.useState("");
  const SUGGESTIONS = window.ALCY_DATA.SUGGESTIONS;

  const submit = (q) => {
    const v = (q || text).trim();
    if (!v) return;
    onAsk(v);
  };

  return (
    <div className="welcome fade-in">
      <div className="welcome-mascot">
        <div className="blob"></div>
        <img src="assets/alcy.png" alt="Alcy, mascotte de l'association" />
      </div>

      <div className="welcome-copy">
        <span className="welcome-eyebrow">
          Association · Mémoires d'Auchy-lez-Orchies
        </span>
        <h1 className="welcome-title">
          Bonjour ! Je suis <em>Alcy</em>.<br />
          Que voulez-vous {kid ? "découvrir" : "explorer"} aujourd'hui ?
        </h1>
        <p className="welcome-sub">
          {kid
            ? "Pose-moi une question sur le village ! Je connais les forgerons, les courses de vélo, les écoles d'autrefois et plein d'histoires."
            : "Posez-moi une question, ou choisissez un parcours. J'ai accès à 1 842 photos, documents et témoignages — des cinq forges du village aux pavés de Paris–Roubaix."}
        </p>

        <form
          className="welcome-input"
          onSubmit={(e) => { e.preventDefault(); submit(); }}
        >
          <span style={{ color: "var(--text-soft)" }}>✦</span>
          <input
            placeholder={kid ? "Pose ta question à Alcy…" : "Posez votre question à Alcy…"}
            value={text}
            onChange={(e) => setText(e.target.value)}
            autoFocus
          />
          <button type="submit">
            Demander
            <span aria-hidden>→</span>
          </button>
        </form>

        <div className="suggestion-grid">
          {SUGGESTIONS.slice(0, 4).map((s) => (
            <button
              key={s.q}
              className="suggestion-card"
              onClick={() => submit(s.q)}
            >
              <span className="label">{s.icon} · {s.tag}</span>
              <span className="question">{s.q}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Welcome });