/* 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: 'AI Discovery & Adoption Assessment', tag: 'Audit', lede: 'A prioritized roadmap for how your teams can embed AI solutions.',
    detail: 'We listen to you describe the challenges and barriers facing your organization, and then produce a methodology for how your team can learn, adopt, and utilize AI to drive efficiency and organizational change.',
    bullets: ['Backed by our established VEA methodology', 'ROI-ranked automation roadmap', 'Reference architecture & integration map'],
    outcome: 'Roadmap in 2 weeks · ROI ranked' },
  { Icon: SvcIconDashboard, title: 'Internal Ops Dashboards', tag: 'Visibility', lede: 'QuickBooks, Jira, HR and CRM unified into one live workspace.',
    detail: 'A single Company Performance dashboard with auto-generated executive summaries, drill-down by team, and threshold-based alerts so the leadership team stops chasing month-end.',
    bullets: ['Real-time KPI cockpit', 'Daily & weekly auto-summaries', 'Role-based access controls'],
    outcome: 'Single source of truth · Daily summary' },
  { Icon: SvcIconNetwork, title: 'Marketing & Revenue Intelligence', tag: 'Growth', lede: 'GA4, Search Console and CRM feeding predictive forecasting.',
    detail: 'Closed-loop attribution across paid, organic, and CRM. Predictive pipeline forecasts and anomaly detection on cost-per-lead, ranking volatility, and conversion drift.',
    bullets: ['Closed-loop ROI by channel', 'Pipeline & revenue forecasting', 'Anomaly alerts on key metrics'],
    outcome: 'Closed-loop ROI · Anomaly alerts' },
  { Icon: SvcIconLaptop, title: 'AI Automation Builds', tag: 'Throughput', lede: 'Agentic workflows replace manual data entry and handoffs.',
    detail: 'Production agents that read your systems, take action, and log everything. Lead routing, ticket triage, document generation, and cross-platform sync — built on top of the tools you already pay for.',
    bullets: ['Lead routing & enrichment', 'Document & report generation', 'Cross-platform real-time sync'],
    outcome: 'Hours saved per week · Real-time sync' },
  { Icon: SvcIconDoc, title: 'AI Content & SEO Operations', tag: 'Marketing', lede: 'Keyword clustering, drafting and competitive analysis at scale.',
    detail: 'AI-assisted content production with a non-negotiable human review and QA stage. Brand-voice tuning, internal linking automation, and competitive gap analysis baked into the workflow.',
    bullets: ['Topic & keyword cluster planning', 'Brand-voice drafting + human QA', 'Competitive gap analysis'],
    outcome: 'Human-reviewed · Brand-safe' },
  { Icon: SvcIconGear, title: 'Industry-Specific Automation', tag: 'Vertical', lede: 'PDF blueprints, takeoffs, dispatch — built for your trade.',
    detail: 'Vertical workflows trained on your domain. Construction takeoff engines, HVAC dispatch optimizers, agency reporting suites, clinic intake — owned, maintained, and tuned to your data.',
    bullets: ['Domain-trained models', 'API-native integrations', 'You own the IP outright'],
    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' }}>
              AI &amp; Automation Services
            </h2>
          </div>
          <div className="vea-body-sm vea-reveal" style={{ maxWidth: 340, color: 'rgba(255,255,255,0.6)' }}>Our engagements combine begin with discovery, and then utilize us to build custom solutions that align your systems, data, and people. 

          </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 AI 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: '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 10× faster to drive results now', body: 'Internal use of AI-assisted development cuts time-to-launch versus traditional cycles.' },
  { Icon: UAIconHex, title: 'Keep existing tools, but let them sync', body: "We'll connect your ecosystem via secure APIs—no rip-and-replace required." },
  { Icon: UAIconShield, title: 'Enterprise-grade security from day 1', body: "Role-based access, audit logging, and private deployments. Your data never isn't public." }];

  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 AI SOLUTIONS</div>
          <h2 className="vea-h2 vea-reveal" style={{ marginTop: 14, color: '#fff', fontSize: "30px" }}>A decade plus of technology focused solutions that are ALWAYS designed to drive business value.

          </h2>
          <p className="vea-body vea-reveal" style={{ marginTop: 14, color: 'rgba(255,255,255,0.72)' }}>A veteran engineering team, an integration-first architecture, and native connections to the platforms your team lives in every day.

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

        <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'
              }}>
                {/* 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 }}>Operators who stopped fighting their stack</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: 'What happens after the project is built? Do you maintain it?', a: 'Yes. Technology breaks and APIs update. Because we are a full-service development agency, we act as your ongoing technical partner to maintain server health, update API connections, and continuously refine your workflows so your ecosystem never goes out of date.' },
  { q: 'How quickly can we see a return on our investment?', a: 'Most clients see measurable ROI inside 90 days. Our discovery sprint surfaces the top 3 highest-leverage automations first, so the first MVP we ship is the one that pays for the engagement.' },
  { q: 'What data do we need to provide to get started?', a: 'Read-only access to your core systems (CRM, accounting, ticketing) and a 60-minute kick-off with one operations leader. We handle the rest of the discovery asynchronously to respect your team\u2019s time.' },
  { q: 'Who owns the Intellectual Property (IP) once it\u2019s built?', a: 'You do. Outright. Code, models, prompts, dashboards, integrations\u2014everything we build is delivered into your repos and your cloud accounts. No platform lock-in, no per-seat AI tax.' },
  { q: 'Will we have to rip out and replace our current software stack?', a: 'No. Our entire architecture is integration-first. We orchestrate the tools you already pay for. If a replacement makes sense, we\u2019ll say so during discovery and you decide.' },
  { q: 'Is our data used to train public AI models?', a: 'Never. We deploy on private infrastructure with role-based access, audit logging, and zero-retention configurations on the model providers we work with.' }];

  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 overcome your operational frustrations and start managing growth?</h2>
        <p className="vea-body" style={{ color: 'rgba(255,255,255,0.75)', marginTop: 18, marginBottom: 28 }}>Tell us where your operations are leaking time and money. We'll come back within one business day to being a custom tailored AI Discovery Sprint.

      </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 software 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
});