// Sybre — AI ROI calculator page. Sage-led: success/positive financial outcomes.
// Carries all calculator logic from the original brief; reskinned to site tokens.

function AIROIPage() {
  return (
    <Page>
      {/* HERO */}
      <section className="page-hero" style={{ position:'relative', overflow:'hidden' }}>
        <div aria-hidden="true" className="hero-splash" style={{ backgroundImage:'url(assets/Images/bw_geo01.jpg)' }} />
        <div className="container" style={{ position:'relative' }}>
          <Reveal>
            <Link to="/services/ai" className="meta" style={{ display:'inline-block', marginBottom:24 }}>← AI infrastructure</Link>
            <div className="label-sage" style={{ marginBottom: 24 }}>AI ROI calculator</div>
            <h1 className="h-hero" style={{ marginBottom: 28 }}>
              Calculating the ROI<br/>of secure AI adoption is <em className="sage">easy</em>.
            </h1>
            <p className="lead lg" style={{ marginBottom: 36 }}>
              A productivity solution that pays for itself. Adjust the inputs below to model the real financial benefit for your business.
            </p>
            <div className="meta-row">
              <div><span className="meta-num">100%</span> inference data secured</div>
              <div><span className="meta-num">Zero</span> model training on your data</div>
              <div><span className="meta-num">40–70%</span> time saved on admin</div>
              <div><span className="meta-num">3–5×</span> typical first-year ROI</div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* INTRO */}
      <section className="section">
        <div className="container">
          <SectionHead num="01" label="Your numbers" title="Calculate your <em class='sage'>return</em>." lead="Use the interactive calculator below to model the financial impact for your specific business. Adjust staff count, salary levels, and estimated time savings to see annual and cumulative returns." />
          <Reveal stagger className="grid-2">
            <div className="card">
              <div className="eyebrow" style={{ marginBottom:14 }}>How to use</div>
              <p className="body">Adjust the sliders to match your business profile. Toggle additional automation areas on or off to see how each category contributes. The headline metrics, charts and breakdowns update in real-time as you change inputs.</p>
            </div>
            <div className="card sage-fill">
              <div className="eyebrow" style={{ marginBottom:14 }}>Typical client result</div>
              <div className="stat-num" style={{ fontSize:'clamp(56px, 8vw, 88px)' }}>$107k</div>
              <div className="stat-label" style={{ marginTop:14 }}>annual benefit · 20 staff at $85k average cost</div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* CALCULATOR */}
      <section className="section" id="calculator">
        <div className="container">
          <SectionHead num="02" label="Tell us about you" title="Your <em>business profile</em>." lead="Enter your business details to generate a personalised cost-benefit analysis. All calculations are estimates based on industry benchmarks for professional-services firms adopting AI automation." />

          {/* Inputs panel */}
          <Reveal>
            <div className="card" style={{ padding:'40px 36px', marginBottom: 16 }}>
              <div className="roi-section-title">Workforce &amp; costs</div>

              <div className="roi-slider">
                <div className="roi-slider-head">
                  <span className="roi-slider-lbl">Total staff</span>
                  <span className="roi-slider-val">
                    <input className="roi-num" type="number" id="e_staff" defaultValue="15" min="2" max="200" step="1" />
                    <span className="roi-suffix">people</span>
                  </span>
                </div>
                <input type="range" min="2" max="200" defaultValue="15" step="1" id="s_staff" className="roi-range" />
              </div>

              <div className="roi-slider">
                <div className="roi-slider-head">
                  <span className="roi-slider-lbl">Average staffing cost (per year)</span>
                  <span className="roi-slider-val">
                    <span className="roi-suffix">$</span>
                    <input className="roi-num roi-formatted" type="text" id="e_cost" defaultValue="85,000" inputMode="numeric" data-min="40000" data-max="250000" style={{ minWidth:66, maxWidth:90 }} />
                    <span className="roi-suffix">/yr</span>
                  </span>
                </div>
                <input type="range" min="40000" max="250000" defaultValue="85000" step="5000" id="s_cost" className="roi-range" />
              </div>

              <div className="roi-slider">
                <div className="roi-slider-head">
                  <span className="roi-slider-lbl">Annual business revenue</span>
                  <span className="roi-slider-val">
                    <span className="roi-suffix">$</span>
                    <input className="roi-num roi-formatted" type="text" id="e_rev" defaultValue="5,000,000" inputMode="numeric" data-min="200000" data-max="50000000" style={{ minWidth:80 }} />
                  </span>
                </div>
                <input type="range" min="200000" max="50000000" defaultValue="5000000" step="100000" id="s_rev" className="roi-range" />
              </div>

              <div className="roi-section-title" style={{ marginTop: 28 }}>Manual workload</div>

              <div className="roi-slider">
                <div className="roi-slider-head">
                  <span className="roi-slider-lbl">Manual / admin tasks per person per day</span>
                  <span className="roi-slider-val">
                    <input className="roi-num" type="number" id="e_tasks" defaultValue="1.5" min="0.5" max="5" step="0.25" />
                    <span className="roi-suffix">hours</span>
                  </span>
                </div>
                <input type="range" min="0.5" max="5" defaultValue="1.5" step="0.25" id="s_tasks" className="roi-range" />
              </div>

              <div className="roi-slider" style={{ marginBottom: 0 }}>
                <div className="roi-slider-head">
                  <span className="roi-slider-lbl">Estimated AI time-saving on these tasks</span>
                  <span className="roi-slider-val">
                    <input className="roi-num" type="number" id="e_save" defaultValue="60" min="0" max="100" step="5" />
                    <span className="roi-suffix">%</span>
                  </span>
                </div>
                <input type="range" min="0" max="100" defaultValue="60" step="5" id="s_save" className="roi-range" />
              </div>
            </div>
          </Reveal>

          {/* Categories */}
          <Reveal>
            <div className="card" style={{ padding:'40px 36px', marginBottom: 16 }}>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Additional automation areas</div>
              <p className="body" style={{ marginBottom: 18, fontSize:14 }}>Toggle on the task categories relevant to your business, then enter how many hours per week your team currently spends on each.</p>
              <div className="cat-grid">
                {[
                  { id:'design',   name:'Graphic design',         sub:'Social posts, presentations, marketing assets', dflt:4, scope:'user' },
                  { id:'docs',     name:'Document formatting',    sub:'Proposals, reports, templates, styling',         dflt:6, scope:'user' },
                  { id:'proofing', name:'Proofreading & QA',      sub:'Editing, compliance review, quality checks',     dflt:3, scope:'user' },
                  { id:'reports',  name:'Report generation',      sub:'Client reports, internal summaries, board packs',dflt:5, scope:'team' },
                  { id:'analysis', name:'Data analysis',          sub:'Dashboards, trends, business intelligence',      dflt:0, scope:'team', off:true },
                ].map(c => (
                  <div key={c.id} className={'cat-row' + (c.off ? '' : ' active')} id={'row_' + c.id} data-cat={c.id}>
                    <div className="cat-toggle"></div>
                    <div className="cat-info">
                      <span className="cat-name">{c.name}</span>
                      <span className="cat-sub">{c.sub}</span>
                    </div>
                    <div className="cat-input-wrap" onClick={(e) => e.stopPropagation()}>
                      <input type="number" id={'cat_' + c.id} defaultValue={c.dflt} min="0" max="99" step="1" />
                      <span className="cat-suffix">hrs/wk</span>
                      <div className="cat-scope" id={'scope_' + c.id}>
                        <button type="button" className={'cat-scope-btn' + (c.scope === 'user' ? ' active' : '')} data-scope-cat={c.id} data-scope-val="user">per user</button>
                        <button type="button" className={'cat-scope-btn' + (c.scope === 'team' ? ' active' : '')} data-scope-cat={c.id} data-scope-val="team">team</button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>

          {/* Headline metrics */}
          <Reveal>
            <div className="grid-4" style={{ marginBottom: 16 }}>
              <div className="card" style={{ padding: 28 }}>
                <div className="eyebrow" style={{ marginBottom: 12 }}>Annual admin hours saved</div>
                <div className="stat-num sage" id="r_hours" style={{ fontSize:'clamp(36px, 4vw, 48px)' }}>—</div>
              </div>
              <div className="card" style={{ padding: 28 }}>
                <div className="eyebrow" style={{ marginBottom: 12 }}>Admin cost saving</div>
                <div className="stat-num" id="r_admin_save" style={{ fontSize:'clamp(36px, 4vw, 48px)' }}>—</div>
              </div>
              <div className="card" style={{ padding: 28 }}>
                <div className="eyebrow" style={{ marginBottom: 12 }}>Total annual benefit</div>
                <div className="stat-num accent" id="r_total" style={{ fontSize:'clamp(36px, 4vw, 48px)' }}>—</div>
              </div>
              <div className="card sage-fill" style={{ padding: 28 }}>
                <div className="eyebrow" style={{ marginBottom: 12 }}>Benefit as % of revenue</div>
                <div className="stat-num" id="r_pct" style={{ fontSize:'clamp(36px, 4vw, 48px)' }}>—</div>
              </div>
            </div>
          </Reveal>

          {/* Category savings cards */}
          <Reveal>
            <div className="card" style={{ padding: '36px 36px 40px' }}>
              <div className="eyebrow" style={{ marginBottom: 18 }}>Estimated annual savings by automation category</div>
              <div className="savings-grid" id="savingsGrid"></div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* BREAKDOWN + CHART */}
      <section className="section">
        <div className="container">
          <SectionHead num="03" label="Projection" title="Three years of <em class='sage'>compounding</em> benefit." lead="Year 1 ramps as adoption matures. Years 2 and 3 are at full benefit. Bars show annual benefit; the sage line is cumulative." />
          <Reveal className="grid-2">
            <div className="card">
              <div className="eyebrow" style={{ marginBottom: 18 }}>Benefit breakdown</div>
              <div id="bars" style={{ marginTop: 8 }}></div>
              <div style={{
                marginTop: 24, padding:'22px 26px',
                background:'var(--soft-sage)',
                borderRadius:'var(--r-inner)',
                display:'flex', justifyContent:'space-between', alignItems:'center', gap:16, flexWrap:'wrap',
              }}>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:500, color:'var(--sybre-black)' }}>
                  Total projected<br/>annual benefit
                </div>
                <div className="stat-num" id="r_total2" style={{ fontSize:'clamp(28px, 3.5vw, 40px)', color:'var(--sybre-black)' }}>—</div>
              </div>
            </div>
            <div className="card">
              <div className="eyebrow" style={{ marginBottom: 18 }}>Cumulative savings: 3-year projection</div>
              <div style={{ position:'relative', height: 280 }}>
                <canvas id="savingsChart"></canvas>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* HOURS RECLAIMED + FTE */}
      <section className="section">
        <div className="container">
          <Reveal className="grid-2">
            <div className="card">
              <div className="eyebrow" style={{ marginBottom: 18 }}>Hours reclaimed per week</div>
              <div className="stat-num accent" id="r_weekly_hrs">—</div>
              <div className="stat-label" id="r_weekly_desc" style={{ marginTop: 14 }}>—</div>
            </div>
            <div className="card sage-fill">
              <div className="eyebrow" style={{ marginBottom: 18 }}>Equivalent full-time staff capacity</div>
              <div className="stat-num" id="r_fte">—</div>
              <div className="stat-label" style={{ marginTop: 14 }}>Additional productive headcount equivalent across your team.</div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* MONTHLY */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div className="card" style={{ padding: '36px 36px 40px' }}>
              <div className="eyebrow" style={{ marginBottom: 18 }}>Monthly benefit timeline · year-1 ramp-up</div>
              <div style={{ position:'relative', height: 240 }}>
                <canvas id="monthlyChart"></canvas>
              </div>
              <p className="body" style={{ fontSize: 13, color:'var(--fg4)', marginTop: 16, lineHeight: 1.6 }}>
                Assumes a phased rollout: 25% of benefits realised in months 1–3, 60% in months 4–6, 85% in months 7–9, and 100% from month 10 onward as staff adoption matures.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* CTA — sage */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div className="card sage-fill" style={{ textAlign:'center', padding:'72px 48px' }}>
              <div className="eyebrow" style={{ marginBottom: 18 }}>Next step</div>
              <h2 className="h-section" style={{ marginBottom: 18 }}>Ready to explore <em>secure AI</em>?</h2>
              <p className="lead" style={{ margin:'0 auto 32px', maxWidth: 560 }}>
                Sybre can run an AI readiness assessment for your team. We'll identify the highest-value opportunities for your business and provide a pathway for secure, scalable AI adoption.
              </p>
              <div style={{ display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap' }}>
                <Link to="/contact" className="btn" style={{ background:'var(--sybre-black)', color:'var(--sybre-white)' }}>Contact Sybre</Link>
                <Link to="/services/ai" className="btn" style={{ borderColor:'rgba(18,16,16,0.30)', color:'var(--sybre-black)' }}>See the architecture</Link>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Chart.js + ROI script — load after page mounts */}
      <ROILoader />
    </Page>
  );
}

// ── Loader: brings in Chart.js + boots the calculator ──
function ROILoader() {
  React.useEffect(() => {
    const boot = () => {
      if (typeof window.bootROI === 'function') window.bootROI();
    };
    if (window.Chart) { boot(); return; }
    const existing = document.querySelector('script[data-chartjs]');
    if (existing) { existing.addEventListener('load', boot); return; }
    const s = document.createElement('script');
    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js';
    s.dataset.chartjs = '1';
    s.onload = boot;
    document.head.appendChild(s);
  }, []);
  return null;
}

Object.assign(window, { AIROIPage });