// Main app composition
const { useEffect, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "teal",
  "density": "spacious",
  "heroVariant": "split"
}/*EDITMODE-END*/;

const ACCENTS = {
  teal:     { color: '#0F766E', name: 'Deep teal' },
  indigo:   { color: '#4F46E5', name: 'Slate blue' },
  gold:     { color: '#B7791F', name: 'Dusty gold' },
  ruby:     { color: '#BE123C', name: 'Ruby' },
  forest:   { color: '#166534', name: 'Forest' },
  petrol:   { color: '#1F4E5F', name: 'Petrol blue' },
  copper:   { color: '#B45309', name: 'Copper' },
  wine:     { color: '#9F1239', name: 'Wine' },
  steel:    { color: '#475569', name: 'Steel blue-grey' },
};

function App() {
  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    const accent = ACCENTS[tweaks.accent]?.color || '#E2522B';
    document.documentElement.style.setProperty('--accent-pop', accent);
  }, [tweaks.theme, tweaks.accent]);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <SectionTeam />
      <SectionExitChallenges />
      <SectionApproach />
      <SectionScenarios />
      <SectionFee />
      <SectionChallenge />
      <SectionMarket />
      <SectionPremises />
      <SectionCases />
      <SectionCTA />
      <Footer />
      <SectionIndicator />
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Theme">
            <window.TweakRadio
              label="Palette"
              value={tweaks.theme}
              options={[{value:'light',label:'Light'},{value:'dark',label:'Dark'}]}
              onChange={(v)=>setTweak('theme', v)}
            />
            <window.TweakSelect
              label="Accent"
              value={tweaks.accent}
              options={Object.entries(ACCENTS).map(([k,v])=>({value:k, label:v.name}))}
              onChange={(v)=>setTweak('accent', v)}
            />
          </window.TweakSection>
          <window.TweakSection title="Hero">
            <window.TweakRadio
              label="Variant"
              value={tweaks.heroVariant}
              options={[
                {value:'split',label:'Map'},
                {value:'numbers',label:'Numbers'},
              ]}
              onChange={(v)=>setTweak('heroVariant', v)}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

function Nav() {
  const [open, setOpen] = useState(false);
  const navItems = [
    { href: '#team', label: 'Team' },
    { href: '#exit-challenges', label: 'Challenges' },
    { href: '#approach', label: 'Approach' },
    { href: '#scenarios', label: 'Economics' },
    { href: '#fee', label: 'Model' },
    { href: '#market', label: 'Market' },
    { href: 'companies.html', label: 'Companies' },
    { href: '#cases', label: 'Cases' },
    { href: '#contact', label: 'Contact' },
  ];

  const handleNavClick = () => setOpen(false);
  const rememberLang = (lang) => {
    try { window.localStorage.setItem('bridge_lang', lang); } catch (e) {}
  };
  const openContactForm = () => {
    setOpen(false);
    window.dispatchEvent(new CustomEvent('bridge:open-contact-form'));
  };

  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <a href="#" className="brand">
          <span className="glyph">B</span>
          <span>Bridge</span>
          <span style={{color:'var(--ink-3)', fontWeight:400, fontSize:'12px', marginLeft:'8px', fontFamily:'var(--mono)', letterSpacing:'0.1em', textTransform:'uppercase'}}>Central&nbsp;Asia</span>
        </a>
        <nav className={`nav-links ${open ? 'nav-links--mobile-open' : ''}`}>
          {navItems.map((item) => (
            <a key={item.href} href={item.href} onClick={handleNavClick}>{item.label}</a>
          ))}
        </nav>
        <div className="nav-actions">
          <button type="button" className="btn btn--ghost" style={{padding:'10px 16px', fontSize:'13px'}} onClick={openContactForm}>
            Contact us <span className="arrow">↗</span>
          </button>
          <a href="../index.html" className="lang-link" aria-label="Switch to Russian" onClick={() => rememberLang('ru')}>RU</a>
          <button
            type="button"
            className="nav-toggle"
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
          >
            <span />
            <span />
            <span />
          </button>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" data-section-name="00 · INTRO">
      <div className="wrap">
        <div className="hero-meta reveal">
          <span>BRIDGE / B2B ENTERPRISE IT</span>
          <span style={{textAlign:'right'}}>ALMATY · MOSCOW · TASHKENT · BISHKEK</span>
        </div>

        <div className="hero-grid">
          <div>
            <div className="h-eyebrow reveal" style={{marginBottom:'24px'}}>
              <span style={{color:'var(--accent-pop)'}}>●</span> Strategic partnership for expansion into Asia
            </div>
            <h1 className="reveal" style={{'--rd':'80ms'}}>
              <em className="hero-accent">BizDev</em><br/>
              <span className="hero-ru">in Central Asia.</span>
            </h1>
            <p className="hero-sub reveal" style={{'--rd':'200ms'}}>
              We help B2B Enterprise IT companies validate entry into Kazakhstan,
              Uzbekistan and Kyrgyzstan without expensive local hiring, a new
              entity with no track record, or months of waiting for the first market signals.
            </p>
            <div className="hero-cta reveal" style={{'--rd':'320ms'}}>
              <a href="#contact" className="btn btn--accent">
                Strategy session · 30 min <span className="arrow">→</span>
              </a>
              <a href="#approach" className="btn btn--ghost">
                How we work
              </a>
            </div>

            <div className="hero-stamp reveal" style={{'--rd':'440ms'}}>
              <div className="item">
                <div className="k"><span data-count="17" data-decimals="0">0</span>+</div>
                <div className="v">years in Enterprise</div>
              </div>
              <div className="item">
                <div className="k">SAP · MS</div>
                <div className="v">Salesforce · Yandex</div>
              </div>
              <div className="item">
                <div className="k">4-12 wks</div>
                <div className="v">to a go / no-go decision</div>
              </div>
            </div>
          </div>

          <div className="reveal" style={{'--rd':'200ms'}}>
            <window.CentralAsiaMap />
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ['BIZDEV ≠ SDR', 'MARKET VALIDATION', 'LOCAL TRUST', 'C-LEVEL ACCESS', 'ENTRY STRATEGY', 'PRESALE', 'LAND AND EXPAND', 'KZ · UZ · KG'];
  return (
    <div className="marquee">
      <div className="marquee-track">
        <span>{items.map((i,k)=> <span key={k}>{i}</span>)}</span>
        <span>{items.map((i,k)=> <span key={'a'+k}>{i}</span>)}</span>
      </div>
    </div>
  );
}

function SectionExitChallenges() {
  const tableData = [
    { name: 'Regional manager', simple: true, bridge: true },
    { name: 'Meeting setting', simple: true, bridge: true },
    { name: 'Partner channels', simple: false, bridge: true },
    { name: 'Product adaptation for the market', simple: false, bridge: true },
    { name: 'Hypothesis validation', simple: false, bridge: true },
    { name: 'Personal C-level relationships', simple: false, bridge: true },
    { name: 'Opinion leaders', simple: false, bridge: true },
    { name: 'Trust in people and brand', simple: false, bridge: true },
    { name: 'Market entry under a team with local track record', simple: false, bridge: true },
    { name: 'Market shaping', simple: false, bridge: true },
    { name: 'Events, community and expert content', simple: false, bridge: true },
    { name: 'Team energy and motivation', simple: false, bridge: true },
  ];

  return (
    <section className="section" id="exit-challenges" data-section-name="02 · ENTRY CHALLENGES">
      <div className="wrap">
        <div className="exit-challenges-grid" style={{display:'grid', gridTemplateColumns:'1fr 1.6fr', gap:'clamp(32px,5vw,80px)', alignItems:'start'}}>
          
          <div className="reveal">
            <div className="h-eyebrow">02 — Entry challenges</div>
            <h2 style={{fontFamily:'var(--serif)', fontWeight:320, fontSize:'clamp(34px,4.4vw,68px)', lineHeight:1, letterSpacing:'-0.03em', margin:'40px 0 32px'}}>
              What it really <br className="br-desk"/>
              takes to enter <br className="br-desk"/>
              a <em style={{color:'var(--accent-pop)'}}>new market.</em>
            </h2>
            
            <div style={{display:'inline-flex', alignItems:'center', gap:'8px', padding:'6px 12px', border:'1px solid color-mix(in srgb, var(--accent-pop) 30%, transparent)', background:'color-mix(in srgb, var(--accent-pop) 5%, transparent)', color:'var(--accent-pop)', fontFamily:'var(--mono)', fontSize:'10px', letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:'32px'}}>
              <span style={{width:'6px', height:'6px', borderRadius:'50%', background:'var(--accent-pop)'}}></span>
              Real BizDev
            </div>

            <p style={{margin:'0 0 48px', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.65, maxWidth:'320px'}}>
              Real BizDev is not an SDR function or a list of meetings. It is market-hypothesis testing, trust, local context, relationships and a path to a pilot.
            </p>

            <div className="scroll-hint" style={{color:'var(--ink-3)'}}>
              <span>The full picture below</span>
              <span className="arrow"></span>
            </div>
          </div>

          <div className="reveal" style={{'--rd':'120ms'}}>
            <div style={{border:'1px solid var(--line)', background:'var(--bg-elev)'}}>
              <div className="exit-challenges-row" style={{display:'grid', gridTemplateColumns:'1fr 100px 100px', gap:'16px', padding:'20px 24px', borderBottom:'1px solid var(--line)', fontFamily:'var(--mono)', fontSize:'10px', letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink-3)', alignItems:'center'}}>
                <div>Entry component</div>
                <div style={{textAlign:'center'}}>Basic</div>
                <div style={{textAlign:'center', color:'var(--accent-pop)'}}>Bridge</div>
              </div>
              <div style={{background:'var(--bg)'}}>
                {tableData.map((row, i) => (
                  <div className="exit-challenges-row" key={i} style={{display:'grid', gridTemplateColumns:'1fr 100px 100px', gap:'16px', padding:'20px 24px', borderBottom: i === tableData.length - 1 ? 'none' : '1px solid var(--line)', alignItems:'center'}}>
                    <div style={{fontSize:'14px', color:'var(--ink)'}}>{row.name}</div>
                    <div style={{textAlign:'center', fontSize:'24px', lineHeight:1}}>
                      {row.simple ? (
                        <span style={{color:'var(--accent-pop)'}}>✓</span>
                      ) : (
                        <span style={{color:'var(--line-2)'}}>—</span>
                      )}
                    </div>
                    <div style={{textAlign:'center', fontSize:'24px', lineHeight:1}}>
                      {row.bridge ? (
                        <span style={{color:'var(--accent-pop)'}}>✓</span>
                      ) : (
                        <span style={{color:'var(--line-2)'}}>—</span>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

function SectionMarket() {
  return (
    <section className="hscroll-section" id="market" data-section-name="07 · MARKET">
      <div className="wrap market-head-wrap" style={{marginBottom:'48px'}}>
        <div className="s-head market-s-head" style={{marginBottom: 0}}>
          <div>
            <div className="h-eyebrow reveal" style={{color:'rgba(245,243,238,0.55)'}}>07 — Market</div>
          </div>
          <div className="reveal" style={{'--rd':'120ms'}}>
            <div className="lead" style={{color:'var(--bg)'}}>
              Kazakhstan is ahead of<br/>
              parts of Europe in Enterprise digitization.
            </div>
            <div className="scroll-hint" style={{marginTop:'24px', color:'rgba(245,243,238,0.55)'}}>
              <span>Scroll right</span>
              <span className="arrow" style={{background:'rgba(245,243,238,0.55)'}}></span>
            </div>
          </div>
        </div>
      </div>

      <div className="hscroll market-hscroll">
        <div className="card reveal market-card">
          <div className="num">FACT 01 / EGDI</div>
          <div>
            <div className="big"><span data-count="24">0</span><sub>/ UN 2024</sub></div>
            <h4>24th globally</h4>
            <p>In the e-government development index. Kazakhstan is ahead of many European countries in public-sector and G2B/B2B service digitization.</p>
          </div>
        </div>
        <div className="card reveal market-card" style={{'--rd':'80ms'}}>
          <div className="num">FACT 02 / IT EXPORT</div>
          <div>
            <div className="big">$<span data-count="1.14" data-decimals="2">0</span><sub>BN · 2025</sub></div>
            <h4>The market has matured</h4>
            <p>IT services export volume. The market has moved from domestic consumption to building global products and Enterprise software.</p>
          </div>
        </div>
        <div className="card reveal market-card" style={{'--rd':'160ms'}}>
          <div className="num">FACT 03 / FINTECH</div>
          <div>
            <div className="big"><span data-count="89">0</span><sub>%</sub></div>
            <h4>Cashless payments</h4>
            <p>Kazakhstan's infrastructure and business environment are ready for sophisticated IT solutions: AI, HR tech, analytics and automation.</p>
          </div>
        </div>
        <div className="card reveal market-card" style={{'--rd':'240ms'}}>
          <div className="num">FACT 04 / VELOCITY</div>
          <div>
            <div className="big"><span data-count="6">0</span><sub>MO · PoC</sub></div>
            <h4>Fast pilots</h4>
            <p>An open ecosystem and limited legacy allow proof-of-concepts to launch within six months and integrate into Enterprise core systems.</p>
          </div>
        </div>
        <div className="card reveal market-card" style={{'--rd':'320ms'}}>
          <div className="num">FACT 05 / TOOLS</div>
          <div>
            <div className="big">∅</div>
            <h4>No tool barriers</h4>
            <p>Open access to LinkedIn, Sales Navigator, Instagram, advanced AI tools and global advertising platforms.</p>
          </div>
        </div>
        <div className="card reveal market-card" style={{'--rd':'400ms'}}>
          <div className="num">FACT 06 / DEMAND</div>
          <div>
            <div className="big">↑</div>
            <h4>Strong demand</h4>
            <p>Active demand for innovation in AI, HR tech, FinTech and Enterprise solutions, especially infrastructure products built for scale.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionChallenge() {
  const challenges = [
    { n:'01', t:'Economics', d:'High rates and inflation risks limit the pace of domestic growth.', icon:'↓' },
    { n:'02', t:'Tools', d:'Restricted access to media, ad platforms and AI services slows demand generation.', icon:'×' },
    { n:'03', t:'Risk', d:'Assets and revenue need to be distributed across jurisdictions.', icon:'⚠' },
  ];
  const opps = [
    { n:'01', t:'Open economy', d:'Active adoption of innovation in Enterprise and government across KZ, UZ and KG.', icon:'↑' },
    { n:'02', t:'Land and expand', d:'Limited legacy means faster PoCs and smoother core-system integrations.', icon:'⤢' },
    { n:'03', t:'Accessible technology', d:'Full integration into the global IT ecosystem without tool barriers.', icon:'∞' },
  ];
  return (
    <section className="section" id="challenge" data-section-name="06 · CONTEXT">
      <div className="wrap">
        <div className="s-head">
          <div><div className="h-eyebrow reveal">06 — Context</div></div>
          <h2 className="reveal" style={{margin:0,'--rd':'120ms', fontFamily:'var(--serif)', fontWeight:340, fontSize:'clamp(40px,5vw,76px)', lineHeight:1, letterSpacing:'-0.03em'}}>
            The domestic market<br/><em>is slowing.</em><br/>
            <span style={{color:'var(--accent-pop)', fontStyle:'italic'}}>External</span> markets are opening.
          </h2>
        </div>
        <div style={{position:'relative', display:'grid', gridTemplateColumns:'1fr 80px 1fr', gap:0, marginTop:'48px'}} className="challenge-cmp">
          <div>
            <div className="h-eyebrow reveal" style={{marginBottom:'24px'}}>← Push factors</div>
            {challenges.map((c, i) => (
              <div key={c.n} className="reveal compare-card" style={{'--rd':`${i*120}ms`, padding:'28px 0', borderTop:'1px solid var(--line)', position:'relative'}}>
                <div style={{display:'grid', gridTemplateColumns:'40px 1fr 50px', gap:'16px', alignItems:'start'}}>
                  <span style={{fontFamily:'var(--mono)', fontSize:'11px', color:'var(--ink-3)', letterSpacing:'0.12em'}}>{c.n}</span>
                  <div>
                    <div style={{fontFamily:'var(--serif)', fontWeight:360, fontSize:'24px', letterSpacing:'-0.015em', lineHeight:1, marginBottom:'8px'}}>{c.t}</div>
                    <p style={{margin:0, fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>{c.d}</p>
                  </div>
                  <span style={{fontFamily:'var(--serif)', fontSize:'34px', color:'var(--ink-3)', textAlign:'right', lineHeight:1}}>{c.icon}</span>
                </div>
              </div>
            ))}
          </div>
          <div style={{position:'relative'}}>
            <div style={{position:'absolute', left:'50%', top:0, bottom:0, width:'1px', background:'var(--line-2)'}} />
            <div style={{position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)', width:'56px', height:'56px', borderRadius:'50%', background:'var(--accent-pop)', color:'#fff', display:'grid', placeItems:'center', fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'28px'}}>vs</div>
          </div>
          <div>
            <div className="h-eyebrow reveal" style={{marginBottom:'24px', color:'var(--accent-pop)', textAlign:'right'}}>Pull factors →</div>
            {opps.map((c, i) => (
              <div key={c.n} className="reveal compare-card" style={{'--rd':`${i*120+200}ms`, padding:'28px 0', borderTop:'1px solid var(--line)'}}>
                <div style={{display:'grid', gridTemplateColumns:'50px 1fr 40px', gap:'16px', alignItems:'start'}}>
                  <span style={{fontFamily:'var(--serif)', fontSize:'34px', color:'var(--accent-pop)', lineHeight:1}}>{c.icon}</span>
                  <div>
                    <div style={{fontFamily:'var(--serif)', fontWeight:360, fontSize:'24px', letterSpacing:'-0.015em', lineHeight:1, marginBottom:'8px'}}>{c.t}</div>
                    <p style={{margin:0, fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>{c.d}</p>
                  </div>
                  <span style={{fontFamily:'var(--mono)', fontSize:'11px', color:'var(--ink-3)', letterSpacing:'0.12em', textAlign:'right'}}>{c.n}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="reveal challenge-stats-grid" style={{marginTop:'56px', display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'1px', background:'var(--line)', border:'1px solid var(--line)'}}>
          <div className="challenge-stat-card" style={{background:'var(--bg)', padding:'28px 24px'}}>
            <div className="h-eyebrow">Testing alone</div>
            <div style={{fontFamily:'var(--serif)', fontSize:'56px', lineHeight:1, letterSpacing:'-0.03em', marginTop:'12px'}}>6+<sub style={{fontFamily:'var(--mono)', fontSize:'12px', color:'var(--ink-3)', letterSpacing:'0.08em', verticalAlign:'baseline'}}> mo</sub></div>
            <p style={{color:'var(--ink-3)', fontSize:'13px', marginTop:'12px', lineHeight:1.5}}>Until the first potential assessment without a local network.</p>
          </div>
          <div className="challenge-stat-card" style={{background:'var(--bg)', padding:'28px 24px'}}>
            <div className="h-eyebrow" style={{color:'var(--accent-pop)'}}>With Bridge</div>
            <div style={{fontFamily:'var(--serif)', fontSize:'56px', lineHeight:1, letterSpacing:'-0.03em', marginTop:'12px', color:'var(--accent-pop)', fontStyle:'italic'}}>Day&nbsp;1</div>
            <p style={{color:'var(--ink-3)', fontSize:'13px', marginTop:'12px', lineHeight:1.5}}>CCO + CMO + local BizDev team from day one.</p>
          </div>
          <div className="challenge-stat-card" style={{background:'var(--ink)', color:'var(--bg)', padding:'28px 24px'}}>
            <div className="h-eyebrow" style={{color:'rgba(245,243,238,0.6)'}}>Hiring mistake risk</div>
            <div style={{fontFamily:'var(--serif)', fontSize:'56px', lineHeight:1, letterSpacing:'-0.03em', marginTop:'12px'}}>min</div>
            <p style={{color:'rgba(245,243,238,0.7)', fontSize:'13px', marginTop:'12px', lineHeight:1.5}}>Validate the hypothesis before local hiring and long fixed-cost commitments.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionApproach() {
  return (
    <section className="section" id="approach" data-section-name="03 · APPROACH">
      <div className="wrap">
        <div className="s-head">
          <div>
            <div className="h-eyebrow reveal">03 — Methodology</div>
          </div>
          <div className="reveal" style={{'--rd':'120ms'}}>
            <div className="lead">
              Hypothesis testing<br/>
              and <em>scaling.</em>
            </div>
            <p style={{maxWidth:'560px', color:'var(--ink-2)', fontSize:'16px', marginTop:'24px'}}>
              First we test the market through local trust and the right accounts.
              Once the hypothesis is confirmed, we scale into pilots, partnerships and revenue.
            </p>
          </div>
        </div>

        <window.Roadmap />
      </div>
    </section>
  );
}


function SectionScenarios() {
  const ref = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  // Shared time axis: 5 months. Position helper — centers month m at (m-0.5)*20%.
  const px = (m) => `${(m - 0.5) * 20}%`;

  // DIY economics:
  // M1: headhunter 1.5 + entity/tools setup 0.5 = 2.0M
  // M2-M5: Country Manager 1.0 + SDR 0.35 + events/admin 0.4 = 1.75M/month
  // Total: 2.0 + 4 x 1.75 = 9.0M
  const diy = {
    eyebrow: '01 / Without Bridge',
    label: 'Independent market entry',
    duration: '5 mo',
    cost: 'RUB 9.0M',
    steps: [
      { m: 1, cost: '2.0', name: 'Search + headhunter',  risk: 'Headhunter = RUB 1.5M + entity setup' },
      { m: 2, cost: '3.8', name: 'Hiring + onboarding',  risk: 'Hiring mistake can cost up to 12 months' },
      { m: 3, cost: '5.5', name: 'Work starts',          risk: 'One CM is not a C-level team' },
      { m: 4, cost: '7.3', name: 'First presales',       risk: null },
      { m: 5, cost: '9.0', name: 'Scaling',              risk: 'Fixed cost grows without results' },
    ],
    goNoGo: { m: 4, label: 'RUB 7.3M already spent' },
    resultM: 5,
    resultLabel: 'First sales · M5',
  };

  // Bridge: 1.1M/month x 3 months = 3.3M before first sales, then Success Fee
  const bridge = {
    eyebrow: '02 / With Bridge',
    label: 'With Bridge',
    duration: '3 mo',
    cost: 'RUB 3.3M',
    steps: [
      { m: 1, cost: '1.1', name: 'Onboarding + adaptation', strength: 'A reputable team from day one' },
      { m: 2, cost: '2.2', name: 'Hypothesis validated',    strength: null },
      { m: 3, cost: '3.3', name: 'Presales -> scale',       strength: 'Co-owner mindset' },
    ],
    goNoGo: { m: 2, label: 'RUB 2.2M spent' },
    resultM: 3,
    resultLabel: 'First sales · M3',
  };

  // Auto-play once visible (IntersectionObserver) — fixes "late reveal" issue
  React.useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) { setProgress(1); return; }

    let played = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !played && e.intersectionRatio >= 0.25) {
          played = true;
          const start = performance.now();
          const dur = 2600;
          const tick = (t) => {
            const p = Math.min(1, (t - start) / dur);
            const eased = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
            setProgress(eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: [0, 0.25, 0.5, 0.75] });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Element activation: timeline progresses 0→1, each month becomes active when progress ≥ (m-0.5)/5
  const stepOn = (m) => progress >= (m - 0.5) / 5;
  const lineW  = (resultM) => Math.min(progress * 100, ((resultM - 0.5) / 5) * 100 + 1);

  const renderTrack = (d, kind) => (
    <div className={`scnh-track scnh-track--${kind}`}>
      <div className="scnh-track-head">
        <div className="h-eyebrow">{d.eyebrow}</div>
        <h4 className="scnh-track-name">{d.label}</h4>
        <div className="scnh-track-meta">
          <span><strong>{d.duration}</strong></span>
          <span>·</span>
          <span><strong>{d.cost}</strong></span>
        </div>
      </div>

      <div className="scnh-track-body">
        <div className="scnh-line">
          <div className="scnh-line-fill" style={{ width: `${kind === 'bridge' ? lineW(d.resultM) : progress * 100}%` }} />
        </div>

        {/* Bridge: dim band after result showing "already at scale" */}
        {kind === 'bridge' && (
          <div
            className={`scnh-bonus ${progress >= 0.7 ? 'is-on' : ''}`}
            style={{ left: `${((d.resultM - 0.5) / 5) * 100}%`, right: 0 }}
          >
            <span className="scnh-bonus-arrow">→</span>
            <span className="scnh-bonus-text">+2 months already at scale</span>
          </div>
        )}

        {d.steps.map(s => (
          <div
            key={s.m}
            className={`scnh-step ${stepOn(s.m) ? 'is-on' : ''}`}
            style={{ left: px(s.m), '--i': s.m }}
          >
            <div className="scnh-dot" />
            <div className="scnh-step-cost">{s.cost}<sub>&nbsp;M</sub></div>
            <div className="scnh-step-name">{s.name}</div>
            {s.risk && (
              <div className="scnh-step-tag scnh-step-tag--risk">
                <span className="scnh-tag-dot" />{s.risk}
              </div>
            )}
            {s.strength && (
              <div className="scnh-step-tag scnh-step-tag--strength">
                <span className="scnh-tag-dot" />{s.strength}
              </div>
            )}
          </div>
        ))}

        {/* go/no-go decision marker */}
        <div
          className={`scnh-decision ${stepOn(d.goNoGo.m) ? 'is-on' : ''}`}
          style={{ left: px(d.goNoGo.m) }}
        >
          <div className="scnh-decision-stem" />
          <div className="scnh-decision-flag">
            <strong>go / no-go</strong>
            <span>{d.goNoGo.label}</span>
          </div>
        </div>

        {/* Result endpoint */}
        <div
          className={`scnh-result ${progress >= (d.resultM - 0.4) / 5 ? 'is-on' : ''}`}
          style={{ left: px(d.resultM) }}
        >
          <span className="scnh-result-pip" />
          <span className="scnh-result-label">{d.resultLabel}</span>
        </div>
      </div>
    </div>
  );

  const chartOn = progress >= 0.55;

  return (
    <section className="section section--scnh" id="scenarios" data-section-name="04 · SCENARIOS" ref={ref}>
      <div className="wrap">
        <div className="s-head">
          <div><div className="h-eyebrow reveal">04 — Cost of decision</div></div>
          <div className="reveal" style={{ '--rd': '120ms' }}>
            <div className="lead">
              Two paths to the first <em>deal.</em><br/>
              The difference is <em style={{ color: 'var(--accent-pop)' }}>2 months and RUB 5.7M.</em>
            </div>
          </div>
        </div>

        {/* UTP — moved to top, the conclusion before the proof */}
        <div className={`scnh-utp ${progress > 0.5 ? 'is-on' : ''}`}>
          <div className="scnh-utp-item">
            <div className="scnh-utp-n">−<span data-count="2">0</span></div>
            <div className="scnh-utp-l">months to first sales</div>
          </div>
          <div className="scnh-utp-item is-money">
            <div className="scnh-utp-n">−<span data-count="5.7" data-decimals="1">0</span><sub>&nbsp;M&nbsp;RUB</sub></div>
            <div className="scnh-utp-l">saved before scale</div>
          </div>
          <div className="scnh-utp-item is-pct">
            <div className="scnh-utp-n">−<span data-count="63">0</span>%</div>
            <div className="scnh-utp-l">fixed cost before results</div>
          </div>
        </div>

        {/* Horizontal race with shared time axis */}
        <div className="scnh-race">
          <div className="scnh-axis">
            <div className="scnh-axis-line" />
            {[1, 2, 3, 4, 5].map(m => (
              <div
                key={m}
                className={`scnh-axis-tick ${progress >= (m - 1) / 5 ? 'is-on' : ''}`}
                style={{ left: px(m), '--i': m }}
              >
                <span className="scnh-axis-mark" />
                <span className="scnh-axis-label">Mo {m}{m === 5 ? '+' : ''}</span>
              </div>
            ))}
          </div>

          {renderTrack(diy, 'diy')}
          <div className="scnh-vs"><span>vs</span></div>
          {renderTrack(bridge, 'bridge')}
        </div>

        {/* Cumulative cost chart with shaded saving area */}
        <div className={`scnh-chart ${chartOn ? 'is-on' : ''}`}>
          <div className="scnh-chart-head">
            <div className="h-eyebrow">Cumulative cost · RUB M</div>
            <div className="scnh-chart-legend">
              <span className="scnh-leg scnh-leg--diy"><span className="scnh-leg-sw" />Without Bridge</span>
              <span className="scnh-leg scnh-leg--br"><span className="scnh-leg-sw" />With Bridge</span>
            </div>
          </div>

          <div className="scnh-chart-plot">
            {/* Y formula: y = 180 − (cum / 9.0) × 154
                DIY cumulative: M1=2.0→y=146, M2=3.8→y=115, M3=5.5→y=86, M4=7.3→y=55, M5=9.0→y=26
                Bridge: 1.1/month - M1=1.1->y=161, M2=2.2->y=142, M3=3.3->y=124, plateau */}
            <svg className="scnh-chart-svg" viewBox="0 0 1000 200" preserveAspectRatio="none" aria-hidden="true">
              {/* Y-axis gridlines */}
              <line x1="0" y1="180" x2="1000" y2="180" className="scnh-chart-grid" />
              <line x1="0" y1="124" x2="1000" y2="124" className="scnh-chart-grid scnh-chart-grid--dim" />
              <line x1="0" y1="86"  x2="1000" y2="86"  className="scnh-chart-grid scnh-chart-grid--dim" />
              <line x1="0" y1="26"  x2="1000" y2="26"  className="scnh-chart-grid scnh-chart-grid--dim" />

              {/* Vertical month gridlines */}
              {[200, 400, 600, 800].map((x, i) => (
                <line key={i} x1={x} y1="0" x2={x} y2="180" className="scnh-chart-grid scnh-chart-grid--vert" />
              ))}

              {/* Saving area: from M3 (Bridge plateaus) to M5 */}
              <polygon
                className="scnh-chart-area"
                points="600,86 800,55 1000,26 1000,124 600,124"
                style={{ opacity: progress >= 0.7 ? 1 : 0 }}
              />

              {/* Bridge line: 1.1M/month x 3, plateau at 3.3M (y=124) */}
              <path
                d="M 0,180 L 200,161 L 400,142 L 600,124 L 1000,124"
                className="scnh-chart-line scnh-chart-line--bridge"
                pathLength="1"
                strokeDasharray="1"
                style={{ strokeDashoffset: 1 - Math.min(1, progress * 1.2) }}
              />

              {/* DIY line: headhunter front-loaded in M1, then 1.75M/month */}
              <path
                d="M 0,180 L 200,146 L 400,115 L 600,86 L 800,55 L 1000,26"
                className="scnh-chart-line scnh-chart-line--diy"
                pathLength="1"
                strokeDasharray="1"
                style={{ strokeDashoffset: 1 - Math.min(1, progress * 1.05) }}
              />

              {/* Endpoint dots */}
              <circle cx="1000" cy="124" r="5" className="scnh-chart-end scnh-chart-end--br"
                style={{ opacity: progress >= 0.6 ? 1 : 0 }} />
              <circle cx="1000" cy="26"  r="5" className="scnh-chart-end scnh-chart-end--diy"
                style={{ opacity: progress >= 0.95 ? 1 : 0 }} />
            </svg>

            {/* Y-axis labels */}
            <div className="scnh-chart-y">
              <span style={{ top: '13%' }}>RUB 9</span>
              <span style={{ top: '43%' }}>RUB 5.5</span>
              <span style={{ top: '62%' }}>RUB 3.3</span>
              <span style={{ top: '90%' }}>0</span>
            </div>

            {/* Saving callout */}
            <div className={`scnh-chart-saving ${progress >= 0.85 ? 'is-on' : ''}`}>
              <span className="scnh-chart-saving-n">−<span data-count="5.7" data-decimals="1">0</span>M RUB</span>
              <span className="scnh-chart-saving-l">saved</span>
            </div>
          </div>

          <div className="scnh-chart-x">
            {[1, 2, 3, 4, 5].map(m => (
              <span key={m} style={{ left: px(m) }}>M{m}{m === 5 ? '+' : ''}</span>
            ))}
          </div>
        </div>

        <p className="scnh-proof reveal">
          Bridge: fixed fee of RUB 1.1M/month for 3 months = RUB 3.3M, then a revenue-based Success Fee.
          DIY: headhunter RUB 1.5M + entity and tool setup RUB 0.5M + Country Manager RUB 1.0M/month + SDR + operations = RUB 1.75M/month. Total over 5 months is about RUB 9M. Central Asia market rates, 2026.
        </p>
      </div>
    </section>
  );
}

function SectionFee() {
  return (
    <section className="section" id="fee" data-section-name="05 · MODEL">
      <div className="wrap">
        <div className="fee">
          <div className="fee-info">
            <div className="h-eyebrow reveal">05 — Financial architecture</div>
            <h2 className="reveal" style={{'--rd':'80ms'}}>
              We become a <em>self-funding</em> part of your company.
            </h2>
            <p className="reveal" style={{'--rd':'160ms'}}>
              Once the revenue share covers the fixed fee, the fixed fee goes away.
              We are motivated to sell at higher value and for longer contracts: a partner mindset, not a hiring-manager one.
            </p>
            <div className="fee-chips reveal" style={{'--rd':'240ms'}}>
              <div className="fee-chip is-fix">
                <span className="sw" />
                <div>
                  <strong>Investment phase</strong>
                  <span>Fixed advance payments cover the team infrastructure and network in the new market.</span>
                </div>
              </div>
              <div className="fee-chip is-suc">
                <span className="sw" />
                <div>
                  <strong>Success Fee · % of revenue</strong>
                  <span>A share of local revenue. The incentive is to sell high-value, long-term deals.</span>
                </div>
              </div>
              <div className="fee-chip is-part">
                <span className="sw" />
                <div>
                  <strong>Strategic partnership</strong>
                  <span>After break-even, the fixed fee is removed and we operate as part of your P&amp;L.</span>
                </div>
              </div>
            </div>
          </div>
          <div className="reveal" style={{'--rd':'200ms'}}>
            <window.FeeChart />
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionPremises() {
  return (
    <section className="section" id="premises" data-section-name="08 · PREMISES">
      <div className="wrap">
        <div className="s-head">
          <div><div className="h-eyebrow reveal">08 — Entry premises</div></div>
          <div className="reveal" style={{'--rd':'120ms'}}>
            <div className="lead">
              Barriers exist.<br/>
              Partnership <em>removes</em> them.
            </div>
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}} className="premises-grid">
          <div className="reveal" style={{padding:'40px 32px', borderRight:'1px solid var(--line)'}}>
            <div className="h-eyebrow" style={{color:'var(--accent-pop)'}}>+ Tailwinds</div>
            <ul style={{margin:'24px 0 0', padding:0, listStyle:'none'}}>
              <li style={{padding:'14px 0', borderTop:'1px solid var(--line)', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>Strong demand for innovation in AI, HR, FinTech and Enterprise solutions</li>
              <li style={{padding:'14px 0', borderTop:'1px solid var(--line)', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>Open access to global tools: LinkedIn, Instagram, Sales Navigator and AI</li>
              <li style={{padding:'14px 0', borderTop:'1px solid var(--line)', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>A path to diversify business beyond the domestic market</li>
            </ul>
          </div>
          <div className="reveal" style={{'--rd':'120ms', padding:'40px 32px', borderRight:'1px solid var(--line)'}}>
            <div className="h-eyebrow">— Barriers and risks</div>
            <ul style={{margin:'24px 0 0', padding:0, listStyle:'none'}}>
              <li style={{padding:'14px 0', borderTop:'1px solid var(--line)', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>Entering from scratch requires significant investment and time</li>
              <li style={{padding:'14px 0', borderTop:'1px solid var(--line)', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>High risk of mistakes in local hiring and value-proposition adaptation</li>
              <li style={{padding:'14px 0', borderTop:'1px solid var(--line)', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>No local brand awareness or trusted network</li>
            </ul>
          </div>
          <div className="reveal" style={{'--rd':'240ms', padding:'40px 32px', background:'var(--ink)', color:'var(--bg)'}}>
            <div className="h-eyebrow" style={{color:'rgba(245,243,238,0.6)'}}>= Partnership value</div>
            <ul style={{margin:'24px 0 0', padding:0, listStyle:'none'}}>
              <li style={{padding:'14px 0', borderTop:'1px solid rgba(245,243,238,0.2)', fontSize:'14px', color:'rgba(245,243,238,0.85)', lineHeight:1.5}}>Dedicated local BizDev team from day one</li>
              <li style={{padding:'14px 0', borderTop:'1px solid rgba(245,243,238,0.2)', fontSize:'14px', color:'rgba(245,243,238,0.85)', lineHeight:1.5}}>Hypothesis testing before major hiring and fixed costs</li>
              <li style={{padding:'14px 0', borderTop:'1px solid rgba(245,243,238,0.2)', fontSize:'14px', color:'rgba(245,243,238,0.85)', lineHeight:1.5}}>Reuse and localization of existing materials and cases</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}


function SectionCases() {
  return (
    <section className="section" id="cases" data-section-name="09 · CASES">
      <div className="wrap">
        <div className="cases-head">
          <div className="reveal">
            <div className="h-eyebrow">09 — Proof</div>
            <h2 className="lead" style={{margin:'16px 0 0'}}>
              Already delivered for<br/><em>market leaders.</em>
            </h2>
          </div>
          <div className="reveal" style={{'--rd':'120ms', maxWidth:'320px', color:'var(--ink-3)', fontSize:'14px'}}>
            Experience with global leaders: SAP, Microsoft, Salesforce and Yandex.
            Below are excerpts from recent programs.
          </div>
        </div>

        <div className="case-row reveal">
          <div className="logo">hh.ru</div>
          <div className="body">
            <div className="by">Gennady Beregovsky · Sponsor</div>
            Adapted a new product for the Central Asian market, built the presentation and one-pager,
            held targeted meetings with leading HRDs in Kazakhstan and created a business development map.
          </div>
          <div className="metric">
            <div className="n"><span data-count="17">0</span></div>
            <div className="l">meetings with KZ HRDs</div>
          </div>
        </div>

        <div className="case-row reveal" style={{'--rd':'80ms'}}>
          <div className="logo">Creatio</div>
          <div className="body">
            <div className="by">Ivan Astakhov · Partner</div>
            "The level of expertise and personalized attention to our unique
            needs made Bridge an indispensable partner in the region."
          </div>
          <div className="metric">
            <div className="n">CIS</div>
            <div className="l">EMEA · expertise</div>
          </div>
        </div>

        <div className="case-row reveal" style={{'--rd':'160ms'}}>
          <div className="logo">SAP · MS · SF</div>
          <div className="body">
            <div className="by">Drew Feig · Reference</div>
            "I was impressed by the exceptional level of service and creativity the team
            brings to Enterprise-client work."
          </div>
          <div className="metric">
            <div className="n"><span data-count="10">0</span>+</div>
            <div className="l">years in data-driven</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionTeam() {
  const team = [
    { role:'CCO & Enterprise BizDev', title:'17+ years with Gartner leaders', meta:'GTM & BizDev architecture', body:'Enterprise sales architect with SAP, Microsoft and Salesforce experience. Managed Enterprise account portfolios across EMEA and CIS.', photo:'../team-photos/cco-ab.jpg' },
    { role:'CMO & GTM', title:'10+ years in data-driven GTM', meta:'Demand generation', body:'Marketing and sales across CIS and EMEA. Launched 30+ Enterprise products through ABM methodology.', photo:'../team-photos/cmo-as.jpg' },
    { role:'COO & Automation', title:'15+ years in FinTech & startups', meta:'Operational scaling', body:'Scaled companies from MVP to production. Automated business processes in FinTech and Enterprise environments.', photo:'../team-photos/coo-bm.jpg' },
  ];
  const tickerLogos = 'SAP · Microsoft · Salesforce · Anaplan · Yandex · Acer · UniCredit · DemirBank · Kameleoon · Manhattan · Creatio';

  return (
    <section className="section" id="team" data-section-name="01 · TEAM">
      <div className="wrap">
        <div className="s-head">
          <div><div className="h-eyebrow reveal">01 — Team</div></div>
          <div className="reveal" style={{'--rd':'120ms'}}>
            <div className="lead">
              A dedicated team<br/>
              <em>from day one.</em>
            </div>
          </div>
        </div>
        <div className="team">
          {team.map((t, i) => (
            <div className="team-card reveal" key={t.role} style={{'--rd':`${i*100}ms`}}>
              <img className="team-card-photo" src={t.photo} alt={t.role} />
              <div className="role">{t.role}</div>
              <h5>{t.title}</h5>
              <div className="yr">— {t.meta}</div>
              <p>{t.body}</p>
            </div>
          ))}
        </div>

        {/* Brands Ticker */}
        <div className="reveal vision-ticker" style={{'--rd':'400ms', marginTop:'64px', borderTop:'1px solid var(--line)'}}>
          <div className="vision-ticker-track">
            {[tickerLogos, tickerLogos].map((t, ti) => (
              <span key={ti}>{t}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionCTA() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [submitState, setSubmitState] = useState('idle');
  const [submitError, setSubmitError] = useState('');

  useEffect(() => {
    const openContactForm = () => {
      setSubmitState('idle');
      setSubmitError('');
      setIsModalOpen(true);
    };
    window.addEventListener('bridge:open-contact-form', openContactForm);
    return () => window.removeEventListener('bridge:open-contact-form', openContactForm);
  }, []);

  useEffect(() => {
    if (!isModalOpen) return;
    const onKeyDown = (event) => {
      if (event.key === 'Escape') {
        setIsModalOpen(false);
        setSubmitState('idle');
        setSubmitError('');
      }
    };
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKeyDown);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener('keydown', onKeyDown);
    };
  }, [isModalOpen]);

  const closeModal = () => {
    setIsModalOpen(false);
    setSubmitState('idle');
    setSubmitError('');
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    setSubmitState('sending');
    setSubmitError('');

    try {
      const payload = Object.fromEntries(new FormData(event.currentTarget));
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const result = await response.json().catch(() => ({}));
      if (!response.ok || result.ok === false) {
        throw new Error(result.error || 'Contact request failed');
      }
      event.currentTarget.reset();
      setSubmitState('success');
    } catch (error) {
      setSubmitState('error');
      setSubmitError('We could not submit the form. Please try again or email us at hello@ibridge.io.');
    }
  };

  return (
    <section className="cta-section section" id="contact" data-section-name="10 · CTA">
      <div className="wrap">
        <div className="h-eyebrow reveal">10 — Next step</div>
        <div className="cta-grid" style={{marginTop:'24px'}}>
          <h2 className="reveal" style={{'--rd':'80ms'}}>
            Not using<br/>
            this asset in Central Asia<br/>
            means <em>leaving<br/>enterprise value behind.</em>
          </h2>
          <div className="right reveal" style={{'--rd':'160ms'}}>
            <p>A 30-minute strategy session. We review the product, assess readiness
            for Central Asia and outline a market-entry hypothesis with no obligation.</p>
            <ul style={{margin:'24px 0 0', padding:0, listStyle:'none', borderTop:'1px solid rgba(245,243,238,0.2)'}}>
              <li style={{padding:'12px 0', borderBottom:'1px solid rgba(245,243,238,0.2)', display:'flex', justifyContent:'space-between'}}>
                <span style={{color:'rgba(245,243,238,0.55)', fontFamily:'var(--mono)', fontSize:'11px', letterSpacing:'0.14em', textTransform:'uppercase'}}>01 / Audit</span>
                <span>Intro and material review</span>
              </li>
              <li style={{padding:'12px 0', borderBottom:'1px solid rgba(245,243,238,0.2)', display:'flex', justifyContent:'space-between'}}>
                <span style={{color:'rgba(245,243,238,0.55)', fontFamily:'var(--mono)', fontSize:'11px', letterSpacing:'0.14em', textTransform:'uppercase'}}>02 / Agreement</span>
                <span>Contract · advance</span>
              </li>
              <li style={{padding:'12px 0', display:'flex', justifyContent:'space-between'}}>
                <span style={{color:'rgba(245,243,238,0.55)', fontFamily:'var(--mono)', fontSize:'11px', letterSpacing:'0.14em', textTransform:'uppercase'}}>03 / Strategy</span>
                <span>Launch as one team</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="cta-submit-row reveal" style={{'--rd':'320ms'}}>
          <div className="meta">We reply within 24 hours · NDA on request</div>
          <button className="btn btn--accent" type="button" onClick={() => setIsModalOpen(true)}>
            Book a session <span className="arrow">→</span>
          </button>
        </div>

        {isModalOpen && (
          <div className="cta-modal" role="dialog" aria-modal="true" aria-labelledby="cta-modal-title">
            <button className="cta-modal__backdrop" type="button" aria-label="Close form" onClick={closeModal}></button>
            <div className="cta-modal__panel">
              <button className="cta-modal__close" type="button" aria-label="Close form" onClick={closeModal}>×</button>
              {submitState === 'success' ? (
                <div className="cta-success">
                  <div className="h-eyebrow">Request sent</div>
                  <h3 id="cta-modal-title">Thank you. We received your details.</h3>
                  <p>We will reply within 24 hours and suggest a slot for the strategy session.</p>
                  <button className="btn btn--accent" type="button" onClick={closeModal}>Done</button>
                </div>
              ) : (
                <>
                  <div className="h-eyebrow">Request form</div>
                  <h3 id="cta-modal-title">Fill in your contacts for the strategy session</h3>
                  <p className="cta-modal__lead">A few details help us understand the context and come back with a relevant next step.</p>
                  <form className="cta-form" onSubmit={handleSubmit}>
                    <input type="hidden" name="locale" value="en" />
                    <input type="hidden" name="source" value="Bridge CA website" />
                    <input type="text" name="_honey" tabIndex="-1" autoComplete="off" style={{display:'none'}} />
                    <div className="field">
                      <label htmlFor="cta-name">Name <span>*</span></label>
                      <input id="cta-name" name="name" type="text" placeholder="Your name" autoComplete="name" required />
                      <small>How we should address you</small>
                    </div>
                    <div className="field">
                      <label htmlFor="cta-company">Company / role <span>*</span></label>
                      <input id="cta-company" name="company_role" type="text" placeholder="Company and title" autoComplete="organization-title" required />
                      <small>Example: CEO, ACME IT</small>
                    </div>
                    <div className="field">
                      <label htmlFor="cta-contact">Email or Telegram <span>*</span></label>
                      <input id="cta-contact" name="email_or_telegram" type="text" placeholder="email or @telegram" autoComplete="email" required />
                      <small>Where we should reply</small>
                    </div>
                    <div className="field">
                      <label htmlFor="cta-phone">Phone <span>*</span></label>
                      <div className="phone-control">
                        <select id="cta-phone-code" name="phone_country_code" aria-label="Country code" defaultValue="United States +1">
                          <option value="United States +1">🇺🇸 US +1</option>
                          <option value="Kazakhstan +7">🇰🇿 KZ +7</option>
                          <option value="Russia +7">🇷🇺 RU +7</option>
                          <option value="Uzbekistan +998">🇺🇿 UZ +998</option>
                          <option value="Kyrgyzstan +996">🇰🇬 KG +996</option>
                          <option value="United Kingdom +44">🇬🇧 UK +44</option>
                          <option value="UAE +971">🇦🇪 UAE +971</option>
                        </select>
                        <input id="cta-phone" name="phone_number" type="tel" placeholder="555 000 0000" autoComplete="tel-national" required />
                      </div>
                      <small>Country code stays fixed on the left</small>
                    </div>
                    <div className="field">
                      <label htmlFor="cta-arr">ARR · range</label>
                      <select id="cta-arr" name="arr_range" required>
                        <option>$1—5M</option>
                        <option>$5—20M</option>
                        <option>$20M+</option>
                        <option>Pre-revenue</option>
                      </select>
                      <small>Helps us assess the scale</small>
                    </div>
                    {submitError && <p className="cta-form-error">{submitError}</p>}
                    <div className="cta-modal__actions">
                      <button className="btn btn--ghost" type="button" onClick={closeModal}>Close</button>
                      <button className="btn btn--accent" type="submit" disabled={submitState === 'sending'}>
                        {submitState === 'sending' ? 'Sending...' : 'Submit request'} <span className="arrow">→</span>
                      </button>
                    </div>
                  </form>
                </>
              )}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <p className="word">Bridge<em>.</em></p>
            <p style={{marginTop:'12px', maxWidth:'320px'}}>Strategic partnership for B2B Enterprise IT expansion into Central Asia.</p>
          </div>
          <div>
            <h6>Contact</h6>
            <p><a href="tel:+77777158381">+7 777 715 83 81</a></p>
            <p><a href="mailto:info@bridge2.asia">info@bridge2.asia</a></p>
            <p><a href="https://bridge2.asia">bridge2.asia</a></p>
          </div>
          <div>
            <h6>Office</h6>
            <p>Kazakhstan, Almaty</p>
            <p>22/5 Khadzhi Mukan St.</p>
            <p>050059</p>
          </div>
          <div>
            <h6>Navigation</h6>
            <p><a href="#approach">Approach</a></p>
            <p><a href="#fee">Financial model</a></p>
            <p><a href="companies.html">Companies</a></p>
            <p><a href="#cases">Cases</a></p>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Bridge · Product · Presale · BizDev</span>
          <span>Almaty / Moscow / Tashkent</span>
        </div>
      </div>
    </footer>
  );
}

function SectionIndicator() {
  return (
    <div className="s-indicator">
      <span className="b" />
      <span className="label">00 · INTRO</span>
    </div>
  );
}

window.App = App;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// Trigger reveal scan after mount
requestAnimationFrame(() => {
  if (window.__rescanReveals) window.__rescanReveals();
  setTimeout(() => window.__rescanReveals && window.__rescanReveals(), 100);
  setTimeout(() => window.__rescanReveals && window.__rescanReveals(), 500);
});