/* Auto-generated from mockups/08-tiers-5-6-7.html */
(function(){

const { useEffect, useRef, useState } = React;

    /* ── Tweaks defaults (persisted via EDITMODE markers) ── */
    const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
      "primary": "#0047ff",
      "cardBg": "var(--bg-card)",
      "ctaStyle": "filled"
    }/*EDITMODE-END*/;

    /* Apply CSS vars from a tweak object */
    function applyTweaks(t) {
      const r = document.documentElement.style;
      r.setProperty('--tw-primary', t.primary);
      r.setProperty('--tw-primary-30', hexA(t.primary, 0.30));
      r.setProperty('--tw-primary-35', hexA(t.primary, 0.35));
      r.setProperty('--tw-primary-45', hexA(t.primary, 0.45));
      r.setProperty('--tw-primary-10', hexA(t.primary, 0.10));
      r.setProperty('--tw-primary-08', hexA(t.primary, 0.08));
      r.setProperty('--tw-primary-25', hexA(t.primary, 0.25));
      r.setProperty('--tw-primary-65', hexA(t.primary, 0.65));
      r.setProperty('--tw-card-bg', t.cardBg);
    }
    function hexA(hex, a) {
      const m = /^#([0-9a-f]{6})$/i.exec(hex); if (!m) return hex;
      const n = parseInt(m[1], 16);
      const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
      return `rgba(${r},${g},${b},${a})`;
    }
    applyTweaks(TWEAK_DEFAULTS);

    const waHref = (text) => 'https://wa.me/972534200984?text=' + encodeURIComponent(text);

    const Icon = ({ size = 16, children }) => (
      <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flex:'none' }}>{children}</svg>
    );
    const Check = (p) => <Icon {...p}><path d="M20 6L9 17l-5-5"/></Icon>;
    const WA = ({ size = 16 }) => (
      <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" style={{ flex:'none' }}>
        <path d="M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.5c.2-.2.2-.3.3-.5 0-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3 4.7 4.2 1.7.7 2.3.8 3.1.7.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.5-.2zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.7 1.5 5.3L2 22l4.8-1.5c1.5.8 3.3 1.3 5.2 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
      </svg>
    );

    function useStaggeredReveal(delayMs = 0) {
      const ref = useRef(null);
      useEffect(() => {
        if (!ref.current) return;
        const el = ref.current;
        const trigger = () => setTimeout(() => el.classList.add('in'), delayMs);
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.92 && r.bottom > 0) { trigger(); return; }
        const io = new IntersectionObserver(([e]) => {
          if (e.isIntersecting) { trigger(); io.disconnect(); }
        }, { threshold: 0.15 });
        io.observe(el);
        return () => io.disconnect();
      }, [delayMs]);
      return ref;
    }

    function Eyebrow({ children }) {
      return (
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--text-dim)',
          letterSpacing: '0.16em', textTransform: 'uppercase',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 9999, background: '#0047ff', boxShadow: '0 0 8px #0047ff' }}/>
          {children}
        </div>
      );
    }
    function TierTag({ children }) {
      return (
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '5px 11px', borderRadius: 9999,
          background: 'var(--tw-primary-10, rgba(0,71,255,0.10))',
          border: '1px solid var(--tw-primary-30, rgba(0,71,255,0.30))',
          fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 600,
          letterSpacing: '0.16em', textTransform: 'uppercase', color: '#9fb8ff',
        }}>
          <span style={{ width: 5, height: 5, borderRadius: 9999, background: 'var(--tw-primary, #0047ff)', boxShadow: '0 0 8px var(--tw-primary, #0047ff)' }}/>
          {children}
        </div>
      );
    }

    function Card({ tier, name, nameAr, tagline, inclusions, priceNum, priceSuffix, ctaLabel, ctaHref, ctaGtm, delay, ctaStyle }) {
      const ref = useStaggeredReveal(delay);
      const t = window.useCopy();
      const { lang } = window.useLang();
      const { theme } = window.useTheme();
      const dividerColor = theme === 'light' ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.08)';
      const cardBorderColor = theme === 'light' ? 'rgba(0,0,0,0.10)' : 'rgba(255,255,255,0.08)';
      return (
        <div ref={ref} className="reveal mini-card" style={{
          background: 'var(--tw-card-bg, var(--bg-card))',
          border: `1px solid ${cardBorderColor}`,
          borderRadius: 18,
          padding: 32,
          display: 'flex', flexDirection: 'column',
          boxShadow: '0 14px 36px -18px rgba(0,0,0,0.55)',
          height: '100%',
          overflow: 'hidden',
          position: 'relative',
          isolation: 'isolate',
        }}>
          {/* Tier tag */}
          <div style={{ marginBottom: 20 }}>
            <TierTag>{tier}</TierTag>
          </div>

          {/* Service name */}
          <h3 style={{
            margin: '0 0 10px',
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 22, lineHeight: 1.25, letterSpacing: '-0.02em',
            color: 'var(--text-primary)',
          }}>
            {name}
          </h3>

          {/* Arabic subtitle — only in AR mode */}
          {lang === 'ar' && (
          <div style={{
            fontFamily: 'var(--font-arabic)', fontWeight: 500,
            fontSize: 15, lineHeight: 1.4, color: 'var(--text-dim)',
            direction: 'rtl', textAlign: 'left',
            marginBottom: 20,
          }}>
            {nameAr}
          </div>
          )}

          {/* Tagline */}
          <p style={{
            margin: '0 0 26px',
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 18, lineHeight: 1.55, color: 'var(--text-secondary)',
          }}>
            {tagline}
          </p>

          {/* Inclusions — grows to consume extra space so INVESTMENT dividers align */}
          <div style={{
            display: 'flex', flexDirection: 'column', gap: 12,
            paddingTop: 22, borderTop: `1px solid ${dividerColor}`,
            flexGrow: 1,
          }}>
            {inclusions.map((line, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 11,
                fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 400,
                lineHeight: 1.5, color: 'var(--text-secondary)',
              }}>
                <span style={{
                  flex: 'none', width: 18, height: 18, borderRadius: 9999,
                  background: 'rgba(34,197,94,0.12)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: '#22c55e', marginTop: 1,
                }}>
                  <Check size={11}/>
                </span>
                <span>{line}</span>
              </div>
            ))}
          </div>

          {/* Bottom group — INVESTMENT divider aligns across cards */}
          <div style={{
            marginTop: 28,
          }}>
            <div style={{ marginBottom: 18 }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-dim)',
              letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 8,
            }}>{t.tiers.investment}</div>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 8,
              flexWrap: 'wrap',
              fontFamily: 'var(--font-display)', color: 'var(--text-muted)', fontSize: 18,
            }}>
              <span>{t.tiers.from}</span>
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                color: 'var(--tw-primary, #0047ff)', fontSize: 26, letterSpacing: '-0.025em',
                fontVariantNumeric: 'tabular-nums',
                textShadow: '0 0 18px var(--tw-primary-35, var(--accent-primary-glow))',
                whiteSpace: 'nowrap',
                direction: 'ltr', unicodeBidi: 'isolate', display: 'inline-block',
              }}>
                {priceNum}
                <span style={{
                  fontFamily: "'Heebo', 'Alexandria', system-ui, sans-serif",
                  marginInlineStart: 4,
                }}>₪</span>
              </span>
              {priceSuffix && (
                <span style={{ color: 'var(--text-dim)', fontSize: 18 }}>{priceSuffix}</span>
              )}
            </div>
          </div>

          {/* CTA — borderless text-link with pulsing glow */}
          <a
            className="card-cta"
            href={ctaHref} target="_blank" rel="noopener noreferrer"
            data-gtm-event={ctaGtm}
          >
            <WA size={18}/><span>{ctaLabel}</span>
          </a>
          </div>
        </div>
      );
    }

    function SectionHeader() {
      const ref = useStaggeredReveal(0);
      const t = window.useCopy();
      return (
        <div ref={ref} className="reveal" style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ marginBottom: 22 }}>
            <Eyebrow>{t.grid.section_label}</Eyebrow>
          </div>
          <h2 className="section-h2" style={{
            margin: '0 0 20px',
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 48, lineHeight: 1.1, letterSpacing: '-0.035em',
            color: 'var(--text-primary)', textWrap: 'balance',
          }}>
            {t.grid.h1}
          </h2>
          <p style={{
            margin: '0 auto', maxWidth: 640,
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 20, lineHeight: 1.6, color: 'var(--text-muted)',
          }}>
            {t.grid.sub}
          </p>
        </div>
      );
    }

    function Grid({ ctaStyle }) {
      const t = window.useCopy();
      return (
        <div className="tiers-grid" dir="ltr" style={{
          margin: '64px auto 0', maxWidth: 1200,
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 32,
          alignItems: 'stretch',
        }}>
          <Card
            tier={t.t6.pill}
            ctaStyle={ctaStyle}
            name={t.t6.title}
            nameAr={t.t6.ar_sub}
            tagline={t.t6.desc}
            inclusions={t.t6.features}
            priceNum="5,000"
            ctaLabel={t.t6.cta}
            ctaHref={waHref("Hi BoldBrandz, I'm interested in the SaaS & Custom Systems tier")}
            ctaGtm="Lead_WhatsApp_Tier6CTA"
            delay={0}
          />
          <Card
            tier={t.t7.pill}
            ctaStyle={ctaStyle}
            name={t.t7.title}
            nameAr={t.t7.ar_sub}
            tagline={t.t7.desc}
            inclusions={t.t7.features}
            priceNum="3,000"
            ctaLabel={t.t7.cta}
            ctaHref={waHref("Hi BoldBrandz, I'm interested in the Website Design & Development tier")}
            ctaGtm="Lead_WhatsApp_Tier7CTA"
            delay={100}
          />
          <Card
            tier={t.t5.pill}
            ctaStyle={ctaStyle}
            name={t.t5.title}
            nameAr={t.t5.ar_sub}
            tagline={t.t5.desc}
            inclusions={t.t5.features}
            priceNum="2,500"
            priceSuffix={t.t5.price_suffix}
            ctaLabel={t.t5.cta}
            ctaHref={waHref("Hi BoldBrandz, I'm interested in the Social Media Grid tier")}
            ctaGtm="Lead_WhatsApp_Tier5CTA"
            delay={200}
          />
        </div>
      );
    }

    function Page({ ctaStyle }) {
      return (
        <section style={{
          position: 'relative', background: 'var(--bg-base)',
          padding: '120px 48px', overflow: 'hidden',
        }}>
          <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
            <SectionHeader/>
            <Grid ctaStyle={ctaStyle}/>
          </div>
        </section>
      );
    }

    function TweaksPanel({ tweaks, setTweaks, visible }) {
      const swatches = ['#0047ff', '#8b5cf6', '#22c55e', '#f43f5e', '#f59e0b', '#06b6d4'];
      const bgs = [
        { label: 'Zinc', val: 'var(--bg-card)' },
        { label: 'Black', val: '#0a0a0b' },
        { label: 'Blue-tint', val: '#0f1424' },
      ];
      const update = (patch) => {
        const next = { ...tweaks, ...patch };
        setTweaks(next);
        applyTweaks(next);
        window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
      };
      return (
        <div className={`tw-panel${visible ? ' on' : ''}`}>
          <h4><span><span className="dot"/>Tweaks</span><span style={{ color: 'var(--text-faint)' }}>08</span></h4>

          <div className="tw-row">
            <span className="tw-label">Primary accent</span>
            <div className="tw-swatches">
              {swatches.map(c => (
                <button key={c}
                  className={tweaks.primary === c ? 'active' : ''}
                  style={{ background: c }}
                  onClick={() => update({ primary: c })}/>
              ))}
            </div>
          </div>

          <div className="tw-row">
            <span className="tw-label">Card surface</span>
            <div className="tw-seg" style={{ gridTemplateColumns: '1fr 1fr 1fr' }}>
              {bgs.map(b => (
                <button key={b.val}
                  className={tweaks.cardBg === b.val ? 'active' : ''}
                  onClick={() => update({ cardBg: b.val })}>{b.label}</button>
              ))}
            </div>
          </div>

          <div className="tw-row">
            <span className="tw-label">CTA style</span>
            <div className="tw-seg">
              <button className={tweaks.ctaStyle === 'ghost' ? 'active' : ''}
                onClick={() => update({ ctaStyle: 'ghost' })}>Ghost</button>
              <button className={tweaks.ctaStyle === 'filled' ? 'active' : ''}
                onClick={() => update({ ctaStyle: 'filled' })}>Filled</button>
            </div>
          </div>
        </div>
      );
    }

window.Tiers567Section = Page;
})();