// m8-nx-finale.jsx — S7 The Curtain Reveal & System Export
// Variant 'a' = inline-typography sentence form · 'b' = stacked minimal fields

function NXFill({ ph, width = 150 }) {
  return (
    <span className="nx-fill" contentEditable="true" suppressContentEditableWarning={true}
    data-ph={ph} style={{ minWidth: width }} spellCheck="false"></span>);

}

function NXFinale({ variant }) {
  const [sent, setSent] = React.useState(false);
  const [sel, setSel] = React.useState([]);
  const FIN_VARS = ['אופטימיזציה למנועי AI (GEO)', 'המרות פלטפורמה', 'אוטומציית תהליכים'];
  const toggleVar = (v0) => setSel((s) => s.includes(v0) ? s.filter((x) => x !== v0) : [...s, v0]);
  const submit = (e) => {e.preventDefault();setSent(true);};
  const inline = false; // הטופס תמיד בשדות
  return (
    <section id="contact" data-screen-label="07 · אבחון מערכת" className="nx-fin">
      <div className="nx-wrap nx-fin-wrap">
        <NXHead
          center
          kicker="06 // פריסה"
          line1="מה ה־AI עונה עליכם?"
          line2="בואו נבדוק. חינם."
          sub="משאירים פרטים — נשאל את המנועים את השאלות שהלקוחות שלכם שואלים, ונחזור עם דוח קצר: איפה אתם היום, ומה הדרך לתשובה. בלי התחייבות." />
        
        <form className="nx-fin-form rv" onSubmit={submit}>
          
          {sent ?
          <div className="nx-fin-sent">
              <span className="nx-fin-sent-dot" aria-hidden="true"></span>
              <span>קיבלנו! חוזרים אליכם עם דוח הנראות — בדרך כלל תוך יום עסקים.</span>
            </div> :
          inline ?
          <p className="nx-fin-sentence">
              <span>אני</span><NXFill ph="שם מלא" width={150} /><span> מ־</span>
              <NXFill ph="שם החברה" width={170} /><span>. תחזרו אליי ב־</span>
              <NXFill ph="מספר טלפון" width={170} /><span> ונתקדם.</span>
            </p> :

          <div className="nx-fin-fields">
              <label className="nx-fin-field"><span>שם מלא</span><input type="text" name="name" /></label>
              <label className="nx-fin-field"><span>שם החברה</span><input type="text" name="company" /></label>
              <label className="nx-fin-field"><span>מספר טלפון</span><input type="tel" name="phone" dir="ltr" /></label>
            </div>
          }
          {!sent ?
          <div className="nx-fin-cta">
              <NXGlass submit big id="nx-final-cta">לבדיקת נראות חינם</NXGlass>
            </div> :
          null}
        </form>
      </div>
    </section>);

}

function NXFooter() {
  return (
    <footer id="nx-footer" data-screen-label="פוטר">
      <div id="ft-inner">
        <div className="nx-ft-mark" dir="ltr" aria-hidden="true">
          M8TRIC<i className="nx-ft-dot" aria-hidden="true"></i>
        </div>
        <div className="nx-ft-social" aria-label="עקבו אחרינו">
          <span className="nx-ft-social-lbl">עקבו אחרינו</span>
          <a className="nx-fts-li" href="https://www.linkedin.com/company/m8ric/" target="_blank" rel="noopener" aria-label="LinkedIn">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8.3 18.3v-7H6v7h2.3zM7.1 9.9a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6zM18 18.3v-3.8c0-2-.4-3.6-2.8-3.6-1.1 0-1.9.6-2.2 1.2h-.03v-1H10.8v7h2.3v-3.5c0-.9.2-1.8 1.3-1.8s1.3 1.1 1.3 1.9v3.4H18z"></path></svg>
          </a>
          <a className="nx-fts-gh" href="https://github.com/m8ric" target="_blank" rel="noopener" aria-label="GitHub">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2A10 10 0 0 0 8.8 21.5c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.3-3.4-1.3-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.07-.6.07-.6 1 .07 1.5 1 1.5 1 .9 1.5 2.4 1.1 3 .8.1-.6.3-1.1.6-1.4-2.2-.3-4.6-1.1-4.6-5a4 4 0 0 1 1-2.7c-.1-.3-.4-1.3.1-2.6 0 0 .8-.3 2.7 1a9.4 9.4 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .5 1.3.2 2.3.1 2.6a4 4 0 0 1 1 2.7c0 3.9-2.3 4.7-4.6 5 .4.3.7.9.7 1.8v2.6c0 .3.2.6.7.5A10 10 0 0 0 12 2z"></path></svg>
          </a>
          <a className="nx-fts-ig" href="https://www.instagram.com/m8ric" target="_blank" rel="noopener" aria-label="אינסטגרם">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5.5"></rect><circle cx="12" cy="12" r="4"></circle><circle cx="17.2" cy="6.8" r="1.2" fill="currentColor" stroke="none"></circle></svg>
          </a>
          <a className="nx-fts-fb" href="https://www.facebook.com/m8ric" target="_blank" rel="noopener" aria-label="פייסבוק">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13.3 21v-7.2h2.4l.4-2.8h-2.8V9.2c0-.8.2-1.4 1.4-1.4h1.5V5.3c-.3 0-1.2-.1-2.2-.1-2.2 0-3.6 1.3-3.6 3.7v2.1H8v2.8h2.4V21z"></path></svg>
          </a>
          <a className="nx-fts-tt" href="https://www.tiktok.com/@m8ric" target="_blank" rel="noopener" aria-label="טיקטוק">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16.6 3c.4 2.3 1.9 3.8 4.1 4v3a7.6 7.6 0 0 1-4.1-1.3v5.8a5.9 5.9 0 1 1-5.9-5.9c.3 0 .7 0 1 .1v3.1a2.9 2.9 0 1 0 1.9 2.7V3z"></path></svg>
          </a>
        </div>
        <div className="nx-ft-grid">
          <div className="nx-ft-col">
            <div className="nx-ft-lbl">ניווט</div>
            <a href="/">בית</a>
            <a href="/">מי אנחנו</a>
            <a href="/blog">בלוג</a>
            <a href="/help">מרכז עזרה</a>
            <a href="/tools">כלים</a>
          </div>
          <div className="nx-ft-col">
            <div className="nx-ft-lbl">שירותים</div>
            <a href="/services/seo">מעטפת שיווקית</a>
            <a href="/services/seo">קידום אורגני</a>
            <a href="/services/geo">GEO — נראות ב־AI</a>
            <a href="/services/workforce">AI Workforce</a>
            <a href="/services/geo">גוגל מפות</a>
            <a href="/services/seo">פרסום ממומן</a>
            <a href="/services/websites">אתרים ממירים</a>
            <a href="/services/crm">M8TRIC OS</a>
          </div>
          <div className="nx-ft-col">
            <div className="nx-ft-lbl">משפטי</div>
            <a href="/mediniut-pratiut">תקנון שימוש</a>
            <a href="/mediniut-pratiut">מדיניות פרטיות</a>
            <a href="/negishut">הצהרת נגישות</a>
          </div>
          <div className="nx-ft-col">
            <div className="nx-ft-lbl">צור קשר</div>
            <a className="nx-ft-wa" href="https://wa.me/972526886404" target="_blank" rel="noopener">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.5 14.1c-.2.7-1.3 1.3-1.9 1.4-.5.1-1.1.1-1.8-.1a16 16 0 0 1-1.6-.6c-2.9-1.2-4.7-4.1-4.9-4.3-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.4l.9 2.1c.1.2.1.4 0 .6l-.4.6-.5.5c-.2.2-.3.4-.1.7.2.3.8 1.3 1.7 2.1 1.2 1.1 2.2 1.4 2.5 1.5.3.1.5.1.7-.1l.8-1c.2-.3.4-.2.7-.1l2 .9c.3.2.5.3.6.4 0 .1 0 .6-.2 1.2z"></path></svg>
              דברו איתנו בוואטסאפ
            </a>
            <a href="mailto:admin@m8ric.com">admin@m8ric.com</a>
            <a href="https://share.google/T5eSRPCTEAlbGxkpT" target="_blank" rel="noopener">המשרד שלנו במפה</a>
            <a href="https://wa.me/972526886404" target="_blank" rel="noopener">לשיחת אבחון</a>
          </div>
        </div>
        <div className="nx-ft-bottom">
          <span>© 2026 M8TRIC · ח.פ. 212844567 · כל הזכויות שמורות</span>
        </div>
      </div>
    </footer>);

}

(function () {
  if (document.getElementById('nx-fin-css')) return;
  const s = document.createElement('style');
  s.id = 'nx-fin-css';
  s.textContent = `
  .nx-fin { position:relative; z-index:1; min-height:92vh; display:flex; align-items:center; padding-block:120px 140px; }
  .nx-fin-wrap { display:flex; flex-direction:column; gap:clamp(28px,4vh,46px); width:100%; max-width:980px; margin-inline:auto; }
  .nx-fin-form { display:flex; flex-direction:column; align-items:center; gap:clamp(24px,3.5vh,38px); }
  /* the broken-variable selector */
  .nx-fin-vars { display:flex; flex-direction:column; align-items:center; gap:16px; }
  .nx-fin-vars-lbl { font-family:${NX.body}; font-size:14.5px; font-weight:500; color:${NX.dim}; letter-spacing:0; }
  .nx-fin-vars-row { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
  .nx-fin-var { display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:12px;
    background:rgba(248,249,250,0.035); border:1px solid ${NX.borderDef}; cursor:pointer;
    font-family:${NX.body}; font-size:14.5px; font-weight:600; color:${NX.dim};
    transition:border-color .4s cubic-bezier(0.16,1,0.3,1), color .4s, background .4s, transform .4s; }
  .nx-fin-var:hover { border-color:rgba(248,249,250,0.3); color:${NX.chalk}; transform:translateY(-1px); }
  .nx-fin-var i { display:none; }
  .nx-fin-var.on { background:#F4F5F7; border-color:#F4F5F7; color:#0B0C10; }
  .nx-fin-var.on::before { content:'✓'; font-size:12px; font-weight:800; }

  .nx-fin-sentence { margin:0; max-width:880px; text-align:center;
    font-family:${NX.display}; font-weight:600; letter-spacing:-0.015em;
    font-size:clamp(22px,2.9vw,40px); line-height:1.85; color:${NX.dim}; }
  .nx-fill { display:inline-block; vertical-align:baseline; padding:0 10px 2px; margin-inline:8px;
    border-bottom:1.5px solid ${NX.borderStrong}; color:${NX.chalk}; outline:none; white-space:nowrap;
    font-family:${NX.mono}; font-weight:500; font-size:0.78em; letter-spacing:0;
    transition:border-color .6s cubic-bezier(0.16,1,0.3,1), box-shadow .6s; cursor:text; text-align:center; }
  .nx-fill:focus { border-color:${NX.cyan}; box-shadow:0 12px 24px -16px rgba(34,211,238,0.6); }
  .nx-fill:empty::before { content:attr(data-ph); color:${NX.faint}; }
  .nx-fin-fields { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:38px; width:min(880px,100%); }
  .nx-fin-field { display:flex; flex-direction:column; gap:6px; }
  .nx-fin-field span { font-family:${NX.mono}; font-size:11.5px; letter-spacing:0.2em; color:${NX.mute}; }
  .nx-fin-field input { background:transparent; border:none; border-bottom:1.5px solid ${NX.borderStrong};
    padding:8px 2px 12px; font-family:${NX.body}; font-size:19px; color:${NX.chalk}; outline:none;
    transition:border-color .6s cubic-bezier(0.16,1,0.3,1); border-radius:0; }
  .nx-fin-field input:focus { border-color:${NX.cyan}; }
  .nx-fin-sent { display:flex; align-items:center; gap:14px; font-family:${NX.mono};
    font-size:clamp(14px,1.4vw,17px); letter-spacing:0.04em; color:${NX.platinum};
    border:1px solid rgba(34,211,238,0.35); border-radius:14px; padding:22px 30px;
    background:rgba(34,211,238,0.05); }
  .nx-fin-sent-dot { width:9px; height:9px; border-radius:50%; background:${NX.cyan}; flex-shrink:0;
    box-shadow:0 0 14px rgba(34,211,238,0.9); }
  @media (prefers-reduced-motion: no-preference) {
    .nx-fin-sent-dot { animation:nxSentPulse 1.6s ease-in-out infinite; }
    @keyframes nxSentPulse { 50% { box-shadow:0 0 26px rgba(34,211,238,1); } }
  }

  /* ── the curtain footer ── */
  #nx-footer { position:relative; z-index:1; overflow:hidden; background:#050507;
    border-top:1px solid ${NX.borderDef}; }
  #ft-inner { display:flex; flex-direction:column; gap:clamp(36px,5vh,60px);
    width:min(1280px, calc(100% - clamp(40px,8vw,112px))); margin-inline:auto;
    padding-block:clamp(56px,8vh,90px) 34px; will-change:transform; }
  .nx-ft-mark { font-family:${NX.latin}; font-weight:700; letter-spacing:-0.045em; line-height:0.94;
    font-size:clamp(88px,16.5vw,250px); color:${NX.chalk}; text-align:center; user-select:none; }
  .nx-ft-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:30px;
    border-top:1px solid ${NX.border}; padding-top:clamp(28px,4vh,44px); }
  .nx-ft-col { display:flex; flex-direction:column; gap:12px; }
  .nx-ft-lbl { font-family:${NX.mono}; font-size:11px; letter-spacing:0.24em; color:${NX.faint};
    text-transform:uppercase; margin-bottom:6px; }
  .nx-ft-col a { font-family:${NX.body}; font-size:14.5px; color:${NX.dim}; text-decoration:none;
    width:fit-content; transition:color .4s; }
  .nx-ft-col a:hover { color:${NX.chalk}; }
  .nx-ft-status { display:flex; align-items:center; gap:9px; font-family:${NX.mono}; font-size:13px; color:${NX.dim}; }
  .nx-ft-status i { width:7px; height:7px; border-radius:50%; background:#34D399; box-shadow:0 0 10px rgba(52,211,153,0.8); }
  .nx-ft-dim { font-family:${NX.mono}; font-size:12px; letter-spacing:0.08em; color:${NX.faint}; }
  .nx-ft-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    border-top:1px solid ${NX.border}; padding-top:22px;
    font-family:${NX.mono}; font-size:11.5px; letter-spacing:0.06em; color:${NX.faint}; }
  @media (max-width: 720px) {
    .nx-ft-grid { grid-template-columns:1fr 1fr; }
    .nx-fin-sentence { line-height:2.1; }
    .nx-fin-fields { grid-template-columns:1fr; gap:26px; }
  }
  @media (max-width: 640px) {
    .nx-fin { min-height:0; padding-block:110px 130px; }
    .nx-fin-form { gap:30px; }
    .nx-ft-mark { -webkit-text-stroke-width:1px; }
    #ft-inner { gap:34px; }
  }
  /* mid-page placement — compact band */
  .nx-fin { min-height:0; padding-block:clamp(90px,12vh,135px) clamp(70px,10vh,110px); }
  .nx-fin-wrap { gap:clamp(34px,5vh,52px); }
  .nx-ft-dot { display:inline-block; width:0.1em; height:0.1em; border-radius:0.012em;
    margin-inline-start:0.04em; background:${NX.cyan}; vertical-align:baseline; }
  .nx-ft-bottom { font-family:${NX.body} !important; font-size:12.5px !important; letter-spacing:0 !important;
    color:${NX.mute} !important; }
  /* footer type polish */
  .nx-ft-lbl { font-family:${NX.body} !important; font-size:12.5px !important; font-weight:700 !important;
    letter-spacing:0.04em !important; text-transform:none !important; color:rgba(248,249,250,0.5) !important;
    margin-bottom:10px !important; }
  .nx-ft-col { gap:13px !important; }
  .nx-ft-col a { font-size:15px !important; color:${NX.dim} !important; line-height:1.4;
    transition:color .3s, transform .4s cubic-bezier(0.16,1,0.3,1) !important; }
  .nx-ft-col a:hover { color:${NX.chalk} !important; transform:translateX(-3px); }
  .nx-ft-grid { gap:clamp(28px,5vw,72px) !important; padding-top:clamp(36px,5vh,54px) !important; }
  .nx-ft-dim { font-family:${NX.body} !important; font-size:13px !important; letter-spacing:0 !important; }
  #ft-inner { gap:clamp(30px,4.5vh,52px); }
  .nx-ft-bottom { padding-top:26px !important; }
  .nx-ft-social { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:-8px; }
  .nx-ft-social-lbl { font-family:${NX.body}; font-size:13px; font-weight:500; color:${NX.mute}; margin-inline-end:6px; }
  .nx-ft-social a { display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
    color:rgba(248,249,250,0.75); background:rgba(248,249,250,0.05); border:1px solid rgba(248,249,250,0.13);
    transition:color .3s, border-color .3s, transform .4s cubic-bezier(0.16,1,0.3,1), background .3s; }
  .nx-ft-social a:hover { color:#fff; border-color:rgba(34,211,238,0.5); background:rgba(34,211,238,0.08);
    transform:translateY(-3px); }
  .nx-ft-wa { display:inline-flex !important; align-items:center; gap:9px; width:fit-content;
    padding:10px 16px; border-radius:11px; font-weight:500 !important;
    color:${NX.dim} !important; background:transparent; border:1px solid rgba(248,249,250,0.14);
    transition:border-color .35s, color .35s, transform .4s cubic-bezier(0.16,1,0.3,1) !important; }
  .nx-ft-wa svg { color:#25D366; opacity:0.85; }
  .nx-ft-wa:hover { border-color:rgba(248,249,250,0.32); color:${NX.chalk} !important; transform:translateY(-1px) !important; }
  .nx-ft-bottom { justify-content:center !important; text-align:center; }
  /* brand-colored social buttons */
  .nx-ft-social a.nx-fts-ig { background:linear-gradient(45deg,#F58529,#DD2A7B 50%,#8134AF 75%,#515BD4); border-color:transparent; color:#fff; }
  .nx-ft-social a.nx-fts-fb { background:#1877F2; border-color:transparent; color:#fff; }
  .nx-ft-social a.nx-fts-tt { background:#000; border-color:rgba(255,255,255,0.22); color:#fff; }
  .nx-ft-social a.nx-fts-ig:hover, .nx-ft-social a.nx-fts-fb:hover, .nx-ft-social a.nx-fts-tt:hover {
    filter:brightness(1.12); transform:translateY(-3px); }
  /* WA: quiet link, like the rest of the column */
  .nx-ft-wa { border:none !important; padding:0 !important; background:transparent !important;
    border-radius:0 !important; color:${NX.dim} !important; font-weight:500 !important; }
  .nx-ft-wa:hover { color:${NX.chalk} !important; transform:translateX(-3px) !important; }

  /* ── form polish: glass panel + boxed fields ── */
  .nx-fin-form { position:relative; width:min(920px,100%); margin-inline:auto;
    border:1px solid ${NX.borderDef}; border-radius:26px;
    background:linear-gradient(168deg, rgba(16,18,26,0.88), rgba(9,10,15,0.92));
    box-shadow:0 50px 110px -50px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05);
    padding:clamp(26px,3.5vw,46px); gap:clamp(26px,3.5vh,36px) !important; }
  .nx-fin-form::after { content:''; position:absolute; top:0; inset-inline:20%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(34,211,238,0.5), rgba(168,85,247,0.5), transparent); }
  .nx-fin-fields { gap:16px !important; width:100% !important; }
  .nx-fin-field { gap:7px !important; background:rgba(248,249,250,0.035); border:1px solid ${NX.borderDef};
    border-radius:15px; padding:13px 17px 11px;
    transition:border-color .45s cubic-bezier(0.16,1,0.3,1), background .45s, box-shadow .45s, transform .45s; }
  .nx-fin-field:hover { border-color:${NX.borderStrong}; }
  .nx-fin-field:focus-within { border-color:rgba(34,211,238,0.6); background:rgba(34,211,238,0.045);
    box-shadow:0 18px 44px -24px rgba(34,211,238,0.45); transform:translateY(-2px); }
  .nx-fin-field span { font-family:${NX.body} !important; font-size:11.5px !important;
    font-weight:600 !important; letter-spacing:0.03em !important; color:${NX.mute} !important; }
  .nx-fin-field input { border-bottom:none !important; padding:2px 0 3px !important; font-size:17px !important; }
  .nx-fin-sent { margin-inline:auto; }
  @media (max-width: 720px) {
    .nx-fin-form { padding:22px 18px; border-radius:20px; }
    .nx-fin-fields { gap:12px !important; }
  }
  `;
  document.head.appendChild(s);
})();

Object.assign(window, { NXFinale, NXFooter, NXFill });