// Stylist showcase — left copy + right interactive chat tabs
function Stylist() {
  const [tab, setTab] = React.useState(0);

  const conversations = [
    {
      label: 'Un mariage en juin',
      messages: [
        { from: 'user', text: "J'ai un mariage en juin, dress code champêtre, je veux quelque chose de fluide." },
        { from: 'bot', text: "Une robe midi ivoire ou pêche, avec une matière fluide (soie lavée, satin léger). Je te propose trois pièces dans ton budget, toutes essayables :" },
      ],
      recs: [
        { swatch: 'linear-gradient(160deg, #efdfc7, #d8b58a)', nm: 'Sézane · 145€' },
        { swatch: 'linear-gradient(160deg, #f4d7c6, #c48b6b)', nm: 'Sandro · 189€' },
        { swatch: 'linear-gradient(160deg, #e6d8c4, #b59b75)', nm: 'Rouje · 215€' },
      ],
    },
    {
      label: 'Un week-end à Lisbonne',
      messages: [
        { from: 'user', text: "Tenues vacances Lisbonne, 3 jours, j'aime le minimal et le lin." },
        { from: 'bot', text: "Voici une capsule en lin et coton lourd, tons sable et terracotta. Trois pièces qui se combinent en 5 looks différents :" },
      ],
      recs: [
        { swatch: 'linear-gradient(160deg, #d4b890, #a07a4f)', nm: 'COS · 89€' },
        { swatch: 'linear-gradient(160deg, #d8b09a, #9c674c)', nm: 'Arket · 109€' },
        { swatch: 'linear-gradient(160deg, #e8dfd0, #b7a585)', nm: 'Uniqlo · 49€' },
      ],
    },
    {
      label: 'Réunion client',
      messages: [
        { from: 'user', text: "Réunion client demain, je veux paraître chic sans être trop formelle." },
        { from: 'bot', text: "Un tailleur déstructuré avec une pièce souple en dessous. Voici trois associations dans ta garde-robe + 1 achat :" },
      ],
      recs: [
        { swatch: 'linear-gradient(160deg, #3a3a3a, #1a1a1a)', nm: 'Maje · 295€' },
        { swatch: 'linear-gradient(160deg, #5f6f5f, #2c3e2c)', nm: 'The Kooples · 245€' },
        { swatch: 'linear-gradient(160deg, #c4a17a, #826045)', nm: 'Massimo Dutti · 159€' },
      ],
    },
  ];

  const conv = conversations[tab];

  return (
    <section className="stylist" id="styliste">
      <div className="container">
        <div className="section-meta">
          <div className="section-num"><em style={{fontStyle:'italic'}}>iii</em></div>
          <div className="section-label">Styliste IA<span className="dot"></span>Une amie qui s'y connaît, dans ta poche</div>
        </div>

        <div className="stylist-grid">
          <div className="stylist-copy">
            <h2>
              Pas <em>une</em> tenue.
              <br />
              La tienne.
            </h2>
            <p className="lede">
              Décris l'occasion, le mood, le budget.<br />
              Myrrae compose des looks
              choisis dans tes marques préférées, adaptés à ta morphologie,
              ton style et la météo de la semaine.
            </p>
            <ul className="stylist-features">
              <li>
                <div className="icon">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="9" cy="9" r="7"/><path d="M5 9l2.5 2.5L13 7"/></svg>
                </div>
                <div>
                  <h4>Comprend ton style</h4>
                  <p>Myrrae sait si tu es plutôt Sézane ou Maje, oversized ou cintré.</p>
                </div>
              </li>
              <li>
                <div className="icon">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 7h12M3 11h12M3 15h8M3 3h8"/></svg>
                </div>
                <div>
                  <h4>Recommande à travers les marques</h4>
                  <p style={{whiteSpace:'nowrap'}}>Le bon vêtement parmi différentes marques, c'est toi qui décides.</p>
                </div>
              </li>
              <li>
                <div className="icon">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M9 2v14M2 9h14M4.5 4.5l9 9M13.5 4.5l-9 9"/></svg>
                </div>
                <div>
                  <h4>Compose des tenues</h4>
                  <p style={{whiteSpace:'nowrap'}}>Un haut, un bas, un accessoire qui marchent ensemble.</p>
                </div>
              </li>
            </ul>
          </div>

          <div className="chat-mock">
            <div className="chat-tabs">
              {conversations.map((c, i) => (
                <button
                  key={i}
                  className={'chat-tab ' + (i === tab ? 'active' : '')}
                  onClick={() => setTab(i)}
                >
                  {c.label}
                </button>
              ))}
            </div>
            <div className="chat-body" key={tab}>
              {conv.messages.map((m, i) => (
                <div key={i} className={'msg ' + m.from} style={{animationDelay: (i * 250) + 'ms'}}>
                  {m.text}
                </div>
              ))}
              <div className="recs" style={{animationDelay:'700ms'}}>
                {conv.recs.map((r, i) => (
                  <div key={i} className="rec" style={{background: r.swatch, animation: 'msgIn 700ms ' + (700 + i*120) + 'ms both'}}>
                    <div className="nm">{r.nm}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="chat-input-mock">
              <div className="ph">Décris ce que tu cherches…</div>
              <div className="send">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <path d="M2 8l12-6-3.5 12L8 9 2 8z" fill="currentColor"/>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Stylist = Stylist;