/* eslint-disable */
/* V3 — Manifeste graphique : bilingue FR/EN (EN par défaut) */

const T = (en, fr) => {
  const lang = (document.documentElement.lang || '').toLowerCase();
  return lang.startsWith('fr') ? fr : en;
};

function NotreVisionV3() {
  return (
    <div className="nv-art v3">

      {/* Lang toggle */}
      <div className="nv-lang-toggle">
        <button data-lang="en" className="active" aria-label="English">EN</button>
        <button data-lang="fr" aria-label="Français">FR</button>
      </div>

      {/* Hero */}
      <header className="v3-hero">
        <h1 className="v3-hero-title">
          {T(<>A <em>true</em><br/>story.<br/>Ours.</>, <>Une <em>histoire</em><br/>vraie.<br/>La <em>nôtre.</em></>)}
        </h1>
        <div className="v3-hero-sub">
          <p className="v3-hero-lead">
            {T(
              "How an IT automation firm ended up automating its own bookkeeping — and discovered what it really wanted to bring to businesses.",
              "Comment une firme d'automatisation informatique a fini par automatiser sa comptabilité — et a découvert ce qu'elle voulait vraiment apporter aux entreprises."
            )}
          </p>
          <div className="v3-hero-tag">
            {T(<>Manifesto<br/>BHI · 2026</>, <>Manifeste<br/>BHI · 2026</>)}
          </div>
        </div>
      </header>

      {/* Mega 1 */}
      <section className="v3-mega">
        <div className="v3-mega-text">
          <div className="v3-mega-eyebrow">{T("Chapter I · The problem", "Chapitre I · Le problème")}</div>
          <h2 className="v3-mega-h2">
            {T(<>Wasted time <em>and mistakes.</em></>, <>Du temps perdu <em>et des erreurs.</em></>)}
          </h2>
          <p className="v3-mega-body">
            {T(
              "Our accountant was expensive. Made mistakes. And we still entered our invoices ourselves. Evenings. Weekends.",
              "Notre comptable coûtait cher. Faisait des erreurs. Et malgré tout, on entrait nos factures nous-mêmes. Le soir. Les fins de semaine."
            )}
          </p>
        </div>
        <div className="v3-mega-num right outline">
          47<span className="unit">{T("h/month", "h/mois")}</span>
        </div>
      </section>

      {/* Polaroid I */}
      <section className="v3-polaroid">
        <div className="v3-polaroid-card">
          <div className="v3-tape v3-tape-tl"></div>
          <div className="v3-tape v3-tape-tr"></div>
          <img src="/bhi_website/static/src/assets/vision-photo-1.jpg" alt="" />
          <div className="v3-polaroid-caption">
            <span className="ref">{T("Photo · 02 — desk · january", "Photo · 02 — bureau · janvier")}</span>
            {T("the problem we didn't want to see", "le problème qu'on n'aimait pas voir")}
          </div>
        </div>
      </section>

      {/* Statement */}
      <section className="v3-statement">
        <span className="v3-statement-mark">“</span>
        <p className="v3-statement-text">
          {T(
            <>Why not use our expertise<br/>to <em>automate our own books?</em></>,
            <>Pourquoi ne pas utiliser notre expertise<br/>pour <em>automatiser notre comptabilité ?</em></>
          )}
        </p>
      </section>

      {/* Mega 2 */}
      <section className="v3-mega alt">
        <div className="v3-mega-num">
          1<span className="unit">{T("month", "mois")}</span>
        </div>
        <div className="v3-mega-text">
          <div className="v3-mega-eyebrow">{T("Chapter II · The transformation", "Chapitre II · La transformation")}</div>
          <h2 className="v3-mega-h2">
            {T(<>We rebuilt <em>everything.</em></>, <>On a tout <em>reconstruit.</em></>)}
          </h2>
          <p className="v3-mega-body">
            {T(
              "Odoo. Claude. We took our methodical rigor and applied it to ourselves. And in just a few weeks, a whole new world opened up.",
              "Odoo. Claude. Nous avons utilisé notre rigueur méthodique et l'avons appliquée chez nous. Et on a vu, en quelques semaines, un nouveau monde s'ouvrir à nous."
            )}
          </p>
        </div>
      </section>

      {/* Polaroid II */}
      <section className="v3-polaroid">
        <div className="v3-polaroid-card tilt-r">
          <div className="v3-tape v3-tape-tl"></div>
          <img src="/bhi_website/static/src/assets/vision-photo-2.jpg" alt="" />
          <div className="v3-polaroid-caption">
            <span className="ref">{T("Photo · 14 — transition · march", "Photo · 14 — transition · mars")}</span>
            {T("paper gives way to system", "les papiers cèdent la place au système")}
          </div>
        </div>
      </section>

      {/* Mega 3 */}
      <section className="v3-mega">
        <div className="v3-mega-text">
          <div className="v3-mega-eyebrow">{T("Chapter III · The result", "Chapitre III · Le résultat")}</div>
          <h2 className="v3-mega-h2">
            {T(<>Zero errors. <em>Full growth.</em></>, <>Zéro erreur. <em>Pleine croissance.</em></>)}
          </h2>
          <p className="v3-mega-body">
            {T(
              "The time we get back, we invest in our clients, our ideas, what really moves us forward. We can finally think instead of typing.",
              "Le temps qu'on récupère, on l'investit sur nos clients, sur nos idées, sur ce qui fait avancer. On peut enfin penser au lieu de saisir."
            )}
          </p>
        </div>
        <div className="v3-mega-num right">0</div>
      </section>

      {/* Polaroid III */}
      <section className="v3-polaroid">
        <div className="v3-polaroid-card">
          <div className="v3-tape v3-tape-tr"></div>
          <img src="/bhi_website/static/src/assets/vision-photo-3.jpg" alt="" />
          <div className="v3-polaroid-caption">
            <span className="ref">{T("Photo · 21 — desk · today", "Photo · 21 — bureau · aujourd'hui")}</span>
            {T("the calm we've found", "le calme retrouvé")}
          </div>
        </div>
      </section>

      {/* Manifesto */}
      <section className="v3-manifesto">
        <div className="v3-manifesto-eyebrow">{T("Our mission", "Notre mission")}</div>
        <p className="v3-manifesto-text">
          {T(
            <>Now we help other companies<br/>make <em>the same leap.</em></>,
            <>Maintenant, on aide d'autres entreprises<br/>à faire <em>le même saut.</em></>
          )}
        </p>
        <div className="v3-manifesto-sig">{T("— The BHI team", "— L'équipe BHI")}</div>
      </section>

      {/* CTA */}
      <section className="v3-cta">
        <h2>
          {T(<>Ready for <em>your transformation?</em></>, <>Prêt à <em>votre transformation ?</em></>)}
        </h2>
        <p>{T("One hour. Free. We listen, we tell you honestly.", "Une heure. Gratuite. On comprend, on vous dit honnêtement.")}</p>
        <div className="v3-cta-buttons">
          <a className="v3-cta-btn primary" href="index.html#contact">
            {T("Book my meeting · free", "Réserver · gratuit")}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </a>
          <a className="v3-cta-btn ghost" href="index.html">
            {T("Back", "Retour")}
          </a>
        </div>
      </section>

      {/* Footer */}
      <footer className="v3-footer-mini">
        <div className="v3-footer-social">
          <a href="https://www.facebook.com/Xtranumerik/" target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="v3-social">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
          </a>
          <a href="https://www.linkedin.com/company/business-horizons-intelligence/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="v3-social">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
        </div>
        <div className="v3-footer-bar">
          <span>© 2026 BHI</span>
          <span className="mono">{T("Law 25 compliant", "Conforme Loi 25")}</span>
        </div>
      </footer>
    </div>
  );
}

window.NotreVisionV3 = NotreVisionV3;