/* eslint-disable */
/* StylistSection — full-bleed mid-page module driving traffic to the AI Stylist.
   Editorial photo + animated chat-preview + proof points + primary CTA. */
const SAMPLE_THREAD = [
  { from: "user", text: "Layered necklaces, gold, under $150" },
  { from: "ai",   text: "Three of our most-loved layered sets — all under $150, pre-styled to mix. Waterproof too." },
  { from: "user", text: "Gift for my mom, she likes minimal" },
  { from: "ai",   text: "The Cameo Drop is our #1 pick for her — quiet, classic, never tarnishes." },
];

function StylistSection({ onStart }) {
  const [shown, setShown] = React.useState(0);
  const ref = React.useRef(null);

  React.useEffect(() => {
    // Animate the preview thread once it scrolls into view.
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && shown === 0) {
        let i = 0;
        const tick = () => {
          i += 1;
          setShown(i);
          if (i < SAMPLE_THREAD.length) setTimeout(tick, 1100);
        };
        setTimeout(tick, 400);
      }
    }, { threshold: 0.35 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [shown]);

  return (
    <section className="stylist-section" ref={ref} data-screen-label="Stylist Section">
      <div className="stylist-grid">
        <div className="stylist-copy">
          <div className="eyebrow stylist-eyebrow">
            <span className="stylist-pulse"></span> NEW · POWERED BY AI
          </div>
          <h2 className="stylist-h">
            Tell us your vibe.<br/>
            <em className="editorial">We'll find your look.</em>
          </h2>
          <p className="stylist-p">
            Your personal stylist, on demand. Five quick questions and our AI curates pieces built around you — your vibe, your occasion, your person.
          </p>
          <div className="stylist-proof">
            <div className="stylist-proof-item">
              <div className="stylist-proof-n">12,400+</div>
              <div className="stylist-proof-l">looks curated this week</div>
            </div>
            <div className="stylist-proof-divider"></div>
            <div className="stylist-proof-item">
              <div className="stylist-proof-n">30 sec</div>
              <div className="stylist-proof-l">to your personalized picks</div>
            </div>
            <div className="stylist-proof-divider"></div>
            <div className="stylist-proof-item">
              <div className="stylist-proof-n">4.9 ★</div>
              <div className="stylist-proof-l">from stylist users</div>
            </div>
          </div>
          <div className="stylist-cta-row">
            <button className="btn-primary btn-lg" onClick={onStart}>FIND YOUR LOOK →</button>
            <span className="stylist-fine">Free · No signup required</span>
          </div>
          <blockquote className="stylist-quote">
            <p>"Felt like texting a friend with great taste. Found the perfect anniversary gift in 90 seconds."</p>
            <cite>— Maya R., verified buyer</cite>
          </blockquote>
        </div>

        <div className="stylist-preview">
          <div className="stylist-phone">
            <div className="stylist-phone-head">
              <span className="stylist-dot"></span>
              <div>
                <div className="stylist-phone-title">DROP Stylist</div>
                <div className="stylist-phone-sub">Replies instantly</div>
              </div>
            </div>
            <div className="stylist-phone-feed">
              {SAMPLE_THREAD.slice(0, shown).map((m, i) => (
                <div key={i} className={"stylist-msg stylist-msg-" + m.from}>
                  {m.from === "ai" && <span className="stylist-avatar"><span className="stylist-dot"></span></span>}
                  <div className="stylist-bubble">{m.text}</div>
                </div>
              ))}
              {shown > 0 && shown < SAMPLE_THREAD.length && (
                <div className="stylist-msg stylist-msg-ai">
                  <span className="stylist-avatar"><span className="stylist-dot"></span></span>
                  <div className="stylist-bubble stylist-typing"><span></span><span></span><span></span></div>
                </div>
              )}
            </div>
            <div className="stylist-phone-input">
              <span>Ask anything…</span>
              <button onClick={onStart} aria-label="Try it">→</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.StylistSection = StylistSection;