/* Shared landing page sections used by all 3 variations */

const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll('.vea-reveal');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add('in');});
    }, { threshold: 0.12 });
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);
};

/* Animated count-up */
const useCountUp = (target, duration = 1600, trigger = true) => {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!trigger) return;
    let raf, start;
    const step = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / duration);
      setVal(Math.floor(target * (1 - Math.pow(1 - p, 3))));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target, trigger, duration]);
  return val;
};

/* Stat that counts up when section enters viewport */
const StatCounter = ({ value, suffix = '', prefix = '', label, sublabel }) => {
  const [trig, setTrig] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const obs = new IntersectionObserver((e) => {if (e[0].isIntersecting) setTrig(true);}, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  const n = useCountUp(value, 1800, trig);
  return (
    <div ref={ref} style={{ textAlign: 'left' }}>
      <div style={{ fontFamily: 'Mulish', fontWeight: 800, fontSize: 'clamp(40px, 4.6vw, 64px)', letterSpacing: '-0.02em', lineHeight: 1, color: 'inherit' }}>
        {prefix}{n.toLocaleString()}{suffix}
      </div>
      <div style={{ marginTop: 10, fontWeight: 700, fontSize: 14, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--vea-red)' }}>
        {label}
      </div>
      {sublabel && <div className="vea-body-sm" style={{ marginTop: 6, color: 'rgba(255,255,255,0.65)' }}>{sublabel}</div>}
    </div>);

};

/* Top nav matching mockup */
const VeaNav = ({ active = 'AI Solutions' }) => {
  const links = ['Digital Services', 'AI Solutions', 'Testimonials', 'Company'];
  return; /*(
    <header style={{ background: '#fff', borderBottom: '1px solid var(--vea-line)' }}>
      <div className="vea-container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 88 }}>
        <VeaWordmark />
        <nav style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
          {links.map((l) =>
          <a key={l} href="#" style={{
            color: active === l ? 'var(--vea-red)' : 'var(--vea-ink)',
            fontWeight: 700, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase',
            textDecoration: 'none',
            borderBottom: active === l ? '2px solid var(--vea-red)' : '2px solid transparent',
            paddingBottom: 4, transition: 'color .15s'
          }}>{l}</a>
          )}
          <button className="vea-btn vea-btn-teal" style={{ padding: '12px 26px' }}>Contact</button>
        </nav>
      </div>
    </header>);*/

};

/* Trusted-by logo bar */
const TrustedBar = ({ dark = false }) => {
  const logos = [
  { name: 'Northwind Construction', style: 'serif' },
  { name: 'Ridgeline HVAC', style: 'sans' },
  { name: 'OAKMONT MEDICAL', style: 'caps' },
  { name: 'Pinecrest Group', style: 'serif' },
  { name: 'Vector & Co.', style: 'sans' }];

  return (
    <div className="trusted-wrap" style={{ ...{ padding: '40px 0', background: dark ? 'transparent' : '#fff', borderTop: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--vea-line)', borderBottom: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--vea-line)' }, color: "rgb(255, 255, 255)", background: "rgb(63, 63, 63)" }}>
      <div className="vea-container">
        <div className="trusted-grid" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24 }}>
          <div style={{ ...{ fontWeight: 800, fontSize: 18, letterSpacing: '0.18em', textTransform: 'uppercase', color: dark ? 'rgba(255,255,255,0.5)' : 'var(--vea-ink-soft)' }, color: "rgb(255, 255, 255)" }}>
            Trusted By
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'clamp(20px, 3vw, 44px)', flexWrap: 'wrap', flex: 1, justifyContent: 'flex-end' }}>
            {logos.map((l) =>
            <div key={l.name} style={{ ...{
                fontWeight: l.style === 'caps' ? 800 : 700,
                fontSize: 15,
                letterSpacing: l.style === 'caps' ? '0.16em' : '0',
                textTransform: l.style === 'caps' ? 'uppercase' : 'none',
                fontStyle: l.style === 'serif' ? 'italic' : 'normal',
                color: dark ? 'rgba(255,255,255,0.55)' : '#777',
                opacity: .85
              }, color: "rgb(255, 255, 255)" }}>{l.name}</div>
            )}
          </div>
        </div>
      </div>
    </div>);

};

/* Services grid card */
const ServiceCard = ({ Icon, title, body, dark = true }) =>
<div className="vea-card-hover" style={{
  background: dark ? 'var(--vea-charcoal)' : '#fff',
  color: dark ? '#fff' : 'var(--vea-ink)',
  padding: '36px 28px 32px',
  borderRadius: 'var(--vea-radius-card)',
  border: dark ? '1px solid rgba(255,255,255,0.06)' : '1px solid var(--vea-line)',
  textAlign: 'center',
  minHeight: 280,
  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18
}}>
    <Icon />
    <div style={{ width: 32, height: 1, background: 'rgba(255,255,255,0.18)' }} />
    <h3 className="vea-h3" style={{ color: '#fff', fontSize: 18 }}>{title}</h3>
    <p className="vea-body-sm" style={{ color: 'rgba(255,255,255,0.72)', textAlign: 'center', margin: 0 }}>{body}</p>
  </div>;


const ServicesGrid = () => {
  const items = [
  { Icon: SvcIconBrain, title: 'Paid Search That Converts', tag: (<>Search (PPC)<br/>Advertising</>), lede: 'A search advertising strategy built around your cost-per-lead and revenue goals.',
    detail: 'We build and manage Google and Microsoft Ads campaigns engineered for performance. From keyword strategy and ad copy to bid management and landing page alignment, every element is optimized around leads and return on ad spend.',
    bullets: ['Campaign build & keyword strategy', 'Ongoing bid management & optimization', 'ROI and lead gen performance reporting'],
    outcome: 'ROI-focused · Lead gen driven' },
  { Icon: SvcIconDashboard, title: 'Meta & LinkedIn Advertising', tag: (<>Social<br/>Advertising</>), lede: 'Paid social campaigns built to reach the right audience and drive real action.',
    detail: 'We develop and manage advertising across Meta and LinkedIn with targeting strategies built around your ideal customer. From creative and copy to audience segmentation and retargeting, campaigns are structured to generate demand and convert attention into leads.',
    bullets: ['Audience research & targeting strategy', 'Ad creative, copy & A/B testing', 'Retargeting & funnel-stage campaigns'],
    outcome: 'Precise targeting · Audience-first' },
  { Icon: SvcIconNetwork, title: 'Programmatic Display Advertising', tag: (<>Programmatic<br/>Advertising</>), lede: 'Automated media buying that puts your brand in front of high-intent audiences at scale.',
    detail: 'We manage programmatic campaigns across premium display inventory, using data-driven targeting to reach your audience efficiently and at volume. Continuous optimization keeps your cost-per-impression competitive and your budget working harder across every placement.',
    bullets: ['Audience targeting & contextual placement', 'Cross-network inventory & bid management', 'Performance reporting & spend optimization'],
    outcome: 'Scaled reach · Precision targeting' },
  { Icon: SvcIconLaptop, title: 'Video, CTV & Out-of-Home Advertising', tag: (<>Video<br/>Advertising</>), lede: 'Brand-building video campaigns delivered across streaming, digital, and out-of-home channels.',
    detail: 'We plan and execute video advertising strategies across CTV, pre-roll, YouTube, and digital out-of-home placements. Whether building awareness or driving action, campaigns are structured to reach your audience wherever they are watching and move them through the funnel.',
    bullets: ['CTV, OOH & pre-roll campaign management', 'Channel selection & media planning', 'View-through & cross-channel attribution'],
    outcome: 'Full-funnel reach · Screen agnostic' },
  { Icon: SvcIconDoc, title: 'Ad Creative & Landing Page Production', tag: (<>Creative<br/>Production</>), lede: 'Creative assets designed to stop the scroll and convert the click.',
    detail: 'We produce the ads, videos, and landing pages your campaigns need to perform. Every asset is built to align with your brand, speak to your audience, and drive a specific action. Creative is tested, refined, and optimized as campaign data comes in.',
    bullets: ['Static, animated & video ad creative', 'Campaign landing page design & build', 'Creative testing & performance iteration'],
    outcome: 'On-brand · Built to perform' },
  { Icon: SvcIconGear, title: 'Ad Tracking & Performance Analytics', tag: (<>Analytics and<br/>Tracking</>), lede: 'The measurement foundation your advertising investment depends on.',
    detail: ' We configure the tracking, tagging, and reporting infrastructure that gives you a clear picture of what your campaigns are actually driving. From pixel setup and UTM structure to custom dashboards and attribution modeling, you always know where your budget is working.',
    bullets: ['Pixel, tag & conversion tracking setup', 'UTM structure & attribution modeling', 'Custom dashboards & campaign reporting'],
    outcome: 'Full visibility · Attribution clarity' }];


  return (
    <section className="vea-section-sm" style={{ background: 'var(--vea-charcoal)', color: '#fff' }}>
      <div className="vea-container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 32 }}>
          <div>
            <div className="vea-eyebrow" style={{ color: 'var(--vea-teal)' }}>Capabilities</div>
            <h2 className="vea-h2 vea-reveal" style={{ marginTop: 10, fontSize: 'clamp(26px, 2.6vw, 36px)', color: '#fff' }}>
               Digital Advertising Services
            </h2>
          </div>
          {/*<div className="vea-body-sm vea-reveal" style={{ maxWidth: 340, color: 'rgba(255,255,255,0.6)' }}>Design & Development, Hosting & Maintenance, Analytics & Tracking 

          </div>*/}
        </div>
        <div className="service-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))',
          gap: 20
        }}>
          {items.map((it, i) => {
            const Icon = it.Icon;
            return (
              <article key={i} className="vea-reveal vea-card-hover" style={{
                background: 'rgba(15,17,22,0.95)',
                border: '1px solid rgba(255,255,255,0.10)',
                borderRadius: 14,
                padding: '26px 26px 24px',
                display: 'flex', flexDirection: 'column', gap: 16,
                transitionDelay: `${i * 40}ms`
              }}>
                {/* Header row: icon + tag */}
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14 }}>
                  <div style={{
                    width: 52, height: 52, borderRadius: 12,
                    background: 'rgba(63,191,196,0.10)',
                    border: '1px solid rgba(63,191,196,0.25)',
                    display: 'grid', placeItems: 'center'
                  }}>
                    <div style={{ transform: 'scale(0.95)' }}><Icon /></div>
                  </div>
                  <div className="service-top" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ fontSize: 16, fontWeight: 800, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--vea-teal)' }}>{it.tag}</span>
                    <span style={{ width: 14, height: 1, background: 'rgba(255,255,255,0.18)' }} />
                    <span style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.5)', lineHeight: '1' }}>{it.outcome}</span>
                  </div>
                </div>
                {/* Title + lede */}
                <div>
                  <h3 style={{ fontWeight: 800, fontSize: 20, margin: 0, color: '#fff', lineHeight: 1.25 }}>{it.title}</h3>
                  <p style={{ fontSize: 14, lineHeight: 1.5, margin: '8px 0 0', color: 'rgba(255,255,255,0.78)' }}>{it.lede}</p>
                </div>
                {/* Detail paragraph */}
                <p style={{ fontSize: 13.5, lineHeight: 1.55, margin: 0, color: 'rgba(255,255,255,0.62)' }}>{it.detail}</p>
                {/* Divider */}
                <div style={{ height: 1, background: 'rgba(255,255,255,0.08)' }} />
                {/* Bullets */}
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {it.bullets.map((b, j) =>
                  <li key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13, color: 'rgba(255,255,255,0.78)' }}>
                      <span className="service-check" aria-hidden style={{
                      flex: '0 0 14px', width: 14, height: 14, borderRadius: '50%',
                      background: 'rgba(63,191,196,0.18)', color: 'var(--vea-teal)',
                      display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 800, marginTop: 2
                    }}>✓</span>
                      <span>{b}</span>
                    </li>
                  )}
                </ul>
              </article>);

          })}
        </div>
        <div className="services-grid-cta"><a href="#get-started" className="vea-btn vea-btn-teal vea-btn-shine">Book Your Discovery Call</a></div>
      </div>
    </section>);

};

/* Stats band - dark */
const StatsBand = () =>
<section className="statsband" style={{ background: 'var(--vea-charcoal)', color: '#fff', padding: '72px 0', position: 'relative', overflow: 'hidden' }}>
    <div className="vea-container">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 40 }}>
        <StatCounter value={147} suffix="+" label="Operators served" sublabel="Across construction, HVAC, agencies, and clinics" />
        <StatCounter value={84000} suffix="" label="Manual hours saved" sublabel="Aggregated across our active client base, last 12 months" />
        <StatCounter value={4} suffix="x" label="Average ROI" sublabel="Within the first year of deployment" />
        <StatCounter value={11} suffix=" wks" label="Avg. time to launch" sublabel="From discovery sprint to production MVP" />
      </div>
    </div>
  </section>;


/* Combined: Unfair Advantage + Connects to your stack — one dark section */
const IntegrationsGrid = () => {
  // Each tool has a simple-icons slug + brand hex (no '#'). Renders the official mark.
  const tools = [
  { name: 'WordPress', slug: 'wordpress', color: '21759B' },
  { name: 'Amazon Cloudfront', local: 'assets/amazon-cloudfront.svg' },
  { name: 'Drupal', slug: 'drupal', color: '0678BE' },
  { name: 'Joomla', slug: 'joomla', color: '5091CD' },
  { name: 'Magento', local: 'assets/magento.svg', color: 'F0501E' }];

  const advantages = [
  { Icon: UAIconCode, title: 'A strategy built before a dollar is spent', body: 'Every engagement starts with audience research, competitive analysis, and a channel plan your team reviews and approves before campaigns go live.' },
  { Icon: UAIconStopwatch, title: 'Creative that\'s built to perform, not just look good', body: 'Our in-house creative team produces ad assets designed around your brand and tested against real performance data to improve over time.' },
  { Icon: UAIconHex, title: 'Reporting that connects spend to results', body: "Clear, consistent reporting that ties your advertising activity to leads, revenue, and ROI so you always know what your budget is doing." }];

  return (
    <section className="vea-stars vea-section-sm" style={{ color: '#fff' }}>
      <div className="vea-container" style={{ position: 'relative', zIndex: 1 }}>
        {/* Header */}
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 36px' }}>
          <div className="vea-eyebrow" style={{ color: 'var(--vea-teal)' }}>WHY VEA FOR DIGITAL ADVERTISING</div>
          <h2 className="vea-h2 vea-reveal" style={{ marginTop: 14, color: '#fff', fontSize: "30px" }}>A decade plus of advertising solutions that are designed to drive business value.

          </h2>
          <p className="vea-body vea-reveal" style={{ marginTop: 14, color: 'rgba(255,255,255,0.72)' }}>A veteran advertising team with strengths across strategy, creative, tracking and technology, to support your campaign and business.

          </p>
        </div>

        {/* Unfair Advantage row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12, marginBottom: 40 }}>
          {advantages.map((it, i) => {
            const Icon = it.Icon;
            return (
              <div key={i} className="vea-reveal" style={{
                border: '1px solid rgba(63,191,196,0.5)',
                borderRadius: 12,
                padding: '18px 20px',
                background: 'rgba(10,14,26,0.55)',
                display: 'flex', gap: 12, alignItems: 'flex-start',
                transitionDelay: `${i * 50}ms`
              }}>
                <div style={{ flexShrink: 0, transform: 'scale(0.65)', transformOrigin: 'top left', marginTop: -6, marginRight: -22 }}><Icon /></div>
                <div>
                  <h3 style={{ fontWeight: 800, color: 'var(--vea-red)', fontSize: 14, margin: '0 0 4px', lineHeight: 1.25 }}>{it.title}</h3>
                  <p style={{ color: 'rgba(255,255,255,0.72)', fontSize: 13, lineHeight: 1.5, margin: 0 }}>{it.body}</p>
                </div>
              </div>);
          })}
        </div>

        {/* Sub-divider */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14,
          fontSize: 11, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.55)', marginBottom: 20
        }}>
          <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.12)' }} />
          <span>Integrations and Technology</span>
          <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.12)' }} />
        </div>

        {/* Integrations marquee — single line, auto-scroll */}
        <style>{`
          @keyframes vea-int-marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
          }
          .vea-int-track {
            display: flex;
            gap: 12px;
            width: max-content;
            animation: vea-int-marquee 60s linear infinite;
          }
          .vea-int-mask:hover .vea-int-track { animation-play-state: paused; }
          .vea-int-mask {
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          }
        `}</style>
        <div className="vea-int-mask" style={{ overflow: 'hidden' }}>
          <div className="vea-int-track">
            {[...tools, ...tools].map((t, i) =>
            <div key={i} style={{
              flex: '0 0 auto',
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '12px 18px',
              background: 'rgba(10,14,26,0.85)',
              border: '1px solid rgba(255,255,255,0.10)',
              borderRadius: 999,
              transition: 'background .15s, border-color .15s'
            }}
            onMouseEnter={(e) => {e.currentTarget.style.background = 'rgba(63,191,196,0.12)';e.currentTarget.style.borderColor = 'rgba(63,191,196,0.4)';}}
            onMouseLeave={(e) => {e.currentTarget.style.background = 'rgba(10,14,26,0.85)';e.currentTarget.style.borderColor = 'rgba(255,255,255,0.10)';}}>
                <div style={{
                width: 26, height: 26, borderRadius: 6,
                background: '#fff',
                display: 'grid', placeItems: 'center', flexShrink: 0
              }}>
                  <img
                  src={t.local || (typeof window !== 'undefined' && window.__resources && window.__resources[`si_${t.slug}`]) || `https://cdn.simpleicons.org/${t.slug}/${t.color}`}
                  alt={t.name}
                  style={{ width: 16, height: 16, objectFit: 'contain' }}
                  loading="lazy" />
                
                </div>
                <div style={{ fontWeight: 700, fontSize: 13, color: 'rgba(255,255,255,0.88)', whiteSpace: 'nowrap' }}>{t.name}</div>
              </div>
            )}
          </div>
        </div>

        {/*<p style={{ textAlign: 'center', marginTop: 18, fontSize: 13, color: 'rgba(255,255,255,0.5)' }}>
          + thousands more via secure REST, GraphQL, and webhook APIs.
        </p>*/}
      </div>
    </section>);
};

/* Comparison table */
const ComparisonTable = () => {
  const rows = [
  { topic: 'Reporting cadence', before: 'Manually compiled monthly, often 2–3 weeks stale', after: 'Real-time dashboards, executive summary auto-generated daily' },
  { topic: 'Data entry', before: '10+ hours/wk per ops manager re-keying between systems', after: 'Agentic workflows sync sources every 5 minutes, zero re-keying' },
  { topic: 'Lead routing', before: 'Round-robin in CRM, missed by 24+ hours on weekends', after: 'AI-scored, routed in <60 seconds with full context attached' },
  { topic: 'Forecasting', before: 'Gut-feel + last quarter\u2019s spreadsheet', after: 'Predictive model trained on your data, refreshed weekly' },
  { topic: 'New hire ramp', before: '4–6 weeks to learn the 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 (
    <section className="vea-section-sm" style={{ background: 'var(--vea-bg-2)' }}>
      <div className="vea-container">
        <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>
            <h2 className="vea-h2 vea-reveal" style={{ marginTop: 10, fontSize: 'clamp(26px, 2.6vw, 36px)' }}>The shift you can measure in week three</h2>
          </div>
        </div>
        <div style={{
          background: '#fff', borderRadius: 'var(--vea-radius-card)',
          border: '1px solid var(--vea-line)', overflow: 'hidden',
          boxShadow: 'var(--vea-shadow-soft)'
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.4fr 1.4fr', background: 'var(--vea-charcoal)', color: '#fff', fontWeight: 800, fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            <div style={{ padding: '20px 24px' }}>Operational area</div>
            <div style={{ padding: '20px 24px', borderLeft: '1px solid rgba(255,255,255,0.08)' }}>Before VEA</div>
            <div style={{ padding: '20px 24px', 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: '16px 20px', fontWeight: 800, color: 'var(--vea-ink)', fontSize: 14 }}>{r.topic}</div>
              <div style={{ padding: '16px 20px', color: '#7a7a82', borderLeft: '1px solid var(--vea-line)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <span 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: '16px 20px', color: 'var(--vea-ink)', borderLeft: '1px solid var(--vea-line)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <span 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>
      </div>
    </section>);

};

/* Case studies — expandable cards. Each card holds full study inline.
   Click to expand; smooth height transition; one open at a time. */
const CaseStudies = () => {
  const [open, setOpen] = React.useState(0); // first card open by default
  const cases = [
  {
    industry: 'Construction',
    company: 'Northwind Construction Group',
    headline: '40% faster bid cycles after replacing PDF blueprint takeoffs',
    problem: 'Estimators spent 12 hours per bid manually extracting quantities from architectural PDFs. Win rate stagnated because the team could only respond to ~30% of qualifying RFPs in time.',
    metrics: [
    { v: '40%', l: 'Faster bid cycles' },
    { v: '$1.4M', l: "Add'l revenue captured" },
    { v: '11 hrs', l: 'Saved per bid' }],

    tint: '#FCE4E0',
    accent: '#E84A4A',
    timeline: '12 weeks · Discovery to MVP',
    stack: ['Procore API', 'Azure Document Intelligence', 'Custom CV pipeline', 'Power BI'],
    approach: [
    { t: 'Computer-vision takeoff engine', d: 'Trained a fine-tuned vision model on 1,800 prior estimator markups. Extracts dimensions, materials, and assemblies from PDF and CAD inputs in under 90 seconds.' },
    { t: 'Estimator copilot', d: 'Sits inside Procore. Surfaces auto-generated quantity takeoffs alongside the architect\u2019s drawing; estimators review, override, and lock in minutes instead of hours.' },
    { t: 'Bid throughput dashboard', d: 'Replaced four spreadsheets with a single Power BI workspace tracking active RFPs, response time, win rate, and margin by project type.' }],

    outcome: 'Northwind tripled the number of RFPs they respond to weekly while reducing estimator overtime by 62%. The model is retrained quarterly on the team\u2019s own approved bids.',
    proofPoint: '"We won three projects in Q3 we would have walked away from a year ago. The model paid for itself in the first one." — VP Operations'
  },
  {
    industry: 'HVAC',
    company: 'Ridgeline HVAC Services',
    headline: 'Dispatch latency dropped from 4 hours to 9 minutes',
    problem: 'Service managers were routing technicians manually across 3 zones using a wall whiteboard and a CRM that didn\u2019t talk to scheduling. Same-day service requests routinely became next-week appointments.',
    metrics: [
    { v: '96%', l: 'Reduction in dispatch lag' },
    { v: '+22%', l: 'Tech utilization' },
    { v: '4.9★', l: 'Customer rating' }],

    tint: '#D8F1F2',
    accent: '#3FBFC4',
    timeline: '9 weeks · Discovery to production',
    stack: ['ServiceTitan API', 'Twilio', 'Mapbox', 'Custom dispatch engine'],
    approach: [
    { t: 'Live dispatch optimizer', d: 'Continuously scores every active job against every available technician using skill match, drive time, parts on truck, and customer SLA. Auto-suggests reassignments when conditions change.' },
    { t: 'Customer-facing ETA SMS', d: 'Twilio integration sends booking confirmation, updated arrival window, and tech bio + photo 30 minutes before arrival. Cut "where is my tech" calls by 71%.' },
    { t: 'COO weekly digest', d: 'Auto-generated Monday-morning email: utilization by tech, cancellation root causes, parts shortage forecast, and any SLA breaches with corrective actions.' }],

    outcome: 'Ridgeline retired the whiteboard, eliminated 4 hours of daily manager work, and pushed first-time fix rate from 78% to 91%. The COO\'s weekly digest replaced a 90-minute Monday meeting.',
    proofPoint: '"It\u2019s like the system thinks the way our best dispatcher thinks—except it works at 3am when she\u2019s asleep." — Operations Director'
  },
  {
    industry: 'Digital Agency',
    company: 'Vector & Co.',
    headline: 'Reporting day went from a Monday-long ritual to 4 minutes',
    problem: 'A 14-person agency spent ~40 person-hours per week assembling client performance decks across GA4, Ads, and CRM. Senior strategists were doing data-entry instead of strategy.',
    metrics: [
    { v: '38 hrs', l: 'Recovered per week' },
    { v: '3x', l: 'Reports per client' },
    { v: '7 days', l: 'Earlier insights' }],

    tint: '#FCE4E0',
    accent: '#E84A4A',
    timeline: '7 weeks · Discovery to production',
    stack: ['GA4', 'Google Ads', 'HubSpot', 'OpenAI', 'Notion'],
    approach: [
    { t: 'Unified client data layer', d: 'Built an ELT pipeline pulling GA4, Ads, Meta, and HubSpot into a single warehouse. Anomaly detection flags week-over-week changes that warrant a strategist\u2019s attention.' },
    { t: 'Auto-generated narrative', d: 'GPT-4o reads the underlying data and drafts a 2-paragraph client-ready narrative for each report. Strategists edit instead of writing from scratch.' },
    { t: 'Client portal', d: 'Branded Notion-embedded dashboards replaced the slide deck. Clients can self-serve current numbers; strategists send a Loom + summary on Monday.' }],

    outcome: 'Vector reallocated 38 weekly hours from reporting into net-new strategy work. Two senior strategists were promoted into client-leadership roles previously blocked by reporting load.',
    proofPoint: '"My senior team doesn\u2019t open a spreadsheet anymore. They open the system, read what it found, and do the part only humans can do." — Founder'
  }];

  {/*return (
    <section className="vea-section" style={{ background: '#fff' }}>
      <div className="vea-container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div style={{ maxWidth: 620 }}>
            <div className="vea-eyebrow">Case Studies</div>
            <h2 className="vea-h2 vea-reveal" style={{ marginTop: 14 }}>Real systems, rebuilt with AI.
Driving measurable outcomes.</h2>
          </div>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--vea-ink-soft)', display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--vea-teal)' }} />
            Click any card to read the full study
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {cases.map((c, i) => {const isOpen = open === i;
            return (
              <article key={i} className="vea-reveal" style={{
                background: '#fff', border: `1px solid ${isOpen ? c.accent : 'var(--vea-line)'}`,
                borderRadius: 'var(--vea-radius-card)', overflow: 'hidden',
                boxShadow: isOpen ? '0 4px 8px rgba(20,20,30,0.04), 0 24px 48px rgba(20,20,30,0.10)' : '0 1px 2px rgba(20,20,30,0.04)',
                transition: 'box-shadow .25s ease, border-color .25s ease'
              }}>
                
                <button className="case-study-btn" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen} style={{
                  width: '100%', textAlign: 'left', cursor: 'pointer',
                  border: 0, background: c.tint, padding: '28px 32px',
                  borderBottom: `3px solid ${c.accent}`,
                  display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'center',
                  fontFamily: 'inherit'
                }}>
                  <div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 10, flexWrap: 'wrap' }}>
                      <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.16em', textTransform: 'uppercase', color: c.accent }}>{c.industry}</span>
                      <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--vea-ink-soft)', opacity: .4 }} />
                      <span style={{ fontSize: 12, color: 'var(--vea-ink-soft)', fontWeight: 700 }}>{c.company}</span>
                      <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--vea-ink-soft)', opacity: .4 }} />
                      <span style={{ fontSize: 12, color: 'var(--vea-ink-soft)', fontWeight: 700 }}>{c.timeline}</span>
                    </div>
                    <h3 className="vea-h3" style={{ fontSize: 24, lineHeight: 1.2, color: 'var(--vea-ink)', marginBottom: 14 }}>{c.headline}</h3>
                    <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
                      {c.metrics.map((m, j) =>
                      <div key={j}>
                          <div style={{ fontWeight: 800, fontSize: 22, color: c.accent, letterSpacing: '-0.01em', lineHeight: 1 }}>{m.v}</div>
                          <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--vea-ink-soft)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 6 }}>{m.l}</div>
                        </div>
                      )}
                    </div>
                  </div>
                  <div style={{
                    width: 44, height: 44, borderRadius: '50%',
                    background: c.accent, color: '#fff', display: 'grid', placeItems: 'center',
                    transition: 'transform .3s ease',
                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
                    flexShrink: 0
                  }}>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <path d="M4 6 L8 10 L12 6" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                </button>
                
                <div style={{
                  display: 'grid',
                  gridTemplateRows: isOpen ? '1fr' : '0fr',
                  transition: 'grid-template-rows .4s cubic-bezier(0.22, 1, 0.36, 1)'
                }}>
                  <div style={{ overflow: 'hidden' }}>
                    <div className="case-study-content" style={{ padding: '32px 32px 36px', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 40 }}>
                      <div>
                        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: c.accent, marginBottom: 10 }}>The challenge</div>
                        <p className="vea-body-sm" style={{ margin: 0, marginBottom: 28, fontSize: 16, color: 'var(--vea-ink)' }}>{c.problem}</p>

                        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: c.accent, marginBottom: 14 }}>What we built</div>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                          {c.approach.map((a, j) =>
                          <div key={j} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 16 }}>
                              <div style={{ width: 28, height: 28, borderRadius: 8, background: c.tint, color: c.accent, display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 13 }}>{j + 1}</div>
                              <div>
                                <div style={{ fontWeight: 800, fontSize: 15, color: 'var(--vea-ink)', marginBottom: 4 }}>{a.t}</div>
                                <div className="vea-body-sm" style={{ margin: 0 }}>{a.d}</div>
                              </div>
                            </div>
                          )}
                        </div>

                        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: c.accent, marginTop: 28, marginBottom: 10 }}>The outcome</div>
                        <p className="vea-body-sm" style={{ margin: 0, fontSize: 15, color: 'var(--vea-ink)' }}>{c.outcome}</p>
                      </div>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                        <div style={{ background: c.tint, borderRadius: 12, padding: '20px 22px' }}>
                          <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: c.accent, marginBottom: 12 }}>Stack</div>
                          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                            {c.stack.map((s, j) =>
                            <span key={j} style={{ background: '#fff', border: `1px solid ${c.accent}33`, color: 'var(--vea-ink)', padding: '5px 10px', borderRadius: 999, fontSize: 12, fontWeight: 700 }}>{s}</span>
                            )}
                          </div>
                        </div>
                        <div style={{ background: 'var(--vea-charcoal)', color: '#fff', borderRadius: 12, padding: '24px 24px', position: 'relative' }}>
                          <div style={{ position: 'absolute', top: 16, right: 20, fontSize: 64, lineHeight: 0.6, color: c.accent, opacity: 0.4, fontWeight: 800 }}>"</div>
                          <div style={{ fontStyle: 'italic', fontSize: 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.92)', position: 'relative' }}>{c.proofPoint}</div>
                        </div>
                        <button style={{
                          background: c.accent, color: '#fff', border: 0,
                          padding: '14px 24px', borderRadius: 999, cursor: 'pointer',
                          fontWeight: 800, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase',
                          fontFamily: 'inherit'
                        }}>Talk to this team about your case</button>
                      </div>
                    </div>
                  </div>
                </div>
              </article>);

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

};

/* Testimonials carousel */
/* Testimonials — compact 2x2 grid with portrait photos */
const Testimonials = ({ dark = false }) => {
  const items = [
  {
    quote: "VEA didn't hand us a tool—they handed us our Mondays back. Retired a 600-row reporting spreadsheet in week two.",
    name: 'Alicia Thornton',
    role: 'COO, Ridgeline HVAC',
    photo: (typeof window !== 'undefined' && window.__resources && window.__resources.photoAT) || 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200&h=200&fit=crop&crop=faces',
    tint: '#3FBFC4'
  },
  {
    quote: 'They speak operations, not just engineering. Discovery alone identified $200K in annual recoverable hours before a line of code was written.',
    name: 'Marcus Reilly',
    role: 'VP Ops, Northwind Construction',
    photo: (typeof window !== 'undefined' && window.__resources && window.__resources.photoMR) || 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=200&h=200&fit=crop&crop=faces',
    tint: '#E84A4A'
  },
  {
    quote: 'We replaced four point solutions with one VEA-built system. New-hire onboarding went from 6 weeks to a Monday-morning walkthrough.',
    name: 'Priya Shah',
    role: 'Founder, Vector & Co. Digital',
    photo: (typeof window !== 'undefined' && window.__resources && window.__resources.photoPS) || 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=200&h=200&fit=crop&crop=faces',
    tint: '#3FBFC4'
  },
  {
    quote: "I've worked with three other AI consultants. VEA is the only one that ships maintainable, owned code instead of a black-box subscription.",
    name: 'David Okafor',
    role: 'CTO, Pinecrest Group',
    photo: (typeof window !== 'undefined' && window.__resources && window.__resources.photoDO) || 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=faces',
    tint: '#E84A4A'
  }];

  const text = dark ? '#fff' : 'var(--vea-ink)';
  const cardBg = dark ? 'rgba(255,255,255,0.04)' : '#fff';
  const cardBorder = dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--vea-line)';
  // Duplicate items so the marquee loops seamlessly
  const loop = [...items, ...items];
  return (
    <section className="vea-section-sm" style={{ background: dark ? 'var(--vea-charcoal)' : 'var(--vea-bg-2)', overflow: 'hidden' }}>
      <style>{`
        @keyframes vea-marquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .vea-marquee-track {
          display: flex;
          gap: 16px;
          width: max-content;
          animation: vea-marquee 48s linear infinite;
        }
        .vea-marquee-mask:hover .vea-marquee-track { animation-play-state: paused; }
        .vea-marquee-mask {
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
        }
      `}</style>
      <div className="vea-container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 24 }}>
          <div>
            <div className="vea-eyebrow">Testimonials</div>
            <h2 className="vea-h2 vea-reveal" style={{ marginTop: 10, fontSize: 'clamp(26px, 2.6vw, 36px)', color: text }}>What our clients are saying</h2>
          </div>
        </div>
      </div>
      <div className="vea-marquee-mask">
        <div className="vea-marquee-track">
          {loop.map((c, i) =>
          <article className="vea-testimonial" key={i} style={{
            flex: '0 0 auto', width: 380,
            background: cardBg, border: cardBorder, borderRadius: 14,
            padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 14
          }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 4 }}>
                <span aria-hidden style={{ fontWeight: 800, color: c.tint, fontSize: 32, lineHeight: 0.5, marginTop: 10, marginRight: 8 }}>"</span>
                <p style={{ fontWeight: 500, fontSize: 18, lineHeight: 1.5, color: text, margin: 0 }}>{c.quote}</p>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 12, borderTop: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--vea-line)' }}>
                <div style={{ width: 40, height: 40, borderRadius: '50%', overflow: 'hidden', flexShrink: 0, border: `2px solid ${c.tint}`, background: c.tint }}>
                  <img src={c.photo} alt={c.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                </div>
                <div>
                  <div style={{ fontWeight: 800, fontSize: 15, color: text, lineHeight: 1.2 }}>{c.name}</div>
                  <div style={{ fontSize: 14, color: dark ? 'rgba(255,255,255,0.6)' : 'var(--vea-ink-soft)', marginTop: 2 }}>{c.role}</div>
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

};

/* Unfair Advantage — compact single row */
const UnfairAdvantage = () => {
  const items = [
  { Icon: UAIconCode, title: 'A strategy built before a dollar is spent', body: 'Every engagement starts with audience research, competitive analysis, and a channel plan your team reviews and approves before campaigns go live.' },
  { Icon: UAIconStopwatch, title: 'Creative that\'s built to perform, not just look good', body: 'Our in-house creative team produces ad assets designed around your brand and tested against real performance data to improve over time.' },
  { Icon: UAIconHex, title: 'Reporting that connects spend to results', body: 'Clear, consistent reporting that ties your advertising activity to leads, revenue, and ROI so you always know what your budget is doing.' }];

  return (
    <section className="vea-stars vea-section-sm" style={{ color: '#fff' }}>
      <div className="vea-container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 28 }}>
          <h2 className="vea-h2 vea-reveal" style={{ color: '#fff', fontSize: 'clamp(26px, 2.6vw, 36px)', margin: 0 }}>Your unfair advantage</h2>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'rgba(255,255,255,0.55)' }}>Why teams pick VEA over the alternatives</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12 }}>
          {items.map((it, i) => {
            const Icon = it.Icon;
            return (
              <div key={i} className="vea-reveal" style={{
                border: '1px solid rgba(63,191,196,0.5)',
                borderRadius: 12,
                padding: '20px 20px',
                background: 'rgba(10,14,26,0.55)',
                display: 'flex', gap: 14, alignItems: 'flex-start',
                transitionDelay: `${i * 50}ms`
              }}>
                <div style={{ flexShrink: 0, transform: 'scale(0.7)', transformOrigin: 'top left', marginTop: -4, marginRight: -16 }}><Icon /></div>
                <div>
                  <h3 style={{ fontWeight: 800, color: 'var(--vea-red)', fontSize: 14, margin: '0 0 6px', lineHeight: 1.25 }}>{it.title}</h3>
                  <p style={{ color: 'rgba(255,255,255,0.72)', fontSize: 13, lineHeight: 1.5, margin: 0 }}>{it.body}</p>
                </div>
              </div>);
          })}
        </div>
      </div>
    </section>);
};

/* FAQ accordion */
const FAQ = () => {
  const items = [
  { q: 'Do I own my advertising accounts?', a: 'Yes, always. Your ad accounts are created in your name and under your ownership from day one. We operate as managers within your accounts, never as the owner. If you ever transition away from working with us, your accounts, history, and data come with you.' },
  { q: 'What are the primary metrics you report on?', a: 'It depends on your goals, but we typically anchor reporting around the metrics that connect most directly to business outcomes: cost-per-lead, return on ad spend, conversion rate, click-through rate, and total revenue influenced by paid channels. You will not receive a report full of vanity metrics without context. Every number we share is tied to what it means for your business.' },
  { q: 'What do I need to provide to get started?', a: 'To hit the ground running we typically need access to your existing ad accounts, your brand assets (logos, fonts, colors), any creative guidelines or messaging direction, and a clear picture of your target customer and business goals. The more context you share upfront, the faster we can build a strategy that reflects your business accurately.' },
  { q: 'How do you help with cookie and pixel regulation?', a: 'We stay current on privacy regulations including GDPR, CCPA, and platform-level changes to ensure your tracking setup is compliant. That includes implementing consent management solutions, configuring server-side tracking where appropriate, and auditing your pixel and tag setup to minimize data gaps while respecting user privacy requirements.' }];

  const [open, setOpen] = React.useState(0);
  return (
    <section className="vea-section" style={{ background: '#fff' }}>
      <div className="vea-container" style={{ maxWidth: 920 }}>
        <h2 className="vea-h2 vea-reveal" style={{ textAlign: 'center', marginBottom: 48 }}>Frequently Asked Questions</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {items.map((it, i) => {
            const isOpen = i === open;
            return (
              <div key={i} style={{
                border: '1px solid var(--vea-line)',
                borderRadius: 18,
                overflow: 'hidden',
                background: '#fff',
                transition: 'border-color .2s, box-shadow .2s',
                ...(isOpen ? { borderColor: 'rgba(63,191,196,0.4)', boxShadow: '0 4px 16px rgba(20,20,30,0.06)' } : {})
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  padding: '22px 28px', background: 'transparent', border: 'none', cursor: 'pointer',
                  textAlign: 'left', gap: 16
                }}>
                  <span style={{ fontWeight: 800, fontSize: 17, color: 'var(--vea-red)' }}>{it.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: '50%',
                    background: isOpen ? 'var(--vea-teal)' : '#D5D9DC',
                    color: '#fff', display: 'grid', placeItems: 'center', flexShrink: 0,
                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform .25s, background .15s'
                  }}>
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 4 L6 8 L10 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 400 : 0, overflow: 'hidden',
                  transition: 'max-height .35s ease'
                }}>
                  <div style={{ padding: '0 28px 24px', color: 'var(--vea-ink-soft)', fontSize: 16, lineHeight: 1.6 }}>
                    {it.a}
                  </div>
                </div>
              </div>);

          })}
        </div>
        <div style={{ textAlign: 'center', marginTop: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
          <span style={{ fontWeight: 800, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--vea-ink-soft)' }}>Still have a question?</span>
          <a href="/contact/" className="vea-btn vea-btn-teal">Contact Us</a>
        </div>
      </div>
    </section>);

};

/* Final CTA — multi-step Discovery form */
const DiscoveryForm = () => {
  const TOTAL = 4;
  const [step, setStep] = React.useState(0);
  const [submitted, setSubmitted] = React.useState(false);
  const [touched, setTouched] = React.useState(false);
  const [data, setData] = React.useState({
    company: '', industry: '', size: '',
    painPoints: [], systems: '',
    timeline: '', budget: '',
    name: '', email: '', phone: ''
  });

  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const togglePain = (p) => setData((d) => ({
    ...d,
    painPoints: d.painPoints.includes(p) ?
    d.painPoints.filter((x) => x !== p) :
    [...d.painPoints, p]
  }));

  const stepValid = () => {
    if (step === 0) return data.company.trim() && data.industry && data.size;
    if (step === 1) return data.painPoints.length > 0;
    if (step === 2) return data.timeline && data.budget;
    if (step === 3) return data.name.trim() && /\S+@\S+\.\S+/.test(data.email);
    return true;
  };

  const next = () => {
    setTouched(true);
    if (!stepValid()) return;
    setTouched(false);
    if (step < TOTAL - 1) setStep(step + 1);else
    setSubmitted(true);
  };
  const back = () => {setTouched(false);setStep(Math.max(0, step - 1));};

  const fieldStyle = {
    width: '100%', background: 'rgba(255,255,255,0.04)',
    border: '1px solid rgba(255,255,255,0.14)', borderRadius: 10,
    padding: '13px 14px', color: '#fff', fontSize: 14,
    fontFamily: 'inherit', outline: 'none',
    transition: 'border-color 200ms, background 200ms'
  };
  const labelStyle = { display: 'block', fontSize: 11, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 8 };
  const errStyle = { color: '#FF8A8A', fontSize: 12, marginTop: 6, fontWeight: 600 };

  const Chip = ({ active, onClick, children }) =>
  <button type="button" onClick={onClick} style={{
    padding: '10px 14px', borderRadius: 999,
    background: active ? 'rgba(63,191,196,0.18)' : 'rgba(255,255,255,0.04)',
    border: `1px solid ${active ? 'var(--vea-teal)' : 'rgba(255,255,255,0.16)'}`,
    color: active ? 'var(--vea-teal)' : 'rgba(255,255,255,0.85)',
    fontSize: 13, fontWeight: 600, fontFamily: 'inherit',
    cursor: 'pointer', transition: 'all 180ms'
  }}>{children}</button>;

  const Tile = ({ active, onClick, label, sub }) =>
  <button type="button" onClick={onClick} style={{
    padding: '14px 16px', borderRadius: 12, textAlign: 'left',
    background: active ? 'rgba(63,191,196,0.12)' : 'rgba(255,255,255,0.03)',
    border: `1px solid ${active ? 'var(--vea-teal)' : 'rgba(255,255,255,0.12)'}`,
    color: '#fff', fontFamily: 'inherit', cursor: 'pointer',
    transition: 'all 180ms', display: 'flex', flexDirection: 'column', gap: 4
  }}>
      <span style={{ fontWeight: 700, fontSize: 14 }}>{label}</span>
      {sub && <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)' }}>{sub}</span>}
    </button>;

  if (submitted) {
    return (
      <div style={{
        background: 'rgba(255,255,255,0.04)',
        border: '1px solid rgba(63,191,196,0.4)', borderRadius: 16,
        padding: '40px 32px', textAlign: 'center',
        animation: 'vea-fade-up 480ms cubic-bezier(.2,.8,.2,1) both'
      }}>
        <div style={{
          width: 64, height: 64, borderRadius: '50%',
          background: 'rgba(63,191,196,0.18)', border: '1px solid var(--vea-teal)',
          display: 'grid', placeItems: 'center', margin: '0 auto 20px'
        }}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--vea-teal)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="5 12 10 17 19 8" />
          </svg>
        </div>
        <h3 style={{ fontWeight: 800, fontSize: 22, color: '#fff', margin: '0 0 10px' }}>Got it — your discovery brief is in.</h3>
        <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14, lineHeight: 1.6, margin: '0 0 24px', maxWidth: 360, marginLeft: 'auto', marginRight: 'auto' }}>
          A senior strategist will reach out to <strong style={{ color: '#fff' }}>{data.email}</strong> within one business day to schedule your AI Discovery Sprint.
        </p>
        <button type="button" className="vea-btn vea-btn-teal" onClick={() => {setStep(0);setSubmitted(false);setData({ company: '', industry: '', size: '', painPoints: [], systems: '', timeline: '', budget: '', name: '', email: '', phone: '' });}}>
          Submit Another
        </button>
      </div>);

  }

  return (
    <div class="vea-react-form" style={{
      background: 'rgba(255,255,255,0.03)',
      border: '1px solid rgba(255,255,255,0.10)', borderRadius: 16,
      padding: '28px 28px 24px', position: 'relative'
    }}>
      {/* Progress */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--vea-teal)' }}>
          Step {step + 1} of {TOTAL}
        </div>
        <div style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.5)' }}>
          {['Your company', 'Pain points', 'Scope', 'Contact'][step]}
        </div>
      </div>
      <div style={{ height: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 4, overflow: 'hidden', marginBottom: 24 }}>
        <div style={{ height: '100%', width: `${(step + 1) / TOTAL * 100}%`, background: 'var(--vea-teal)', borderRadius: 4, transition: 'width 360ms cubic-bezier(.2,.8,.2,1)' }} />
      </div>

      {/* Steps */}
      <div class="steps-list" key={step} style={{ animation: 'vea-fade-up 320ms cubic-bezier(.2,.8,.2,1) both' }}>
        {step === 0 && <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <label style={labelStyle}>Company</label>
            <input style={fieldStyle} placeholder="Acme Co." value={data.company} onChange={(e) => update('company', e.target.value)} onFocus={(e) => e.target.style.borderColor = 'var(--vea-teal)'} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.14)'} />
            {touched && !data.company.trim() && <div style={errStyle}>Company name is required.</div>}
          </div>
          <div>
            <label style={labelStyle}>Industry</label>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['SaaS', 'E-commerce', 'Healthcare', 'Finance', 'Logistics', 'Other'].map((i) =>
              <Chip key={i} active={data.industry === i} onClick={() => update('industry', i)}>{i}</Chip>
              )}
            </div>
            {touched && !data.industry && <div style={errStyle}>Pick an industry.</div>}
          </div>
          <div>
            <label style={labelStyle}>Team size</label>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
              {[['1–10', 'Founder / small team'], ['11–50', 'Growing team'], ['51–250', 'Mid-market'], ['250+', 'Enterprise']].map(([l, s]) =>
              <Tile key={l} active={data.size === l} onClick={() => update('size', l)} label={l} sub={s} />
              )}
            </div>
            {touched && !data.size && <div style={errStyle}>Pick a team size.</div>}
          </div>
        </div>}

        {step === 1 && <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <label style={labelStyle}>Where are operations leaking? (pick any)</label>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Manual data entry', 'Disconnected systems', 'Slow reporting', 'Customer support', 'Sales handoffs', 'Procurement', 'Compliance', 'Knowledge silos'].map((p) =>
              <Chip key={p} active={data.painPoints.includes(p)} onClick={() => togglePain(p)}>{p}</Chip>
              )}
            </div>
            {touched && data.painPoints.length === 0 && <div style={errStyle}>Pick at least one pain point.</div>}
          </div>
          <div>
            <label style={labelStyle}>Core systems in use <span style={{ textTransform: 'none', letterSpacing: 0, fontWeight: 600, color: 'rgba(255,255,255,0.4)' }}>(optional)</span></label>
            <input style={fieldStyle} placeholder="e.g. Salesforce, NetSuite, Shopify, HubSpot" value={data.systems} onChange={(e) => update('systems', e.target.value)} onFocus={(e) => e.target.style.borderColor = 'var(--vea-teal)'} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.14)'} />
          </div>
        </div>}

        {step === 2 && <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <label style={labelStyle}>Timeline</label>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
              {[['ASAP', 'Within 4 weeks'], ['1–3 months', 'This quarter'], ['3–6 months', 'Next quarter'], ['Exploring', 'No firm date']].map(([l, s]) =>
              <Tile key={l} active={data.timeline === l} onClick={() => update('timeline', l)} label={l} sub={s} />
              )}
            </div>
            {touched && !data.timeline && <div style={errStyle}>Pick a timeline.</div>}
          </div>
          <div>
            <label style={labelStyle}>Budget range</label>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
              {['$25k–$50k', '$50k–$100k', '$100k–$250k', '$250k+'].map((b) =>
              <Tile key={b} active={data.budget === b} onClick={() => update('budget', b)} label={b} />
              )}
            </div>
            {touched && !data.budget && <div style={errStyle}>Pick a budget range.</div>}
          </div>
        </div>}

        {step === 3 && <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <label style={labelStyle}>Your name</label>
            <input style={fieldStyle} placeholder="Jane Doe" value={data.name} onChange={(e) => update('name', e.target.value)} onFocus={(e) => e.target.style.borderColor = 'var(--vea-teal)'} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.14)'} />
            {touched && !data.name.trim() && <div style={errStyle}>Name is required.</div>}
          </div>
          <div>
            <label style={labelStyle}>Work email</label>
            <input type="email" style={fieldStyle} placeholder="jane@company.com" value={data.email} onChange={(e) => update('email', e.target.value)} onFocus={(e) => e.target.style.borderColor = 'var(--vea-teal)'} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.14)'} />
            {touched && !/\S+@\S+\.\S+/.test(data.email) && <div style={errStyle}>Enter a valid email.</div>}
          </div>
          <div>
            <label style={labelStyle}>Phone <span style={{ textTransform: 'none', letterSpacing: 0, fontWeight: 600, color: 'rgba(255,255,255,0.4)' }}>(optional)</span></label>
            <input style={fieldStyle} placeholder="+1 (555) 123-4567" value={data.phone} onChange={(e) => update('phone', e.target.value)} onFocus={(e) => e.target.style.borderColor = 'var(--vea-teal)'} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.14)'} />
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', lineHeight: 1.5, marginTop: 4 }}>
            By submitting, you agree to be contacted about your AI Discovery Sprint. We never sell your data.
          </div>
        </div>}
      </div>

      {/* Nav */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginTop: 24, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
        <button type="button" onClick={back} disabled={step === 0} style={{
          padding: '10px 18px', background: 'transparent',
          border: '1px solid rgba(255,255,255,0.18)', borderRadius: 999,
          color: step === 0 ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,255,0.85)',
          fontSize: 13, fontWeight: 700, fontFamily: 'inherit',
          cursor: step === 0 ? 'not-allowed' : 'pointer', transition: 'all 180ms'
        }}>← Back</button>
        <button type="button" onClick={next} className="vea-btn vea-btn-teal" style={{ padding: '12px 24px', fontSize: 13 }}>
          {step === TOTAL - 1 ? 'Submit & Book Call' : 'Continue →'}
        </button>
      </div>
    </div>);

};

const FinalCTA = () =>
<section id="get-started" style={{ background: 'var(--vea-charcoal)', position: 'relative', overflow: 'hidden' }}>
    <div className="vea-container vea-contact-container" style={{ padding: '80px 32px', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(420px, 520px)', alignItems: 'center', gap: 56, position: 'relative', zIndex: 1 }}>
      <div style={{ maxWidth: 560 }}>
        <div className="vea-eyebrow" style={{ color: 'var(--vea-teal)', marginBottom: 14 }}>Get Started</div>
        <h2 className="vea-h2" style={{ color: '#fff', fontSize: "35.032px" }}>Ready to drive forward your advertising performance?</h2>
        <p className="vea-body" style={{ color: 'rgba(255,255,255,0.75)', marginTop: 18, marginBottom: 28 }}>Tell us where your advertising needs help, and if you feel it's leaking time and money. We'll come back within one business day to begin a custom tailored discovery sprint to guide a strategy session.

      </p>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {['Senior strategist response within 1 business day', 'No obligation — leave with a written ROI estimate', 'Veteran advertising engineers, not pop-up consultants'].map((t, i) =>
        <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', color: 'rgba(255,255,255,0.85)', fontSize: 14, lineHeight: 1.5 }}>
              <span aria-hidden style={{ flex: '0 0 18px', width: 18, height: 18, borderRadius: '50%', background: 'rgba(63,191,196,0.18)', display: 'grid', placeItems: 'center', marginTop: 2 }}>
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--vea-teal)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="5 12 10 17 19 8" /></svg>
              </span>
              <span>{t}</span>
            </li>
        )}
        </ul>
      </div>
      <DiscoveryForm />
    </div>
  </section>;


/* Footer */
const Footer = () => null;
/*<footer style={{ background: '#fff', borderTop: '1px solid var(--vea-line)', padding: '56px 0 32px' }}>
    <div className="vea-container">
      <div style={{ display: 'flex', alignItems: 'center', gap: 'clamp(24px, 4vw, 56px)', justifyContent: 'center', flexWrap: 'wrap', paddingBottom: 48, borderBottom: '1px solid var(--vea-line)', marginBottom: 48 }}>
        {['Best of Colorado 2023', 'Top Web Designers', 'Semrush Certified Partner', 'Top Digital Marketing Agencies 2020', 'Google Partner'].map((b) =>
      <div key={b} style={{
        padding: '10px 20px', border: '1px solid var(--vea-line)', borderRadius: '50%',
        width: 96, height: 96, display: 'grid', placeItems: 'center',
        fontSize: 9, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase',
        color: 'var(--vea-ink-soft)', textAlign: 'center', lineHeight: 1.2
      }}>{b}</div>
      )}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40, marginBottom: 40 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <VeaLogo size={40} />
            <div style={{ fontFamily: 'Mulish', fontWeight: 800, lineHeight: 1, letterSpacing: '0.04em' }}>
              <div style={{ fontSize: 20 }}>VEA</div>
              <div style={{ fontSize: 11, color: 'var(--vea-red)', marginTop: 4, letterSpacing: '0.16em' }}>TECHNOLOGIES</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
            {['F', 'in', 'IG'].map((l) =>
          <div key={l} style={{ width: 36, height: 36, borderRadius: '50%', background: '#D5D9DC', color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 12 }}>{l}</div>
          )}
          </div>
        </div>
        <div>
          <div style={{ fontWeight: 800, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--vea-red)', marginBottom: 16 }}>Our Locations</div>
          <div style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--vea-ink-soft)' }}>
            <div style={{ marginBottom: 14 }}>4045 Pecos St, Ste 201-5<br />Denver, CO 80211</div>
            <div style={{ marginBottom: 14 }}>505 Fay Street Suite 204<br />Columbia, Missouri 65201</div>
            <div>3550 Frontier Ave Suite A2<br />Boulder, CO 80301</div>
          </div>
        </div>
        <div>
          <div style={{ fontWeight: 800, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--vea-red)', marginBottom: 16 }}>Services</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, fontSize: 14, lineHeight: 2.1, color: 'var(--vea-ink)' }}>
            {['Web Design', 'SEO', 'Digital Advertising', 'Social Media Services', 'Branding', 'AI Solutions'].map((s) => <li key={s}><a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>{s}</a></li>)}
          </ul>
        </div>
        <div>
          <div style={{ fontWeight: 800, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--vea-red)', marginBottom: 16 }}>Quick Links</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, fontSize: 14, lineHeight: 2.1, color: 'var(--vea-ink)' }}>
            {['Home', 'Services', 'Company', 'Testimonials', 'Contact Us'].map((s) => <li key={s}><a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>{s}</a></li>)}
          </ul>
        </div>
      </div>
      <div style={{ textAlign: 'center', fontSize: 13, color: 'var(--vea-ink-soft)', paddingTop: 24, borderTop: '1px solid var(--vea-line)' }}>
        © 2025 VEA Technologies, Inc. All Rights Reserved. &nbsp; Privacy Policy &nbsp;|&nbsp; Terms &amp; Conditions &nbsp;|&nbsp; Cookie Policy &nbsp;|&nbsp; Consent Preferences
      </div>
    </div>
  </footer>;*/


Object.assign(window, {
  useReveal, useCountUp, StatCounter,
  VeaNav, TrustedBar, ServiceCard, ServicesGrid, StatsBand,
  IntegrationsGrid, ComparisonTable, CaseStudies,
  Testimonials, UnfairAdvantage, FAQ, FinalCTA, Footer
});