// Mid-page sections: Process, Featured Work, Stats, Testimonials.

const { Container: MCont, Section: MSect, Pill: MPill, SectionHeader: MHeader,
  Btn: MBtn, Avatar: MAvatar, Icon: MIcon, GlowCard: MCard, Hairline: MHair } = window;

// ─── Process — minimal editorial list ───────────────────────
function Process() {
  const steps = [
  { n: '01', t: 'Diagnostics', d: '1–2 weeks',
    body: 'We sit with your team, study the actual workflow, and quantify the cost of the current bottleneck. You receive a written diagnostic: what\'s broken, what it\'s costing you, and what\'s worth automating first.' },
  { n: '02', t: 'Design', d: '1–2 weeks',
    body: 'We propose a system: the data we need, the model we\'ll build, the integrations involved, the KPIs we\'ll be measured against. You see the full plan, fixed price and realistic timeline before signing anything.' },
  { n: '03', t: 'Build & Pilot', d: '4–10 weeks',
    body: 'We build in short cycles, demo every two weeks, and run the system in parallel with your current process before any switchover. You verify the ROI on your own data — not on a presentation.' },
  { n: '04', t: 'Operate & Improve', d: 'Ongoing',
    body: 'Once live, we keep the system running — monitored, maintained, and continuously improved. ML systems get sharper as more of your data flows through them, and we make sure yours stays running.' }];

  window.useLang();
  return (
    <MSect id="process">
      <MCont>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'flex-end', marginBottom: 72 }}>
          <MHeader
            eyebrow={window.t('[ 03 · PROCESS ]')}
            title={<>{window.t('A')} <span style={{ color: '#4D8BFF' }}>{window.t('four-stage')}</span> {window.t('engagement.')}</>} />

          <p style={{ fontSize: 15.5, color: 'rgba(255,255,255,.55)', lineHeight: 1.6, margin: 0 }}>
            {window.t('No surprises, no scope creep, no quarter-long discovery phases. Most engagements ship a working pilot inside three months.')}
            <span style={{ display: 'block', marginTop: 16, fontFamily: 'var(--mono)', fontSize: 12, color: '#9FBFFF', letterSpacing: 0.4 }}>{window.t('// Avg time-to-production · 9.4 weeks')}</span>
          </p>
        </div>

        <div className="process-rows" style={{ borderTop: '1px solid var(--line)' }}>
          {steps.map((s) =>
          <ProcessRow key={s.n} step={s} />
          )}
        </div>
      </MCont>
    </MSect>);

}

function ProcessRow({ step }) {
  window.useLang();
  return (
    <div className="process-row" style={{
      display: 'grid', gridTemplateColumns: '120px 1fr 1.6fr 100px',
      gap: 40, alignItems: 'start',
      padding: '40px 8px',
      borderBottom: '1px solid var(--line)',
      cursor: 'default'
    }}>
      <span className="pr-edge" aria-hidden="true" />
      <div className="pr-num" style={{ fontFamily: 'var(--mono)', fontSize: 56, fontWeight: 500, color: 'rgba(255,255,255,.18)', letterSpacing: -1, lineHeight: 1 }}>
        {step.n}
      </div>
      <h3 className="pr-title" style={{ fontSize: 30, fontWeight: 500, letterSpacing: -0.7, lineHeight: 1.1, margin: 0, color: '#fff' }}>
        {window.t(step.t)}
      </h3>
      <p className="pr-body" style={{ fontSize: 15.5, color: 'rgba(255,255,255,.62)', lineHeight: 1.55, margin: 0, maxWidth: 540 }}>
        {window.t(step.body)}
      </p>
      <div style={{ textAlign: 'right', paddingTop: 4 }}>
        <span className="pr-dur" style={{ fontFamily: 'var(--mono)', fontSize: 12, color: '#9FBFFF', letterSpacing: 0.4, whiteSpace: 'nowrap' }}>
          {window.t(step.d)}
        </span>
      </div>
    </div>);

}

// ─── Selected Work — minimal editorial list with hover preview ──
function Work() {
  const cases = [
  { n: '001', client: 'NORDLY', industry: 'Fintech', title: 'Autonomous billing reconciliation', metric: '87% manual saved', year: '2026', vis: 'invoice', gradient: 'linear-gradient(135deg, #1E6BFF 0%, #4D8BFF 60%, #082F86 100%)' },
  { n: '002', client: 'KOENIG·CO', industry: 'Logistics', title: 'Real-time supply chain BI · 240 warehouses', metric: '6 wk to ship', year: '2025', vis: 'map', gradient: 'linear-gradient(135deg, #4DD3FF 0%, #1E6BFF 60%, #082F86 100%)' },
  { n: '003', client: 'AXIS LABS', industry: 'B2B SaaS', title: 'ML forecasting agent embedded in planning', metric: '$12M / yr', year: '2025', vis: 'forecast', gradient: 'linear-gradient(135deg, #B488FF 0%, #1E6BFF 50%, #082F86 100%)' },
  { n: '004', client: 'ENVOY/FI', industry: 'Fintech', title: 'KYB onboarding automated end-to-end', metric: '3.2× faster', year: '2024', vis: 'invoice', gradient: 'linear-gradient(135deg, #52E1A7 0%, #1E6BFF 60%, #082F86 100%)' }];


  return (
    <MSect id="work">
      <MCont>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 72 }}>
          <MHeader
            eyebrow="[ 04 · SELECTED WORK ]"
            title="Things we&apos;ve shipped into production." />
          
          <MBtn variant="secondary" size="md" icon>See all case studies</MBtn>
        </div>

        <div className="work-rows" style={{ borderTop: '1px solid var(--line)' }}>
          {cases.map((c) => <WorkRow key={c.n} c={c} />)}
        </div>
      </MCont>
    </MSect>);

}

function WorkRow({ c }) {
  return (
    <a href="#" className="work-row" style={{
      display: 'grid', gridTemplateColumns: '90px 1fr 2fr 140px 80px 40px',
      gap: 32, alignItems: 'center',
      padding: '32px 8px',
      borderBottom: '1px solid var(--line)',
      transition: 'background .25s, padding .25s',
      color: '#fff', textDecoration: 'none',
      position: 'relative'
    }}>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'rgba(255,255,255,.4)', letterSpacing: 0.5 }}>{c.n}</div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        {/* Preview swatch — small gradient tile that grows on hover */}
        <div className="work-swatch" style={{
          width: 40, height: 40, borderRadius: 8,
          background: c.gradient, position: 'relative', overflow: 'hidden',
          transition: 'width .35s cubic-bezier(.2,.7,.3,1), height .35s cubic-bezier(.2,.7,.3,1)',
          flexShrink: 0
        }}>
          <WorkVisual kind={c.vis} compact />
        </div>
        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 14, fontWeight: 600, color: '#fff', letterSpacing: 0.8 }}>{c.client}</div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(255,255,255,.45)', letterSpacing: 0.5, marginTop: 3 }}>{c.industry}</div>
        </div>
      </div>

      <div style={{ fontSize: 19, fontWeight: 500, letterSpacing: -0.4, color: 'rgba(255,255,255,.85)', lineHeight: 1.3 }}>
        {c.title}
      </div>

      <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: '#9FBFFF', letterSpacing: 0.4, textAlign: 'right' }}>
        {c.metric}
      </div>

      <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'rgba(255,255,255,.45)', letterSpacing: 0.4, textAlign: 'right' }}>
        {c.year}
      </div>

      <div className="work-arrow" style={{
        color: 'rgba(255,255,255,.4)', justifySelf: 'end',
        transition: 'color .25s, transform .25s'
      }}>
        <MIcon name="arrow" size={18} stroke={1.8} />
      </div>
    </a>);

}

// Decorative SVG visuals — also work compact inside the small swatch
function WorkVisual({ kind, compact }) {
  if (kind === 'invoice') {
    return (
      <svg viewBox="0 0 600 320" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {Array.from({ length: 14 }, (_, i) =>
        <rect key={i} x={40 + i * 36} y={70 + Math.sin(i) * 18} width={26} height={180 - Math.sin(i) * 30}
        fill="rgba(255,255,255,.85)" opacity={0.15 + i / 28} rx={3} />
        )}
        {!compact &&
        <path d="M40 200 L 80 180 L 120 190 L 160 160 L 200 170 L 240 130 L 280 145 L 320 105 L 360 115 L 400 80 L 440 95 L 480 60 L 520 75 L 560 40"
        fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" />
        }
      </svg>);

  }
  if (kind === 'map') {
    return (
      <svg viewBox="0 0 600 320" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {Array.from({ length: 80 }, (_, i) => {
          const x = i * 73 % 600,y = i * 41 % 280 + 20;
          const r = 1.5 + i % 4;
          return <circle key={i} cx={x} cy={y} r={r} fill="#fff" opacity={0.3 + i % 5 / 7} />;
        })}
        <circle cx="300" cy="160" r="12" fill="#fff" />
        <circle cx="300" cy="160" r="22" fill="none" stroke="#fff" strokeWidth="1.5" opacity="0.6" />
      </svg>);

  }
  if (kind === 'forecast') {
    return (
      <svg viewBox="0 0 600 320" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {Array.from({ length: 14 }, (_, i) => {
          const x = 30 + i * 40;
          const h = 60 + Math.abs(Math.sin(i * 0.7)) * 140;
          return <rect key={i} x={x} y={260 - h} width={22} height={h} fill="rgba(255,255,255,.7)" opacity={0.18 + i / 28} rx={2} />;
        })}
        <path d="M30 200 Q 200 100 380 160 T 580 80" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" />
      </svg>);

  }
  return null;
}

// ─── Stats row ───────────────────────────────────────────────
function Stats() {
  const stats = [
  ['42', 'Custom systems delivered'],
  ['98%', 'Engagements reaching production'],
  ['11.4y', 'Average engineer tenure'],
  ['$48M', 'Client operating cost saved']];

  return (
    <MSect style={{ padding: '40px 0 60px' }}>
      <MCont>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          border: '1px solid var(--line)', borderRadius: 18,
          background: 'linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0))',
          overflow: 'hidden'
        }}>
          {stats.map(([n, l], i) =>
          <div key={i} style={{ padding: '36px 28px', borderLeft: i ? '1px solid var(--line)' : 'none' }}>
              <div style={{ fontSize: 56, fontWeight: 600, letterSpacing: -2, lineHeight: 1, color: '#fff' }}>
                <span style={{
                background: 'linear-gradient(180deg, #fff 30%, #9FBFFF 100%)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'
              }}>{n}</span>
              </div>
              <div style={{ marginTop: 14, fontSize: 14, color: 'rgba(255,255,255,.55)', lineHeight: 1.4 }}>{l}</div>
            </div>
          )}
        </div>
      </MCont>
    </MSect>);

}

// ─── Testimonials ────────────────────────────────────────────
function Testimonials() {
  const quotes = [
  {
    q: 'They shipped in six weeks what our team had budgeted six months for. We&apos;ve onboarded them as embedded engineers since.',
    n: 'Elin Vega', r: 'VP Data, Koenig·Co', i: 'EV', p: 1
  },
  {
    q: 'The diagnose sprint alone was worth the engagement. We walked out with a roadmap our board agreed with.',
    n: 'Marcus Renn', r: 'CTO, Nordly', i: 'MR', p: 0
  },
  {
    q: 'They take ownership in a way agencies don\'t. By month two, they were running on-call with our staff engineers.',
    n: 'Aisha Khoury', r: 'Head of Platform, Axis Labs', i: 'AK', p: 2
  }];

  return (
    <MSect id="testimonials">
      <MCont>
        <MHeader
          eyebrow="[ 05 · WHAT OPERATORS SAY ]"
          title="We get hired by the same teams twice."
          align="center"
          max={780} />
        

        <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {quotes.map((q, i) =>
          <MCard key={i} hoverable={false} style={{ padding: 32, display: 'flex', flexDirection: 'column' }}>
              <MIcon name="spark" size={22} color="var(--blue-bright)" />
              <p style={{ fontSize: 17, color: 'rgba(255,255,255,.85)', lineHeight: 1.45, margin: '22px 0 24px', letterSpacing: -0.2 }}
            dangerouslySetInnerHTML={{ __html: '"' + q.q + '"' }} />
              <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 14, paddingTop: 22, borderTop: '1px solid var(--line)' }}>
                <MAvatar initials={q.i} palette={q.p} size={42} />
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500, color: '#fff' }}>{q.n}</div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(255,255,255,.55)', letterSpacing: 0.5, marginTop: 2 }}>{q.r}</div>
                </div>
              </div>
            </MCard>
          )}
        </div>
      </MCont>
    </MSect>);

}

Object.assign(window, { Process, Work, Stats, Testimonials });