/* Variation 3 — Enterprise
   Editorial hero with awards, tabbed phases for "How It Works",
   tighter, more formal tone */

/* Animated counter-rotating ring of dots / micro-effect */
const HeroBackdrop = () => {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const tick = () => {setT((x) => x + 1);raf = requestAnimationFrame(tick);};
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  return (
    <svg viewBox="0 0 600 600" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: .6 }}>
      <defs>
        <radialGradient id="hero-glow" cx="50%" cy="50%">
          <stop offset="0%" stopColor="#3FBFC4" stopOpacity="0.18" />
          <stop offset="60%" stopColor="#3FBFC4" stopOpacity="0" />
        </radialGradient>
      </defs>
      <circle cx="300" cy="300" r="280" fill="url(#hero-glow)" />
      {/* Concentric dotted rings, slowly rotating */}
      <g transform={`rotate(${t * 0.08} 300 300)`} stroke="#E84A4A" strokeOpacity="0.18" fill="none" strokeDasharray="1 6" strokeWidth="1.2">
        <circle cx="300" cy="300" r="260" />
      </g>
      <g transform={`rotate(${-t * 0.12} 300 300)`} stroke="#3FBFC4" strokeOpacity="0.22" fill="none" strokeDasharray="1 5" strokeWidth="1.2">
        <circle cx="300" cy="300" r="220" />
      </g>
      <g transform={`rotate(${t * 0.18} 300 300)`} stroke="#1A1A1F" strokeOpacity="0.08" fill="none" strokeDasharray="2 8" strokeWidth="1">
        <circle cx="300" cy="300" r="180" />
      </g>
    </svg>);

};

/* Floating avatars + status pill that orbit around the awards */
const HeroFloater = ({ x, y, delay, children }) =>
<div style={{
  position: 'absolute', left: `${x}%`, top: `${y}%`,
  animation: `vea-orbit 6s ease-in-out ${delay}s infinite`,
  transform: 'translate(-50%, -50%)'
}}>
    {children}
  </div>;


const HeroV3 = () => {
  const tweaks = React.useContext(window.VEAContext || React.createContext({}));
  const headline = tweaks.headline || 'Design and Unify your Operations with AI & Automation';
  const accent = tweaks.headlineAccent || 'AI & Automation';
  const subhead = tweaks.subhead || "Stop letting fragmented systems, antiquated design, and restrictive tools slow your business. As an agency focused on technology and driving business results, we recognize the tremendous ability of AI tools to build solutions for progressive business that solves the challenges facing your teams.";
  const ctaPrimary = tweaks.ctaPrimary || 'Book Your AI Discovery Call';
  const ctaSecondary = tweaks.ctaSecondary || 'Download capabilities deck';
  const showAwards = tweaks.showAwards !== false;
  const showStatStrip = tweaks.showStatStrip !== false;
  const h1Scale = tweaks.h1Scale || 1;

  // Split headline so the accent phrase renders red + underlined.
  const i = accent ? headline.indexOf(accent) : -1;
  const before = i >= 0 ? headline.slice(0, i) : headline;
  const after = i >= 0 ? headline.slice(i + accent.length) : '';

  const [mouse, setMouse] = React.useState({ x: 0, y: 0 });
  const ref = React.useRef(null);
  const onMove = (e) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    setMouse({
      x: ((e.clientX - r.left) / r.width - 0.5) * 2,
      y: ((e.clientY - r.top) / r.height - 0.5) * 2
    });
  };
  return (
    <section className="vea-hero-section" style={{ background: '#fff', borderBottom: '1px solid var(--vea-line)', overflow: 'hidden' }}>
    <div className="vea-container" style={{ padding: '72px 32px 64px' }}>
      <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
            <div style={{ width: 48, height: 2, background: 'var(--vea-red)', animation: 'vea-bar-grow 1s ease-out' }} />
            <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--vea-red)' }}></span>
          </div>
          <h1 className="vea-h1 vea-h1-anim" style={{ fontSize: `clamp(${32 * h1Scale}px, ${4.2 * h1Scale}vw, ${50 * h1Scale}px)` }}>
            {i >= 0 ?
              <React.Fragment>
                {before}
                <span className="headline-border" style={{ display: 'inline-block', color: 'var(--vea-red)', position: 'relative' }}>
                  {accent}
                </span>
                {after}
              </React.Fragment> :
              headline}
          </h1>
          <p className="vea-body vea-fade-up" style={{ maxWidth: 600, marginTop: 30, fontSize: 17, color: 'var(--vea-ink)', animationDelay: '0.4s' }}>
            {subhead}
          </p>
          <div className="vea-fade-up" style={{ display: 'flex', gap: 14, alignItems: 'center', marginTop: 32, flexWrap: 'wrap', animationDelay: '0.6s' }}>
            <a href="#get-started" className="vea-btn vea-btn-teal vea-btn-shine">{ctaPrimary}</a>
            {/*<a href="#" className="vea-btn" style={{ background: 'transparent', color: 'var(--vea-ink)', border: '1.5px solid var(--vea-ink)', padding: '14px 26px' }}>{ctaSecondary}</a>*/}
          </div>
        </div>
        {/* Awards display - smaller, with stat strip below */}
        <div className="hero-awards-wrap" ref={ref} onMouseMove={onMove} onMouseLeave={() => setMouse({ x: 0, y: 0 })}
          style={{ position: 'relative', minHeight: 360, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18 }}>
          <HeroBackdrop />
          {showAwards && <React.Fragment>

          {/* 3× callout pill */}
          <div className="hero-callout" style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 10, padding: '8px 16px', borderRadius: 999, background: '#fff', border: '1px solid var(--vea-line)', boxShadow: '0 6px 18px rgba(20,20,30,0.06)', whiteSpace: 'nowrap', animation: 'vea-fade-up 0.8s ease-out 1.2s backwards' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--vea-teal)', boxShadow: '0 0 0 4px rgba(63,191,196,0.2)' }} />
            <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--vea-ink)' }}>3× ColoradoBiz Best of Colorado · Digital Agency</span>
          </div>
          </React.Fragment>}
          {showStatStrip &&
            <div className="hero-stats" style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, width: '100%', maxWidth: 520, marginTop: 8, border: '1px solid var(--vea-line)', borderRadius: 14, background: '#fff', boxShadow: '0 4px 12px rgba(20,20,30,0.04)', animation: 'vea-fade-up 0.9s ease-out 1.35s backwards' }}>
            {[
              { v: '147+', l: 'Operators' },
              { v: '4×', l: 'ROI' },
              { v: '10wk', l: 'To MVP' },
              { v: 'SOC 2', l: 'Aligned' }].
              map((s, i) =>
              <div key={s.l} style={{ borderLeft: i ? '1px solid var(--vea-line)' : 'none', padding: '14px 12px', textAlign: 'center' }}>
                <div style={{ fontWeight: 800, fontSize: 22, letterSpacing: '-0.01em', color: 'var(--vea-ink)', lineHeight: 1 }}>{s.v}</div>
                <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--vea-ink-soft)', marginTop: 6 }}>{s.l}</div>
              </div>
              )}
          </div>
            }

            <div style={{
                position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0,
                transform: `translate3d(${mouse.x * -6}px, ${mouse.y * -6}px, 0)`, transition: 'transform .25s ease-out'
              }}>
            {[2024, 2023, 2022].map((y, i) =>
                <div key={y} className="vea-award-tile" style={{
                  animation: `vea-award-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) ${0.15 + i * 0.12}s backwards, vea-award-bob 5s ease-in-out ${i * 0.4}s infinite`,
                  animationPlayState: 'running, var(--vea-ambient-play, running)',
                  transform: i === 1 ? 'scale(1.08)' : 'scale(1)',
                  marginLeft: i === 0 ? 0 : -22,
                  zIndex: i === 1 ? 3 : i === 0 ? 2 : 1,
                  filter: i === 1 ? 'drop-shadow(0 14px 24px rgba(31,42,61,0.22))' : 'drop-shadow(0 10px 18px rgba(31,42,61,0.14))',
                  cursor: 'pointer',
                  transition: 'transform .25s ease'
                }}
                onMouseEnter={(e) => {e.currentTarget.style.transform = `${i === 1 ? 'scale(1.16)' : 'scale(1.1)'} translateY(-6px)`;e.currentTarget.style.zIndex = 5;}}
                onMouseLeave={(e) => {e.currentTarget.style.transform = i === 1 ? 'scale(1.08)' : 'scale(1)';e.currentTarget.style.zIndex = i === 1 ? 3 : i === 0 ? 2 : 1;}}>
                  
                <ColoradoBizAward year={y} size={i === 1 ? 132 : 112} />
              </div>
                )}
          </div>
        </div>
      </div>
    </div>
  </section>);

};

const BottleneckV3 = () =>
<section className="vea-section-sm" style={{ background: 'var(--vea-bg-2)', borderTop: '1px solid var(--vea-line)' }}>
    <div className="vea-container">
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 32 }}>
        <div style={{ maxWidth: 560 }}>
          <div className="vea-eyebrow">The challenge</div>
          <h2 className="vea-h2 vea-reveal" style={{ marginTop: 10, fontSize: 'clamp(26px, 2.6vw, 36px)' }}>Most companies are slowed by tech debt and restrictions, not by their desire.

        </h2>
        </div>
        <div className="vea-body-sm vea-reveal" style={{ maxWidth: 380, color: 'var(--vea-ink-soft)' }}>
          Three symptoms show up before the spreadsheets break. If any feel familiar, an audit pays for itself.
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 1, background: 'var(--vea-line)', border: '1px solid var(--vea-line)', borderRadius: 14, overflow: 'hidden' }}>
        {[
      { n: '01', t: 'Ops scales with revenue', b: 'Headcount in finance, ops, and analytics grows in lockstep with the business because workflows are people-shaped, not system-shaped.' },
      { n: '02', t: 'Knowledge lives in spreadsheets', b: 'A single departure can compromise reporting accuracy for weeks. Audit trails are inconsistent and security posture is uneven.' },
      { n: '03', t: 'Decisions arrive weeks late', b: 'By the time month-end reporting reaches leadership, the underlying conditions have already shifted. The data is correct, and irrelevant.' }].
      map((it) =>
      <div key={it.n} className="vea-reveal vea-card-hover" style={{ background: '#fff', padding: '28px 26px', display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
              <div style={{ fontWeight: 800, fontSize: 28, color: 'var(--vea-red)', letterSpacing: '-0.02em', lineHeight: 1 }}>{it.n}</div>
              <div style={{ flex: 1, height: 1, background: 'var(--vea-line)' }} />
            </div>
            <h3 style={{ fontWeight: 800, fontSize: 18, margin: 0, color: 'var(--vea-ink)', lineHeight: 1.3 }}>{it.t}</h3>
            <p className="vea-body-sm" style={{ margin: 0 }}>{it.b}</p>
          </div>
      )}
      </div>
    </div>
  </section>;


/* Tabbed how-it-works */
const HowItWorksV3 = () => {
  const phases = [
  {
    n: 'Phase 01', title: 'Discovery', dur: 'Weeks 1–2',
    lede: 'A structured engagement to surface and quantify the highest-leverage automation opportunities.',
    body: 'We work with your team - top to bottom - to understand actual workflow patterns without disrupting throughput. We then present solutions for your challenges, and outputs are reviewed via leadership working sessions to assess organizational benefit and change - all before scope is locked.',
    deliverables: ['Workflow audit & highlighted solutions', 'ROI-ranked automation roadmap', 'Reference architecture & integration map', 'Recommended phasing plan'],
    kpi: [{ v: '48h', l: 'Time to first findings' }, { v: '12+', l: 'Workflows mapped' }]
  },
  {
    n: 'Phase 02', title: 'Architecture', dur: 'Week 2–3',
    lede: 'Solution design, data model, and security posture are documented and signed off before build begins.',
    body: 'A dedicated solution architect drafts the data flow, system boundaries, identity model, and the first wave of agentic workflows. Outputs go through your security review on our side; nothing builds until you approve.',
    deliverables: ['Solution design document', 'Data flow & security review', 'API integration contracts', 'Acceptance criteria per workflow'],
    kpi: [{ v: '1', l: 'Architecture review' }, { v: '0', l: 'Surprises in build' }]
  },
  {
    n: 'Phase 03', title: 'Build', dur: 'Weeks 3–9',
    lede: 'A dedicated 1–3 engineer pod ships against acceptance criteria with weekly leadership demos.',
    body: 'Production-grade integrations against your live software APIs. Test coverage, observability, and access control are part of the delivery, not an afterthought. Your engineering team has live build-channel access from day one.',
    deliverables: ['Production MVP in your cloud', 'Integration & regression test suite', 'Runbooks and admin training', 'Source code delivered to your repos'],
    kpi: [{ v: 'Weekly', l: 'Demo cadence' }, { v: '100%', l: 'IP transfer' }]
  },
  {
    n: 'Phase 04', title: 'Launch &amp; Operate', dur: 'Week 10+',
    lede: 'We launch the MVP and remain as your ongoing technical partner—observing, iterating, and securing.',
    body: '24/7 monitoring, weekly iteration tickets, and quarterly business reviews. The system continues to adapt as your priorities shift; the engagement is sized to your operating rhythm, not a fixed retainer.',
    deliverables: ['SLA-backed monitoring', 'Weekly iteration tickets', 'Quarterly business review', 'Annual security audit'],
    kpi: [{ v: '24/7', l: 'Coverage' }, { v: '< 4h', l: 'P1 response' }]
  }];

  const [active, setActive] = React.useState(0);
  const a = phases[active];
  return (
    <section className="vea-section" style={{ background: '#fff' }}>
      <div className="vea-container">
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 48px' }}>
          <div className="vea-eyebrow">Engagement model</div>
          <h2 className="vea-h2 vea-reveal" style={{ marginTop: 14 }}>An established four-phase path
from audit to solution</h2>
        </div>
        <div className="engagement-tabs" style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 48, alignItems: 'flex-start' }}>
          {/* Tabs */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, position: 'sticky', top: 24 }}>
            {phases.map((p, i) => {const isActive = i === active;
              return (
                <button key={i} onClick={() => setActive(i)} style={{
                  textAlign: 'left', padding: '18px 22px', borderRadius: 14,
                  border: isActive ? '1px solid var(--vea-red)' : '1px solid var(--vea-line)',
                  background: isActive ? 'rgba(232,74,74,0.04)' : '#fff',
                  cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 16,
                  transition: 'all .15s'
                }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: '50%',
                    background: isActive ? 'var(--vea-red)' : 'var(--vea-bg-2)',
                    color: isActive ? '#fff' : 'var(--vea-ink-soft)',
                    display: 'grid', placeItems: 'center',
                    fontWeight: 800, fontSize: 14
                  }}>0{i + 1}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 800, fontSize: 15, color: isActive ? 'var(--vea-red)' : 'var(--vea-ink)' }} dangerouslySetInnerHTML={{ __html: p.title }} />
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--vea-ink-soft)', marginTop: 2 }}>{p.dur}</div>
                  </div>
                  {isActive && <span style={{ color: 'var(--vea-red)', fontWeight: 800 }}>→</span>}
                </button>);

            })}
          </div>
          {/* Detail */}
          <div className="eng-tab-detail" style={{
            background: 'var(--vea-bg-2)', borderRadius: 'var(--vea-radius-card)',
            padding: '40px 44px', border: '1px solid var(--vea-line)'
          }} key={active}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
              <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--vea-red)' }}>{a.n}</span>
              <span style={{ width: 28, height: 1, background: 'var(--vea-line)' }} />
              <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--vea-ink-soft)' }}>{a.dur}</span>
            </div>
            <h3 style={{ fontWeight: 800, fontSize: 32, letterSpacing: '-0.01em', margin: 0, color: 'var(--vea-ink)' }} dangerouslySetInnerHTML={{ __html: a.title }} />
            <p style={{ fontWeight: 600, fontSize: 19, lineHeight: 1.5, color: 'var(--vea-ink)', marginTop: 16 }}>{a.lede}</p>
            <p className="vea-body" style={{ marginTop: 14 }}>{a.body}</p>
            <div className="eng-tab-cols" style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32 }}>
              <div>
                <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--vea-ink-soft)', marginBottom: 14 }}>Deliverables</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {a.deliverables.map((d) =>
                  <li key={d} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 15, fontWeight: 600 }}>
                      <span style={{ width: 18, height: 18, borderRadius: '50%', background: 'rgba(63,191,196,0.18)', color: 'var(--vea-teal-dark)', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 800, flex: '0 0 18px', marginTop: 2 }}>✓</span>
                      {d}
                    </li>
                  )}
                </ul>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--vea-ink-soft)' }}>Phase metrics</div>
                {a.kpi.map((k) =>
                <div key={k.l} style={{ background: '#fff', padding: '14px 16px', borderRadius: 10, border: '1px solid var(--vea-line)' }}>
                    <div style={{ fontWeight: 800, fontSize: 24, color: 'var(--vea-ink)' }}>{k.v}</div>
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--vea-ink-soft)' }}>{k.l}</div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Before vs With VEA — sub-band inside engagement model */}
        <div style={{ marginTop: 64, paddingTop: 48, borderTop: '1px solid var(--vea-line)' }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 24 }}>
            <div>
              <div className="vea-eyebrow">Before vs. With VEA</div>
              <h3 className="vea-h2 vea-reveal" style={{ marginTop: 10, fontSize: 'clamp(24px, 2.4vw, 32px)' }}>The shift you can measure in within weeks</h3>
            </div>
          </div>
          <BeforeAfterTable />
        </div>
      </div>
    </section>);

};

/* Compact comparison rows used inside HowItWorksV3 */
const BeforeAfterTable = () => {
  const rows = [
  { topic: 'Reporting cadence', before: 'Manually compiled, often 2–3 weeks stale', after: 'Real-time dashboards, executive summary auto-generated daily' },
  { topic: 'Data entry', before: 'Experienced staff wasting hours re-working data between systems', after: 'Agentic workflows sync sources every 5 minutes, zero re-keying' },
  { topic: 'Lead routing', before: 'Dependent upon static round robins, assignors, and potentially spreadsheets', after: 'AI-scored, routed in <60 seconds with full context attached' },
  { topic: 'Forecasting', before: 'Gut-feel + last quarter\u2019s spreadsheet, based on data from past years - not your current market', after: 'Predictive model trained on your data, based on the current market, refreshed weekly' },
  { topic: 'New hire ramp', before: '4–6 weeks to learn your system and spreadsheet maze', after: 'New hires productive day one—the system is the source of truth' },
  { topic: 'Data security', before: 'Files emailed, shared drives, unknown sprawl', after: 'Role-based access, audit logs, private deployments' }];

  return (
    <div className="vea-table-cols" style={{
      background: '#fff', borderRadius: 'var(--vea-radius-card)',
      border: '1px solid var(--vea-line)', overflow: 'hidden'
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.4fr 1.4fr', background: 'var(--vea-charcoal)', color: '#fff', fontWeight: 800, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
        <div style={{ padding: '14px 20px' }}>Operational area</div>
        <div style={{ padding: '14px 20px', borderLeft: '1px solid rgba(255,255,255,0.08)' }}>Before VEA</div>
        <div style={{ padding: '14px 20px', borderLeft: '1px solid rgba(255,255,255,0.08)', color: 'var(--vea-teal)' }}>With VEA</div>
      </div>
      {rows.map((r, i) =>
      <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.4fr 1.4fr', borderTop: i === 0 ? 'none' : '1px solid var(--vea-line)' }}>
          <div style={{ padding: '14px 20px', fontWeight: 800, color: 'var(--vea-ink)', fontSize: 14 }}>{r.topic}</div>
          <div style={{ padding: '14px 20px', color: '#7a7a82', borderLeft: '1px solid var(--vea-line)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <span className="table-check" aria-hidden style={{ flex: '0 0 16px', width: 16, height: 16, borderRadius: '50%', background: '#F3D6D6', color: '#C73838', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 800, marginTop: 2 }}>×</span>
            <span style={{ fontSize: 14, lineHeight: 1.45 }}>{r.before}</span>
          </div>
          <div style={{ padding: '14px 20px', color: 'var(--vea-ink)', borderLeft: '1px solid var(--vea-line)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <span className="table-check" aria-hidden style={{ flex: '0 0 16px', width: 16, height: 16, borderRadius: '50%', background: 'rgba(63,191,196,0.18)', color: 'var(--vea-teal-dark)', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 800, marginTop: 2 }}>✓</span>
            <span style={{ fontSize: 14, lineHeight: 1.45 }}>{r.after}</span>
          </div>
        </div>
      )}
    </div>);

};

const VariationThree = () => {
  useReveal();
  return (
    <div data-screen-label="Variation 3: Enterprise">
      <VeaNav />
      <HeroV3 />
      <TrustedBar />
      <BottleneckV3 />
      <ServicesGrid />
      <HowItWorksV3 />
      <Testimonials />
      <CaseStudies />
      <IntegrationsGrid />
      <FAQ />
      <FinalCTA />
      <Footer />
    </div>);

};

window.VariationThree = VariationThree;