// screen-shell.jsx
// Shared chrome for the 6-screen narrative redesign:
//   - <ScreenShell>: section wrapper with background painting, header
//                   (number + title + subtitle + optional CTA), and
//                   a "next screen" hint at the bottom.
//   - <BrowserChrome>: the small mac-style window header used inside
//                     each screen to frame the product mock.
//   - <ScreenWindow>: the actual frame holding the mock content.

function ScreenCTA({ copy }) {
  return (
    <div className="screen-cta">
      <a href="/app/" className="btn btn-primary">
        {copy.screens.hero.ctaPrimary}
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
             stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
             style={{ marginLeft: 6 }}>
          <path d="M20 6L9 17l-5-5M16 4l4 0 0 4" />
        </svg>
      </a>
    </div>
  );
}

function ScreenShell({ id, num, label, title, sub, withCTA, copy, children, nextLabel, nextHref, divider }) {
  return (
    <section className="screen" id={id} data-screen-label={`${num} ${label}`}>
      <div className="screen-bg" aria-hidden="true" />
      <div className="screen-inner">
        <header className="screen-head">
          {!withCTA && (
            <div className="screen-tag">
              <span className="screen-tag__num">{num}</span>
              <span className="screen-tag__sep">·</span>
              <span className="screen-tag__label">{label}</span>
            </div>
          )}
          <h2 className="screen-title">
            {title}<span className="screen-title__dot">。</span>
          </h2>
          <p className="screen-sub">{sub}</p>
          {withCTA && <ScreenCTA copy={copy} />}
        </header>
        <div className="screen-stage">{children}</div>
        {nextLabel && (
          <div className="screen-outro">
            {divider && (
              <Divider
                variant={divider.variant}
                label={divider.label}
                lang={copy.brand?.en ? "zh" : "en"}
              />
            )}
            <a href={nextHref || "#"} className="screen-next" aria-label={`下一屏 ${nextLabel}`}>
              <span className="screen-next__txt">向下展开 · {nextLabel}</span>
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
                   stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </a>
          </div>
        )}
      </div>
    </section>
  );
}

function BrowserChrome({ title, right }) {
  return (
    <div className="bw-chrome">
      <div className="bw-dots"><i/><i/><i/></div>
      {title && <div className="bw-crumb">{title}</div>}
      <div className="bw-right">
        {right || (
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
               stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 7h16M4 12h16M4 17h10"/>
          </svg>
        )}
      </div>
    </div>
  );
}

function ScreenWindow({ chrome, className = "", children }) {
  return (
    <div className={`bw-frame ${className}`}>
      {chrome}
      <div className="bw-body">{children}</div>
    </div>
  );
}

Object.assign(window, { ScreenShell, ScreenCTA, BrowserChrome, ScreenWindow });