/* 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 || 'Website Services';
  const accent = tweaks.headlineAccent || 'AI & Automation';
  const subhead = tweaks.subhead || "Your website isn’t just a digital business card—it’s the core of your brand and marketing. We design and develop websites and apps with deliberate strategy behind it: structured lead funnels, strong SEO structure, and seamless mobile performance. And once it’s live, we have the hosting chops to ensure it runs fast and stays secure.";
  const ctaPrimary = tweaks.ctaPrimary || 'BOOK A STRATEGY SESSION';
  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)' }}>Building a results oriented advertising program requires an array of skills and team members. 

        </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: 'Research and Analysis', b: 'Before launching any campaigns, we get to know your past campaigns and competitors so we can benchmark our goals and get results immediately instead of wasting your budget while learning along the way.' },
      { n: '02', t: ' Quality Ad Creative', b: 'We run exceptional campaigns, but the reason they perform so well is due to our top-notch creative team. We design and write new ads monthly across many different industries and know which will perform best.' },
      { n: '03', t: 'Reporting', b: 'We believe in ultra-transparent reporting and provide a monthly report across all of our services. We highlight what’s going well, but won’t hide what isn’t. We will always have a forward looking game plan to ensure we continue to improve ROI.' }].
      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: 'Visualize', dur: 'Weeks 1–2',
    lede: 'A structured onboarding phase to define your goals, audience, and the channel strategy built to reach them.',
    body: 'We dig into your business objectives, target audience, competitive landscape, and historical performance data before recommending a single channel or setting a single budget. Findings are reviewed with your team in a working session and strategy is locked before any campaigns go live.',
    deliverables: ['Audience research & competitive analysis', 'Channel mix recommendation & budget allocation', 'Campaign goals, KPIs & success benchmarks', '90-day advertising roadmap'],
    kpi: [{ v: 'Week 2-3', l: 'Strategy presentation delivered' }, { v: '100%', l: 'Alignment before launch' }]
  },
  {
    n: 'Phase 02', title: 'Execute', dur: 'Week 2–3',
    lede: 'Campaigns, tracking, and creative are built to spec and validated before a single dollar is spent.',
    body: 'We configure your ad accounts, install and verify tracking, develop creative assets, and structure campaigns against the approved strategy. Everything goes through an internal QA pass and a client review before launch so the foundation is clean from day one.',
    deliverables: ['Ad account setup & campaign structure', 'Pixel, tag & conversion tracking verification', 'Initial ad creative & copy', 'Pre-launch QA & client approval'],
    kpi: [{ v: 'Launch', l: 'Review & sign-off session' }, { v: '0', l: 'Tracking gaps at launch' }]
  },
  {
    n: 'Phase 03', title: 'Achieve', dur: 'Weeks 3–8',
    lede: ' Active campaign management focused on driving down cost-per-lead and improving return on ad spend.',
    body: 'Campaigns are live and our team is optimizing daily. Bids, audiences, creative, and placements are tested and refined continuously based on performance data. You receive regular reporting that connects ad activity directly to the leads and revenue it is driving.',
    deliverables: ['Ongoing bid management & audience optimization', 'Creative testing & iteration', 'Weekly performance reporting', 'Monthly strategy review & recommendations'],
    kpi: [{ v: 'Weekly', l: 'Performance reporting cadence' }, { v: 'Continuous', l: 'Testing & optimization cycle' }]
  },
  {
    n: 'Phase 04', title: 'Scale', dur: 'Month 3+',
    lede: 'What\'s working gets scaled. Budgets, channels, and creative expand in line with your growth goals.',
    body: 'With a proven foundation in place, we identify the highest-leverage opportunities to increase spend, expand into new channels, and build on audience segments that are converting. The engagement grows alongside your results and adapts as your business priorities shift.',
    deliverables: ['Channel expansion recommendations', 'Budget scaling & reallocation strategy', 'Quarterly business & performance reviews', 'Ongoing creative refresh & testing'],
    kpi: [{ v: 'Quarterly', l: 'Growth strategy reviews' }, { v: 'Full', l: 'Visibility into spend, performance & attribution' }]
  }];

  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 methodology from strategy session to advertising launch</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;