/* global React, Icon */
// Term-based discount stack on top of launch price (Latest Docs 04).
//   quarterly: launch price (no extra discount, 3-month commitment)
//   1yr      : +15% off — most customers
//   2yr      : +25% off — growing orgs
//   3yr      : +30% off — locked in for the term
const TERM_DISCOUNT = { 'quarterly': 0, '1yr': 0.15, '2yr': 0.25, '3yr': 0.30 };
const TERM_LABEL    = { 'quarterly': 'Quarterly', '1yr': '1 year', '2yr': '2 years', '3yr': '3 years' };
const TERM_MONTHS   = { 'quarterly': 3, '1yr': 12, '2yr': 24, '3yr': 36 };

const PricingPage = ({ go }) => {
  const [tab, setTab] = React.useState('smart-panel');
  const [model, setModel] = React.useState('per-user'); // 'per-user' | 'per-org' (Smart Panel only)
  const [term, setTerm]   = React.useState('1yr');      // smart panel commitment term
  const [billing, setBilling] = React.useState('annual'); // bundle: 'monthly' | 'annual'

  return (
    <div className="page-enter">
      <section className="hero hero-compact" style={{ padding: '56px 0 24px', textAlign: 'center' }}>
        <div className="container">
          <span className="eyebrow">Pricing</span>
          <h1 style={{ fontSize: 'clamp(36px, 5vw, 56px)', margin: '0 auto 20px', maxWidth: '22ch' }}>Pick the control. Pick the plan.</h1>
          <p className="lead" style={{ maxWidth: '56ch', margin: '0 auto 24px' }}>Smart Panel AI: <strong>per-user</strong> or <strong>per-org</strong>. PCF bundle: <strong>$9 each</strong> or <strong>$20 combo</strong>.</p>

          {/* Product tabs */}
          <div className="pricing-tabs" style={{ display: 'inline-flex', background: 'var(--surface-3)', borderRadius: 999, padding: 4, gap: 0, marginBottom: 24 }}>
            <button onClick={() => setTab('smart-panel')} style={tabBtn(tab === 'smart-panel')}>Smart Panel AI</button>
            <button onClick={() => setTab('bundle')} style={tabBtn(tab === 'bundle')}>Kanban + Gantt + Video</button>
          </div>

          {/* Smart-Panel-only: billing model toggle */}
          {tab === 'smart-panel' && (
            <div style={{ marginBottom: 16 }}>
              <div className="pricing-tabs" style={{ display: 'inline-flex', background: 'var(--surface-3)', borderRadius: 999, padding: 4, gap: 0 }}>
                <button onClick={() => setModel('per-user')} style={tabBtn(model === 'per-user')}>Per user / month</button>
                <button onClick={() => setModel('per-org')}  style={tabBtn(model === 'per-org')}>Per org / month</button>
              </div>
            </div>
          )}

          <div>
            {tab === 'smart-panel' ? (
              <div className="pricing-tabs" style={{ display: 'inline-flex', background: 'var(--surface-3)', borderRadius: 999, padding: 4, gap: 0, flexWrap: 'wrap', maxWidth: '100%' }}>
                {['quarterly', '1yr', '2yr', '3yr'].map((k) => (
                  <button key={k} onClick={() => setTerm(k)} style={tabBtn(term === k)}>
                    {TERM_LABEL[k]}
                    {TERM_DISCOUNT[k] > 0 && (
                      <span style={{ color: 'var(--accent)', marginLeft: 6, fontSize: 11 }}>
                        −{Math.round(TERM_DISCOUNT[k] * 100)}%
                      </span>
                    )}
                  </button>
                ))}
              </div>
            ) : (
              <div className="pricing-tabs" style={{ display: 'inline-flex', background: 'var(--surface-3)', borderRadius: 999, padding: 4, gap: 0 }}>
                <button onClick={() => setBilling('monthly')} style={tabBtn(billing === 'monthly')}>Monthly</button>
                <button onClick={() => setBilling('annual')} style={tabBtn(billing === 'annual')}>Annual <span style={{ color: 'var(--accent)', marginLeft: 6 }}>−17%</span></button>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          {tab === 'smart-panel'
            ? <SmartPanelTiers term={term} model={model} go={go}/>
            : <BundleTiers billing={billing} go={go}/>}
        </div>
      </section>

      {/* ROI Calculator — Smart Panel tab only */}
      {tab === 'smart-panel' && (
        <section className="section section-alt">
          <div className="container">
            <ROICalculator go={go} model={model} term={term}/>
          </div>
        </section>
      )}

      <section className="section">
        <div className="container">
          <span className="eyebrow">Frequently asked</span>
          <h2 style={{ marginBottom: 32, maxWidth: '20ch' }}>Pricing questions, answered.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }} className="faq-grid">
            <FAQ q="Do I need Microsoft Copilot to run Smart Panel AI?" a="No. Smart Panel AI is fully independent — it uses its own AI provider (OpenAI by default, Azure OpenAI on request). Copilot and Smart Panel can coexist on the same D365 environment. No per-seat Copilot license required."/>
            <FAQ q="Why no monthly billing?" a="Quarterly is the minimum cycle, intentionally. Most teams need 4–6 weeks just to roll out + train + iterate. Monthly billing rewards churn-prone setups; quarterly aligns both sides on a real outcome. Annual upfront stacks +15% off launch pricing."/>
            <FAQ q="Is there a free trial?" a="Yes — 14-day free trial for Pro and Enterprise. No credit card. Trial gets a real license key that auto-converts on day 15 if you don't cancel. Bundle Starter is free forever for sandbox use, up to 3 users."/>
            <FAQ q="Is our CRM data sent outside our tenant?" a="Only the fields needed to answer a specific user question are sent to the AI provider. Nothing is stored by us beyond transient session state. On Enterprise, Azure OpenAI can be deployed in your own tenancy so data never leaves your subscription."/>
            <FAQ q="How does pricing work for Indian customers?" a="USD price → INR equivalent + 18% GST. Foreign customers pay USD via SWIFT / Wise — zero-rated under LUT. Quarterly minimum applies globally."/>
            <FAQ q="Can I mix and match?" a="Yes. Buy Smart Panel AI per-user, plus any of the PCF bundle controls per-org. Or grab the all-three combo for $20/org — saves $7/month vs buying separately."/>
          </div>
        </div>
      </section>
    </div>
  );
};

const tabBtn = (active) => ({
  padding: '8px 18px', borderRadius: 999, border: 'none',
  background: active ? '#FFF' : 'transparent',
  boxShadow: active ? 'var(--shadow-sm)' : 'none',
  fontSize: 13, fontWeight: 600, color: 'var(--ink-1)', cursor: 'pointer'
});

// ============================================================
// Smart Panel AI — Basic / Pro / Enterprise
// Two billing models:
//   per-user/mo  : $15 / $30 / $45 (launch) — Latest Docs 04_Landing_Page.html
//   per-org/mo   : $79 / $199 / $399 — flat fee, unlimited users
// Quarterly minimum cycle; annual upfront stacks +15% off launch.
// ============================================================
const SmartPanelTiers = ({ term, model, go }) => {
  const tiers = [
    { name: 'Basic',
      perUserList: 20, perUserLaunch: 15,
      perOrgList:  99, perOrgLaunch:  79,
      off: '25% off',
      blurb: 'Small teams · essential AI.',
      features: [
        'AI Assistant tab — natural-language CRM',
        'Record Summary — one-click TL;DR + next action',
        'Multi-language: English · Hindi · Gujarati',
        'PDF, DOCX, TXT file reading',
        'License + updates included',
        '1 environment, install in 30 minutes',
      ],
      cta: 'Start trial', popular: false },
    { name: 'Pro',
      perUserList: 50,  perUserLaunch: 30,
      perOrgList:  249, perOrgLaunch:  199,
      off: '40% off',
      blurb: 'Sales / support teams · full kit.',
      features: [
        'Everything in Basic',
        'Activities Timeline + Insights KPIs + Quick Actions',
        'Sentiment analysis on customer interactions',
        'Quick Notes · Relationships · Celebration alerts',
        'Side-dock mode (Copilot-style)',
        'Email support — 3-day SLA',
      ],
      cta: 'Start trial', popular: false },
    { name: 'Enterprise',
      perUserList: 75,  perUserLaunch: 45,
      perOrgList:  499, perOrgLaunch:  399,
      off: '40% off',
      blurb: 'Saves <strong>5+ hours daily</strong> per user · strict SLA.',
      features: [
        'Everything in Pro',
        'Follow-up Scheduler — AI suggests next action + date',
        'Email Drafting + send from D365',
        'Attachments tab — PDF · DOCX · XLSX · images',
        '24×7 priority support — &lt;2hr critical response',
        'White-label / on-brand option',
        'Azure OpenAI in your tenancy (add-on)',
      ],
      cta: 'Contact sales', popular: true /* Recommended */ },
  ];
  const isPerOrg = model === 'per-org';
  const discount = TERM_DISCOUNT[term] || 0;
  const months   = TERM_MONTHS[term]   || 3;
  const isQuarterly = term === 'quarterly';
  const fmt = (n) => '$' + Math.round(n).toLocaleString('en-US');
  return (
    <>
      <div style={{ textAlign: 'center', marginBottom: 24, fontSize: 13, color: 'var(--accent)', fontWeight: 600 }}>
        🎉 Launch offer — Basic 25% off · Pro &amp; Enterprise 40% off
        {discount > 0 && <> · {TERM_LABEL[term]} commitment adds {Math.round(discount * 100)}% more off</>}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="pricing-grid">
        {tiers.map((t, i) => {
          const list   = isPerOrg ? t.perOrgList   : t.perUserList;
          const launch = isPerOrg ? t.perOrgLaunch : t.perUserLaunch;
          const monthly = launch * (1 - discount); // monthly equivalent after term discount
          const totalForTerm = monthly * months;
          const unit  = isPerOrg ? '/ org / month' : '/ user / month';
          return (
            <div key={i} className="card" style={{ padding: 32, position: 'relative', borderColor: t.popular ? 'var(--accent)' : null, borderWidth: t.popular ? 2 : null }}>
              {t.popular && <div style={{ position: 'absolute', top: -12, left: 32, background: 'var(--accent)', color: '#FFF', padding: '4px 10px', borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Recommended</div>}
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-1)', marginBottom: 4 }}>{t.name}</div>
              <div style={{ fontSize: 14, color: 'var(--ink-4)', marginBottom: 24 }} dangerouslySetInnerHTML={{ __html: t.blurb }}/>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 18, color: 'var(--ink-5)', textDecoration: 'line-through', fontWeight: 500 }}>${list}</span>
                <span className="counter-num" style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>{fmt(monthly)}</span>
                <span style={{ fontSize: 14, color: 'var(--ink-4)' }}>{unit}</span>
              </div>
              <div style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 600, marginBottom: 12 }}>
                {isQuarterly
                  ? `Quarterly billing — ${t.off} launch`
                  : `${TERM_LABEL[term]} upfront — ${t.off} launch + ${Math.round(discount * 100)}% more`}
              </div>
              {/* Annual / total cost line — visible only when not quarterly */}
              {!isQuarterly && (
                <div className="tier-total-cost" style={{ marginBottom: 24 }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 4 }}>
                    {term === '1yr' ? 'Annual cost' : `Total for ${TERM_LABEL[term].toLowerCase()}`}
                  </div>
                  <div className="counter-num" style={{ fontSize: 22, fontWeight: 700, color: '#0F6CBD', fontFamily: 'var(--font-display)', letterSpacing: '-0.01em' }}>
                    {fmt(totalForTerm)}
                    <span style={{ fontSize: 12, fontWeight: 500, color: 'var(--ink-4)', marginLeft: 6 }}>
                      {isPerOrg ? 'one-time, billed upfront' : `per ${isPerOrg ? 'org' : 'user'}, upfront`}
                    </span>
                  </div>
                  {term !== '1yr' && (
                    <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 3 }}>
                      Equivalent to {fmt(monthly * 12)} / year — locked in for {TERM_LABEL[term].toLowerCase()}.
                    </div>
                  )}
                </div>
              )}
              <a className={"btn " + (t.popular ? "btn-primary" : "btn-secondary") + " btn-lg"} href="#" onClick={(e) => { e.preventDefault(); go('contact'); }} style={{ width: '100%', justifyContent: 'center', marginBottom: 28 }}>{t.cta}</a>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {t.features.map((f, j) => (
                  <div key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--ink-2)' }}>
                    <span style={{ color: 'var(--accent)', marginTop: 1 }}><Icon name="check" size={16}/></span>
                    <span>{f}</span>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

// ============================================================
// PCF Bundle — Kanban / Gantt / Video Playlist standalone @ $9/mo/org
// or all-three combo @ $20/mo/org. Per-organisation, unlimited users.
// ============================================================
const BundleTiers = ({ billing, go }) => {
  // Annual = ~17% off (~2 months free)
  const tiers = [
    { name: 'Kanban Board', iconName: 'layout-grid', accent: '#0F6CBD', monthly: 9, blurb: 'Drag-and-drop boards over any D365 view.', features: [
        'Bind to any choice column as columns',
        'Swimlanes by owner / team',
        'WIP limits + inline filters',
        'Keyboard accessible · &lt;100ms drag-save',
        '1 D365 organisation, unlimited users',
      ], cta: 'Start trial', popular: false },
    { name: 'Gantt Chart', iconName: 'gantt', accent: '#15803D', monthly: 9, blurb: 'Project timelines that live inside D365.', features: [
        'Drag-resize bars + 4 dependency types',
        'Weekend &amp; holiday awareness',
        'Critical path toggle',
        'Day / week / month / quarter zoom',
        'Print-clean A3 PDF export',
      ], cta: 'Start trial', popular: false },
    { name: 'Video Playlist', iconName: 'video', accent: '#0A0A0A', monthly: 9, blurb: 'Sequenced training videos inside any form.', features: [
        'YouTube · Vimeo · Stream · MP4 · SharePoint',
        'Per-user watch progress saved',
        'Completion-gated form actions',
        'WebVTT captions + searchable transcripts',
        'Built-in reporting dashboard',
      ], cta: 'Start trial', popular: false },
    { name: 'Combo · all 3', iconName: 'sparkles', accent: '#4F46E5', monthly: 20, blurb: 'Kanban + Gantt + Video Playlist together.', features: [
        '<strong>All three controls</strong> in one license',
        'All future bundle controls included',
        'Production + sandbox environments',
        'Unlimited users per organisation',
        'Email support — 3-day SLA',
        '<strong>Save $7/mo</strong> vs buying separately',
      ], cta: 'Get the bundle', popular: true, note: 'Best value' },
  ];

  return (
    <>
      <div style={{ textAlign: 'center', marginBottom: 24, fontSize: 13, color: 'var(--ink-3)' }}>
        Per-organisation pricing &mdash; unlimited users, no per-seat tax
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }} className="pricing-grid pricing-grid-4">
        {tiers.map((t, i) => {
          const annualEq = Math.round(t.monthly * 0.83); // ~17% off
          const price = billing === 'annual' ? annualEq : t.monthly;
          return (
            <div key={i} className="card" style={{ padding: 28, position: 'relative', borderColor: t.popular ? 'var(--ink-1)' : null, borderWidth: t.popular ? 2 : null, display: 'flex', flexDirection: 'column' }}>
              {t.popular && <div style={{ position: 'absolute', top: -12, left: 24, background: 'var(--accent)', color: '#FFF', padding: '4px 10px', borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{t.note || 'Best value'}</div>}
              <div style={{ width: 40, height: 40, borderRadius: 10, background: t.accent, color: '#FFF', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
                <Icon name={t.iconName} size={20}/>
              </div>
              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink-1)', marginBottom: 4 }}>{t.name}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-4)', marginBottom: 18, minHeight: 36 }}>{t.blurb}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4, flexWrap: 'wrap' }}>
                {billing === 'annual' && <span style={{ fontSize: 15, color: 'var(--ink-5)', textDecoration: 'line-through', fontWeight: 500 }}>${t.monthly}</span>}
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>${price}</span>
                <span style={{ fontSize: 12, color: 'var(--ink-4)' }}>/ org / month</span>
              </div>
              <div style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 600, marginBottom: 20 }}>
                {billing === 'annual' ? '~17% off — billed annually' : 'Billed monthly'}
              </div>
              <a className={"btn " + (t.popular ? "btn-primary" : "btn-secondary")} href="#" onClick={(e) => { e.preventDefault(); go('contact'); }} style={{ width: '100%', justifyContent: 'center', marginBottom: 20 }}>{t.cta}</a>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {t.features.map((f, j) => (
                  <div key={j} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13, color: 'var(--ink-2)' }}>
                    <span style={{ color: 'var(--accent)', marginTop: 1, flexShrink: 0 }}><Icon name="check" size={14}/></span>
                    <span dangerouslySetInnerHTML={{ __html: f }}/>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: 32, padding: '20px 24px', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 'var(--radius-3)', fontSize: 14, color: 'var(--ink-2)', textAlign: 'center' }}>
        <strong style={{ color: 'var(--ink-1)' }}>Free Starter:</strong> any single control runs free in any sandbox environment, up to 3 users. Production needs a paid plan.
      </div>
    </>
  );
};

const FAQ = ({ q, a }) => (
  <div>
    <h3 style={{ fontSize: 17, marginBottom: 8 }}>{q}</h3>
    <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--ink-3)', margin: 0 }}>{a}</p>
  </div>
);

// ============================================================
// ROI Calculator — Smart Panel AI vs Microsoft Copilot for Sales (full stack)
//
// Smart Panel pricing:
//   per-user/mo : Basic $15 · Pro $30 · Enterprise $45 (launch)
//   per-org/mo  : Basic $79 · Pro $199 · Enterprise $399 (flat, unlimited users)
//   Annual upfront stacks +15% off launch.
//
// Microsoft Copilot for Sales — full deployable stack (per user / month):
//   $40  Microsoft Copilot for Sales (base license)
//   $36  Microsoft 365 E3 (minimum prerequisite)
//   $15  Power Automate Premium (any multi-step automation)
//   ~$10 AI Builder credits (50-user team share of $500/mo per 1M credits)
//   = ~$101 / user / month all-in
// (Source: SmartPanel Sales Strategy doc · public Microsoft list prices.)
// Microsoft can change these any time — we keep this conservative.
// ============================================================
const COPILOT_STACK = [
  { label: 'Microsoft Copilot for Sales',   amt: 40, required: true,  note: 'Base license' },
  { label: 'Microsoft 365 E3 (prereq)',     amt: 36, required: true,  note: 'Without M365 E3, Copilot does not run' },
  { label: 'Power Automate Premium',        amt: 15, required: false, note: 'Required for any multi-step action — Copilot reads/suggests but cannot execute' },
  { label: 'AI Builder credits (estimate)', amt: 10, required: false, note: '$500/mo for 1M credits, shared across tenant' },
];

const SP_TIERS = {
  basic:      { name: 'Basic',      perUser: 15, perOrg:  79 },
  pro:        { name: 'Pro',        perUser: 30, perOrg: 199 },
  enterprise: { name: 'Enterprise', perUser: 45, perOrg: 399 },
};

// Year-based commitment discount used by the ROI calculator.
// Mirrors TERM_DISCOUNT but extends to 5 years per Latest Docs (40% off).
const YEAR_DISCOUNT = { 1: 0.15, 2: 0.25, 3: 0.30, 5: 0.40 };

const ROICalculator = ({ go, model = 'per-user', term }) => {
  const [users, setUsers] = React.useState(50);
  const [tier, setTier]   = React.useState('enterprise');
  const [years, setYears] = React.useState(1);
  const [includePA, setIncludePA] = React.useState(true);
  const [includeAI, setIncludeAI] = React.useState(true);

  const months = years * 12;
  const t = SP_TIERS[tier];
  const discount = YEAR_DISCOUNT[years] || 0;

  // Smart Panel — billing model decides per-user vs flat per-org;
  // discount stacks with launch price based on commitment years.
  const spMonthly = model === 'per-org'
    ? Math.round(t.perOrg  * (1 - discount))
    : Math.round(t.perUser * (1 - discount));
  const spTotal = model === 'per-org'
    ? spMonthly * months
    : users * spMonthly * months;

  // Copilot stack — sum line items the user has toggled on
  const copilotPerUser = COPILOT_STACK.reduce((sum, l) => {
    if (l.required) return sum + l.amt;
    if (l.label.startsWith('Power Automate') && includePA) return sum + l.amt;
    if (l.label.startsWith('AI Builder')     && includeAI) return sum + l.amt;
    return sum;
  }, 0);
  const cpTotal = users * copilotPerUser * months;

  const savings  = Math.max(0, cpTotal - spTotal);
  const pctSaved = cpTotal > 0 ? Math.round((savings / cpTotal) * 100) : 0;
  const fmt = (n) => '$' + n.toLocaleString('en-US');

  const max = Math.max(cpTotal, spTotal, 1);
  const cpW = (cpTotal / max) * 100;
  const spW = (spTotal / max) * 100;

  const dataAsOf = '1 May 2026';

  return (
    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
      <div style={{ padding: '32px 32px 12px' }}>
        <span className="chip" style={{ marginBottom: 12 }}>ROI calculator</span>
        <h2 style={{ marginBottom: 8 }}>How much would Smart Panel AI save you vs Microsoft Copilot?</h2>
        <p style={{ color: 'var(--ink-3)', fontSize: 15, marginBottom: 0, maxWidth: '68ch' }}>
          Copilot for Sales isn't just $40/user/month — it requires Microsoft 365 E3, Power Automate Premium for any automation, and AI Builder credits for AI flows. Most customers land at <strong>~$90–130/user/mo all-in</strong>. Drag the slider and see what changes.
        </p>
      </div>

      <div className="roi-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 0, marginTop: 20 }}>
        {/* Inputs */}
        <div style={{ padding: '24px 32px 32px', borderRight: '1px solid var(--border)' }}>
          <RoiRow label="Users in your D365 environment" value={users}>
            <input
              type="range" min="5" max="500" step="5" value={users}
              onChange={(e) => setUsers(Number(e.target.value))}
              className="roi-slider"
              aria-label="Number of users"
            />
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--ink-4)', marginTop: 4, fontFamily: 'var(--font-mono)' }}>
              <span>5</span><span>500</span>
            </div>
          </RoiRow>

          <div style={{ marginTop: 24 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-2)', marginBottom: 10 }}>Smart Panel AI tier</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              {Object.keys(SP_TIERS).map((k) => (
                <button key={k} onClick={() => setTier(k)} type="button" style={{
                  padding: '10px 12px', borderRadius: 8, fontSize: 13, fontWeight: 600,
                  cursor: 'pointer',
                  border: '1px solid ' + (tier === k ? 'var(--ink-1)' : 'var(--border)'),
                  background: tier === k ? 'var(--ink-1)' : '#FFF',
                  color: tier === k ? '#FFF' : 'var(--ink-1)',
                  transition: 'all .15s',
                }}>{SP_TIERS[k].name}</button>
              ))}
            </div>
            <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 8 }}>
              {model === 'per-org'
                ? <>Billing model: <strong>per organisation / month</strong> &mdash; flat fee, unlimited users.</>
                : <>Billing model: <strong>per user / month</strong> &mdash; scales with team size.</>}
            </div>
          </div>

          <div style={{ marginTop: 24 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-2)', marginBottom: 10 }}>Time horizon</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
              {[1, 2, 3, 5].map((y) => (
                <button key={y} onClick={() => setYears(y)} type="button" style={{
                  padding: '10px 8px', borderRadius: 8, fontSize: 13, fontWeight: 600,
                  cursor: 'pointer',
                  border: '1px solid ' + (years === y ? 'var(--ink-1)' : 'var(--border)'),
                  background: years === y ? 'var(--ink-1)' : '#FFF',
                  color: years === y ? '#FFF' : 'var(--ink-1)',
                  transition: 'all .15s',
                }}>{y === 1 ? '1 yr' : y + ' yrs'}</button>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 24 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-2)', marginBottom: 10 }}>Microsoft Copilot stack — what's included</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', background: 'var(--surface-3)', borderRadius: 8, color: 'var(--ink-3)' }}>
                <span>Copilot for Sales + M365 E3 (required)</span>
                <span className="tabular" style={{ fontWeight: 600, color: 'var(--ink-1)' }}>$76/user/mo</span>
              </div>
              <label style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', background: '#FFF', border: '1px solid var(--border)', borderRadius: 8, cursor: 'pointer' }}>
                <input type="checkbox" checked={includePA} onChange={(e) => setIncludePA(e.target.checked)} style={{ accentColor: 'var(--accent)' }}/>
                <span style={{ flex: 1 }}>Power Automate Premium</span>
                <span className="tabular" style={{ fontWeight: 600, color: 'var(--ink-1)' }}>+$15</span>
              </label>
              <label style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', background: '#FFF', border: '1px solid var(--border)', borderRadius: 8, cursor: 'pointer' }}>
                <input type="checkbox" checked={includeAI} onChange={(e) => setIncludeAI(e.target.checked)} style={{ accentColor: 'var(--accent)' }}/>
                <span style={{ flex: 1 }}>AI Builder credits (est.)</span>
                <span className="tabular" style={{ fontWeight: 600, color: 'var(--ink-1)' }}>+$10</span>
              </label>
            </div>
          </div>
        </div>

        {/* Results */}
        <div style={{ padding: '24px 32px 32px', background: 'var(--surface-2)' }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
            Over {years === 1 ? '1 year' : years + ' years'} for {users} users
          </div>

          <div style={{ marginBottom: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
              <span style={{ fontSize: 13, color: 'var(--ink-3)' }}>Microsoft Copilot stack <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>(${copilotPerUser}/user/mo)</span></span>
              <span className="tabular" style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-1)' }}>{fmt(cpTotal)}</span>
            </div>
            <div style={{ height: 10, background: 'var(--surface-3)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: cpW + '%', background: '#B91C1C', borderRadius: 999, transition: 'width .25s var(--ease-out)' }}/>
            </div>
          </div>

          <div style={{ marginBottom: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
              <span style={{ fontSize: 13, color: 'var(--ink-3)' }}>Smart Panel AI ({t.name}, {model === 'per-org' ? 'per org' : 'per user'}, {years} yr {years > 1 ? 'commit' : ''} · −{Math.round(discount * 100)}%)</span>
              <span className="tabular" style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-1)' }}>{fmt(spTotal)}</span>
            </div>
            <div style={{ height: 10, background: 'var(--surface-3)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: spW + '%', background: 'var(--accent)', borderRadius: 999, transition: 'width .25s var(--ease-out)' }}/>
            </div>
          </div>

          <div style={{ background: '#FFF', border: '1px solid var(--border)', borderRadius: 12, padding: 20 }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>You save</div>
            <div className="tabular" style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 5vw, 52px)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1, color: 'var(--ink-1)' }}>{fmt(savings)}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 6 }}>
              That's <strong>{pctSaved}% less</strong> than the Copilot stack{tier === 'enterprise' ? ' — plus Enterprise users save 5+ hours daily, every day.' : '.'}
            </div>
            <div style={{ marginTop: 16, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href="#" onClick={(e) => { e.preventDefault(); go('contact'); }}>Get this quote <Icon name="arrow-right" size={14}/></a>
              <a className="btn btn-ghost" href="#" onClick={(e) => { e.preventDefault(); go('product'); }}>See features</a>
            </div>
          </div>
        </div>
      </div>

      {/* Microsoft pricing disclaimer */}
      <div style={{ borderTop: '1px solid var(--border)', padding: '16px 24px', background: 'var(--surface-3)', fontSize: 11, color: 'var(--ink-4)', lineHeight: 1.6, fontFamily: 'var(--font-body)' }}>
        <strong style={{ color: 'var(--ink-3)' }}>Pricing notice:</strong> Microsoft list prices used in this calculator (Copilot for Sales $40/user/mo · Microsoft 365 E3 $36/user/mo · Power Automate Premium $15/user/mo · AI Builder $500/mo per 1M credits) are sourced from Microsoft's public pricing pages as of <strong>{dataAsOf}</strong>. Microsoft may change list prices, bundle structures, promotional offers, or licensing requirements at any time without notice. Real-world cost depends on your Enterprise Agreement, region, currency, partner discounts, and which optional add-ons you actually deploy. This calculator is a directional estimate, not a quote, and is not endorsed by, affiliated with, or representative of Microsoft Corporation. For current Microsoft pricing visit <a href="https://www.microsoft.com/en-us/microsoft-365/copilot" target="_blank" rel="noopener" style={{ color: 'var(--ink-3)', textDecoration: 'underline' }}>microsoft.com/microsoft-365/copilot</a>.
      </div>
    </div>
  );
};

const RoiRow = ({ label, value, children }) => (
  <div>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
      <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-2)' }}>{label}</span>
      <span className="tabular" style={{ fontSize: 18, fontWeight: 700, color: 'var(--ink-1)', fontFamily: 'var(--font-display)' }}>{value}</span>
    </div>
    {children}
  </div>
);

window.PricingPage = PricingPage;