/* 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)' }}>Most companies dream of modern design that clearly demonstrates their brand.

        </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: 'Strategic Design for Impactful Results', b: 'Every website we create is a fusion of creativity and strategy, designed to attract, engage, and convert.' },
      { n: '02', t: 'End-to-End Digital Expertise', b: 'From conception to launch, we manage every aspect of your digital presence, ensuring it aligns with your business goals.' },
      { n: '03', t: 'Long-Term Growth Focus', b: 'Our designs aren’t just visually appealing; they’re built for performance, ensuring your business scales effectively.' }].
      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 kickoff phase to align on goals, surface requirements, and set the project up for confident execution.',
    body: 'We work with your stakeholders from leadership to end users to understand your brand, business objectives, and technical environment before a single wireframe or line of code is written. Findings are validated in working sessions with your team to confirm direction and lock scope with full confidence.',
    deliverables: ['Stakeholder interviews & goals alignment', 'Sitemap, user flows & content requirement', 'Technical requirements & platform selection', 'Phased project roadmap & timeline'],
    kpi: [{ v: '1 week', l: 'Time to initial findings' }, { v: '5+', l: 'Stakeholder touchpoints' }]
  },
  {
    n: 'Phase 02', title: 'Design & Architecture', dur: 'Week 2–3',
    lede: 'Visual direction, page structure, and technical approach are defined and approved before build begins.',
    body: 'A dedicated designer and developer collaborate to produce your initial design concepts, page-level wireframes, and confirmed tech stack. Everything goes through a structured review with your team so direction is locked with confidence before a single line of code is written.',
    deliverables: ['Moodboard & visual direction concepts', 'Wireframes & page-level layouts', 'Design system foundations (type, color, components)', 'Confirmed tech stack & build approach'],
    kpi: [{ v: '2+', l: 'Design review & approval sessions' }, { v: '0', l: 'Surprises in build' }]
  },
  {
    n: 'Phase 03', title: 'Build', dur: 'Weeks 3–5',
    lede: ' A focused development sprint that ships a production-ready website against approved designs and requirements.',
    body: ' Clean, standards-compliant code built on your confirmed tech stack. Performance, accessibility, and mobile responsiveness are part of the build from the start. You have visibility into progress throughout the sprint with regular check-ins and a staging environment available from day one.',
    deliverables: ['Fully developed site on staging environment', 'CMS configured & content populated', 'Cross-browser & mobile QA pass', 'Source code & asset delivery'],
    kpi: [{ v: 'Weekly', l: 'Progress check-ins & staging updates' }, { v: '100%', l: 'Code & asset ownership transferred to you' }]
  },
  {
    n: 'Phase 04', title: 'Launch & Ongoing Support', dur: 'Week 6+',
    lede: 'We launch your site and stay on as your technical partner for updates, performance, and continued growth.',
    body: 'Post-launch monitoring, a structured maintenance plan, and a team that knows your site inside and out. As your business evolves, your website keeps up. The engagement is scoped to what you actually need, whether that\'s light monthly maintenance or an active growth retainer.',
    deliverables: ['Managed launch & DNS cutover', 'Post-launch QA & bug resolution', 'Monthly maintenance & content updates', 'Performance reviews & growth recommendations'],
    kpi: [{ v: '24/7', l: 'Uptime monitoring' }, { v: 'Fast', l: 'Turnaround on priority fixes' }]
  }];

  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 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;