/* Auto-generated from mockups/05-service-tiers.html */ (function(){ const { useState, useEffect, useRef } = React; /* WhatsApp deep link — number is placeholder per brief §F.1 */ const WA_BASE = 'https://wa.me/972000000000'; const waLink = (msg) => `${WA_BASE}?text=${encodeURIComponent(msg)}`; /* ── Icons ── */ const Icon = ({ size = 16, children, style }) => ( {children} ); const Check = (p) => ; const WA = ({ size = 18 }) => ( ); const SalesIcon = (p) => ; const SupportIcon = (p) => ; const OrganizerIcon = (p) => ; /* ── Button (lifted from hero — identical signature) ── */ function Button({ size = 'lg', glow = false, children, onClick, fullWidth = false }) { const [hover, setHover] = useState(false); const base = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, fontFamily: 'var(--font-display)', fontWeight: 600, borderRadius: 10, border: '1px solid transparent', cursor: 'pointer', letterSpacing: '-0.005em', whiteSpace: 'nowrap', transition: 'all 180ms var(--ease-out)', background: hover ? '#0035cc' : '#0047ff', color: '#fff', boxShadow: glow ? (hover ? '0 0 40px rgba(0,71,255,0.65)' : '0 0 24px rgba(0,71,255,0.45)') : 'none', width: fullWidth ? '100%' : 'auto', }; const sizes = { sm: { height: 36, padding: '0 16px', fontSize: 13 }, lg: { height: 54, padding: '0 32px', fontSize: 15 }, }; return ( ); } /* ── Reveal hook ── */ function useReveal(threshold = 0.15) { const ref = useRef(null); useEffect(() => { if (!ref.current) return; const el = ref.current; const r = el.getBoundingClientRect(); if (r.top < window.innerHeight * 0.92 && r.bottom > 0) { el.classList.add('in'); return; } const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); } }, { threshold }); io.observe(el); return () => io.disconnect(); }, [threshold]); return ref; } /* ── Section header (eyebrow + h2 opener) ── */ function SectionHead({ eyebrow, title, accentDot = '#0047ff' }) { const ref = useReveal(); return (
{eyebrow}

{title}

); } /* ── Top-of-card tag (full label) ── */ function CardTag({ children }) { return (
{children}
); } /* ──────────────────────────────────────────────────────────────────── SECTION 5 · TIER 1 — Marketing Funnel & Systems ──────────────────────────────────────────────────────────────────── */ function Tier1Card() { const ref = useReveal(0.1); const t = window.useCopy(); const { lang } = window.useLang(); const waMsg = "Hi BoldBrandz, I'd like to learn more about the Marketing Funnel tier"; return (
{/* Tier 1 accent: solid blue stripe — engine, foundational */}
{/* Header row: tag + Arabic name */}
{t.t1.pill}
{lang === 'ar' && (
{t.t1.ar_sub}
)}
{/* Tagline — large, prominent */}

{t.t1.title}

{/* Section divider */}
{t.t1.features_label}
{/* Two-column inclusions checklist */}
    {t.t1.features.map((line, i) => (
  • {line}
    • ))}
{/* Price + CTA footer */}
{t.t1.price.label}
{t.t1.price.prefix} 4,000 ₪ {t.t1.price.suffix}
{t.t1.price.retainer}
); } /* ──────────────────────────────────────────────────────────────────── SECTION 6 · TIER 2 — AI Agents ──────────────────────────────────────────────────────────────────── */ function Tier2Card() { const ref = useReveal(0.1); const t = window.useCopy(); const { lang } = window.useLang(); const cardInView = useInViewBoolean(ref, 0.15); const agentIcons = [SalesIcon, SupportIcon, OrganizerIcon]; const waMsg = "Hi BoldBrandz, I'd like to build my AI agent (Tier 2)"; return (
{/* Tier 2 accent: blue → transparent gradient stripe — workforce, in motion */}
{/* Header row: tag (with online pulse dot to distinguish from Tier 1) + Arabic */}
{t.t2.pill}
{t.t2.live}
{lang === 'ar' && (
{t.t2.ar_sub}
)}
{/* Tagline — first sentence emphasised */}

{t.t2.title}

{t.t2.title_tag_pre} {t.t2.title_tag_bold}
{/* Section divider */}
{t.t2.features_label}
{/* Three agent sub-cards — stagger 80ms left→right when card enters view */}
{t.t2.features.map((agent, i) => (
{React.createElement(agentIcons[i], { size: 16 })}
{agent.title}
{agent.body}
))}
{/* Channels row — inline bullets */}
{t.t2.channels_pre} {t.t2.channels_list.map((ch, i) => ( {ch} {i < t.t2.channels_list.length - 1 && ·} ))} — {t.t2.channels_post}
{/* Price + CTA footer */}
{t.tiers.investment}
{t.t2.price.prefix} 8,000 ₪ {t.t2.price.suffix}
{t.t2.price.monthly}
); } /* useInViewBoolean — for Tier 2 sub-card stagger trigger */ function useInViewBoolean(ref, threshold = 0.15) { const [inView, setInView] = useState(false); useEffect(() => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); if (r.top < window.innerHeight * 0.92 && r.bottom > 0) { setInView(true); return; } const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } }, { threshold }); io.observe(ref.current); return () => io.disconnect(); }, [ref, threshold]); return inView; } /* ──────────────────────────────────────────────────────────────────── PAGE — back-to-back sections, max-w-5xl per brief ──────────────────────────────────────────────────────────────────── */ function ServiceTiers() { const t = window.useCopy(); return ( <> {/* SECTION 5 */}
{/* horizon streak — subtle */}
{/* SECTION 6 */}
{t.t2.section_h1_pre}{' '}{t.t2.section_h1_metric}{' '}{t.t2.section_h1_post} } accentDot="#22c55e" />
); } /* ── Mockup chrome wrapper ── */ window.Tier12Section = ServiceTiers; })();