/* 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: 'Technical SEO That Scales', tag: 'Search (Organic) Optimization', lede: 'A site architecture strategy built around your crawl budget and indexation goals.',
    detail: 'We audit and optimize your site\'s technical foundation for search performance. From site architecture and Core Web Vitals to schema markup and crawl efficiency, every element is optimized around visibility and search engine trust.',
    bullets: ['Technical audits & site architecture', 'Core Web Vitals & site speed optimization', 'Schema markup & structured data implementation'],
    outcome: 'Foundation-focused · Crawlability driven' },
  { Icon: SvcIconDashboard, title: 'Content That Ranks', tag: 'On-Page & Content SEO', lede: 'On-page strategy built to match search intent and hold rankings',
    detail: 'We develop and optimize on-page content with keyword strategy built around your target audience\'s search behavior. From content structure and internal linking to metadata and keyword mapping, pages are built to rank and convert visibility into traffic.',
    bullets: ['Keyword research & content strategy', 'On-page optimization & metadata', 'Internal linking & content structur'],
    outcome: 'Relevance-first · Intent matched' },
  { Icon: SvcIconNetwork, title: 'Link Building That Builds Authority', tag: 'Authority & Link Building', lede: 'Earned and strategic link acquisition that strengthens your domain over time.',
    detail: 'We manage link building campaigns across relevant, high-quality sources, using research-driven outreach to earn links efficiently and at scale. Continuous monitoring keeps your backlink profile clean and your domain authority growing across every campaign.',
    bullets: ['Outreach & relationship-based link building', 'Backlink audits & toxic link removal', 'Domain authority tracking & competitor analysis'],
    outcome: 'Earned reach · Domain strength' },
  { Icon: SvcIconLaptop, title: 'Local, Maps & Multi-Location SEO', tag: 'Local & Multi-Location SEO', lede: 'Local visibility strategies delivered across every location you serve.',
    detail: 'We plan and execute local SEO strategies across Google Business Profile, maps, and location pages. Whether building single-location authority or managing hundreds of listings, campaigns are structured to reach your customers wherever they are searching.',
    bullets: ['Google Business Profile & maps optimization', 'Location page strategy & citation management', 'Local rank tracking & review management'],
    outcome: 'Full-map reach · Location agnostic' },
  { Icon: SvcIconDoc, title: 'AI Content & SEO Operations', tag: 'SEO Content & Landing Page Production', lede: 'Content assets designed to satisfy search intent and convert the click.',
    detail: 'We produce the blog content, landing pages, and website copy your SEO strategy needs to perform. Every asset is built to align with your brand, speak to your audience, and target a specific keyword or intent. Content is tested, refined, and optimized as ranking data comes in.',
    bullets: ['SEO blog & website content writing', 'Landing page copy & optimization', 'Content testing & performance iteration'],
    outcome: 'Human-reviewed · Brand-safe' },
  { Icon: SvcIconGear, title: 'Industry-Specific Automation', tag: 'SEO Tracking & Performance Analytics', lede: 'The measurement foundation your search investment depends on.',
    detail: 'We configure the tracking, tagging, and reporting infrastructure that gives you a clear picture of what your SEO efforts are actually driving. From rank tracking and Search Console setup to custom dashboards and traffic attribution, you always know where your rankings are working.',
    bullets: ['Rank tracking & Search Console setup', 'Organic traffic attribution & reporting', 'Custom dashboards & competitor benchmarking'],
    outcome: 'Domain-trained · API-native' }];


  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' }}>
              SEO Services - Building Your Digital Presence
            </h2>
          </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)' }}>{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: 'QuickBooks', slug: 'quickbooks', color: '2CA01C' },
  { name: 'Jira', slug: 'jira', color: '0052CC' },
  { name: 'Salesforce', slug: 'salesforce', color: '00A1E0', local: 'assets/integ-salesforce.svg' },
  { name: 'HubSpot', slug: 'hubspot', color: 'FF7A59' },
  { name: 'Slack', slug: 'slack', color: '4A154B', local: 'assets/integ-slack.svg' },
  { name: 'Google Workspace', slug: 'google', color: '4285F4' },
  { name: 'Microsoft 365', slug: 'microsoft', color: '5E5E5E', local: 'assets/integ-microsoft.svg' },
  { name: 'Stripe', slug: 'stripe', color: '635BFF' },
  { name: 'Gusto', slug: 'gusto', color: 'F45D48' },
  { name: 'Zendesk', slug: 'zendesk', color: '03363D' },
  { name: 'Notion', slug: 'notion', color: '000000' },
  { name: 'Asana', slug: 'asana', color: 'F06A6A' },
  { name: 'Monday', slug: 'mondaydotcom', color: 'FF3D57', local: 'assets/integ-mondaydotcom.svg' },
  { name: 'Xero', slug: 'xero', color: '13B5EA' },
  { name: 'Shopify', slug: 'shopify', color: '7AB55C' },
  { name: 'Zoho', slug: 'zoho', color: 'C8202F' },
  { name: 'Google Analytics', slug: 'googleanalytics', color: 'E37400' },
  { name: 'Search Console', slug: 'googlesearchconsole', color: '458CF5' },
  { name: 'AWS', slug: 'amazonwebservices', color: 'FF9900', local: 'assets/integ-amazonwebservices.svg' },
  { name: 'Azure', slug: 'microsoftazure', color: '0078D4', local: 'assets/integ-microsoftazure.svg' },
  { name: 'Snowflake', slug: 'snowflake', color: '29B5E8' },
  { name: 'PostgreSQL', slug: 'postgresql', color: '4169E1' },
  { name: 'Airtable', slug: 'airtable', color: 'FCB400' },
  { name: 'Zapier', slug: 'zapier', color: 'FF4F00' }];

  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 SEO SERVICES</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>Native integrations</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>
      </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'
              }}>
                {/* Header — always visible, clickable */}
                <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>
                {/* Expanded body */}
                <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: 'Backed by a full-service dev shop', body: 'Built and maintained by veteran software engineers, not a pop-up AI consultancy.' },
  { Icon: UAIconStopwatch, title: 'Deploy 10x faster', body: 'AI-assisted development cuts time-to-launch versus traditional cycles.' },
  { Icon: UAIconHex, title: 'Keep your existing tools', body: 'Connect via secure APIs—no rip-and-replace required.' },
  { Icon: UAIconShield, title: 'Enterprise-grade security', body: 'Role-based access, audit logging, private deployments. Your data never trains public models.' }];

  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: 'How long does SEO take to show results?', a: 'Most clients start seeing measurable movement in rankings and organic traffic within 3 to 6 months, with more substantial gains building over 6 to 12 months. Timelines depend on your site\'s current authority, technical health, competitive landscape, and how aggressively content and link building are executed. SEO compounds over time, so early progress typically accelerates rather than plateaus.' },
  { q: 'What\'s the difference between technical SEO and content SEO?', a: ' Technical SEO covers the infrastructure that allows search engines to crawl, index, and understand your site: things like site speed, Core Web Vitals, schema markup, and site architecture. Content SEO focuses on what\'s on the page: keyword targeting, search intent alignment, and the copy itself. Both work together. A technically sound site with weak content won\'t rank, and great content on a slow, poorly structured site won\'t get found.' },
  { q: 'Do you use AI-generated content for SEO?', a: ' We use AI as a research and drafting tool, not a replacement for strategy or editorial oversight. Every piece of content is built around keyword research, search intent, and your brand voice, then reviewed and refined by a person before it goes live. Search engines have gotten better at identifying low-effort, unedited AI content, and it tends to underperform, so our process keeps quality and originality central to what we publish.' },
  { q: 'How do you measure SEO success beyond rankings?', a: ' Rankings are one signal, but we track organic traffic, keyword visibility across your full target list, conversion rate from organic sessions, and how those sessions move through your funnel. We also monitor technical health metrics like crawl errors and indexation coverage, since a ranking that doesn\'t drive qualified traffic or a site that search engines can\'t properly crawl isn\'t delivering real value.' }];

  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 SEO 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
});