טופס ליד (Lead Form) הוא הגשר הראשון בין הגולש לעסק שלך.
תכנון נכון של הטופס יוביל ליותר פניות איכותיות, יחס המרה גבוה יותר – וגם ללקוחות שמגיעים עם אמון ותחושת ביטחון.
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>מחשבון הצעת מחיר לקידום אתרים | SEO ROI</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html,body {
background: #101729;
color: #f5faff;
font-family: "Heebo", "Arial", sans-serif;
}
#seo-quote-widget {
max-width: 530px;
margin: 36px auto;
padding: 34px 13px 35px 13px;
background: linear-gradient(120deg,#181e2c 60%, #172532 100%);
border-radius: 27px;
box-shadow: 0 8px 44px 0 #11efd655, 0 1.5px 6px #00fff022;
color: #d2f7ed;
position: relative;
overflow: hidden;
z-index: 1;
}
h3 {
text-align: center;
margin-bottom: 24px;
font-size: 2.05em;
font-weight: 900;
letter-spacing: 0.07em;
color: #fff;
background: linear-gradient(87deg,#8affee 25%,#5affff 55%,#fff 95%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:0 0 18px #53fff3cc, 0 0 48px #00ffe533, 0 0 2px #faffff;
filter: brightness(1.25) contrast(1.14);
border: none;
padding: 0;
background-size: 300% 100%;
animation: neonTitle 3.5s linear infinite alternate;
}
@keyframes neonTitle {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.tip-box {
margin:0 auto 12px auto;
text-align: right;
max-width:380px;
background: linear-gradient(87deg,#142845,#1c4c65 100%);
color: #9bffc7;
border-radius: 12px;
font-size: 1.03em;
font-weight: 700;
box-shadow: 0 1.5px 13px #16ffe455;
padding: 8px 18px 7px 10px;
position: relative;
transition:background 0.18s;
cursor: pointer;
user-select:none;
}
.tip-box #tip-title {
font-weight:900;
color:#33fff3;
margin-left:6px;
}
.tip-box:hover {background:linear-gradient(90deg,#1a4664 70%,#14ffeb50);}
.bonus-box {
display: none;
background: linear-gradient(97deg,#fffbe0,#fffbe0cc,#fff7a7 90%);
color: #ad8500;
border-radius: 18px;
font-weight: 900;
font-size: 1.15em;
box-shadow: 0 1.5px 14px #ffe86980;
text-align: center;
margin: 17px 0 12px 0;
padding: 14px 0;
animation: bonusAppear 1s;
}
@keyframes bonusAppear { 0%{opacity:0;transform:translateY(-16px);} 100%{opacity:1;transform:translateY(0);} }
.progress-wrap {
background: #28354b;
border-radius: 16px;
height: 16px;
width: 92%;
margin: 17px auto 22px auto;
box-shadow: 0 1.5px 9px #00e2f5cc;
overflow: hidden;
position:relative;
}
.progress-bar {
background: linear-gradient(90deg,#00ffc6 5%,#21aaff 100%);
height:100%;
width:0%;
border-radius:16px;
transition: width 0.34s;
}
.seo-row {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.seo-field {
flex: 1 1 48%;
display: flex;
flex-direction: column;
min-width: 120px;
}
.seo-field label {
margin-bottom: 7px;
font-size: 1.02em;
color: #33ffbb;
font-weight: 700;
letter-spacing:0.03em;
}
.seo-field input,
.seo-field select {
padding: 11px 13px;
font-size: 1.12em;
border: 1.5px solid #28d0ac;
border-radius: 8px;
background: #171e2e;
color: #f2fff6;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
}
.seo-field input:focus,
.seo-field select:focus {
border-color: #47ffcd;
box-shadow: 0 0 0 2.5px #27f7e844;
}
input[type=range] {
width: 100%;
margin-top: 7px;
background: transparent;
accent-color: #00ffc6;
}
.seo-addons {
gap: 20px;
font-size: 1.1em;
font-weight: 700;
margin-bottom: 17px;
margin-top: 5px;
}
.seo-addons label {
color: #24f9c9;
cursor: pointer;
margin-left:10px;
position:relative;
}
.seo-addons input[type=checkbox] {
accent-color: #00f0d5;
}
.tooltip {
display: inline-block;
margin-right: 4px;
color: #19ffd9;
cursor: pointer;
font-weight: 900;
font-size: 1.02em;
border-radius: 50%;
background: #10222e;
width: 1.25em;
height: 1.25em;
text-align: center;
line-height: 1.25em;
box-shadow: 0 1.5px 7px #19ffd966;
position: relative;
transition: background 0.15s;
}
.tooltip:hover,
.tooltip:focus {
background: #14f0b7;
color: #182143;
}
.tooltip::after {
content: attr(data-title);
opacity: 0;
pointer-events: none;
position: absolute;
top: 150%;
right: 50%;
transform: translateX(50%);
min-width: 120px;
background: #13272a;
color: #faffff;
font-size: 0.97em;
font-weight: 400;
border-radius: 10px;
padding: 9px 14px;
box-shadow: 0 4px 18px #0af8ff45;
white-space: pre;
z-index: 22;
transition: opacity 0.23s;
}
.tooltip:hover::after,
.tooltip:focus::after {
opacity: 1;
}
.seo-btn-primary {
width: 100%;
padding: 17px;
font-size: 1.13em;
background: linear-gradient(90deg, #00ffc6 0%, #10aefd 100%);
color: #181e2c;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: 900;
box-shadow: 0 4px 18px #20eaff45;
letter-spacing: 0.09em;
transition: background 0.19s, transform 0.13s, color 0.13s;
margin-bottom: 10px;
}
.seo-btn-primary:hover {
background: linear-gradient(92deg, #18f3a8 0%, #00f2f2 60%, #14c5fc 100%);
color: #000d1e;
transform: scale(1.025);
}
.seo-btn-tertiary {
background: linear-gradient(90deg,#21ffd9 10%,#2a83ff 90%);
color: #142c32;
border:none;
border-radius:9px;
font-size:1em;
font-weight:800;
padding:10px 16px;
box-shadow:0 2px 14px #12ffd444;
margin-bottom:4px;
cursor:pointer;
transition: background 0.18s, color 0.14s;
}
.seo-btn-tertiary:hover {
background:linear-gradient(90deg,#1cffba 10%,#21a9fd 90%);
color: #001b1d;
}
.roi-modal {
display:none;
position:fixed;
z-index:99;
left:0;top:0;width:100vw;height:100vh;
background:rgba(9,24,34,0.75);
}
.roi-modal-content {
background:linear-gradient(100deg,#18252b 80%,#13313a 100%);
margin:60px auto 0 auto;
padding:22px 28px 26px 28px;
border-radius:16px;
box-shadow:0 10px 56px #00ffe088;
max-width:340px;
text-align:center;
color:#cfffed;
position:relative;
animation:popNum 0.6s cubic-bezier(.21,1.07,.65,1.21);
}
.roi-close {
position:absolute;
top:7px;left:11px;
font-size:1.5em;
color:#25ffd5;
cursor:pointer;
font-weight:bold;
transition:color 0.17s;
}
.roi-close:hover {color:#b8ffeb;}
.roi-modal-content h4 {margin-top:0;color:#22ffd7;font-size:1.17em;}
.roi-explain {
color: #b4f4ea;
background: #16222a;
font-size: 0.98em;
border-radius: 9px;
padding: 7px 7px 9px 7px;
margin-bottom: 10px;
}
.best-seo-offer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 30px 0 17px 0;
padding: 22px 12px 20px 12px;
background: linear-gradient(99deg, #103237 60%, #165f53 100%);
border-radius: 26px;
box-shadow: 0 0 96px 10px #14f1c966, 0 0 22px #3ad8e78c;
border: 2.5px solid #22ffd9;
position: relative;
z-index: 3;
animation: bestSumAppear 1.15s;
}
@keyframes bestSumAppear {
from { opacity: 0; transform: translateY(-32px) scale(0.92);}
to { opacity: 1; transform: translateY(0) scale(1);}
}
.best-seo-label {
color: #33ffd9;
font-size: 1.13em;
font-weight: 900;
letter-spacing: 0.03em;
margin-bottom: 2px;
text-shadow:0 2px 10px #17f1b448;
}
.best-seo-name {
font-size: 1.22em;
font-weight: 800;
color: #65fff7;
margin-bottom: 3px;
text-shadow:0 2px 6px #02f8ff33;
}
.best-seo-price {
font-size: 2em;
font-weight: 900;
color: #0bffd4;
text-shadow: 0 2px 18px #8dfff6af, 0 0 2px #40cfff;
margin-bottom: 4px;
letter-spacing: 0.05em;
animation: popNum 1.45s cubic-bezier(.21,1.07,.65,1.21) infinite alternate;
}
@keyframes popNum {
0% { transform: scale(1); }
80% { transform: scale(1.12);}
100% { transform: scale(1);}
}
.best-seo-monthly {
color: #26f5ce;
font-size: 1.06em;
font-weight: 800;
letter-spacing: 0.02em;
margin-bottom: 0px;
}
.best-seo-per-year {
color: #32ffc7;
font-size: 1.04em;
font-weight: 700;
margin-top: 0px;
letter-spacing: 0.02em;
background: #142526;
border-radius: 11px;
padding: 2.5px 13px 3.5px 13px;
display: inline-block;
border: 1.5px solid #1cf3a9;
box-shadow: 0 0 8px #0ee2c84a;
}
.seo-comparison {
margin-top: 19px;
margin-bottom: 11px;
background: #171d2e;
border-radius: 18px;
padding: 14px 9px;
box-shadow: 0 0 20px #0af7f733;
animation: bestSumAppear 1s;
}
.seo-comparison h4 {
margin: 0 0 14px 0;
text-align: center;
font-size: 1.13em;
color: #25e1e4;
font-weight: 900;
letter-spacing: 0.03em;
}
.seo-comparison table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 390px;
background: transparent;
}
.seo-comparison th, .seo-comparison td {
padding: 13px 7px;
text-align: center;
font-size: 1.09em;
border-bottom: 1.5px solid #29395c;
position: relative;
z-index: 1;
transition: background 0.19s, box-shadow 0.19s;
}
.seo-comparison th {
background: linear-gradient(90deg, #16e3f8 0%, #2ef9bc 100%);
color: #16244b;
font-weight: 900;
font-size: 1.13em;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
box-shadow: 0 2px 14px #20f5ff24;
}
.seo-comparison tbody tr:nth-child(even) {
background: #1c2537;
}
.seo-comparison tbody tr:nth-child(odd) {
background: #192336;
}
.seo-comparison td.best-seo-col {
background: linear-gradient(120deg, #15ffdd 70%, #6bffe5 100%) !important;
box-shadow: 0 0 22px #0ae899bb;
font-weight: 900;
border-radius: 7px;
color: #183f36;
animation: bestColPulse 2.3s infinite;
}
@keyframes bestColPulse {
0%,100% { box-shadow: 0 0 22px #0ae899bb; }
60% { box-shadow: 0 0 44px 7px #00b97c6c; }
}
.seo-btn-secondary {
width: 100%;
padding: 16px;
font-size: 1.11em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.09em;
color: #fff;
background: linear-gradient(130deg, #00ffe2 0%, #17aafd 100%);
border: none;
border-radius: 12px;
box-shadow: 0 8px 32px #1cfff180;
cursor: pointer;
margin-top: 20px;
transition: transform 0.18s, box-shadow 0.21s, background 0.19s;
}
.seo-btn-secondary:hover {
transform: translateY(-4px) scale(1.027);
box-shadow: 0 16px 34px #00ffc84a;
background: linear-gradient(130deg, #02c8bb 0%, #13aad8 100%);
}
@media (max-width: 600px) {
#seo-quote-widget {padding: 7px 2px;}
.seo-row {flex-direction: column; gap: 8px;}
.seo-comparison table {font-size: 0.97em;}
h3 {font-size: 1.1em;}
.best-seo-price {font-size: 1.42em;}
}
#confetti-canvas {
position:fixed;
top:0;left:0;
pointer-events:none;
width:100vw;
height:100vh;
z-index:100;
display:none;
}
</style>
</head>
<body>
<div id="seo-quote-widget">
<form id="seo-quote-form" autocomplete="off">
<h3>מחשבון הצעות מחיר לקידום אתרים שנתי</h3>
<!-- טיפ חכם -->
<div id="tip-box" class="tip-box">
<span id="tip-title">הידעת?</span>
<span id="tip-content"></span>
</div>
<!-- Progress Bar -->
<div class="progress-wrap">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="seo-row">
<div class="seo-field">
<label>סוג אתר</label>
<select id="site-type">
<option value="">בחר סוג</option>
<option value="profile">תדמית</option>
<option value="shop">חנות</option>
<option value="news">חדשות</option>
<option value="blog">בלוג</option>
</select>
</div>
<div class="seo-field">
<label>רמת תחרות</label>
<select id="competition">
<option value="">בחר רמת תחרות</option>
<option value="low">נמוכה</option>
<option value="medium">בינונית</option>
<option value="high">גבוהה</option>
</select>
</div>
</div>
<div class="seo-row">
<div class="seo-field">
<label for="keywords">
כמות ביטויים לקידום:
<span id="kw-value" style="color:#00ffc6;font-weight:bold;">10</span>
</label>
<input type="range" id="keywords" min="3" max="50" step="1" value="10" />
</div>
<div class="seo-field">
<label>דחיפות</label>
<select id="urgency">
<option value="normal">רגילה</option>
<option value="fast">מהירה</option>
</select>
</div>
</div>
<div class="seo-row seo-addons">
<label>
<input type="checkbox" id="content" />
ניהול תוכן מתקדם
<span class="tooltip" data-title="כולל יצירת מאמרים, בלוגים, ועדכונים שוטפים"><b>?</b></span>
</label>
<label>
<input type="checkbox" id="campaigns" />
ניהול קמפיינים ממומנים
<span class="tooltip" data-title="ניהול והקמת קמפיינים ממומנים (Google Ads, פייסבוק וכו')"><b>?</b></span>
</label>
<label>
<input type="checkbox" id="links" />
בניית קישורים חיצוניים
<span class="tooltip" data-title="בניית קישורים לאתר שלך מאתרים חיצוניים"><b>?</b></span>
</label>
</div>
<button type="submit" class="seo-btn-primary">חשב הצעה</button>
<!-- הצעה הכי משתלמת -->
<div id="best-seo-offer" class="best-seo-offer" style="display:none;">
<div class="best-seo-label"><span>🔥</span> המסלול המומלץ ביותר עבורך:</div>
<div class="best-seo-name" id="best-seo-name">—</div>
<div class="best-seo-price" id="best-seo-price">—</div>
<div class="best-seo-monthly" id="best-seo-monthly" style="font-size:1.15em;color:#26f5ce;margin-bottom:4px;"></div>
<div class="best-seo-per-year">לשנה (כולל מע”מ)</div>
</div>
<!-- בונוס מבצע החודש -->
<div id="bonus-box" class="bonus-box">
<span id="bonus-text"></span>
</div>
<!-- כפתור ROI -->
<button type="button" id="roi-btn" class="seo-btn-tertiary" style="margin-top:10px;display:none;">
רוצה לדעת כמה לקוחות מחזירים את ההשקעה? <span style="font-size:1.05em;">💡</span>
</button>
<!-- פופאפ ROI -->
<div id="roi-modal" class="roi-modal">
<div class="roi-modal-content">
<span class="roi-close" id="roi-close">×</span>
<h4>כמה לקוחות חדשים צריך כדי להחזיר את ההשקעה?</h4>
<p class="roi-explain">
רוצים לבדוק אם ההשקעה בקידום באמת משתלמת?<br>
הכניסו כמה רווח (נטו) אתם עושים בממוצע מכל לקוח שמגיע מהקידום, וגלו מיד כמה לקוחות דרושים כדי לכסות את כל ההוצאה.
</p>
<div style="margin-bottom:12px;">
מהו שווי לקוח ממוצע עבורך?
<span class="tooltip" data-title="כמה רווח נקי (אחרי הוצאות) אתם מרוויחים מכל לקוח חדש שמגיע מהקידום"><b>?</b></span>
<br>
<input id="roi-customer-value" type="number" min="1" placeholder="לדוג׳ 800" style="margin-top:6px;width:90px;padding:5px 10px;border-radius:6px;border:1.3px solid #26ffd9;">
<span style="color:#16f1c9;font-size:0.99em;">₪</span>
</div>
<button id="roi-calc-btn" class="seo-btn-primary" style="width:auto;font-size:1.08em;">חשב כמה לקוחות צריך</button>
<div id="roi-result" style="margin-top:14px;font-weight:700;color:#23ffd9;font-size:1.11em;"></div>
<div id="roi-action" style="margin-top:7px;color:#adf6ff;font-size:1.01em;"></div>
<div id="roi-twice" style="color:#c8ffe6;font-size:0.99em;margin-top:4px;"></div>
</div>
</div>
<!-- טבלת השוואה -->
<div id="seo-comparison" class="seo-comparison" style="display:none;">
<h4>השוואת מסלולים</h4>
<div class="table-responsive">
<table>
<thead>
<tr>
<th></th>
<th><span style="font-size:1.17em;">💡</span> בסיסי</th>
<th><span style="font-size:1.17em;">🚀</span> פלוס</th>
<th><span style="font-size:1.17em;">🌟</span> פרימיום</th>
</tr>
</thead>
<tbody>
<tr>
<td>מחיר שנתי</td>
<td id="price-basic">–</td>
<td id="price-plus">–</td>
<td id="price-premium">–</td>
</tr>
<tr>
<td>כמות ביטויים</td>
<td id="kw-basic">–</td>
<td id="kw-plus">–</td>
<td id="kw-premium">–</td>
</tr>
<tr>
<td>ניהול תוכן</td>
<td id="cont-basic">–</td>
<td id="cont-plus">–</td>
<td id="cont-premium">–</td>
</tr>
<tr>
<td>קישורים חיצוניים</td>
<td id="links-basic">–</td>
<td id="links-plus">–</td>
<td id="links-premium">–</td>
</tr>
<tr>
<td>קמפיינים ממומנים</td>
<td id="camp-basic">–</td>
<td id="camp-plus">–</td>
<td id="camp-premium">–</td>
</tr>
</tbody>
</table>
</div>
</div>
<button type="button" id="seo-contact-btn" class="seo-btn-secondary" style="display:none;">
קבל הצעה מסודרת עכשיו
</button>
</form>
</div>
<canvas id="confetti-canvas"></canvas>
<script>
(function(){
// טיפ מתחלף
const tips = [
"הידעת? קידום אורגני איכותי מניב תוצאות לתקופה ארוכה ומוזילה את עלות לקוח לאורך זמן.",
"ביטויים ממוקדים מביאים קהל איכותי יותר – אל תוותר על מחקר ביטויי זנב ארוך!",
"גם תוכן וגם קישורים – שני עמודי התווך להצלחה ב-SEO!",
"רוצה ROI גבוה? תמדוד לא רק את כמות הלידים, אלא גם את שווי הלקוח שלך.",
"אתר עם UX טוב מקבל דירוג גבוה יותר גם בגוגל!"
];
let tipIdx = 0;
function nextTip(){
tipIdx = (tipIdx+1)%tips.length;
document.getElementById('tip-content').textContent = tips[tipIdx];
}
document.getElementById('tip-content').textContent = tips[0];
setInterval(nextTip, 5300);
document.getElementById('tip-box').onclick = nextTip;
// סליידר ביטויים דינמי
document.getElementById('keywords').addEventListener('input',function(e){
document.getElementById('kw-value').textContent = this.value;
updateProgress();
});
// Progress Bar
function updateProgress(){
let step = 0, steps = 4;
if(document.getElementById('site-type').value) step++;
if(document.getElementById('competition').value) step++;
if(document.getElementById('keywords').value) step++;
if(document.getElementById('best-seo-offer').style.display=="flex") step++;
document.getElementById('progress-bar').style.width = (step/steps*100)+'%';
}
['site-type','competition','keywords'].forEach(id=>{
document.getElementById(id).addEventListener('input', updateProgress);
});
updateProgress();
// פונקציית חישוב מחיר
function calcPrice({type, comp, kw, urgency, addons, level}) {
let base = {basic: 6000, plus: 9000, premium: 13500}[level];
if (type == 'shop') base += 2000;
if (type == 'news') base += 1200;
if (type == 'blog') base += 400;
if (comp == 'medium') base *= 1.17;
if (comp == 'high') base *= 1.36;
if (kw > 10) base += Math.floor((kw-10)/5+1)*450;
if (urgency == 'fast') base *= 1.13;
if (level!="basic" && addons.content) base += 900;
if (level!="basic" && addons.links) base += 1800;
if (level=="premium" && addons.campaigns) base += 1500;
return Math.round(base/100)*100;
}
const planMap = { basic: "בסיסי", plus: "פלוס", premium: "פרימיום" };
const form = document.getElementById('seo-quote-form');
const bestSeoOffer = document.getElementById('best-seo-offer');
const bestSeoName = document.getElementById('best-seo-name');
const bestSeoPrice = document.getElementById('best-seo-price');
const bestSeoMonthly = document.getElementById('best-seo-monthly');
const seoComp = document.getElementById('seo-comparison');
const contactBtn = document.getElementById('seo-contact-btn');
const roiBtn = document.getElementById('roi-btn');
const roiModal = document.getElementById('roi-modal');
const roiClose = document.getElementById('roi-close');
const roiInput = document.getElementById('roi-customer-value');
const roiResult = document.getElementById('roi-result');
const roiAction = document.getElementById('roi-action');
const roiCalcBtn = document.getElementById('roi-calc-btn');
const roiTwice = document.getElementById('roi-twice');
const bonusBox = document.getElementById('bonus-box');
const bonusArr = [
"3 כתבות SEO במתנה!",
"בדיקת אתר חינם בשווי 390 ₪",
"שיחת אסטרטגיה שיווקית חינם",
"ייעוץ אישי 1:1 במתנה",
"חודש ניהול קישורים מתנה"
];
function showBonus(){
let rand = Math.floor(Math.random()*bonusArr.length);
document.getElementById('bonus-text').textContent = "💎 מזל טוב! ההצעה שלך כוללת החודש גם "+bonusArr[rand];
bonusBox.style.display='block';
}
// קונפטי
function confetti(){
let canvas = document.getElementById('confetti-canvas');
canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.style.display='block';
let ctx = canvas.getContext('2d');
let pieces = [];
for(let i=0;i<70;i++){
pieces.push({
x: Math.random()*canvas.width, y: Math.random()*-50,
color: ['#ffdf00','#11ffd6','#ff45e6','#54ffbe'][Math.floor(Math.random()*4)],
size: 7+Math.random()*8,
speed: 2+Math.random()*4, dx: Math.random()-0.5
});
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
pieces.forEach(p=>{
ctx.fillStyle=p.color;
ctx.beginPath();ctx.arc(p.x,p.y,p.size,0,2*Math.PI);ctx.fill();
p.y+=p.speed; p.x+=p.dx;
if(p.y>canvas.height+60) p.y=-20;
});
requestAnimationFrame(draw);
}
draw();
setTimeout(()=>{canvas.style.display='none';},2500);
}
form.addEventListener('submit', function(e){
e.preventDefault();
const type = document.getElementById('site-type').value;
const comp = document.getElementById('competition').value;
const kw = +document.getElementById('keywords').value;
const urgency = document.getElementById('urgency').value;
if(!type || !comp || !kw) {
alert("נא למלא את כל השדות");
return;
}
const addons = {
content: document.getElementById('content').checked,
campaigns: document.getElementById('campaigns').checked,
links: document.getElementById('links').checked
};
let prices = {
basic: calcPrice({type,comp,kw,urgency,addons,level:'basic'}),
plus: calcPrice({type,comp,kw,urgency,addons,level:'plus'}),
premium: calcPrice({type,comp,kw,urgency,addons,level:'premium'})
};
let plans = ["basic","plus","premium"];
let minPlan = plans.reduce((a,b)=>prices[a]<prices[b]?a:b);
bestSeoName.textContent = planMap[minPlan];
bestSeoPrice.textContent = prices[minPlan].toLocaleString('he-IL')+" ₪";
let monthly = Math.round(prices[minPlan]/12);
bestSeoMonthly.textContent = "או: " + monthly.toLocaleString('he-IL') + " ₪ לחודש";
bestSeoOffer.style.display = "flex";
bestSeoOffer.style.animation = "bestSumAppear 1s";
document.getElementById("price-basic").textContent = prices.basic.toLocaleString('he-IL')+" ₪";
document.getElementById("price-plus").textContent = prices.plus.toLocaleString('he-IL')+" ₪";
document.getElementById("price-premium").textContent = prices.premium.toLocaleString('he-IL')+" ₪";
document.getElementById("kw-basic").textContent = kw;
document.getElementById("kw-plus").textContent = kw;
document.getElementById("kw-premium").textContent = kw;
document.getElementById("cont-basic").textContent = "✖";
document.getElementById("cont-plus").textContent = addons.content?"✔":"—";
document.getElementById("cont-premium").textContent = addons.content?"✔":"—";
document.getElementById("links-basic").textContent = "✖";
document.getElementById("links-plus").textContent = addons.links?"✔":"—";
document.getElementById("links-premium").textContent = addons.links?"✔":"—";
document.getElementById("camp-basic").textContent = "✖";
document.getElementById("camp-plus").textContent = "✖";
document.getElementById("camp-premium").textContent = addons.campaigns?"✔":"—";
plans.forEach(pl=>{
document.getElementById("price-"+pl).classList.remove("best-seo-col");
});
document.getElementById("price-"+minPlan).classList.add("best-seo-col");
seoComp.style.display = "block";
contactBtn.style.display = "block";
roiBtn.style.display = "inline-block";
showBonus();
setTimeout(confetti, 600);
updateProgress();
window.scrollTo({top:form.offsetTop-50, behavior:'smooth'});
});
contactBtn.addEventListener('click', function(){
alert("תודה! נציג יצור עמך קשר להצעה מסודרת.");
// window.location.href = "https://yourdomain.com/contact";
});
// ROI Modal
roiBtn.onclick = function(){
roiModal.style.display = 'block';
roiResult.textContent = "";
roiAction.textContent = "";
roiInput.value = "";
roiTwice.textContent = "";
setTimeout(()=>roiInput.focus(),100);
};
roiClose.onclick = function(){ roiModal.style.display='none'; };
window.onclick = function(e){
if(e.target==roiModal) roiModal.style.display='none';
}
roiCalcBtn.onclick = function(){
let sum = parseInt(bestSeoPrice.textContent.replace(/[^\d]/g,''));
let val = parseInt(roiInput.value);
if(!val || val<=0) {
roiResult.textContent = "נא להזין סכום לקוח תקני";
roiResult.style.color="#ff8686";
roiAction.textContent = "";
roiTwice.textContent = "";
return;
}
let needed = Math.ceil(sum/val);
roiResult.style.color="#23ffd9";
roiResult.textContent = "צריך בערך " + needed + " לקוחות חדשים בשנה כדי להחזיר את ההשקעה";
roiAction.textContent = "כל לקוח מעבר למספר הזה = רווח נקי של "+val.toLocaleString('he-IL')+" ₪!";
// טווחי תוצאה:
let upVal = val+500;
let neededUp = Math.ceil(sum/upVal);
roiTwice.textContent = "אם תצליח להעלות את שווי הלקוח ל-"+upVal.toLocaleString('he-IL')+" ₪, תצטרך רק "+neededUp+" לקוחות להחזר.";
};
})();
</script>
</body>
</html>