// Conversation CTA — the final call-to-action. Dark editorial block with
// suggestion chips + composer + meta. Stronger contrast than the rest of
// the page so it reads as the natural endpoint of the journey.

const CHIPS = [
  { label: "Un site ou une app sur-mesure",  seed: "Je voudrais qu’on construise un site ou une application sur-mesure pour " },
  { label: "Déployer un agent IA",              seed: "J’aimerais déployer un agent IA pour automatiser " },
  { label: "Migrer depuis un no-code",       seed: "On a un outil sur Bubble / Notion / Excel à faire évoluer : " },
  { label: "Juste un café à Marseille",           seed: "Bonjour, on peut commencer par un café pour discuter ? " },
];

const Conversation = () => {
  const [selected, setSelected] = React.useState(null);
  const [text, setText] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const inputRef = React.useRef(null);

  const handlePick = (c) => {
    setSelected(c.label);
    setText(c.seed);
    setSent(false);
    requestAnimationFrame(() => inputRef.current && inputRef.current.focus());
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text.trim()) return;
    setSent(true);
    setText('');
    setSelected(null);
  };

  return (
    <section className="conv" data-screen-label="08 Conversation">
      <div className="conv__inner grain">
        <span className="conv__marker">
          <span className="conv__marker-br">[</span> 08 / Contact <span className="conv__marker-br">]</span>
        </span>

        <h2 className="conv__title">
          Et si on en <em>parlait</em> ?
        </h2>
        <p className="conv__sub">
          Pas de formulaire à dix champs. Décrivez votre besoin en une phrase, on vous répond dans la journée avec une première piste concrète.
        </p>

        <div className="conv__chips">
          {CHIPS.map(c => (
            <button
              key={c.label}
              type="button"
              className={`conv__chip ${selected === c.label ? 'is-selected' : ''}`}
              onClick={() => handlePick(c)}
            >{c.label}</button>
          ))}
        </div>

        <form className="conv__composer" onSubmit={handleSubmit}>
          <input
            ref={inputRef}
            type="text"
            className="conv__input"
            placeholder="Décrivez votre projet, ou commencez par bonjour…"
            value={text}
            onChange={(e) => setText(e.target.value)}
            aria-label="Votre message"
          />
          <button type="submit" className="conv__send">Envoyer →</button>
        </form>

        <div className={`conv__toast ${sent ? 'is-shown' : ''}`} aria-live="polite">
          [ Message reçu · on vous répond dans la journée ]
        </div>

        <div className="conv__meta">
          <span><b>hello@latraverse.studio</b></span>
          <span>·</span>
          <span><b>+33 6 01 35 07 54</b></span>
          <span>·</span>
          <span>Réponse sous 24 h</span>
          <span>·</span>
          <span>13007 · Marseille</span>
        </div>
      </div>
    </section>
  );
};

window.Conversation = Conversation;