// Interior pages: Services, About, System, Cases, Contact, Migration

function ServicesPage({ setPage }) {
  useReveal();
  const services = [
    { num: '01', title: 'Labour Relations', body: 'Navigate collective agreements, grievances, arbitrations and union certification drives with someone who has sat on both sides of the bargaining table. We stay pragmatic and focused on operational outcomes.', tags: ['Collective bargaining', 'Grievance management', 'Arbitrations'] },
    { num: '02', title: 'Employee Relations', body: 'Performance issues, difficult conversations, accommodations, return-to-work plans. We support managers through the moments that are hard to get right — and document them so the business is protected.', tags: ['Performance management', 'Accommodations', 'Return to work'] },
    { num: '03', title: 'Workplace Investigations', body: 'Independent investigations into harassment, discrimination and misconduct complaints. Rigorous, documented, and conducted with discretion. We produce a findings report you can act on.', tags: ['Third-party', 'Bill 168 compliant', 'Findings report'] },
    { num: '04', title: 'Employee Engagement', body: 'Move from annual engagement surveys nobody reads to a running dialogue your leaders actually use. We design pulse programs, coach managers through one-on-ones, and close the loop on action planning.', tags: ['Pulse surveys', '1:1 templates', 'Action planning'] },
    { num: '05', title: 'Recruitment & Onboarding', body: 'Role scoping, structured interview kits, reference work and a 30-60-90 onboarding plan. We don\'t run search; we make sure the people you hire stay and succeed.', tags: ['Role design', 'Interview kits', '90-day onboarding'] },
    { num: '06', title: 'Compensation Reviews', body: 'Market benchmarking, pay band design, equity audits and merit cycle planning. We bring the data and help you defend the decisions.', tags: ['Benchmarking', 'Pay bands', 'Equity audits'] },
    { num: '07', title: 'Organizational Structure', body: 'Org design for growth: spans of control, reporting lines, role clarity. We make structure decisions explicit and reversible — with the reasoning documented.', tags: ['Org design', 'Spans & layers', 'Role clarity'] },
    { num: '08', title: 'Job Design & Descriptions', body: 'Clear, legally sound job descriptions that capture what the role actually does — and become the foundation for hiring, reviews, and comp.', tags: ['JDs', 'Competency frameworks'] },
  ];
  return (
    <React.Fragment>
      <section className="page-header">
        <div className="container">
          <div className="page-header-inner">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>Services</div>
              <h1>What we do,<br /><span style={{ color: 'var(--teal)', fontStyle: 'italic' }}>in detail.</span></h1>
            </div>
            <p>Eight specialty areas across two engagement models. Mix them however works — most clients start with one and grow the scope over time.</p>
          </div>
        </div>
      </section>
      <section>
        <div className="container">
          <div className="services-intro" style={{ marginBottom: 20 }}>
            <div>
              <h3 style={{ fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 600, color: 'var(--ink-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Engagement models</h3>
            </div>
          </div>
          <div className="responsive-2col" style={{ marginBottom: 80 }}>
            <div style={{ padding: 32, border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', background: 'var(--paper)' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--teal)', marginBottom: 16, letterSpacing: '0.1em' }}>MODEL 01</div>
              <h3 style={{ fontSize: 28, marginBottom: 12 }}>Fractional HR</h3>
              <p style={{ color: 'var(--ink-muted)', fontSize: 15.5, lineHeight: 1.6 }}>Your fractional HR function. We embed with your leadership team on a recurring basis, handling policies, people decisions, employee relations and compliance. Most clients run between 2–10 days a month, scaled to headcount.</p>
            </div>
            <div style={{ padding: 32, border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', background: 'var(--paper)' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--teal)', marginBottom: 16, letterSpacing: '0.1em' }}>MODEL 02</div>
              <h3 style={{ fontSize: 28, marginBottom: 12 }}>On-Demand HR</h3>
              <p style={{ color: 'var(--ink-muted)', fontSize: 15.5, lineHeight: 1.6 }}>Project or hourly work, no retainer. Best for teams under 15 people, or for one-time projects like an investigation, policy rewrite or compensation review.</p>
            </div>
          </div>
          <div style={{ marginBottom: 40 }}>
            <h3 style={{ fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 600, color: 'var(--ink-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Practice areas</h3>
          </div>
          {services.map((s, i) => (
            <div key={i} className="service-deep reveal">
              <div className="service-deep-num">{s.num} / 08</div>
              <div className="service-deep-title">{s.title}</div>
              <div className="service-deep-body">
                <p>{s.body}</p>
                <div className="service-deep-tags">
                  {s.tags.map((t, j) => <span key={j} className="tag">{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
      <CTASection setPage={setPage} />
    </React.Fragment>
  );
}

function AboutPage({ setPage }) {
  useReveal();
  return (
    <React.Fragment>
      <section className="page-header">
        <div className="container">
          <div className="page-header-inner">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>About</div>
              <h1>Built on a simple idea:<br /><span style={{ color: 'var(--teal)', fontStyle: 'italic' }}>HR should move you forward.</span></h1>
            </div>
            <p>We're a Canadian HR consulting practice working with leaders who care about the people side of their business — and who want a partner, not a vendor.</p>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="responsive-2col" style={{ gap: 80, alignItems: 'start', marginBottom: 100 }}>
            <div className="reveal">
              <div className="eyebrow" style={{ marginBottom: 20 }}>Our philosophy</div>
              <h2>HR is operational work,<br />done with humanity.</h2>
            </div>
            <div className="reveal">
              <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--charcoal-soft)', marginBottom: 20 }}>
                Small and mid-sized businesses in Canada face the same HR realities as enterprise companies — employment standards, health and safety, discrimination law, accommodations, terminations — but without the team or budget to handle them.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-muted)', marginBottom: 20 }}>
                We close that gap. The work is documentation, judgement calls, hard conversations and clean process. Done well, it protects the business and gives people a workplace worth staying in.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-muted)' }}>
                Done poorly, it becomes a liability — for everyone.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--sand)' }}>
        <div className="container">
          <div className="founder">
            <div className="reveal">
              <div className="founder-photo" style={{ background: 'none', padding: 0 }}>
                <img src="assets/christine.webp" alt="Christine, founder of Catalyst HR" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
              </div>
            </div>
            <div className="reveal">
              <div className="eyebrow" style={{ marginBottom: 20 }}>Founder</div>
              <h2>Christine — principal consultant</h2>
              <p style={{ marginTop: 24 }}>
                Catalyst HR is led by Christine, a senior HR and labour relations practitioner with over a decade of in-house and consulting experience across regulated industries, financial services and mission-driven organizations.
              </p>
              <p>
                She has sat on both sides of the bargaining table, led investigations into complex harassment complaints, stood up HR functions from scratch, and coached executives through every difficult conversation the business can put in front of them.
              </p>
              <p>
                Clients describe her as "professional, empathetic, and able to view the issue from all sides" — which is exactly what you need in your HR partner.
              </p>
              <div className="founder-credentials">
                <div className="founder-cred"><div className="label">Designation</div><div className="value">CHRL — Certified Human Resources Leader</div></div>
                <div className="founder-cred"><div className="label">Jurisdiction</div><div className="value">Ontario & Canada-wide</div></div>
                <div className="founder-cred"><div className="label">Specialties</div><div className="value">Labour Relations · Investigations</div></div>
                <div className="founder-cred"><div className="label">Sectors</div><div className="value">Financial services · Not-for-profit · SMB</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 20 }}>Values</div>
          <h2 style={{ marginBottom: 56 }}>How we show up.</h2>
          <div className="responsive-3col">
            {[
              { t: 'Plain language', b: 'No jargon, no corporate fog. If a policy needs to be read by your team, it needs to be understood by your team.' },
              { t: 'Documented decisions', b: 'Every judgement call is written down with the reasoning. Future-you will thank present-you.' },
              { t: 'Practical over perfect', b: 'We ship the 80% solution this week rather than the 100% solution that never lands. HR lives in reality.' },
              { t: 'Discretion by default', b: 'Investigations, terminations, exec coaching — we treat every engagement as confidential unless you say otherwise.' },
              { t: 'No junior staffing', b: 'You work directly with senior practitioners. The person on the discovery call is the person doing the work.' },
              { t: 'Aligned incentives', b: 'Flat-fee or hourly, your choice. We don\'t bill against retainers you\'re not using.' },
            ].map((v, i) => (
              <div key={i} className="reveal" style={{ padding: 28, border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', background: 'var(--paper)' }}>
                <h4 style={{ fontSize: 18, marginBottom: 10, color: 'var(--teal)', fontFamily: 'var(--serif)', fontWeight: 500, fontStyle: 'italic' }}>— {v.t}</h4>
                <p style={{ color: 'var(--ink-muted)', fontSize: 15, lineHeight: 1.6 }}>{v.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTASection setPage={setPage} />
    </React.Fragment>
  );
}

function SystemPage({ setPage }) {
  useReveal();
  const [email, setEmail] = useState('');
  const [joined, setJoined] = useState(false);
  return (
    <React.Fragment>
      <section className="system-hero">
        <div className="system-hero-inner">
          <div className="system-hero-head">
            <div>
              <div className="system-teaser-badge" style={{ background: 'rgba(91,148,180,0.2)', color: 'var(--teal-light)' }}>
                <span className="pulse"></span>
                Coming 2026 · Private beta
              </div>
              <h1 style={{ marginTop: 20 }}>
                HR compliance<br />
                for Canadian SMBs,<br />
                <span className="accent">finally handled.</span>
              </h1>
            </div>
            <div>
              <p className="system-hero-lede">
                CatalystHR is a Canadian-first HR compliance platform for businesses with 1–100 employees. Province-aware policy engine, mandatory training LMS, performance documentation and behavioural profiling — in one system, priced for small business.
              </p>
              <div className="system-hero-ctas">
                {!joined ? (
                  <form className="waitlist-form" onSubmit={(e) => { e.preventDefault(); if (email) setJoined(true); }} style={{ background: 'rgba(255,255,255,0.08)', borderColor: 'rgba(255,255,255,0.2)' }}>
                    <input type="email" placeholder="your@work-email.com" value={email} onChange={e => setEmail(e.target.value)} required style={{ color: 'white' }} />
                    <button type="submit" style={{ background: 'var(--paper)', color: 'var(--charcoal)' }}>Join waitlist</button>
                  </form>
                ) : (
                  <div style={{ color: 'var(--teal-light)', fontWeight: 500, fontSize: 15 }}>✓ You're on the list. We'll be in touch as spots open.</div>
                )}
              </div>
            </div>
          </div>
          <div style={{ paddingBottom: 60, display: 'flex', justifyContent: 'center' }}>
            <div style={{ width: '100%', maxWidth: 920 }}>
              <SystemMockup />
            </div>
          </div>
        </div>
      </section>

      <section className="system-pillars-section">
        <div className="container">
          <div className="services-intro">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>Four pillars</div>
              <h2>Everything a Canadian<br />small business needs<br />to run HR.</h2>
            </div>
            <p>Built on our consulting DNA — what we've handled by hand for years, now a platform your team can self-serve.</p>
          </div>
          <div className="system-pillars-grid">
            <div className="pillar-card reveal">
              <div className="icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 13h6M9 17h6"/></svg>
              </div>
              <h3>Policy Portal</h3>
              <p>Fill in a Business Profile once — we auto-generate every mandatory, province-specific policy. E-signed by employees, version-controlled, auto-updated when legislation changes.</p>
            </div>
            <div className="pillar-card reveal">
              <div className="icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
              </div>
              <h3>Compliance Training LMS</h3>
              <p>Provincially mandated courses: harassment prevention, OHSA, AODA, WHMIS, PIPEDA. Every completion timestamped, certified and stored as a legal audit trail.</p>
            </div>
            <div className="pillar-card reveal">
              <div className="icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg>
              </div>
              <h3>Performance Management</h3>
              <p>Structured review cycles, self-assessments, manager scoring, goal tracking and written-warning generation — a permanent paper trail exportable as PDF.</p>
            </div>
            <div className="pillar-card reveal">
              <div className="icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/></svg>
              </div>
              <h3>WorkStyle Profiling</h3>
              <p>Our proprietary behavioural assessment — Driver, Analyst, Connector, Supporter. Feeds into hiring, 1:1 templates and team composition analysis.</p>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 20 }}>Pricing</div>
          <h2>Flat-rate monthly,<br />priced for small business.</h2>
          <p style={{ color: 'var(--ink-muted)', fontSize: 17, marginTop: 20, maxWidth: 580 }}>No per-seat math, no upsells. Pick the plan that matches your headcount. 15–20% off for annual billing.</p>
          <div className="pricing-grid">
            {[
              { size: '1–10 employees', price: '$79', features: ['All policy templates', 'Training LMS', 'E-signature', 'Compliance score'] },
              { size: '11–25 employees', price: '$149', features: ['Everything in Starter', 'Performance module', 'WorkStyle profiling', 'Priority support'], featured: true },
              { size: '26–50 employees', price: '$249', features: ['Everything in Growth', 'Advanced reporting', 'SSO', 'Dedicated onboarding'] },
              { size: '51–100 employees', price: '$399', features: ['Everything in Scale', 'Custom policy library', 'API access', 'Quarterly strategy calls'] },
            ].map((p, i) => (
              <div key={i} className={`pricing-card ${p.featured ? 'featured' : ''}`}>
                <div className="pricing-size">{p.size}</div>
                <div className="pricing-amount">{p.price}<small>/month</small></div>
                <ul className="pricing-features">
                  {p.features.map((f, j) => <li key={j}>✓ {f}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTASection setPage={setPage} />
    </React.Fragment>
  );
}

function CasesPage({ setPage }) {
  useReveal();
  const cases = [
    { industry: 'Financial Services', employees: '450 employees', title: 'Rebuilding people operations at a credit union', body: 'Northern Credit Union partnered with Catalyst HR to support a people-and-culture transformation — from leadership coaching to front-line engagement programs.', metrics: [{ n: '+18pts', l: 'eNPS' }, { n: '94%', l: 'manager uptake' }] },
    { industry: 'Not-for-profit', employees: '60 employees', title: 'From founder-led to structured HR', body: 'A mission-driven organization needed an HR function it could actually run on. We stood up policy, comp, and manager training in 90 days — then handed it back.', metrics: [{ n: '90 days', l: 'to handover' }, { n: '12', l: 'policies published' }] },
    { industry: 'Professional Services', employees: '25 employees', title: 'An investigation, handled independently', body: 'A growing firm needed a third-party investigator for a harassment complaint. We ran the investigation end-to-end with a findings report the board could act on.', metrics: [{ n: '3 weeks', l: 'start to report' }, { n: '11', l: 'interviews' }] },
    { industry: 'Construction', employees: '80 employees', title: 'Collective agreement negotiation support', body: 'Joined the employer bargaining team mid-cycle to advise on language, operational risk, and settlement zones. Ratified on second pass.', metrics: [{ n: '4-year', l: 'deal ratified' }, { n: '0', l: 'work stoppages' }] },
  ];
  return (
    <React.Fragment>
      <section className="page-header">
        <div className="container">
          <div className="page-header-inner">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>Client stories</div>
              <h1>What good<br /><span style={{ color: 'var(--teal)', fontStyle: 'italic' }}>looks like.</span></h1>
            </div>
            <p>A selection of engagements across sectors. Full case studies available on request — client names are disclosed only with permission.</p>
          </div>
        </div>
      </section>
      <section>
        <div className="container">
          <div className="cases-grid">
            {cases.map((c, i) => (
              <div key={i} className="case-card reveal">
                <div className="case-card-img">
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, background: 'rgba(255,255,255,0.85)', padding: '6px 10px', borderRadius: 4 }}>photo · {c.industry.toLowerCase()}</div>
                </div>
                <div className="case-card-body">
                  <div className="case-card-eyebrow">
                    <span>{c.industry}</span><span className="dot">·</span><span>{c.employees}</span>
                  </div>
                  <h3>{c.title}</h3>
                  <p>{c.body}</p>
                  <div className="case-card-metrics">
                    {c.metrics.map((m, j) => (
                      <div key={j} className="case-metric">
                        <div className="n">{m.n}</div>
                        <div className="l">{m.l}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <TestimonialsSection />
      <CTASection setPage={setPage} />
    </React.Fragment>
  );
}

Object.assign(window, { ServicesPage, AboutPage, SystemPage, CasesPage });