const AUDIT_AMBER_M = '#D4A24C';
const AUDIT_GREEN_M = '#7FA88A';

const AuditFinancialMobile = () => {
  // Audit schedule — 4 sequential phases. Bar uses midpoint weeks for
  // proportional widths so the longest/shortest phases read honestly.
  // Pre-Approval 4–6 (mid 5) · Data 2 · Onsite 1 · Report 2–4 (mid 3) = 11 wks
  const PHASES = [
    { key: 'pre',     label: 'Incentive pre-approval', range: '4–6',  unit: 'wks', mid: 5, note: 'Programme application, baseline scoping, and utility pre-approval prior to onsite work.' },
    { key: 'data',    label: 'Data collection',        range: '2',    unit: 'wks', mid: 2, note: 'Utility bills, equipment inventories, BMS logs and submeter data gathered remotely.' },
    { key: 'onsite',  label: 'Onsite assessment',      range: '1',    unit: 'wk',  mid: 1, note: 'Site walkthrough, measurements and operator interviews — no shutdowns required.' },
    { key: 'report',  label: 'Report preparation',     range: '2–4',  unit: 'wks', mid: 3, note: 'ECMs modelled, savings calculated, and a ranked recommendations report delivered.' },
  ];
  const TOTAL_MID = PHASES.reduce((s, p) => s + p.mid, 0); // 11
  // Cumulative start positions in % for tick marks
  let acc = 0;
  const cumulative = PHASES.map((p) => {
    const start = acc;
    acc += (p.mid / TOTAL_MID) * 100;
    return { ...p, startPct: start, widthPct: (p.mid / TOTAL_MID) * 100 };
  });
  const TICKS = [
    { label: 'WEEK 0',  pos: 0 },
    { label: 'WK 5',    pos: cumulative[1].startPct },
    { label: 'WK 7',    pos: cumulative[2].startPct },
    { label: 'WK 8',    pos: cumulative[3].startPct },
    { label: 'WK 11',   pos: 100 }
  ];

  return (
    <>
    {/* ============================================================
        DESKTOP / TABLET (≥ 900px) — unchanged editorial dashboard
       ============================================================ */}
    <section className="audit-fin-desktop" style={{ background: 'var(--gi-wise-blue)', color: '#fff', padding: '128px 0', position: 'relative', overflow: 'hidden' }}>
      {/* Faint monogram watermark */}
      <div aria-hidden="true" style={{
        position: 'absolute', right: -160, bottom: -160, opacity: 0.045,
        pointerEvents: 'none', zIndex: 0
      }}>
        <img src={`${window.GI_BASE}assets/logos/monogram-white.svg`} alt="" style={{ width: 620, height: 620 }} />
      </div>

      {/* Sweep strip — animated horizontal line, runs across the top */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: 'rgba(255,255,255,0.06)', overflow: 'hidden', zIndex: 0
      }}>
        <div style={{
          position: 'absolute', top: 0, left: 0, height: 2, width: 220,
          background: `linear-gradient(90deg, transparent, ${AUDIT_AMBER_M} 50%, transparent)`,
          animation: 'audit-charge-sweep 6.5s var(--gi-ease) infinite'
        }} />
      </div>

      <div style={{ position: 'relative', zIndex: 1, maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>

        {/* Header */}
        <div data-gi-reveal style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 96, alignItems: 'end', marginBottom: 96 }}>
          <div>
            <div style={{ marginBottom: 22 }}><Eyebrow onDark>Proof in numbers</Eyebrow></div>
            <h2 style={{ font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em', color: '#fff', margin: 0, textWrap: 'balance' }}>
              A measured schedule.{' '}
              <span style={{ color: AUDIT_GREEN_M }}>Years of savings.</span>
            </h2>
          </div>
          <p style={{ font: '400 16px/26px var(--ff-sans)', color: 'rgba(255,255,255,0.7)', margin: 0, maxWidth: 480, paddingBottom: 6, textWrap: 'pretty' }}>
            From incentive pre-approval to final report — typical engagements run
            nine to thirteen weeks, with no operational disruption to the facility.
          </p>
        </div>

        {/* ============================================================
            TIMELINE — Audit schedule (4 sequential phases)
           ============================================================ */}
        <div data-gi-reveal style={{ marginBottom: 56 }}>
          {/* Tick labels */}
          <div style={{ position: 'relative', height: 28, marginBottom: 6 }}>
            {TICKS.map((t) =>
              <div key={t.label} style={{
                position: 'absolute',
                left: `${t.pos}%`,
                transform: t.pos === 0 ? 'translateX(0)' : t.pos === 100 ? 'translateX(-100%)' : 'translateX(-50%)',
                fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', fontWeight: 500,
                whiteSpace: 'nowrap'
              }}>{t.label}</div>
            )}
          </div>

          {/* Tick marks */}
          <div style={{ position: 'relative', height: 8, marginBottom: 10 }}>
            {TICKS.map((t) =>
              <div key={t.label} aria-hidden="true" style={{
                position: 'absolute',
                left: `${t.pos}%`,
                top: 0,
                width: 1, height: 8,
                background: 'rgba(255,255,255,0.32)'
              }} />
            )}
          </div>

          {/* Gantt bar — four sequential phases, alternating fill treatments */}
          <div style={{
            position: 'relative', height: 84,
            display: 'flex',
            border: '1px solid rgba(255,255,255,0.12)'
          }}>
            {cumulative.map((p, i) => {
              // Phase visual treatments:
              //  0 Pre-approval — amber, diagonal stripe (programme paperwork phase)
              //  1 Data         — amber 70% solid
              //  2 Onsite       — solid amber (active week — highest emphasis)
              //  3 Report       — amber 55%, with subtle outline texture
              const treatments = [
                { background: AUDIT_AMBER_M, backgroundImage: `repeating-linear-gradient(135deg, rgba(15,33,51,0.18) 0 6px, transparent 6px 14px)` },
                { background: 'rgba(212,162,76,0.72)' },
                { background: AUDIT_AMBER_M },
                { background: 'rgba(212,162,76,0.42)' },
              ];
              return (
                <div key={p.key} style={{
                  width: `${p.widthPct}%`,
                  position: 'relative',
                  borderRight: i < cumulative.length - 1 ? '1px solid rgba(15,33,51,0.22)' : 'none',
                  ...treatments[i],
                  display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start',
                  padding: '0 0 12px 14px',
                  overflow: 'hidden'
                }}>
                  <span style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.18em',
                    textTransform: 'uppercase', color: 'var(--gi-deep-ink)', fontWeight: 600,
                    whiteSpace: 'nowrap', opacity: 0.85
                  }}>0{i + 1}</span>
                </div>
              );
            })}
          </div>

          {/* Phase captions — equal 4 columns. Label + numeral only. */}
          <div style={{
            marginTop: 36,
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 0,
            alignItems: 'start'
          }}>
            {cumulative.map((p, i) =>
              <div key={p.key} style={{
                paddingRight: 24,
                paddingLeft: i === 0 ? 0 : 24,
                borderRight: i < cumulative.length - 1 ? '1px solid rgba(255,255,255,0.14)' : 'none',
                minWidth: 0
              }}>
                <div style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
                  textTransform: 'uppercase', color: AUDIT_AMBER_M, fontWeight: 500,
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  marginBottom: 20
                }}>{p.label}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                  <div style={{
                    font: '500 64px/1 var(--ff-sans)', letterSpacing: '-0.030em',
                    color: '#fff', fontFeatureSettings: '"tnum" 1'
                  }}>{p.range}</div>
                  <div style={{
                    font: '400 15px/22px var(--ff-sans)', color: 'rgba(255,255,255,0.7)'
                  }}>{p.unit}</div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Divider */}
        <div style={{ height: 1, background: 'rgba(255,255,255,0.14)', margin: '72px 0 64px' }} />

        {/* ============================================================
            BOTTOM ROW — Average savings range + Incentive range
           ============================================================ */}
        <div data-gi-reveal style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'start'
        }}>
          {/* LEFT — Average site consumption reduction */}
          <div>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', fontWeight: 500,
              marginBottom: 24
            }}>Average savings range</div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 28 }}>
              <div style={{
                font: '500 88px/1 var(--ff-sans)', letterSpacing: '-0.035em',
                color: AUDIT_AMBER_M, fontFeatureSettings: '"tnum" 1'
              }}>5–15%</div>
              <div style={{
                font: '400 18px/24px var(--ff-sans)', color: 'rgba(255,255,255,0.78)'
              }}>typical reduction</div>
            </div>

            {/* Range slider — 5% to 15% on a 0–100% scale */}
            <div style={{ position: 'relative', height: 56 }}>
              <div style={{
                position: 'absolute', top: 22, left: 0, right: 0, height: 4,
                background: 'rgba(255,255,255,0.10)'
              }} />
              <div style={{
                position: 'absolute', top: 22, left: '5%', width: '10%', height: 4,
                background: AUDIT_AMBER_M
              }} />
              <div style={{
                position: 'absolute', top: 12, left: '5%', transform: 'translateX(-50%)',
                width: 24, height: 24, borderRadius: '50%',
                background: 'var(--gi-wise-blue)',
                border: `2px solid ${AUDIT_AMBER_M}`
              }} />
              <div style={{
                position: 'absolute', top: 12, left: '15%', transform: 'translateX(-50%)',
                width: 24, height: 24, borderRadius: '50%',
                background: 'var(--gi-wise-blue)',
                border: `2px solid ${AUDIT_AMBER_M}`
              }} />
              <div style={{
                position: 'absolute', top: 38, left: 0, right: 0, height: 18,
                fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 500
              }}>
                {[
                  { label: '0%', pos: 0 },
                  { label: '25%', pos: 25 },
                  { label: '50%', pos: 50 },
                  { label: '75%', pos: 75 },
                  { label: '100%', pos: 100 }
                ].map((t) =>
                  <span key={t.label} style={{
                    position: 'absolute',
                    left: `${t.pos}%`,
                    transform: t.pos === 0 ? 'translateX(0)' : t.pos === 100 ? 'translateX(-100%)' : 'translateX(-50%)'
                  }}>{t.label}</span>
                )}
              </div>
            </div>
          </div>

          {/* RIGHT — Incentive range */}
          <div>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', fontWeight: 500,
              marginBottom: 24
            }}>Incentive range</div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 28 }}>
              <div style={{
                font: '500 88px/1 var(--ff-sans)', letterSpacing: '-0.035em',
                color: AUDIT_GREEN_M, fontFeatureSettings: '"tnum" 1'
              }}>50–75%</div>
              <div style={{
                font: '400 18px/24px var(--ff-sans)', color: 'rgba(255,255,255,0.78)'
              }}>of project cost covered</div>
            </div>

            {/* Slider track */}
            <div style={{ position: 'relative', height: 56 }}>
              {/* Base track */}
              <div style={{
                position: 'absolute', top: 22, left: 0, right: 0, height: 4,
                background: 'rgba(255,255,255,0.10)'
              }} />
              {/* Active range — 50% to 75% on a 0–100% scale */}
              <div style={{
                position: 'absolute', top: 22, left: '50%', width: '25%', height: 4,
                background: AUDIT_GREEN_M
              }} />
              {/* Left handle */}
              <div style={{
                position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)',
                width: 24, height: 24, borderRadius: '50%',
                background: 'var(--gi-wise-blue)',
                border: `2px solid ${AUDIT_GREEN_M}`
              }} />
              {/* Right handle */}
              <div style={{
                position: 'absolute', top: 12, left: '75%', transform: 'translateX(-50%)',
                width: 24, height: 24, borderRadius: '50%',
                background: 'var(--gi-wise-blue)',
                border: `2px solid ${AUDIT_GREEN_M}`
              }} />
              {/* Scale labels */}
              <div style={{
                position: 'absolute', top: 38, left: 0, right: 0, height: 18,
                fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 500
              }}>
                {[
                  { label: '0%', pos: 0 },
                  { label: '25%', pos: 25 },
                  { label: '50%', pos: 50 },
                  { label: '75%', pos: 75 },
                  { label: '100%', pos: 100 }
                ].map((t) =>
                  <span key={t.label} style={{
                    position: 'absolute',
                    left: `${t.pos}%`,
                    transform: t.pos === 0 ? 'translateX(0)' : t.pos === 100 ? 'translateX(-100%)' : 'translateX(-50%)'
                  }}>{t.label}</span>
                )}
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 64 }}>
          <a href="#" style={{
            font: '500 14px/22px var(--ff-sans)', color: AUDIT_AMBER_M,
            borderBottom: '1px solid currentColor', paddingBottom: 2, display: 'inline-flex', gap: 8
          }}>See the full Canadian incentives guide →</a>
        </div>
      </div>

      {/* keyframes */}
      <style>{`
        @keyframes audit-charge-sweep {
          0%   { transform: translateX(-220px); }
          50%  { transform: translateX(calc(100vw + 220px)); }
          100% { transform: translateX(calc(100vw + 220px)); }
        }
      `}</style>
    </section>

    {/* ============================================================
        MOBILE (< 900px) — purpose-built vertical layout
       ============================================================ */}
    <section className="audit-fin-mobile" aria-label="Proof in numbers">
      {/* Subtle monogram watermark, dialled way back for small screens */}
      <div aria-hidden="true" className="m-fin-watermark">
        <img src={`${window.GI_BASE}assets/logos/monogram-white.svg`} alt="" />
      </div>

      <div className="m-fin-inner">
        {/* Header */}
        <header className="m-fin-head" data-gi-reveal>
          <div className="m-fin-eyebrow"><Eyebrow onDark>Proof in numbers</Eyebrow></div>
          <h2 className="m-fin-title">
            A measured schedule.<br />
            <span style={{ color: AUDIT_GREEN_M }}>Years of savings.</span>
          </h2>
          <p className="m-fin-lede">
            From pre-approval to final report — typical engagements run
            nine to thirteen weeks, with no disruption to the facility.
          </p>
        </header>

        {/* Timeline — stacked phase cards */}
        <div className="m-fin-block">
          <div className="m-fin-blocklabel">
            <span>The schedule</span>
            <span className="m-fin-total">9–13 wks total</span>
          </div>

          <ol className="m-timeline" data-gi-reveal-stagger>
            {cumulative.map((p, i) =>
              <li key={p.key} className="m-phase">
                <div className="m-phase-rail">
                  <span className="m-phase-num">0{i + 1}</span>
                </div>
                <div className="m-phase-card">
                  <div className="m-phase-label">{p.label}</div>
                  <div className="m-phase-dur">
                    <span className="m-phase-range">{p.range}</span>
                    <span className="m-phase-unit">{p.unit}</span>
                  </div>
                  <p className="m-phase-note">{p.note}</p>
                </div>
              </li>
            )}
          </ol>
        </div>

        {/* Proof points — two stacked cards */}
        <div className="m-fin-block">
          <div className="m-fin-blocklabel"><span>What it returns</span></div>

          <div className="m-proofs" data-gi-reveal-stagger>
            <div className="m-proof">
              <div className="m-proof-label">Average savings range</div>
              <div className="m-proof-figure" style={{ color: AUDIT_AMBER_M }}>5–15%</div>
              <div className="m-proof-desc">typical site consumption reduction</div>
              <div className="m-proof-bar" role="img" aria-label="5 to 15 percent on a 0 to 100 percent scale">
                <div className="m-proof-track" />
                <div className="m-proof-fill" style={{ left: '5%', width: '10%', background: AUDIT_AMBER_M }} />
              </div>
              <div className="m-proof-scale"><span>0%</span><span>100%</span></div>
            </div>

            <div className="m-proof">
              <div className="m-proof-label">Incentive range</div>
              <div className="m-proof-figure" style={{ color: AUDIT_GREEN_M }}>50–75%</div>
              <div className="m-proof-desc">of project cost covered by programmes</div>
              <div className="m-proof-bar" role="img" aria-label="50 to 75 percent on a 0 to 100 percent scale">
                <div className="m-proof-track" />
                <div className="m-proof-fill" style={{ left: '50%', width: '25%', background: AUDIT_GREEN_M }} />
              </div>
              <div className="m-proof-scale"><span>0%</span><span>100%</span></div>
            </div>
          </div>
        </div>

        {/* CTA */}
        <a href="#" className="m-fin-cta">See the full Canadian incentives guide →</a>
      </div>
    </section>

    {/* Display toggle + mobile styles */}
    <style>{`
      .audit-fin-mobile { display: none; }
      @media (max-width: 900px) {
        .audit-fin-desktop { display: none; }
        .audit-fin-mobile { display: block; }
      }

      .audit-fin-mobile {
        background: var(--gi-wise-blue);
        color: #fff;
        position: relative;
        overflow: hidden;
        padding: 72px 0 84px;
      }
      .m-fin-watermark {
        position: absolute; right: -150px; bottom: -120px;
        opacity: 0.035; pointer-events: none; z-index: 0;
      }
      .m-fin-watermark img { width: 360px; height: 360px; display: block; }

      .m-fin-inner {
        position: relative; z-index: 1;
        padding: 0 24px;
        max-width: 520px; margin: 0 auto;
      }

      /* Header */
      .m-fin-eyebrow { margin-bottom: 18px; }
      .m-fin-title {
        font: 600 33px/40px var(--ff-sans);
        letter-spacing: -0.022em;
        color: #fff; margin: 0;
        text-wrap: balance;
      }
      .m-fin-lede {
        font: 400 16px/26px var(--ff-sans);
        color: rgba(255,255,255,0.68);
        margin: 20px 0 0;
        text-wrap: pretty;
      }

      /* Block scaffolding */
      .m-fin-block { margin-top: 52px; }
      .m-fin-blocklabel {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 12px;
        font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
        letter-spacing: 0.18em; text-transform: uppercase;
        color: rgba(255,255,255,0.55);
        padding-bottom: 16px; margin-bottom: 24px;
        border-bottom: 1px solid rgba(255,255,255,0.12);
      }
      .m-fin-total { color: ${AUDIT_AMBER_M}; }

      /* Timeline */
      .m-timeline { list-style: none; margin: 0; padding: 0; }
      .m-phase {
        display: grid; grid-template-columns: 44px 1fr; gap: 16px;
        position: relative;
      }
      .m-phase + .m-phase { margin-top: 14px; }
      .m-phase-rail {
        display: flex; flex-direction: column; align-items: center;
        position: relative;
      }
      /* connecting line between phase markers */
      .m-phase:not(:last-child) .m-phase-rail::after {
        content: ''; position: absolute;
        top: 44px; bottom: -14px; left: 50%; width: 1px;
        background: rgba(255,255,255,0.16); transform: translateX(-50%);
      }
      .m-phase-num {
        width: 44px; height: 44px; flex: none;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid rgba(212,162,76,0.5);
        color: ${AUDIT_AMBER_M};
        font-family: var(--ff-mono); font-size: 13px; font-weight: 600;
        letter-spacing: 0.08em;
        background: rgba(212,162,76,0.06);
      }
      .m-phase-card {
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.02);
        padding: 18px 20px 20px;
        min-width: 0;
      }
      .m-phase-label {
        font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
        letter-spacing: 0.14em; text-transform: uppercase;
        color: ${AUDIT_AMBER_M}; margin-bottom: 10px;
      }
      .m-phase-dur { display: flex; align-items: baseline; gap: 8px; }
      .m-phase-range {
        font: 500 42px/1 var(--ff-sans); letter-spacing: -0.03em;
        color: #fff; font-feature-settings: "tnum" 1;
      }
      .m-phase-unit { font: 400 14px/20px var(--ff-sans); color: rgba(255,255,255,0.6); }
      .m-phase-note {
        font: 400 14px/21px var(--ff-sans);
        color: rgba(255,255,255,0.6);
        margin: 12px 0 0; text-wrap: pretty;
      }

      /* Proof cards */
      .m-proofs { display: grid; gap: 16px; }
      .m-proof {
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.02);
        padding: 26px 24px 28px;
      }
      .m-proof-label {
        font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
        letter-spacing: 0.18em; text-transform: uppercase;
        color: rgba(255,255,255,0.55); margin-bottom: 16px;
      }
      .m-proof-figure {
        font: 500 64px/1 var(--ff-sans); letter-spacing: -0.035em;
        font-feature-settings: "tnum" 1;
      }
      .m-proof-desc {
        font: 400 15px/22px var(--ff-sans);
        color: rgba(255,255,255,0.72); margin-top: 12px;
      }
      .m-proof-bar { position: relative; height: 6px; margin-top: 22px; }
      .m-proof-track {
        position: absolute; inset: 0; height: 6px;
        background: rgba(255,255,255,0.10);
      }
      .m-proof-fill { position: absolute; top: 0; height: 6px; }
      .m-proof-scale {
        display: flex; justify-content: space-between;
        margin-top: 12px;
        font-family: var(--ff-mono); font-size: 10.5px; font-weight: 500;
        letter-spacing: 0.18em; text-transform: uppercase;
        color: rgba(255,255,255,0.5);
      }

      /* CTA */
      .m-fin-cta {
        display: inline-flex; gap: 8px; margin-top: 52px;
        font: 500 15px/22px var(--ff-sans); color: ${AUDIT_AMBER_M};
        border-bottom: 1px solid currentColor; padding-bottom: 3px;
      }

      /* Narrow phones (~360px and below) — keep numerals from crowding */
      @media (max-width: 360px) {
        .m-fin-title { font-size: 30px; line-height: 37px; }
        .m-proof-figure { font-size: 56px; }
        .m-phase { grid-template-columns: 40px 1fr; gap: 14px; }
        .m-phase-num { width: 40px; height: 40px; }
        .m-phase:not(:last-child) .m-phase-rail::after { top: 40px; }
      }
    `}</style>
    </>);

};

Object.assign(window, { AuditFinancialMobile });