/* Platform / ApexBridge detail page */
const { useState, useCallback } = React;
const { useReveal, Counter, FloatingBar, ContactModal, FinalCTA, Footer, Nav, MobileMenu, FOOTER_COLS, t, useLocale, localeUrl } = window.ATC;

/* ---------- Hero ---------- */
const PlatformHero = ({ onDemoClick }) => {
  useLocale();
  return (
    <section className="platform-hero">
      <div className="hero-grid" />
      <div className="container">
        <div className="breadcrumb">
          <a href={localeUrl('/')}>ATC</a><span className="sep">/</span>
          <a href={localeUrl('/platforms/')}>{t('apexbridge.breadcrumb.platforms')}</a><span className="sep">/</span>
          <span style={{ color: 'var(--accent)' }}>ApexBridge</span>
        </div>
        <div className="layout">
          <div>
            <div className="product-tag">
              <span className="accent">●</span> {t('apexbridge.hero.tag')}
            </div>
            <h1>{t('apexbridge.hero.title1')}<br /><span className="accent">{t('apexbridge.hero.title2')}</span>.</h1>
            <p className="lede">{t('apexbridge.hero.lede')}</p>
            <div className="hero-actions">
              <button className="btn btn-primary" onClick={onDemoClick}>{t('common.getStarted')}</button>
              <a className="btn btn-ghost" href="#how-it-works">{t('apexbridge.hero.howItWorks')}</a>
            </div>
          </div>
          <div className="product-mark">
            <div className="ring" />
            <div className="core">
              <div className="glyph">
                <div className="glyph-inner" />
              </div>
              <div className="label">ApexBridge<span className="v"> v2.4</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- Stats banner ---------- */
/* Numeric values (99, 2400000, 60, 9) and suffix stay English per §6 of the localization spec.
   The unit LABEL is translated via t(labelKey). */
const STATS = [
  { num: 99, suffix: '%', labelKey: 'apexbridge.stats.coverage' },
  { num: 2400000, suffix: '', labelKey: 'apexbridge.stats.loc' },
  { num: 60, suffix: '%', labelKey: 'apexbridge.stats.faster' },
  { num: 9, suffix: '', labelKey: 'apexbridge.stats.timeline' },
];

const Stats = () => {
  useLocale();
  return (
    <section className="stats-banner reveal">
      <div className="container">
        <div className="stats-grid">
          {STATS.map((s, i) => (
            <div className="stat-cell" key={i}>
              <div className="num"><Counter to={s.num} suffix={s.suffix} /></div>
              <div className="label">{t(s.labelKey)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- How it works ---------- */
/* Step "n" labels ("01".."04") stay English (visual numbering, identical across locales).
   Title / description / meta are translated via t() inside HowItWorks. */
const STEP_NUMS = ['01', '02', '03', '04'];

const HowItWorks = () => {
  useLocale();
  return (
    <section className="pipeline-section" id="how-it-works">
      <div className="container">
        <div className="section-header reveal">
          <div className="left">
            <span className="eyebrow eyebrow-accent">{t('apexbridge.howItWorks.eyebrow')}</span>
            <h2>{t('apexbridge.howItWorks.heading1')}<br />{t('apexbridge.howItWorks.heading2')}</h2>
          </div>
          <div className="right">{t('apexbridge.howItWorks.sub')}</div>
        </div>
        <div className="pipeline-steps reveal">
          {STEP_NUMS.map((n, i) => (
            <div className="pipeline-step" key={n}>
              <div className="step-num">{n}</div>
              <h4>{t(`apexbridgePage.steps.${i}.t`)}</h4>
              <p>{t(`apexbridgePage.steps.${i}.d`)}</p>
              <div className="meta">{t(`apexbridgePage.steps.${i}.meta`)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- Live pipeline visual ---------- */
const LiveVisual = () => {
  useLocale();
  return (
    <section style={{ padding: '120px 0', borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="section-header reveal">
          <div className="left">
            <span className="eyebrow eyebrow-accent">{t('apexbridge.liveVisual.eyebrow')}</span>
            <h2>{t('apexbridge.liveVisual.heading1')}<br />{t('apexbridge.liveVisual.heading2')}</h2>
          </div>
          <div className="right">{t('apexbridge.liveVisual.sub')}</div>
        </div>
        <div className="reveal" style={{
          background: 'var(--bg-2)', border: '1px solid var(--border)',
          borderRadius: 4, position: 'relative', height: 520, overflow: 'hidden',
        }}>
          <window.ApexBridgeVisual variant="pipeline" />
        </div>
      </div>
    </section>
  );
};

/* ---------- Architecture ----------
   Data-driven over apexbridgePage.archCells.{row1,row2,row3}[i] for layer/title/body
   and apexbridgePage.archCells.divider{1,2} for the divider spans. Row 2 cells get
   the "core" modifier (visually distinguished in CSS). */
const ARCH_ROW_KEYS = ['row1', 'row2', 'row3'];

const Architecture = () => {
  useLocale();
  return (
    <section className="arch-section">
      <div className="container">
        <div className="section-header reveal">
          <div className="left">
            <span className="eyebrow eyebrow-accent">{t('apexbridge.architecture.eyebrow')}</span>
            <h2>{t('apexbridge.architecture.heading1')}<br />{t('apexbridge.architecture.heading2')}</h2>
          </div>
          <div className="right">{t('apexbridge.architecture.sub')}</div>
        </div>
        <div className="arch-diagram reveal">
          {ARCH_ROW_KEYS.map((rowKey, ri) => (
            <React.Fragment key={rowKey}>
              <div className="arch-row">
                {[0, 1, 2].map((ci) => {
                  const isCore = ri === 1;
                  return (
                    <div className={`arch-cell ${isCore ? 'core' : ''}`} key={ci}>
                      <div className={`layer ${isCore ? 'core' : ''}`}>{t(`apexbridgePage.archCells.${rowKey}.${ci}.layer`)}</div>
                      <h5>{t(`apexbridgePage.archCells.${rowKey}.${ci}.title`)}</h5>
                      <p>{t(`apexbridgePage.archCells.${rowKey}.${ci}.body`)}</p>
                    </div>
                  );
                })}
              </div>
              {ri < 2 && (
                <div className="arch-divider">
                  <span>{t(`apexbridgePage.archCells.divider${ri + 1}`)}</span>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- Coverage matrix ----------
   pct stays numeric (per §6 of the localization spec); feat and note are translated via t().
   Header row labels come from apexbridge.coverage.{thFeature, thAutomation, thNotes}. */
const COVERAGE_PCTS = [100, 99, 100, 98, 100, 96, 70, 92];

const Coverage = () => {
  useLocale();
  return (
    <section className="coverage-section" id="coverage">
      <div className="container">
        <div className="section-header reveal">
          <div className="left">
            <span className="eyebrow eyebrow-accent">{t('apexbridge.coverage.eyebrow')}</span>
            <h2>{t('apexbridge.coverage.heading1')}<br />{t('apexbridge.coverage.heading2')}</h2>
          </div>
          <div className="right">{t('apexbridge.coverage.sub')}</div>
        </div>
        <table className="coverage-table reveal">
          <thead>
            <tr>
              <th style={{ width: '28%' }}>{t('apexbridge.coverage.thFeature')}</th>
              <th style={{ width: '34%' }}>{t('apexbridge.coverage.thAutomation')}</th>
              <th>{t('apexbridge.coverage.thNotes')}</th>
            </tr>
          </thead>
          <tbody>
            {COVERAGE_PCTS.map((pct, i) => (
              <tr key={i}>
                <td className="feat">{t(`apexbridgePage.coverage.${i}.feat`)}</td>
                <td className="pct">
                  {pct}%
                  <span className="coverage-bar"><span className="fill" style={{ width: `${pct}%` }} /></span>
                </td>
                <td className="note">{t(`apexbridgePage.coverage.${i}.note`)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
};

/* ---------- App ---------- */
const App = () => {
  useLocale();
  const [demoOpen, setDemoOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useReveal();
  const onDemoClick = useCallback(() => setDemoOpen(true), []);
  const onMenuClick = useCallback(() => setMenuOpen(true), []);
  return (
    <>
      <Nav onDemoClick={onDemoClick} homeUrl="/" showPlatformNav showProductsNav activeSection="platform" />
      <PlatformHero onDemoClick={onDemoClick} />
      <Stats />
      <HowItWorks />
      <LiveVisual />
      <Architecture />
      <Coverage />
      <FinalCTA
        heading={t('apexbridge.finalCta.heading')}
        accent={t('apexbridge.finalCta.accent')}
        sub={t('apexbridge.finalCta.sub')}
        actions={[
          { label: t('apexbridge.finalCta.requestDemo'), onClick: onDemoClick },
          { label: t('common.backToHome'), variant: 'ghost', href: '/' },
        ]}
      />
      <Footer cols={FOOTER_COLS} />
      <FloatingBar onMenuClick={onMenuClick} onDemoClick={onDemoClick} />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} onDemoClick={onDemoClick} showHowItWorks showCoverage showFaq showAbout products={[
        { id: 'curio', name: 'navMenu.solutions.curio' },
        { id: 'historian', name: 'Project Historian' },
        { id: 'corebridge', name: 'Core Bridge' },
        { id: 'apexbridge', name: 'ApexBridge' },
        { id: 'hyperassist', name: 'Hyperassist' },
        { id: 'certiflow', name: 'navMenu.solutions.certiflow' },
        { id: 'docreference', name: 'navMenu.solutions.docreference' },
        { id: 'insightscore', name: 'navMenu.solutions.insightscore' },
      ]} />
      <ContactModal open={demoOpen} onClose={() => setDemoOpen(false)} />
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);