// ====================================================================
// OK-Suite — Visuals (signature, scanner, sign, vault, otp, rec)
// ====================================================================

function SignatureSVG() {
  return (
    <svg className="signature" viewBox="0 0 380 110" aria-hidden="true">
      <path d="M8 76 C 28 30, 52 30, 64 70 C 70 92, 86 92, 96 70 C 110 38, 130 38, 138 78 C 144 100, 158 96, 168 76 C 184 44, 210 44, 220 80 C 224 96, 240 98, 254 80 C 270 60, 300 56, 322 76 C 332 86, 350 80, 372 60" />
    </svg>
  );
}

function PhoneStatusBar() {
  return (
    <div className="phone-status">
      <span>09:41</span>
      <span>OK-Docs</span>
    </div>
  );
}

function ScannerView() {
  return (
    <>
      <PhoneStatusBar />
      <div className="phone-content">
        <div className="row">
          <span className="mono-label">SCAN · CONTRATTO</span>
          <span className="spacer" />
          <span className="mono-label">AI · LIVE</span>
        </div>
        <div className="scan-viewfinder">
          <div className="scan-doc">
            <div className="scan-doc-line long" />
            <div className="scan-doc-line mid" />
            <div className="scan-doc-line long" />
            <div className="scan-doc-line short" />
            <div className="scan-doc-line mid" />
            <div className="scan-doc-line long" />
            <div className="scan-doc-line short" />
          </div>
          <div className="scan-corners">
            <span /><span /><span /><span />
          </div>
          <div className="scan-laser" />
        </div>
        <div className="scan-bottom">
          <div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, fontWeight: 600 }}>Pagina 1/3</div>
            <div className="mono-label" style={{ fontSize: 9 }}>Edge-AI · 98%</div>
          </div>
          <button className="scan-btn" aria-label="Scatta" />
          <div className="scan-info">
            <b>PDF/A</b>
            <span>A4 · 300 dpi</span>
          </div>
        </div>
      </div>
    </>
  );
}

function SignView() {
  return (
    <>
      <PhoneStatusBar />
      <div className="phone-content">
        <div className="row">
          <span className="mono-label">FIRMA · DOC</span>
          <span className="spacer" />
          <span className="mono-label">eIDAS · FEA</span>
        </div>
        <div className="sign-doc">
          <div>
            <div className="sign-doc-meta">Contratto · CTR-2026/0481</div>
            <div className="sign-doc-h">Mandato di rappresentanza</div>
          </div>
          <div className="sign-body">
            <span /><span /><span /><span />
          </div>
          <div className="sign-pad">
            <svg viewBox="0 0 280 86" preserveAspectRatio="none">
              <path d="M12 56 C 30 26, 52 26, 64 54 C 72 72, 88 72, 100 54 C 116 30, 138 30, 148 60 C 154 76, 170 76, 184 60 C 200 42, 224 42, 236 60 C 244 72, 260 74, 272 64" />
            </svg>
            <div className="sign-pad-label">Firma qui ✱</div>
          </div>
          <div className="sign-confirm">
            <button className="ghost">Annulla</button>
            <button className="primary">Sigilla &amp; archivia</button>
          </div>
        </div>
      </div>
    </>
  );
}

function VaultView() {
  return (
    <>
      <PhoneStatusBar />
      <div className="phone-content">
        <div className="row">
          <span className="mono-label">CAVEAU · UNLOCKED</span>
          <span className="spacer" />
          <span className="mono-label">AES-256</span>
        </div>
        <div className="cv-bio">
          <div className="cv-bio-label">Identità verificata</div>
          <div className="cv-bio-h">Marco<br/>Bianchi</div>
          <div className="cv-bio-status"><span className="cv-dot" />Volto · ✓</div>
          <div className="cv-fingerprint">
            <svg viewBox="0 0 130 130" aria-hidden="true">
              <path d="M65 18 C 38 18, 18 38, 18 65 C 18 90, 38 110, 65 110" />
              <path d="M65 28 C 44 28, 28 44, 28 65 C 28 84, 44 100, 65 100" />
              <path d="M65 38 C 50 38, 38 50, 38 65 C 38 78, 50 90, 65 90" />
              <path d="M65 48 C 56 48, 48 56, 48 65 C 48 72, 56 80, 65 80" />
              <path d="M65 58 C 62 58, 58 62, 58 65 C 58 68, 62 72, 65 72" />
            </svg>
          </div>
        </div>
        <div className="cv-list">
          <div className="cv-row">
            <div className="ico">PDF</div>
            <div>
              <div className="name">Mandato 2026/0481</div>
              <div className="sub">Firmato · 14:02</div>
            </div>
            <div className="lock">✓</div>
          </div>
          <div className="cv-row">
            <div className="ico">ID</div>
            <div>
              <div className="name">Carta Identità</div>
              <div className="sub">Scade · 06/2031</div>
            </div>
            <div className="lock">✓</div>
          </div>
          <div className="cv-row">
            <div className="ico">JPG</div>
            <div>
              <div className="name">Polizza · scan</div>
              <div className="sub">3 pagine · sealed</div>
            </div>
            <div className="lock">✓</div>
          </div>
        </div>
      </div>
    </>
  );
}

function OTPVisual() {
  return (
    <div style={{ display: "grid", gap: 14 }}>
      <div className="otp-card">
        <div className="otp-issuer">
          <span>★ Banca · principale</span>
          <span className="otp-ring">
            <svg viewBox="0 0 24 24">
              <circle className="bg" cx="12" cy="12" r="9" />
              <circle className="fg" cx="12" cy="12" r="9" />
            </svg>
          </span>
        </div>
        <div className="otp-code">
          <span>4</span><span>9</span><span>2</span><span>·</span><span>8</span><span>3</span><span>7</span>
        </div>
        <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", color: "oklch(0.78 0.01 270)" }}>
          Rinnovo · 18s · TOTP RFC 6238
        </div>
      </div>
      <div>
        <div className="otp-row">
          <div>
            <div className="nm">Studio Notarile</div>
            <div className="sm">Gruppo · Lavoro</div>
          </div>
          <div className="digits">128 · 904</div>
        </div>
        <div className="otp-row">
          <div>
            <div className="nm">Portale AGID</div>
            <div className="sm">Gruppo · Lavoro</div>
          </div>
          <div className="digits">772 · 415</div>
        </div>
        <div className="otp-row">
          <div>
            <div className="nm">CRM B2B</div>
            <div className="sm">Gruppo · Vendite</div>
          </div>
          <div className="digits">038 · 261</div>
        </div>
      </div>
    </div>
  );
}

function RECVisual() {
  // Stable pseudo-random heights for waveform bars
  const bars = React.useMemo(() => {
    const n = 28;
    return Array.from({ length: n }, (_, i) => {
      const v = 30 + Math.abs(Math.sin(i * 1.3) * 50) + (i % 5) * 4;
      return { h: Math.min(95, v), d: (i * 0.07).toFixed(2) + "s" };
    });
  }, []);
  return (
    <div style={{ display: "grid", gap: 14 }}>
      <div className="rec-card">
        <div className="rec-time">00:47<span style={{ color: "oklch(0.72 0.01 270)", fontSize: ".62em", fontWeight: 400 }}>· REC</span></div>
        <div className="waveform">
          {bars.map((b, i) => (
            <span key={i} style={{ height: b.h + "%", animationDelay: b.d }} />
          ))}
        </div>
        <div className="rec-meta">
          <span>48 kHz · WAV</span>
          <span>Sopralluogo · Cliente #4128</span>
        </div>
      </div>
      <div className="rec-list">
        <div className="rec-item">
          <div className="play">▶</div>
          <div>
            <div className="nm">Verbale sopralluogo</div>
            <div className="sub">Oggi · trascritto · 3 markers</div>
          </div>
          <div className="dur">12:04</div>
        </div>
        <div className="rec-item">
          <div className="play">▶</div>
          <div>
            <div className="nm">Demo CRM · screen</div>
            <div className="sub">Ieri · overlay attivo</div>
          </div>
          <div className="dur">04:21</div>
        </div>
        <div className="rec-item">
          <div className="play">▶</div>
          <div>
            <div className="nm">Call · Studio Legale</div>
            <div className="sub">Lun · no trascrizione</div>
          </div>
          <div className="dur">37:58</div>
        </div>
      </div>
    </div>
  );
}

function CardsVisual() {
  // Barre di lunghezza fissa (non pseudo-casuali come RECVisual): un barcode è un pattern
  // deterministico, non ha senso animarlo o randomizzarlo ad ogni render.
  const bars = [5,2,3,1,5,3,2,1,4,1,5,2,3,4,1,2,5,3,1,4,2,5,1,3,4,2,5,1,3,2];
  return (
    <div style={{ display: "grid", gap: 14 }}>
      <div className="cards-card">
        <div className="cards-issuer">
          <span>Esselunga · Fedeltà</span>
          <span className="cards-ok-badge">OK</span>
        </div>
        <div className="cards-barcode">
          <div className="cards-bars">
            {bars.map((w, i) => <i key={i} style={{ width: w + "px" }} />)}
          </div>
          <div className="cards-barcode-val">8 001234 567890</div>
        </div>
        <div className="cards-check">✓ Codice verificato al salvataggio</div>
      </div>
      <div className="cards-list">
        <div className="cards-item">
          <span className="dot" style={{ background: "var(--accent)" }} />
          <div>
            <div className="nm">Decathlon</div>
            <div className="sub">Gruppo · Sport</div>
          </div>
        </div>
        <div className="cards-item">
          <span className="dot" style={{ background: "var(--ink)" }} />
          <div>
            <div className="nm">Amazon</div>
            <div className="sub">Gift card · Saldo 40€</div>
          </div>
        </div>
        <div className="cards-item">
          <span className="dot" style={{ background: "oklch(0.70 0.22 26)" }} />
          <div>
            <div className="nm">Coupon Zalando</div>
            <div className="sub">Scade tra 8 giorni</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SignatureSVG, ScannerView, SignView, VaultView, OTPVisual, RECVisual, CardsVisual });