import { useI18n } from '../i18n'
import { Callout } from '../components/ui'

/** Research/lab landing. The fingerprint-IMAGE demo lives ONLY here — never in the normal
 * customer flow — with a prominent disclaimer that a website cannot read a phone's sensor. */
export function BiometricsLabPage({ onNav }: { onNav: (r: string) => void }) {
  const { t } = useI18n()
  return (
    <section className="page lab" aria-labelledby="lab-h">
      <h2 id="lab-h">{t('lab.title')}</h2>
      <p className="muted">{t('lab.subtitle')}</p>

      <div className="card" data-testid="fingerprint-demo">
        <h3>{t('lab.fingerprint.title')}</h3>
        <Callout tone="warn">{t('lab.fingerprint.disclaimer')}</Callout>
        <div className="quick-actions">
          <button className="btn" onClick={() => onNav('biometrics/enroll')}>{t('bio.dash.enroll') as never}</button>
          <button className="btn" onClick={() => onNav('biometrics/verify')}>{t('bio.dash.verify') as never}</button>
          <button className="btn" onClick={() => onNav('biometrics/liveness')}>{t('bio.dash.liveness') as never}</button>
          <button className="btn" onClick={() => onNav('biometrics/reportcard')}>{t('bio.dash.reportcard') as never}</button>
        </div>
      </div>

      <p className="muted small">
        {t('bio.confirmDevice')} — {t('security.device.explain')}
      </p>
    </section>
  )
}