// ============================================================
// BVS — AI & Systems (Tech Solutions)
// ============================================================
function PitchBlock() {
  const ref = useReveal();
  const services = [
    ['AI & Voice Agents', 'WhatsApp, web, voice and email agents that qualify leads, schedule and route — with policy-aligned human hand-off.'],
    ['Operating Systems', 'Ground-up TMS, WMS, HRMS and accounting software — audit-ready, tenant-aware, built to your workflow.'],
    ['Internal Tools & Dashboards', 'Real-time operational dashboards and decision engines built around how your team actually works.'],
    ['CRM & Automation', 'Centralize records, pipeline and reporting on GoHighLevel, HubSpot and more — with AR recovery and intake AI.'],
    ['Document Intake AI', 'Auto-classification, compliance audit trail and full workflow tracking for high-volume document ops.'],
    ['Compliance-Ready Data', 'HIPAA-aligned, financial and government-grade data architecture with complete change history.'],
  ];
  return (
    <section ref={ref} style={{ background: '#fff', padding: '92px 0 56px' }}>
      <div className="wrap">
        <div className="svc-head" style={{ display: 'grid', gridTemplateColumns: '1fr 1.7fr', gap: 64, alignItems: 'start' }}>
          <div className="reveal sticky-col">
            <Eyebrow>what we build</Eyebrow>
            <h2 className="h-disp" style={{ fontSize: 'clamp(26px,2.8vw,42px)', marginTop: 16 }}>Building AI growth solutions <span style={{ color: BLUE }}>&amp; systems</span> for your company.</h2>
            <p style={{ fontSize: 16.5, lineHeight: 1.55, color: 'rgba(10,10,10,0.62)', marginTop: 20, fontWeight: 500, maxWidth: 380 }}>
              From basic to complex automations to entirely new digital infrastructure — we deliver end-to-end. The result? <strong style={{ color: INK }}>Lower costs. Higher output. <span style={{ color: BLUE }}>Faster growth.</span></strong>
            </p>
          </div>
          <div className="svc-cards" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
            {services.map((it, i) => (
              <div key={i} className="reveal" style={{ ...delay(i % 2), padding: '28px 30px 30px 0', borderTop: '1px solid var(--bvs-line)' }}>
                <div className="mono" style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', color: BLUE, marginBottom: 14 }}>{String(i + 1).padStart(2, '0')}</div>
                <div className="h-disp" style={{ fontSize: 21, marginBottom: 10 }}>{it[0]}</div>
                <div style={{ fontSize: 14.5, lineHeight: 1.6, color: 'rgba(10,10,10,0.6)', fontWeight: 500 }}>{it[1]}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- track record: 8 industries + stats ----
function TrackRecord() {
  const ref = useReveal();
  const sectors = ['Home Services', 'Healthcare', 'Dentistry', 'Logistics', 'Financial Services'];
  const stats = [['5+', 'AI & SaaS systems shipped'], ['3-phase', 'delivery on every engagement'], ['100%', 'HIPAA-aligned data architecture'], ['24/7', 'AI communication coverage']];
  return (
    <section ref={ref} className="dotgrid-d" style={{ background: BLUE, color: '#fff', padding: '104px 0' }}>
      <div className="wrap">
        <Eyebrow className="reveal" onBlue style={{ color: 'rgba(255,255,255,0.6)' }}>what we have done</Eyebrow>
        <h2 className="reveal h-disp" style={{ color: '#fff', fontSize: 'clamp(25px,2.6vw,38px)', marginTop: 16, maxWidth: 1100, ...delay(1) }}>
          Shipped systems across <span style={{ color: '#fff', boxShadow: 'inset 0 -0.12em 0 ' + GREEN }}>five</span> industries.
        </h2>
        <div className="reveal" style={{ display: 'flex', gap: 9, flexWrap: 'wrap', maxWidth: 920, marginTop: 28, ...delay(2) }}>
          {sectors.map((s) => <Chip key={s} tone="onblue">{s}</Chip>)}
        </div>
        <div className="trk-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 36, marginTop: 60 }}>
          {stats.map(([n, l], i) => (
            <div key={n} className="reveal" style={{ ...delay(i), borderTop: '1px solid rgba(255,255,255,0.22)', paddingTop: 18 }}>
              <div className="h-disp" style={{ color: i === 2 ? GREEN : '#fff', fontSize: 'clamp(34px,3.6vw,56px)' }}>{n}</div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.72)', marginTop: 12, lineHeight: 1.4, fontWeight: 500 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- partners ----
const PARTNERS = [
  { title: 'LicenseOS', logo: null, sector: 'AI agency platform', stat: '20+', statLabel: 'clients fulfilled' },
];

function AiPartners({ onNav }) {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ background: PAPER, padding: '74px 0' }}>
      <div className="wrap">
        <Eyebrow className="reveal">partners</Eyebrow>
        <h2 className="reveal h-disp" style={{ fontSize: 'clamp(25px,2.5vw,37px)', marginTop: 14, ...delay(1) }}>We build alongside <span style={{ color: BLUE }}>specialists</span>.</h2>
        <p className="reveal" style={{ fontSize: 17, lineHeight: 1.5, color: 'rgba(10,10,10,0.6)', maxWidth: 700, marginTop: 14, fontWeight: 500, ...delay(2) }}>
          A network of trusted partners extends what we deliver across AI, software and growth.
        </p>
        <div className="part-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18, marginTop: 40 }}>
          {PARTNERS.map((p, k) => (
            <div key={p.title} className="reveal card" style={{ ...delay(k), padding: '32px 30px', display: 'flex', flexDirection: 'column', gap: 18, minHeight: 168, justifyContent: 'space-between' }}>
              <div style={{ height: 46, display: 'flex', alignItems: 'center' }}>
                {p.logo
                  ? <img src={res('assets/bvs/' + p.logo)} alt={p.title} style={{ maxHeight: 46, maxWidth: '70%', objectFit: 'contain', display: 'block' }} />
                  : <div className="h-disp" style={{ fontSize: 'clamp(24px,2.4vw,32px)' }}>{p.title}<span style={{ color: BLUE }}>.</span></div>}
              </div>
              <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12 }}>
                <div className="mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(10,10,10,0.45)' }}>{p.sector}</div>
                {p.stat && (
                  <div style={{ textAlign: 'right', flex: 'none' }}>
                    <span className="h-disp" style={{ fontSize: 'clamp(22px,2vw,28px)', color: BLUE }}>{p.stat}</span>
                    <span className="mono" style={{ display: 'block', fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(10,10,10,0.45)', marginTop: 2 }}>{p.statLabel}</span>
                  </div>
                )}
              </div>
            </div>
          ))}
          {/* featured case study callout → BLEUX */}
          <div className="reveal card" onClick={() => { onNav('case-studies'); setTimeout(() => window.dispatchEvent(new CustomEvent('open-case', { detail: 'BLEUX' })), 520); }} style={{ ...delay(1), gridColumn: 'span 2', padding: '28px 30px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, cursor: 'pointer', background: BLUE, color: '#fff', border: 'none' }}>
            <div>
              <div className="mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', marginBottom: 10 }}>featured case study</div>
              <div className="h-disp" style={{ color: '#fff', fontSize: 'clamp(20px,2.2vw,30px)', lineHeight: 1.1 }}>BLEUX — a custom logistics TMS, built from scratch.</div>
              <p style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.78)', marginTop: 8, maxWidth: 460, fontWeight: 500, lineHeight: 1.5 }}>Built alongside a Chicago logistics operator — from a manual spreadsheet to a live load board.</p>
            </div>
            <span className="btn btn-white" style={{ flex: 'none', pointerEvents: 'none' }}>View case <span className="arr">→</span></span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Solutions({ onNav }) {
  return (
    <div className="page-enter">
      <SolutionsHero onNav={onNav} />
      <ServicesGrid />
      <WhyTrusted />
      <Integrations />
      <WhereWeWork />
      <CaseStudiesSection side="AI" onNav={onNav} bg={PAPER} />
      <BeforeAfter />
      <AiPartners onNav={onNav} />
      <FAQ />
      <TeamSection side="tech" />
      <ContactSection defaultSide="solutions" />
    </div>
  );
}

Object.assign(window, { Solutions, AiPartners, PARTNERS });