// Brand Marketing — HQ governance of campaigns, templates, local performance, and reputation across the network

// ── Mock data ───────────────────────────────────────────────────────────
const MK_KPIS = {
  pendingApprovals: 5,
  activeNetwork: 5,
  templateAdoption: 79,
  blendedRoas: 28.0,
  brandRating: 4.1,
  reviewVelocity: 2512,
};

// Local campaigns awaiting HQ approval — the killer feature for CASL compliance
const CAMPAIGN_APPROVALS = [
  {
    id:'CMP-2026-0198',
    location:'HB010', locationName:'Scarborough',
    name:'Fade Friday — Back to School Edition',
    channel:'SMS',
    submittedBy:'K. Manderson',
    submittedAt:'2026-09-12 14:22 EDT',
    recipients: 412,
    consentChecked: 387,
    consentMissing: 25,
    template:'custom',
    promo:'FADE10',
    riskScore: 'critical',
    risks: [
      { code:'CASL',  level:'critical', detail:'25 of 412 recipients flagged consent=false. Sending = repeat CASL violation for this shop.' },
      { code:'BRAND', level:'high',     detail:'Message copy "$10 off — limited!" deviates from brand tone guidelines.' },
    ],
  },
  {
    id:'CMP-2026-0199',
    location:'HB009', locationName:'Richmond Hill',
    name:'Fall Refresh — Richmond Hill Push',
    channel:'SMS',
    submittedBy:'G. Latham',
    submittedAt:'2026-09-12 11:08 EDT',
    recipients: 286,
    consentChecked: 282,
    consentMissing: 4,
    template:'brand-fall-refresh',
    promo:'FALL15',
    riskScore: 'high',
    risks: [
      { code:'CASL', level:'high', detail:'4 recipients on the soft-bounce list — recommend exclusion.' },
    ],
  },
  {
    id:'CMP-2026-0200',
    location:'HB002', locationName:'Mississauga',
    name:'Fall Refresh 15% Off — Mississauga',
    channel:'Email',
    submittedBy:'S. Davidson',
    submittedAt:'2026-09-11 10:14 EDT',
    recipients: 1543,
    consentChecked: 1543,
    consentMissing: 0,
    template:'brand-fall-refresh',
    promo:'FALL15',
    riskScore: 'clean',
    risks: [],
  },
  {
    id:'CMP-2026-0201',
    location:'HB005', locationName:'Hamilton',
    name:'Movember Beard Event — Early Bird',
    channel:'Email',
    submittedBy:'W. Underhill',
    submittedAt:'2026-09-11 09:42 EDT',
    recipients: 920,
    consentChecked: 918,
    consentMissing: 2,
    template:'brand-movember',
    promo:'MOVEMBER20',
    riskScore: 'low',
    risks: [
      { code:'BRAND', level:'low', detail:'Subject line exceeds the 45-character brand guideline — recommend shortening.' },
    ],
  },
  {
    id:'CMP-2026-0202',
    location:'HB007', locationName:'Markham',
    name:'Loyalty Boost — Markham Regulars',
    channel:'WhatsApp',
    submittedBy:'S. Fitzgerald',
    submittedAt:'2026-09-10 16:55 EDT',
    recipients: 142,
    consentChecked: 142,
    consentMissing: 0,
    template:'brand-loyalty',
    promo:'MARK5',
    riskScore: 'clean',
    risks: [],
  },
];

// Brand campaign templates — adoption tracking
const BRAND_TEMPLATES = [
  { id:'tpl-refer',     name:'Refer a Mate',            channel:'WhatsApp', adopted: 10, sent: 10951, openRate:100.0, conversions: 1396, revenue: 37981, status:'live',  thumb:'#10B981' },
  { id:'tpl-winback',   name:'Win Back Wednesday',      channel:'In-Store', adopted:  9, sent:  2616, openRate: 91.7, conversions:  534, revenue: 14465, status:'live',  thumb:'#F59E0B' },
  { id:'tpl-summer',    name:'Summer Splash 20% Off',   channel:'Email',    adopted: 10, sent: 15270, openRate: 24.2, conversions:  293, revenue:  8144, status:'live',  thumb:'#34D399' },
  { id:'tpl-fall',      name:'Fall Refresh 15% Off',    channel:'Email',    adopted:  9, sent: 15270, openRate: 26.6, conversions:  282, revenue:  7632, status:'live',  thumb:'#EC4899' },
  { id:'tpl-holiday',   name:'Holiday Gift Card Bonus', channel:'WhatsApp', adopted:  8, sent: 15270, openRate: 84.9, conversions:  238, revenue:  5794, status:'live',  thumb:'#A855F7' },
  { id:'tpl-welcome',   name:'New Member Welcome',      channel:'SMS',      adopted:  7, sent:   306, openRate: 90.4, conversions:   14, revenue:   483, status:'live',  thumb:'#22C55E' },
  { id:'tpl-movember',  name:'Movember Beard Event',    channel:'SMS',      adopted:  0, sent:     0, openRate:  0,   conversions:    0, revenue:     0, status:'draft', thumb:'#FBBF24' },
];

// Local performance — campaigns sent in last 30d, by location
const LOCAL_PERF = [
  { location:'HB001', name:'Toronto Downtown', type:'corporate',  sends: 1752, openRate: 91.2, ctr:  8.4, conversions: 12, revenue:  420, roas: 5.2, templateUse: 92, complaints: 0 },
  { location:'HB002', name:'Mississauga',      type:'corporate',  sends: 1728, openRate: 90.4, ctr:  8.2, conversions: 11, revenue:  405, roas: 5.0, templateUse: 90, complaints: 0 },
  { location:'HB003', name:'Oakville',         type:'franchised', sends: 1718, openRate: 89.8, ctr:  8.0, conversions: 10, revenue:  390, roas: 4.8, templateUse: 88, complaints: 0 },
  { location:'HB004', name:'Burlington',       type:'franchised', sends: 1720, openRate: 90.1, ctr:  7.9, conversions: 10, revenue:  380, roas: 4.7, templateUse: 86, complaints: 0 },
  { location:'HB005', name:'Hamilton',         type:'franchised', sends: 1719, openRate: 88.6, ctr:  7.7, conversions:  9, revenue:  360, roas: 4.4, templateUse: 84, complaints: 0 },
  { location:'HB006', name:'Vaughan',          type:'franchised', sends: 1710, openRate: 89.3, ctr:  7.6, conversions:  9, revenue:  350, roas: 4.3, templateUse: 82, complaints: 0 },
  { location:'HB007', name:'Markham',          type:'franchised', sends: 1686, openRate: 90.6, ctr:  7.4, conversions:  8, revenue:  340, roas: 4.2, templateUse: 80, complaints: 0 },
  { location:'HB008', name:'Brampton',         type:'franchised', sends: 1707, openRate: 88.9, ctr:  7.3, conversions:  8, revenue:  330, roas: 4.1, templateUse: 78, complaints: 0 },
  { location:'HB009', name:'Richmond Hill',    type:'franchised', sends: 1701, openRate: 89.5, ctr:  6.8, conversions:  7, revenue:  310, roas: 3.8, templateUse: 72, complaints: 1 },
  { location:'HB010', name:'Scarborough',      type:'franchised', sends: 1661, openRate: 87.4, ctr:  5.9, conversions:  5, revenue:  276, roas: 3.4, templateUse: 38, complaints: 2 },
];

// Reputation — Google rating + review velocity by location
const REPUTATION = [
  { location:'HB001', name:'Toronto Downtown', rating: 4.1, reviews30d: 329, responseRate: 46, sentiment:'positive' },
  { location:'HB002', name:'Mississauga',      rating: 4.1, reviews30d: 318, responseRate: 45, sentiment:'positive' },
  { location:'HB005', name:'Hamilton',         rating: 4.2, reviews30d: 293, responseRate: 45, sentiment:'positive' },
  { location:'HB003', name:'Oakville',         rating: 4.1, reviews30d: 265, responseRate: 46, sentiment:'mixed' },
  { location:'HB006', name:'Vaughan',          rating: 4.2, reviews30d: 253, responseRate: 44, sentiment:'positive' },
  { location:'HB004', name:'Burlington',       rating: 4.1, reviews30d: 245, responseRate: 45, sentiment:'mixed' },
  { location:'HB007', name:'Markham',          rating: 4.1, reviews30d: 244, responseRate: 46, sentiment:'mixed' },
  { location:'HB009', name:'Richmond Hill',    rating: 4.2, reviews30d: 206, responseRate: 44, sentiment:'mixed',    alert:'3 detractor reviews cite the same barber' },
  { location:'HB008', name:'Brampton',         rating: 4.1, reviews30d: 196, responseRate: 46, sentiment:'mixed' },
  { location:'HB010', name:'Scarborough',      rating: 4.1, reviews30d: 163, responseRate: 45, sentiment:'negative', alert:'CASL complaint on file — outbound marketing paused pending HQ review' },
];

const RISK_STYLE = {
  critical: { bg:'#FEE2E2', color:'#B91C1C', label:'CRITICAL' },
  high:     { bg:'#FFEDD5', color:'#C2410C', label:'HIGH' },
  low:      { bg:'#FEF3C7', color:'#92400E', label:'LOW' },
  clean:    { bg:'#DCFCE7', color:'#166534', label:'CLEAN' },
};

// ── Sub-components ──────────────────────────────────────────────────────

const MarketingKpis = () => {
  const k = MK_KPIS;
  return (
    <div className="cat-kpis">
      <div className="cat-kpi cat-kpi-urgent">
        <div className="cat-kpi-l">Awaiting your OK <InfoDot tip="Local campaigns built by franchisees that need your sign-off before they send. We auto-scan for CASL/PIPEDA risks first."/></div>
        <div className="cat-kpi-v">{k.pendingApprovals}</div>
        <div className="cat-kpi-sub">1 critical · review before send</div>
      </div>
      <div className="cat-kpi">
        <div className="cat-kpi-l">Active campaigns <InfoDot tip="Campaigns currently sending or scheduled to send across the network."/></div>
        <div className="cat-kpi-v">{k.activeNetwork}</div>
        <div className="cat-kpi-sub">5 brand campaigns in market</div>
      </div>
      <div className="cat-kpi cat-kpi-warn">
        <div className="cat-kpi-l">Shops using brand templates <InfoDot tip="How many shops are using the HQ-built campaign templates instead of writing their own from scratch."/></div>
        <div className="cat-kpi-v">{k.templateAdoption}%</div>
        <div className="cat-kpi-sub">1 shop below 50%</div>
      </div>
      <div className="cat-kpi">
        <div className="cat-kpi-l">Return per $1 spent <InfoDot tip="For every dollar of marketing spend, how many dollars come back as client revenue. 6× means $6 back for every $1 spent."/></div>
        <div className="cat-kpi-v">{k.blendedRoas.toFixed(1)}×</div>
        <div className="cat-kpi-sub">Network-wide last 30d</div>
      </div>
      <div className="cat-kpi">
        <div className="cat-kpi-l">Brand rating <InfoDot tip="Average Google star rating across all 10 shops' business profiles."/></div>
        <div className="cat-kpi-v">{k.brandRating} ★</div>
        <div className="cat-kpi-sub">{k.reviewVelocity.toLocaleString()} reviews / 30d</div>
      </div>
    </div>
  );
};

const ApprovalsTab = ({ onOpenLoc }) => {
  const critical = CAMPAIGN_APPROVALS.filter(c => c.riskScore === 'critical');
  return (
    <section className="card">
      <header className="card-head">
        <div className="card-head-left">
          <Icon name="shield" size={16} stroke={2}/>
          <h2>Campaign approval queue</h2>
          <InfoDot tip="Local campaigns built by franchisees awaiting HQ sign-off. Auto-scans consent lists for CASL/PIPEDA risk and flags brand-tone deviations before send."/>
          <span className="card-head-count">{CAMPAIGN_APPROVALS.length} pending · {critical.length} critical</span>
        </div>
        <div className="card-head-right">
          <button className="ghost-btn small">Approve all clean</button>
          <button className="ghost-btn small">Auto-approve settings</button>
        </div>
      </header>

      <div className="approval-list">
        {CAMPAIGN_APPROVALS.map(c => {
          const risk = RISK_STYLE[c.riskScore];
          return (
            <article key={c.id} className={'approval-row approval-' + c.riskScore}>
              <div className="approval-row-l">
                <div className="approval-risk" style={{ background: risk.bg, color: risk.color }}>{risk.label}</div>
                <div className="approval-id">{c.id}</div>
                <div className="approval-channel"><span className={'channel-pill channel-' + c.channel.toLowerCase().replace(/[^a-z]/g, '')}>{c.channel}</span></div>
              </div>

              <div className="approval-row-main">
                <div className="approval-name">{c.name}</div>
                <div className="approval-meta">
                  <span className="approval-loc" onClick={() => { const loc = window.FRANCHISE_DATA.LOCATIONS.find(l => l.id === c.location); if (loc) onOpenLoc(loc); }}>
                    <Icon name="pin" size={11} stroke={2}/> {c.locationName}
                  </span>
                  <span>By {c.submittedBy}</span>
                  <span>Submitted {c.submittedAt.split(' ')[0]}</span>
                  <span>Promo: <code>{c.promo}</code></span>
                  <span>Template: {c.template === 'custom' ? <b style={{ color:'#B91C1C' }}>Custom (not brand)</b> : <span>{c.template}</span>}</span>
                </div>

                <div className="approval-recipients">
                  <div className="approval-rec-stat">
                    <span>Total recipients</span><b>{c.recipients.toLocaleString()}</b>
                  </div>
                  <div className="approval-rec-stat">
                    <span>Consent verified</span><b className="is-good">{c.consentChecked.toLocaleString()}</b>
                  </div>
                  {c.consentMissing > 0 && (
                    <div className="approval-rec-stat">
                      <span>Consent missing</span><b className="is-bad">{c.consentMissing}</b>
                    </div>
                  )}
                </div>

                {c.risks.length > 0 && (
                  <div className="approval-risks">
                    {c.risks.map((r, i) => (
                      <div key={i} className={'approval-risk-row approval-risk-' + r.level}>
                        <span className="approval-risk-code">{r.code}</span>
                        <span>{r.detail}</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              <div className="approval-row-r">
                {c.riskScore === 'critical' ? (
                  <>
                    <button className="po-action-bad"><Icon name="close" size={12} stroke={2.4}/> Block & require fix</button>
                    <button className="ghost-btn small">Open campaign</button>
                  </>
                ) : c.riskScore === 'clean' ? (
                  <>
                    <button className="primary-btn"><Icon name="check" size={12} stroke={2.4}/> Approve & send</button>
                    <button className="ghost-btn small">Open</button>
                  </>
                ) : (
                  <>
                    <button className="primary-btn"><Icon name="check" size={12} stroke={2.4}/> Approve with fix</button>
                    <button className="ghost-btn small">Send back</button>
                    <button className="ghost-btn small">Open</button>
                  </>
                )}
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
};

const TemplatesTab = () => (
  <section className="card">
    <header className="card-head">
      <div className="card-head-left">
        <Icon name="megaphone" size={16} stroke={2}/>
        <h2>Brand campaign templates</h2>
        <InfoDot tip="HQ-owned campaign templates franchisees can deploy locally. Adoption % tracks how many shops have run each in the last 90 days."/>
        <span className="card-head-count">{BRAND_TEMPLATES.filter(t => t.status === 'live').length} live · 1 draft</span>
      </div>
      <div className="card-head-right">
        <button className="ghost-btn small"><Icon name="plus" size={12} stroke={2.4}/> New template</button>
      </div>
    </header>

    <div className="tpl-grid">
      {BRAND_TEMPLATES.map(tpl => (
        <article key={tpl.id} className={'tpl-card' + (tpl.status === 'draft' ? ' is-draft' : '')}>
          <div className="tpl-thumb" style={{ background: tpl.thumb + '22', borderColor: tpl.thumb }}>
            <Icon name={tpl.channel === 'SMS' ? 'message' : tpl.channel === 'In-app' ? 'sparkle' : tpl.channel === 'Referral' ? 'users' : tpl.channel === 'Loyalty' ? 'gift' : 'megaphone'} size={22} stroke={2}/>
          </div>
          <div className="tpl-body">
            <div className="tpl-name">{tpl.name}</div>
            <div className="tpl-meta">
              <span className={'channel-pill channel-' + tpl.channel.toLowerCase().replace(/[^a-z]/g, '')}>{tpl.channel}</span>
              {tpl.status === 'draft' && <span className="pill" style={{ background:'#F1F5F9', color:'#475569' }}>Draft</span>}
            </div>
            {tpl.status === 'live' ? (
              <>
                <div className="tpl-adoption">
                  <div className="tpl-adoption-l">Used at</div>
                  <div className="tpl-adoption-bar">
                    <div className="cat-meter-bar"><div className="cat-meter-fill" style={{ width: (tpl.adopted/10*100) + '%', background: tpl.adopted >= 8 ? '#16A34A' : tpl.adopted >= 5 ? '#F59E0B' : '#EF4444' }}/></div>
                    <span>{tpl.adopted}/10</span>
                  </div>
                </div>
                <div className="tpl-stats">
                  <div><span>Open rate</span><b>{tpl.openRate.toFixed(1)}%</b></div>
                  <div><span>Conversions</span><b>{tpl.conversions}</b></div>
                  <div><span>Revenue</span><b>{fmtMoneyFull(tpl.revenue)}</b></div>
                </div>
              </>
            ) : (
              <div className="tpl-empty">Not yet released. Schedule launch when ready.</div>
            )}
          </div>
        </article>
      ))}
    </div>
  </section>
);

const LocalPerformanceTab = ({ onOpenLoc }) => {
  const maxRev = Math.max(...LOCAL_PERF.map(l => l.revenue));
  return (
    <section className="card">
      <header className="card-head">
        <div className="card-head-left">
          <Icon name="trend" size={16} stroke={2}/>
          <h2>Marketing performance by location</h2>
          <InfoDot tip="Marketing efficacy ranked per shop. Low template-use combined with low ROAS and complaints is a coaching signal."/>
          <span className="card-head-count">Last 30 days · {LOCAL_PERF.length} shops</span>
        </div>
        <div className="card-head-right">
          <button className="ghost-btn small">Export</button>
        </div>
      </header>

      <div className="lb-table-wrap">
        <table className="lb-table cat-table">
          <thead>
            <tr>
              <th>Location</th>
              <th>Type</th>
              <th className="num">Messages sent <InfoDot tip="Total emails / SMS / in-app messages delivered to clients in the last 30 days."/></th>
              <th className="num">Open rate <InfoDot tip="% of delivered messages that the client opened."/></th>
              <th className="num">Click rate <InfoDot tip="% of recipients who clicked through to book or buy."/></th>
              <th className="num">Bookings <InfoDot tip="Number of client bookings (or purchases) directly attributed to the campaign."/></th>
              <th>Revenue</th>
              <th className="num">Return / $1 <InfoDot tip="For every $1 spent on this shop's campaigns, how many dollars came back in client revenue."/></th>
              <th>Brand template use <InfoDot tip="% of this shop's campaigns built from an HQ template (vs. custom-written by the operator)."/></th>
              <th>Complaints</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {LOCAL_PERF.map(l => {
              const tone = l.roas >= 7 ? 'good' : l.roas >= 5 ? 'mid' : 'low';
              return (
                <tr key={l.location} onClick={() => { const loc = window.FRANCHISE_DATA.LOCATIONS.find(x => x.id === l.location); if (loc) onOpenLoc(loc); }} className="lb-row">
                  <td><div className="lb-name">{l.name}</div><div className="lb-sub">{l.location}</div></td>
                  <td><TypeBadge type={l.type}/></td>
                  <td className="num">{l.sends.toLocaleString()}</td>
                  <td className="num">{l.openRate.toFixed(1)}%</td>
                  <td className="num">{l.ctr.toFixed(1)}%</td>
                  <td className="num">{l.conversions}</td>
                  <td>
                    <div className="cat-meter">
                      <div className="cat-meter-bar"><div className="cat-meter-fill" style={{ width: (l.revenue/maxRev*100).toFixed(0) + '%', background:'#16A34A' }}/></div>
                      <span>{fmtMoneyFull(l.revenue)}</span>
                    </div>
                  </td>
                  <td className="num"><span className={'roas-chip ' + tone}>{l.roas.toFixed(1)}×</span></td>
                  <td>
                    <div className="cat-meter">
                      <div className="cat-meter-bar"><div className="cat-meter-fill" style={{ width: l.templateUse + '%', background: l.templateUse >= 80 ? '#16A34A' : l.templateUse >= 60 ? '#F59E0B' : '#EF4444' }}/></div>
                      <span>{l.templateUse}%</span>
                    </div>
                  </td>
                  <td>
                    {l.complaints === 0 && <span className="pill" style={{ background:'#DCFCE7', color:'#166534' }}>None</span>}
                    {l.complaints > 0 && l.complaints < 4 && <span className="pill" style={{ background:'#FEF3C7', color:'#92400E' }}>{l.complaints}</span>}
                    {l.complaints >= 4 && <span className="pill" style={{ background:'#FEE2E2', color:'#B91C1C' }}>{l.complaints} ⚠</span>}
                  </td>
                  <td className="lb-open"><Icon name="arrow-right" size={14} stroke={2}/></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </section>
  );
};

const ReputationTab = ({ onOpenLoc }) => (
  <section className="card">
    <header className="card-head">
      <div className="card-head-left">
        <Icon name="star" size={16} stroke={2}/>
        <h2>Reputation by location</h2>
        <InfoDot tip="Brand reputation sourced from connected Google Business Profile per location. Below-threshold response rates auto-flag for HQ."/>
        <span className="card-head-count">Network avg 4.1\u2605 \u00b7 response rate below 75% target network-wide</span>
      </div>
      <div className="card-head-right">
        <button className="ghost-btn small">Open response queue</button>
      </div>
    </header>

    <div className="rep-grid">
      {REPUTATION.map(r => {
        const tone = r.rating >= 4.5 ? 'good' : r.rating >= 4.0 ? 'mid' : 'bad';
        return (
          <article key={r.location} className={'rep-card rep-' + tone} onClick={() => { const loc = window.FRANCHISE_DATA.LOCATIONS.find(l => l.id === r.location); if (loc) onOpenLoc(loc); }}>
            <div className="rep-card-head">
              <div className="rep-name">{r.name}</div>
              <div className={'rep-rating rep-rating-' + tone}>
                {r.rating.toFixed(1)} <span>★</span>
              </div>
            </div>
            <div className="rep-stats">
              <div><span>Reviews / 30d</span><b>{r.reviews30d}</b></div>
              <div><span>Response rate</span><b className={r.responseRate < 75 ? 'is-bad' : ''}>{r.responseRate}%</b></div>
              <div><span>Sentiment</span><b className={'is-' + r.sentiment}>{r.sentiment}</b></div>
            </div>
            {r.alert && (
              <div className="rep-alert"><Icon name="warn" size={11} stroke={2.4}/> {r.alert}</div>
            )}
          </article>
        );
      })}
    </div>
  </section>
);

// ── Main ────────────────────────────────────────────────────────────────
const MarketingPage = ({ onOpenLoc }) => {
  const [tab, setTab] = React.useState('approvals');
  return (
    <div className="page">
      <div className="pageheader">
        <div>
          <h1 className="pageheader-title">Brand Marketing</h1>
          <p className="pageheader-sub">Approve local campaigns, govern brand templates, track marketing performance and reputation across all 10 locations.</p>
        </div>
      </div>

      <MarketingKpis/>

      <div className="cat-tabs">
        {[
          ['approvals',  'Campaign approvals', 'shield',    CAMPAIGN_APPROVALS.length],
          ['templates',  'Brand templates',    'megaphone', BRAND_TEMPLATES.length],
          ['performance','Local performance',  'trend',     0],
          ['reputation', 'Reputation',         'star',      REPUTATION.filter(r => r.rating < 4.0).length],
        ].map(([id, label, icon, count]) => (
          <button key={id} className={'cat-tab' + (tab === id ? ' is-on' : '')} onClick={() => setTab(id)}>
            <Icon name={icon} size={14} stroke={2}/>
            <span>{label}</span>
            {count > 0 && <span className="cat-tab-count">{count}</span>}
          </button>
        ))}
      </div>

      {tab === 'approvals' && <ApprovalsTab onOpenLoc={onOpenLoc}/>}
      {tab === 'templates' && <TemplatesTab/>}
      {tab === 'performance' && <LocalPerformanceTab onOpenLoc={onOpenLoc}/>}
      {tab === 'reputation' && <ReputationTab onOpenLoc={onOpenLoc}/>}
    </div>
  );
};

Object.assign(window, { MarketingPage });