/* 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: 'Website Design & Brand Experience', tag: 'Design', lede: 'A conversion-focused design built around your brand and business goals.',
    detail: 'We listen to your goals, brand story, and customer needs, then craft a website design that communicates your value clearly, earns visitor trust, and drives the conversions that move your business forward.',
    bullets: ['Grounded in brand strategy & UX principles ', 'Conversion-mapped page architecture', 'Design system & responsive components'],
    outcome: 'Initial designs in weeks, not months' },
  { Icon: SvcIconDashboard, title: 'Website & App Development', tag: 'Development', lede: 'Design translated into clean, scalable code your team can manage and grow.',
    detail: 'We build websites and applications around your tech stack, your timeline, and your users\' expectations. Performance, accessibility, and long-term maintainability are built into every layer from the start.',
    bullets: ['Custom web & app development', 'Speed, SEO & accessibility standards', 'CMS integration & team handoff'],
    outcome: 'Ships in weeks · Built to scale' },
  { Icon: SvcIconNetwork, title: 'Managed Website Hosting', tag: 'Hosting', lede: 'Fast, secure hosting with a team that monitors and manages it for you.',
    detail: 'Managed hosting on infrastructure built for speed, security, and reliability. We handle the server environment, backups, SSL, and uptime monitoring so your site stays live and your team stays focused.',
    bullets: ['Managed DNS, SSL & backups', '99.9% uptime SLA & monitoring', 'CDN delivery & speed optimization'],
    outcome: '99.9% uptime · Built for speed' },
  { Icon: SvcIconLaptop, title: 'Website Maintenance', tag: 'Maintenance', lede: 'Ongoing updates, fixes, and improvements handled on a consistent schedule.',
    detail: 'A dedicated maintenance plan that keeps your site secure, current, and performing. Content updates, plugin management, bug fixes, and performance checks handled on a regular cadence so nothing falls behind.',
    bullets: ['Content updates & copy edits', 'Plugin updates & security patches', 'Performance & uptime monitoring'],
    outcome: 'Monthly retainer · Fast turnaround' },
  { Icon: SvcIconDoc, title: 'Website Analytics & Tracking', tag: 'Analytics and Tracking', lede: 'Know exactly how visitors find, navigate, and convert on your site.',
    detail: 'We configure analytics and tracking that give your team clear visibility into site performance. From GA4 setup to event tracking and goal configuration, every decision gets grounded in real data.',
    bullets: ['GA4 & Tag Manager configuration', 'Event tracking & conversion goals', 'Custom dashboards & reporting'],
    outcome: 'Data-driven · Always-on visibility' },
  { Icon: SvcIconGear, title: 'Organic Search & SEO Strategy', tag: 'Search Engine Optimization', lede: 'Rankings built on technical precision, quality content, and domain authority.',
    detail: 'An SEO strategy grounded in technical audits, keyword research, and content planning. We optimize what lives on your site and build the authority signals that move you up the rankings and keep you there.',
    bullets: ['Technical SEO & site audits', 'On-page optimization & content', 'Link building & authority signals'],
    outcome: 'Long-term rankings · Traffic growth' }];


  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' }}>
              Website Services
            </h2>
          </div>
          {/*<div className="vea-body-sm vea-reveal" style={{ maxWidth: 340, color: 'rgba(255,255,255,0.6)' }}>Design & Development, Hosting & Maintenance, Analytics & Tracking 

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

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

};

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


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

  const advantages = [
  { Icon: UAIconCode, title: 'Security', body: 'We implement cutting-edge security measures to protect your site from threats, including SSL certificates, firewalls, and regular security audits to keep your data and your users\' information safe.' },
  { Icon: UAIconStopwatch, title: 'Tracking & Analytics', body: 'Our solutions include robust tracking and analytics integrations, providing you with actionable insights into user behavior, conversions, and overall site performance. This helps you make informed decisions to drive continuous improvement.' },
  { Icon: UAIconHex, title: 'ADA Compliance', body: "We ensure that your website is accessible to all users, including those with disabilities, by following the latest ADA guidelines. This not only broadens your audience but also protects your business from potential legal issues." }];

  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 WEBSITE SERVICES</div>
          <h2 className="vea-h2 vea-reveal" style={{ marginTop: 14, color: '#fff', fontSize: "30px" }}>Design, Development and Hosting Solutions Crafted to Meet Your Needs

          </h2>
          <p className="vea-body vea-reveal" style={{ marginTop: 14, color: 'rgba(255,255,255,0.72)' }}>From the ground up, we design and develop websites tailored specifically to your brand’s unique needs and goals.

          </p>
        </div>

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

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

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

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

/* Comparison table */
const ComparisonTable = () => {
  const rows = [
  { topic: 'Reporting cadence', before: 'Manually compiled monthly, often 2–3 weeks stale', after: 'Real-time dashboards, executive summary auto-generated daily' },
  { topic: 'Data entry', before: '10+ hours/wk per ops manager re-keying between systems', after: 'Agentic workflows sync sources every 5 minutes, zero re-keying' },
  { topic: 'Lead routing', before: 'Round-robin in CRM, missed by 24+ hours on weekends', after: 'AI-scored, routed in <60 seconds with full context attached' },
  { topic: 'Forecasting', before: 'Gut-feel + last quarter\u2019s spreadsheet', after: 'Predictive model trained on your data, refreshed weekly' },
  { topic: 'New hire ramp', before: '4–6 weeks to learn the spreadsheet maze', after: 'New hires productive day one—the system is the source of truth' },
  { topic: 'Data security', before: 'Files emailed, shared drives, unknown sprawl', after: 'Role-based access, audit logs, private deployments' }];

  return (
    <section className="vea-section-sm" style={{ background: 'var(--vea-bg-2)' }}>
      <div className="vea-container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 24 }}>
          <div>
            <div className="vea-eyebrow">Before vs. With VEA</div>
            <h2 className="vea-h2 vea-reveal" style={{ marginTop: 10, fontSize: 'clamp(26px, 2.6vw, 36px)' }}>The shift you can measure in week three</h2>
          </div>
        </div>
        <div style={{
          background: '#fff', borderRadius: 'var(--vea-radius-card)',
          border: '1px solid var(--vea-line)', overflow: 'hidden',
          boxShadow: 'var(--vea-shadow-soft)'
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.4fr 1.4fr', background: 'var(--vea-charcoal)', color: '#fff', fontWeight: 800, fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            <div style={{ padding: '20px 24px' }}>Operational area</div>
            <div style={{ padding: '20px 24px', borderLeft: '1px solid rgba(255,255,255,0.08)' }}>Before VEA</div>
            <div style={{ padding: '20px 24px', borderLeft: '1px solid rgba(255,255,255,0.08)', color: 'var(--vea-teal)' }}>With VEA</div>
          </div>
          {rows.map((r, i) =>
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.4fr 1.4fr', borderTop: i === 0 ? 'none' : '1px solid var(--vea-line)' }}>
              <div style={{ padding: '16px 20px', fontWeight: 800, color: 'var(--vea-ink)', fontSize: 14 }}>{r.topic}</div>
              <div style={{ padding: '16px 20px', color: '#7a7a82', borderLeft: '1px solid var(--vea-line)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <span aria-hidden style={{ flex: '0 0 16px', width: 16, height: 16, borderRadius: '50%', background: '#F3D6D6', color: '#C73838', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 800, marginTop: 2 }}>×</span>
                <span style={{ fontSize: 14, lineHeight: 1.45 }}>{r.before}</span>
              </div>
              <div style={{ padding: '16px 20px', color: 'var(--vea-ink)', borderLeft: '1px solid var(--vea-line)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <span aria-hidden style={{ flex: '0 0 16px', width: 16, height: 16, borderRadius: '50%', background: 'rgba(63,191,196,0.18)', color: 'var(--vea-teal-dark)', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 800, marginTop: 2 }}>✓</span>
                <span style={{ fontSize: 14, lineHeight: 1.45 }}>{r.after}</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

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

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

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

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

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

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

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

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

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

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

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

};

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

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

};

/* Unfair Advantage — compact single row */
const UnfairAdvantage = () => {
  const items = [
  { Icon: UAIconCode, title: '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 types of websites do you design and develop?', a: 'We design and develop a wide range of websites, from simple landing pages to complex e-commerce platforms. Our services are tailored to fit your business needs, ensuring a fully customized and user-friendly experience.' },
  { q: 'Do you offer website maintenance and support?', a: 'Yes, we offer ongoing website maintenance and support packages. These services include security updates, performance optimization, content updates, and troubleshooting to ensure your website stays up-to-date and functional.' },
  { q: 'Do you provide SEO services for websites?', a: 'Yes, all of our websites are built with SEO best practices in mind. We also offer advanced SEO services, including keyword research, on-page optimization, and content strategy, to help improve your website’s visibility in search engines.' },
  { q: 'How long does it take to build a website?', a: 'Project timelines depend on the scope and complexity of the website. A simple landing page typically takes 1-2 weeks, while a standard business website may take 3-6 weeks. More complex projects, such as e-commerce or custom functionality, can take 6-10+ weeks. Timelines also depend on content readiness, feedback cycles, and required integrations. A clear schedule is provided at the start of every project.' },
  { q: 'Can you help improve my existing website?', a: 'Absolutely. Whether you need a full redesign or minor improvements, we can optimize your current site for better performance, user experience, and SEO. Our team will evaluate your site and suggest the best path forward.' },
  { q: 'How much does it cost to build a website?', a: 'Website costs vary based on the project’s size, features, and complexity. We’ll work with you to create a customized plan that fits your budget. After a consultation, we can provide a detailed quote outlining all the costs involved.' }];

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

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

};

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

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

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

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

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

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

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

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

  }

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

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

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

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

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

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

};

const FinalCTA = () =>
<section id="get-started" style={{ background: 'var(--vea-charcoal)', position: 'relative', overflow: 'hidden' }}>
    <div className="vea-container vea-contact-container" style={{ padding: '80px 32px', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(420px, 520px)', alignItems: 'center', gap: 56, position: 'relative', zIndex: 1 }}>
      <div style={{ maxWidth: 560 }}>
        <div className="vea-eyebrow" style={{ color: 'var(--vea-teal)', marginBottom: 14 }}>Get Started</div>
        <h2 className="vea-h2" style={{ color: '#fff', fontSize: "35.032px" }}>Ready to drive forward your website’s design?</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 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 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
});