/* inputmuxd docs — in-development page.
   Explains the goal, current status, what's missing, and the crate layout.
   Body is fully translated EN/FR via i18n. */

function InputMuxd() {
  const t = window.t;
  const subtitle = t('inputmuxd.subtitle');
  const meta = t('inputmuxd.meta');
  const scopeItems = t('inputmuxd.scopeItems');
  const missingItems = t('inputmuxd.missingItems');
  const archItems = t('inputmuxd.archItems');
  const stack = t('inputmuxd.stack');

  const pad = (i) => String(i + 1).padStart(2, '0');

  return (
    <section className="section sw-page" id="inputmuxd">
      <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('inputmuxd.back')}</span>
        </a>

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

        {/* In-development banner */}
        <div className="upcoming-card reveal">
          <span className="upcoming-badge">{t('inputmuxd.wipBadge')}</span>
          <h2 className="upcoming-title">{t('inputmuxd.wipTitle')}</h2>
          <p className="upcoming-body">{t('inputmuxd.wipBody')}</p>
        </div>

        {/* The goal */}
        <div className="sw-section reveal">
          <h2 className="sw-section-title">{t('inputmuxd.goalTitle')}</h2>
          <p className="sw-para">{t('inputmuxd.goalP1')}</p>
          <p className="sw-para">{t('inputmuxd.goalP2')}</p>
        </div>

        {/* What's in scope */}
        <div className="sw-section reveal">
          <h2 className="sw-section-title">{t('inputmuxd.scopeTitle')}</h2>
          <p className="sw-section-lede">{t('inputmuxd.scopeLede')}</p>
          <div className="sw-overview-grid">
            {scopeItems.map((item, i) => (
              <div className="sw-overview-item" key={item.label}>
                <span className="sw-overview-num">{pad(i)}</span>
                <div className="sw-overview-body">
                  <span className="sw-overview-label">{item.label}</span>
                  <span className="sw-overview-desc">{item.status}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* What's missing */}
        <div className="sw-section reveal">
          <h2 className="sw-section-title">{t('inputmuxd.missingTitle')}</h2>
          <p className="sw-section-lede">{t('inputmuxd.missingLede')}</p>
          <div className="sw-overview-grid">
            {missingItems.map((item, i) => (
              <div className="sw-overview-item" key={i}>
                <span className="sw-overview-num">—</span>
                <div className="sw-overview-body">
                  <span className="sw-overview-desc">{item}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Architecture */}
        <div className="sw-section reveal">
          <h2 className="sw-section-title">{t('inputmuxd.archTitle')}</h2>
          <p className="sw-section-lede">{t('inputmuxd.archLede')}</p>
          <div className="sw-overview-grid">
            {archItems.map((item, i) => (
              <div className="sw-overview-item" key={item.name}>
                <span className="sw-overview-num">{pad(i)}</span>
                <div className="sw-overview-body">
                  <span className="sw-overview-label">{item.name}</span>
                  <span className="sw-overview-desc">{item.desc}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Stack */}
        <div className="sw-section reveal">
          <h2 className="sw-section-title">{t('inputmuxd.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>

        {/* CTA */}
        <div className="sw-cta-block reveal">
          <h2 className="sw-section-title">{t('inputmuxd.ctaTitle')}</h2>
          <p className="sw-cta-body">{t('inputmuxd.ctaBody')}</p>
          <a href="#/contact" className="btn btn-primary sw-big-cta">
            <span>{t('inputmuxd.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>
    </section>
  );
}

window.InputMuxd = InputMuxd;