/* Raybox docs — placeholder page with "upcoming" message.
   Will be filled in when the project leaves WIP. */

function Raybox() {
  const t = window.t;
  const subtitle = t('raybox.subtitle');
  const stack = t('raybox.stack');

  return (
    <section className="section sw-page" id="raybox">
      <div className="container">

        <a href="#/docs" className="sw-back">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 12L3 7L9 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          <span>{t('raybox.back')}</span>
        </a>

        <div className="sw-hero reveal">
          <span className="sw-eyebrow">{t('raybox.eyebrow')}</span>
          <h1 className="sw-title">{t('raybox.title')}</h1>
          <p className="sw-subtitle">
            {subtitle.before}<em>{subtitle.em}</em>{subtitle.after}
          </p>
          <p className="sw-desc">{t('raybox.description')}</p>
        </div>

        <div className="upcoming-card reveal">
          <span className="upcoming-badge">{t('raybox.upcomingBadge')}</span>
          <h2 className="upcoming-title">{t('raybox.upcomingTitle')}</h2>
          <p className="upcoming-body">{t('raybox.upcomingBody')}</p>
          <a href="#/contact" className="btn btn-primary">
            <span>{t('raybox.ctaContact')}</span>
            <svg className="btn-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>

        <div className="sw-section reveal">
          <h2 className="sw-section-title">{t('raybox.stackTitle')}</h2>
          <div className="sw-provider-grid">
            {stack.map(name => (
              <div className="sw-provider" key={name}>
                <span className="sw-provider-dot" />
                <span>{name}</span>
              </div>
            ))}
          </div>
        </div>

      </div>
    </section>
  );
}

window.Raybox = Raybox;