// BeaconSection.jsx — the in-page Beacon conversation and homepage intake.
// It shares its session with the floating launcher and full-screen overlay.
function SolChat() {
  const c = useBeaconChat();
  const threadRef = React.useRef(null);

  React.useEffect(() => {
    const thread = threadRef.current;
    if (thread) thread.scrollTop = thread.scrollHeight;
  }, [c.messages, c.thinking, c.frame]);

  return (
    <section id="request" className="section beacon-sec">
      <div className="haze-bloom" style={{ opacity: 0.2 }} aria-hidden="true" />
      <div className="wrap beacon-sec__wrap">
        <div className="pr-chat" id="sol-chat" data-hook="sol-chat">
          <div className="pr-request-head">
            <div className="eyebrow"><span className="dot" />Start here</div>
            <h3 className="h-section">Send your site. See a homepage prototype in 24 hours.</h3>
            <p className="p-lead">Share your current site and talk with Beacon. We&rsquo;ll review your business, what the site needs to make obvious, and what visitors need to do next, then prepare a first homepage direction before the call.</p>
          </div>

          <div className="chat-shell">
            <aside className="chat-context">
              <h4 className="ctx-title">What Beacon will ask</h4>
              <p className="ctx-sub">A few focused questions give Siteworks enough context to shape a useful first homepage direction.</p>
              <div className="ctx-note">No long intake. Share the site, answer what you can, and skip anything you are unsure about.</div>

              <div className="ctx-eyebrow ctx-eyebrow--steps">How the chat works</div>
              <ol className="ctx-steps">
                <li><span className="ctx-num">1</span><span>Share your site.</span></li>
                <li><span className="ctx-num">2</span><span>Answer a few questions.</span></li>
                <li><span className="ctx-num">3</span><span>Get your prototype.</span></li>
              </ol>
            </aside>

            <div className="chat-main" data-hook="chat-panel">
              <div className="chat-head">
                <div className="chat-head-id">
                  <span className="beacon-av beacon-av--head" aria-hidden="true"><img src={assetUrl("assets/beacon-face.png")} alt="" /></span>
                  <div className="chat-head-text">
                    <h4 className="chat-title">Let&rsquo;s rethink your website</h4>
                    <p className="chat-subtitle">Share your site and get pointed in the right direction.</p>
                  </div>
                </div>
                <div className="chat-head-ctl">
                  <button type="button" className="chat-expand" aria-label="Open full screen" onClick={c.openFullscreen}><i className="ri-fullscreen-line" /></button>
                  <span className="chat-state-badge"><span className="dot" />{c.leadStatusLabel}</span>
                </div>
              </div>

              <div className="chat-thread" id="chat-thread" data-hook="chat-thread" ref={threadRef}>
                <BeaconMessages />
              </div>

              {c.chatStatus && <p className="chat-status">{c.chatStatus}</p>}
              <BeaconComposer onSend={c.send} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SolChat });