/* 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: 'Design Systems That Scale', tag: 'Brand & Visual Foundations', lede: 'A visual identity built to hold up across every channel and touchpoint.',
    detail: 'We audit your current brand assets and build the visual foundation your business runs on. From color, typography, and logo usage to brand guidelines and asset libraries, every element is designed for consistency and recognition.',
    bullets: ['Brand audits & visual identity strategy', 'Logo design & brand guideline development', 'Asset libraries & style guide creation'],
    outcome: 'Discovery-focused · Identity driven' },
  { Icon: SvcIconDashboard, title: 'Logos & Identity That Stick', tag: 'Logo & Brand Identity Design', lede: 'Logo and identity design built to match your audience and hold recognition.',
    detail: 'We design logos and identity systems around how your audience actually sees and remembers your brand. From concept development and typography to color systems and usage rules, your identity is built to be recognized and to convert attention into trust.',
    bullets: ['Logo design & concept development', 'Brand identity systems & typography', 'Style guides & usage documentation'],
    outcome: 'Recognition-first · Audience matched' },
  { Icon: SvcIconNetwork, title: 'Websites Designed to Convert', tag: 'Website & Digital Design', lede: 'Website design built to hold attention and move visitors toward action.',
    detail: 'We design websites and digital experiences across every page and template your business needs. Using research-driven layouts and visual hierarchy, pages are designed to keep users engaged and guide them toward your goals.',
    bullets: ['Website design & UI/UX', 'Landing page & template design', 'Conversion-focused layout & visual hierarchy'],
    outcome: 'Built for engagement · Structured for conversion' },
  { Icon: SvcIconLaptop, title: 'Creative Across Every Channel and Location', tag: 'Multi-Channel & Multi-Location Creative', lede: 'Design assets delivered consistently across every channel and location you serve.',
    detail: 'We plan and produce creative across print, digital, and location-specific materials. Whether supporting a single brand or managing assets across hundreds of locations, campaigns are structured to stay consistent wherever your brand shows up.',
    bullets: ['Multi-location asset production & templating', 'Print & digital collateral design', 'Brand consistency management across channels'],
    outcome: 'Full-reach design · Channel agnostic' },
  { Icon: SvcIconDoc, title: 'Ad Creative Built to Perform', tag: 'Display & Digital Ad Creative', lede: 'Visual assets designed to capture attention and earn the click.',
    detail: 'We produce the display ads, image creative, and digital assets your marketing strategy needs to perform. Every asset is built to align with your brand, speak to your audience, and fit the platform it\'s running on. Creative is tested, refined, and optimized as performance data comes in.',
    bullets: ['Display & image ad design', 'Social media & digital ad creative', 'Creative testing & performance iteration'],
    outcome: 'Attention-driven · Performance optimized' },
  { Icon: SvcIconGear, title: 'Creative Performance You Can Measure', tag: 'Creative Performance & Analytics', lede: 'The measurement foundation your design investment depends on.',
    detail: 'We configure the tracking and reporting that gives you a clear picture of what your creative is actually driving. From ad performance and engagement metrics to custom dashboards and asset benchmarking, you always know which designs are working.',
    bullets: ['Creative performance tracking & reporting', 'Engagement & conversion attribution', 'Custom dashboards & asset benchmarking'],
    outcome: 'Measurement-led · Insight focused' }];


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

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

/* FAQ accordion */
const FAQ = () => {
  const items = [
  { q: 'How do you measure the success of design work?', a: 'We treat creative like any other business investment. Before a project starts, we define what success looks like, whether that\'s engagement rate, conversion rate, brand recall, or lead volume. Every design decision gets tied back to that goal, and we report on performance so you can see how the creative is actually performing, not just how it looks.' },
  { q: 'Will new branding or design actually impact our bottom line?', a: 'Good design influences how quickly people trust your brand, how long they stay on your site, and how likely they are to convert. We build every asset with your business goals in mind, from logo and identity work to website design and ad creative, so the visual investment supports growth rather than sitting separate from it.' },
  { q: 'How do you make sure design stays consistent across our website, ads, and marketing materials?', a: 'We start every engagement by building a style guide and asset library that defines your colors, typography, logo usage, and design standards. That foundation becomes the reference point for every asset we produce, so your brand looks and feels the same whether someone sees it on your website, in a display ad, or on a location page.' },
  { q: 'How involved do we need to be in the creative process?', a: 'As involved as you want to be. We run structured working sessions early on to align on strategy and direction, then handle production and iteration on our end. You\'ll review and approve key milestones along the way, but the day-to-day design work is on us.' }];

  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 creative and branding needs help. 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
});