/* Auto-generated from mockups/01-hero.html */
(function(){

const { useState, useEffect, useRef } = React;

    const WA_HREF = 'https://wa.me/972534200984?text=Hi%20BoldBrandz%20-%20I%20want%20to%20book%20a%20strategy%20call';

    /* ── Icons ── */
    const Emblem = ({ size = 26, color = '#0047ff' }) => (
      <svg viewBox="0 0 96 96" width={size} height={size} style={{ flex: 'none' }}>
        <path d="M68 18 L32 48 L68 78 L60 78 L24 48 L60 18 Z" fill={color}/>
      </svg>
    );
    const WA = ({ size = 18 }) => (
      <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>
    );
    const Arrow = ({ size = 16 }) => (
      <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none' }}>
        <path d="M5 12h14M13 5l7 7-7 7"/>
      </svg>
    );

    /* ── Buttons ── */
    function Button({ variant = 'primary', size = 'lg', glow = false, children, onClick, href, target, rel }) {
      const [hover, setHover] = useState(false);
      const base = {
        display: 'inline-flex', alignItems: 'center', gap: 10,
        fontFamily: 'var(--font-display)', fontWeight: 600,
        borderRadius: 10, border: '1px solid transparent', cursor: 'pointer',
        letterSpacing: '-0.005em', whiteSpace: 'nowrap', textDecoration: 'none',
        transition: 'all 180ms var(--ease-out)',
      };
      const sizes = {
        sm: { height: 36, padding: '0 16px', fontSize: 13 },
        lg: { height: 54, padding: '0 28px', fontSize: 15 },
      };
      const styles = variant === 'primary' ? {
        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',
      } : {
        background: hover ? 'rgba(255,255,255,0.04)' : 'transparent',
        color: 'var(--text-primary)',
        borderColor: hover ? 'var(--border-strong)' : 'var(--border-subtle)',
      };
      const Tag = href ? 'a' : 'button';
      const extra = href ? { href, target, rel } : { onClick };
      return (
        <Tag {...extra}
          onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
          style={{ ...base, ...sizes[size], ...styles }}>
          {children}
        </Tag>
      );
    }

    /* ── Metric reveal (pop + fade). DOM default = final value so static
       exports (PDF, screenshots) capture the real number. On `active`,
       pop from scale(0.9) → scale(1) with opacity 0 → 1 over 600ms. ── */
    function useMetricPop({ active = true, delay = 0 } = {}) {
      const [popped, setPopped] = useState(false);
      useEffect(() => {
        if (!active) { setPopped(false); return; }
        const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
        if (reduce) { setPopped(true); return; }
        const id = setTimeout(() => setPopped(true), delay);
        return () => clearTimeout(id);
      }, [active, delay]);
      return {
        display: 'inline-block',
        opacity: popped ? 1 : 0,
        transform: popped ? 'scale(1)' : 'scale(0.9)',
        transition: 'opacity 600ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1)',
        transformOrigin: 'left center',
        willChange: 'transform, opacity',
      };
    }

    /* ── Metric Counter Card ── */
    function MetricCounterCard() {
      const t = window.useCopy();
      const cplPop = useMetricPop({ delay: 1200 });
      const barRef = useRef(null);
      return (
        <div className="metric-card" style={{
          background: 'var(--bg-card)', border: '1px solid var(--border-subtle)',
          borderRadius: 20, padding: 36,
          boxShadow: '0 0 60px rgba(0,71,255,0.15), 0 1px 0 rgba(255,255,255,0.04) inset',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--text-dim)',
              letterSpacing: '0.2em', textTransform: 'uppercase' }}>
              {t.hero.card.label}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6,
              fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-faint)',
              letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              <span style={{ width: 6, height: 6, borderRadius: 9999, background: '#22c55e' }}/>
              {t.hero.card.badge}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'end', gap: 20 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-dim)',
                letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 10 }}>{t.hero.card.before}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 88,
                letterSpacing: '-0.05em', color: '#f87171', lineHeight: 0.9,
                fontVariantNumeric: 'tabular-nums' }}>
                <span style={{direction:'ltr',unicodeBidi:'isolate',display:'inline-block'}}>120</span>
                <span style={{ fontSize: '0.62em', color: '#7f3d3d', marginLeft: 6, letterSpacing: '-0.03em' }}>₪</span>
              </div>
            </div>
            <div style={{ paddingBottom: 18, color: 'var(--text-faint)' }}><Arrow size={28}/></div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#9fb8ff',
                letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 10 }}>{t.hero.card.after}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 88,
                letterSpacing: '-0.05em', color: '#0047ff', lineHeight: 0.9,
                fontVariantNumeric: 'tabular-nums',
                textShadow: '0 0 28px rgba(0,71,255,0.45)' }}>
                <span style={cplPop}>
                  <span style={{direction:'ltr',unicodeBidi:'isolate',display:'inline-block'}}>17</span>
                </span>
                <span style={{ fontSize: '0.62em', color: '#5b7adc', marginLeft: 6, letterSpacing: '-0.03em', textShadow: 'none' }}>₪</span>
              </div>
            </div>
          </div>

          {/* Before/After bar — single track, animated fill reduces 100% → 14.17% */}
          <div style={{ marginTop: 36 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between',
              fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-faint)',
              letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>
              <span>{t.hero.card.spend}</span>
              <span>−85.8%</span>
            </div>
            <div style={{ height: 8, background: 'var(--border-subtle)', borderRadius: 9999, overflow: 'hidden',
              position: 'relative' }}>
              <div ref={barRef} className="bar-fill" style={{
                height: '100%',
                background: '#0047ff',
                borderRadius: 9999,
                boxShadow: '0 0 14px rgba(0,71,255,0.6)',
              }}/>
              {/* Target marker at 14.17% */}
              <div style={{ position: 'absolute', top: -4, bottom: -4, left: '14.17%',
                width: 2, background: 'rgba(255,255,255,0.25)' }}/>
            </div>
          </div>

          {/* Micro-stats */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            marginTop: 28, paddingTop: 24, borderTop: '1px solid var(--border-subtle)', gap: 12 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28,
                color: '#22c55e', letterSpacing: '-0.02em' }}>+400%</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-dim)',
                letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4 }}>{t.hero.metric.volume}</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28,
                color: '#0047ff', letterSpacing: '-0.02em' }}>−86%</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-dim)',
                letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4 }}>{t.hero.metric.cost}</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28,
                color: 'var(--text-primary)', letterSpacing: '-0.02em' }}>
                <span style={{direction:'ltr',unicodeBidi:'isolate',display:'inline-block'}}>3</span>
                {' '}{t.hero.metric.time_unit}
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-dim)',
                letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4 }}>{t.hero.metric.time}</div>
            </div>
          </div>

          <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--text-faint)',
              letterSpacing: '0.12em' }}>{t.hero.card.footer}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6,
              fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-faint)',
              letterSpacing: '0.12em', textTransform: 'uppercase', cursor: 'pointer' }}>
              {t.hero.card.link}
            </div>
          </div>
        </div>
      );
    }

    /* ── Hero Section ── */
    function HeroSection() {
      const t = window.useCopy();
      const { lang } = window.useLang();

      /* Split the last word off h1_parts.pre to get the "from" preposition
         EN: "We dropped cost per lead from" → beat-2="We dropped cost per lead", fromWord="from"
         AR: "نزّلنا تكلفة الـ lead من"     → beat-2="نزّلنا تكلفة الـ lead",     fromWord="من" */
      const h1Parts = t.hero.h1_parts;
      const preWords = h1Parts.pre.split(' ');
      const fromWord = preWords.pop();
      const beatTwo = preWords.join(' ');
      const toWord = lang === 'ar' ? 'لـ' : 'to';

      return (
        <section style={{
          position: 'relative',
          background: 'var(--bg-base)',
          overflow: 'hidden',
          padding: '80px 48px 24px',
        }}>
          {/* Faint horizontal blue streak at 60% viewport height */}
          <div style={{
            position: 'absolute', left: 0, right: 0, top: '60%',
            height: 240, pointerEvents: 'none', animation: 'streak-breathe 8s ease-in-out infinite',
            background: 'linear-gradient(180deg, transparent 0%, rgba(0,71,255,0.06) 50%, transparent 100%)',
          }}/>

          {/* local NavBar stripped */}

          <div className="hero-grid" style={{
            position: 'relative', maxWidth: 1344, margin: '0 auto',
            display: 'grid', gridTemplateColumns: '560px 1fr',
            gap: 72, alignItems: 'center',
          }}>
            {/* LEFT: Metric Counter Card */}
            <MetricCounterCard/>

            {/* RIGHT: three-beat headline */}
            <div>
              <div className="beat beat-1" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '6px 12px 6px 10px', borderRadius: 9999,
                background: 'rgba(0,71,255,0.1)', border: '1px solid rgba(0,71,255,0.3)',
                fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600,
                letterSpacing: '0.12em', textTransform: 'uppercase', color: '#9fb8ff',
                marginBottom: 28,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: 9999, background: '#0047ff',
                  boxShadow: '0 0 6px #0047ff' }}/>
                {t.hero.badge}
              </div>

              <h1 style={{
                fontFamily: 'var(--font-display)', fontWeight: 600,
                fontSize: 76, lineHeight: 1.02, letterSpacing: '-0.035em',
                color: 'var(--text-primary)', margin: 0, textWrap: 'balance',
              }}>
                <span className="beat beat-2" style={{ display: 'block' }}>
                  {beatTwo}
                </span>
                <span className="beat beat-3" style={{ display: 'block', marginTop: 8 }}>
                  {fromWord}{' '}
                  <span style={{
                    display: 'inline-block',
                    color: 'var(--text-faint)',
                    textDecoration: 'line-through',
                    textDecorationColor: 'rgba(248,113,113,0.7)',
                    textDecorationThickness: 4,
                    fontVariantNumeric: 'tabular-nums',
                  }}>
                    <span style={{direction:'ltr',unicodeBidi:'isolate',display:'inline-block'}}>{h1Parts.from}</span>
                  </span>{' '}
                  <span style={{ color: 'var(--text-secondary)', fontWeight: 600 }}>{h1Parts.currency}</span>{' '}
                  <span style={{ color: 'var(--text-muted)', fontWeight: 600 }}>{toWord}</span>{' '}
                  <span className="pop-17" style={{
                    color: '#0047ff',
                    fontVariantNumeric: 'tabular-nums',
                    textShadow: '0 0 40px rgba(0,71,255,0.5)',
                  }}>
                    <span style={{direction:'ltr',unicodeBidi:'isolate',display:'inline-block'}}>{h1Parts.to}</span>
                  </span>{' '}
                  <span style={{ color: 'var(--text-secondary)', fontWeight: 600 }}>{h1Parts.currency}</span>
                </span>
              </h1>

              <p className="beat beat-4" style={{
                fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500,
                color: 'var(--text-muted)', margin: '32px 0 44px', lineHeight: 1.4, maxWidth: 560,
              }}>
                {t.hero.sub_lead}{' '}
                <span style={{ color: 'var(--text-primary)', fontWeight: 600 }}>{t.hero.sub_bold}</span>
              </p>

              <div className="beat beat-5 hero-ctas" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Button size="lg" glow onClick={() => window.open(WA_HREF, '_blank')}>
                  <WA size={18}/> {t.hero.cta_primary}
                </Button>
                <Button size="lg" variant="secondary"
                  href="https://www.boldbrandz.com/work"
                  target="_blank" rel="noopener noreferrer">
                  {t.hero.cta_secondary} <Arrow size={16}/>
                </Button>
              </div>

              {/* Trust row */}
              <div className="beat beat-5 hero-trust" style={{
                marginTop: 56, display: 'flex', alignItems: 'center', gap: 32,
                paddingTop: 24, borderTop: '1px solid var(--border-subtle)', maxWidth: 520,
                fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--text-faint)',
                letterSpacing: '0.12em', textTransform: 'uppercase',
              }}>
                <span>{t.hero.strip.locations}</span>
                <span style={{ width: 4, height: 4, borderRadius: 9999, background: 'var(--border-subtle)' }}/>
                <span>AR · EN</span>
                <span style={{ width: 4, height: 4, borderRadius: 9999, background: 'var(--border-subtle)' }}/>
                <span>{t.hero.strip.tagline}</span>
              </div>
            </div>
          </div>
        </section>
      );
    }

    /* ── Mount with mockup chrome ── */

window.HeroSection = HeroSection;
})();