// VisiO Tech — Living reference: vytezovanifaktur.cz
// TODO: Replace .reference-placeholder with <picture> + screenshot when image is available
//       assets/images/vytezovanifaktur-preview.{webp,jpg}
function LiveReference() {
  return (
    <section className="section fade-in-on-scroll" id="reference">
      <div className="container">
        <div className="section-header">
          <span className="section-eyebrow">Reference</span>
          <h2>Náš vlastní produkt v praxi</h2>
          <p>Postavili jsme jej my. Pracuje pro české firmy každý den.</p>
        </div>
        <div className="reference-card">
          <div className="reference-image">
            <div className="reference-placeholder" aria-hidden="true">
              <div className="reference-placeholder-browser">
                <span className="reference-placeholder-dot" style={{ background: '#ff5f56' }}></span>
                <span className="reference-placeholder-dot" style={{ background: '#ffbd2e' }}></span>
                <span className="reference-placeholder-dot" style={{ background: '#27c93f' }}></span>
                <span className="reference-placeholder-url">vytezovanifaktur.cz</span>
              </div>
              <div className="reference-placeholder-body">
                <div className="reference-placeholder-label">Faktura.pdf →</div>
                <div className="reference-placeholder-fields">
                  <div className="reference-placeholder-row">
                    <span>Dodavatel:</span>
                    <span className="reference-placeholder-value">ACME s.r.o.</span>
                  </div>
                  <div className="reference-placeholder-row">
                    <span>IČO:</span>
                    <span className="reference-placeholder-value">12345678</span>
                  </div>
                  <div className="reference-placeholder-row">
                    <span>Datum:</span>
                    <span className="reference-placeholder-value">25.05.2026</span>
                  </div>
                  <div className="reference-placeholder-row">
                    <span>Celkem:</span>
                    <span className="reference-placeholder-value reference-placeholder-value--accent">12 450 Kč</span>
                  </div>
                </div>
                <div className="reference-placeholder-status">✓ Připraveno k importu do ERP</div>
              </div>
            </div>
          </div>
          <div className="reference-text">
            <h3>vytezovanifaktur.cz</h3>
            <p>
              Vytěžování faktur za sekundy. Nahrajete PDF nebo obrázek, dostanete strukturovaná data
              připravená k importu do účetního systému. GDPR-friendly, žádný cloud třetí strany.
            </p>
            <p className="reference-quote">
              „Toto jsme postavili my. Stejnou kvalitu postavíme i pro vás."
            </p>
            <a
              href="https://vytezovanifaktur.cz"
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-secondary"
            >
              Otevřít vytezovanifaktur.cz <ArrowRight size={16} />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LiveReference });