// Home page
function Home({ setPage, tweaks }) {
  useReveal();
  return (
    <React.Fragment>
      <HeroSection setPage={setPage} tweaks={tweaks} />
      <ServicesStrip />
      <ServicesOverview setPage={setPage} tweaks={tweaks} />
      <ProcessSection />
      <TestimonialsSection />
      <SystemTeaser setPage={setPage} />
      <CTASection setPage={setPage} />
    </React.Fragment>
  );
}

function HeroSection({ setPage, tweaks }) {
  const heroVariant = tweaks.heroLayout || 'editorial';
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="reveal in">
            <div className="eyebrow" style={{ marginBottom: 24 }}>Human Resources · Leadership Consulting</div>
            {heroVariant === 'editorial' && (
              <h1>
                Your HR team,<br />
                <span className="accent">without the overhead.</span>
              </h1>
            )}
            {heroVariant === 'direct' && (
              <h1>
                Practical HR for growing<br />
                <span className="accent">Canadian businesses.</span>
              </h1>
            )}
            {heroVariant === 'question' && (
              <h1>
                What if HR<br />
                <span className="accent">actually moved you forward?</span>
              </h1>
            )}
            <p className="hero-lede">
              Catalyst HR is an outsourced and on-demand HR practice for Canadian small and mid-sized businesses. We handle the policies, people decisions and hard conversations — so your team can keep building.
            </p>
            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={() => setPage('contact')}>
                Book a discovery call <Arrow />
              </button>
              <button className="btn btn-ghost" onClick={() => setPage('services')}>
                See what we do
              </button>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <div className="label">Coverage</div>
                <div className="value">Canada-wide</div>
              </div>
              <div className="hero-meta-item">
                <div className="label">Works with</div>
                <div className="value">1–100 employee teams</div>
              </div>
              <div className="hero-meta-item">
                <div className="label">Engagements</div>
                <div className="value">Fractional · Project · On-call</div>
              </div>
            </div>
          </div>
          <div className="reveal in">
            <div className="hero-visual">
              <div className="placeholder-img" style={{ background: 'none', padding: 0, overflow: 'hidden' }}>
                <img src="assets/hero-team.webp" alt="Catalyst HR working session" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicesStrip() {
  const items = ['Labour Relations','Employee Engagement','Recruitment & Onboarding','Compensation Reviews','Organizational Structure','Job Design','Workplace Investigations','Employee Relations'];
  const doubled = [...items, ...items];
  return (
    <div className="strip">
      <div className="strip-inner">
        {doubled.map((it, i) => (
          <span key={i}>{it}<span className="strip-dot"> · </span></span>
        ))}
      </div>
    </div>
  );
}

function ServicesOverview({ setPage, tweaks }) {
  const models = [
    {
      num: '01',
      title: 'Fractional HR',
      tagline: 'Your fractional HR function.',
      body: 'We embed with your leadership team on a recurring basis — handling policies, people decisions, employee relations and compliance as an extension of your business. Monthly engagements, scaled to your headcount.',
      tags: ['Ongoing partnership', 'Monthly cadence', 'Scaled to headcount'],
    },
    {
      num: '02',
      title: 'On-Demand HR',
      tagline: 'Project-based help, when you need it.',
      body: 'A tricky termination, a policy rewrite, an urgent investigation, or a compensation review. Book the scope you need — no retainer, no long-term commitment. Most projects start within the week.',
      tags: ['Project-based', 'No retainer', '48-hr response'],
    },
  ];
  const specialties = [
    { num: '01', title: 'Labour Relations', body: 'Collective agreements, grievances, arbitrations and union certification — with a partner who has sat on both sides.' },
    { num: '02', title: 'Employee Relations', body: 'Performance issues, difficult conversations, accommodations and return-to-work plans. Documented and defensible.' },
    { num: '03', title: 'Workplace Investigations', body: 'Independent, rigorous investigations into harassment, discrimination and misconduct complaints.' },
    { num: '04', title: 'Employee Engagement', body: 'Pulse programs, manager coaching, and action planning that actually closes the loop.' },
    { num: '05', title: 'Recruitment & Onboarding', body: 'Role scoping, structured interviewing and 30-60-90 onboarding plans that make hires stick.' },
    { num: '06', title: 'Compensation Reviews', body: 'Market benchmarking, pay bands, and merit cycles that give you defensible pay decisions.' },
    { num: '07', title: 'Organizational Structure', body: 'Spans of control, reporting lines, role clarity. Structure decisions made explicit and reversible.' },
    { num: '08', title: 'Job Design & Descriptions', body: 'Clear, legally sound job descriptions that become the foundation for hiring, reviews and comp.' },
  ];
  return (
    <section>
      <div className="container">
        <div className="services-intro">
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>What we do</div>
            <h2>Two ways to<br />work with us.</h2>
          </div>
          <p>Whether you need someone two days a month or ten hours this week, Catalyst HR flexes to match your stage. Every engagement starts with a discovery call — no pitch decks, no retainers to sign first.</p>
        </div>

        {/* Engagement models — large cards */}
        <div className="engagement-models">
          {models.map((m, i) => (
            <div key={i} onClick={() => setPage('services')} className={`engagement-card ${i === 0 ? 'is-dark' : ''}`}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
            >
              <div className="engagement-eyebrow">Engagement model · {m.num}</div>
              <h3 className="engagement-title">{m.title}</h3>
              <div className="engagement-tagline">{m.tagline}</div>
              <p className="engagement-body">{m.body}</p>
              <div className="engagement-tags">
                {m.tags.map((t, j) => (
                  <span key={j} className="engagement-tag">{t}</span>
                ))}
              </div>
              <div className="engagement-cta">
                Learn more <Arrow />
              </div>
            </div>
          ))}
        </div>

        {/* Specialty areas */}
        <div className="specialty-intro">
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Specialty areas</div>
            <h2>Where we go<br />deep.</h2>
          </div>
          <p style={{ color: 'var(--ink-muted)', fontSize: 17, lineHeight: 1.6 }}>Every engagement — outsourced or on-demand — draws from the same set of specialty areas. These are the problems we've handled hundreds of times.</p>
        </div>
        <div className="services-grid specialty-grid">
          {specialties.map((s, i) => (
            <div key={i} className="service-card" onClick={() => setPage('services')}>
              <div className="service-num">
                <span>{s.num} / 08</span>
                <span className="arrow-sm"><Arrow /></span>
              </div>
              <h3 style={{ fontSize: 20 }}>{s.title}</h3>
              <p style={{ fontSize: 14 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProcessSection() {
  const steps = [
    { num: 'Step 01', title: 'Discovery call', body: 'A 30-minute conversation about your team, where it hurts, and what good looks like. No cost, no pressure.' },
    { num: 'Step 02', title: 'Scoped proposal', body: 'A plain-language proposal with fixed scope, fixed pricing and a timeline. No surprise retainers.' },
    { num: 'Step 03', title: 'Work the plan', body: 'Weekly working sessions and async support. We draft, decide, and document — with you in the loop the whole way.' },
    { num: 'Step 04', title: 'Hand over', body: 'We leave you with documented policies, trained managers and a clear operating rhythm your team can run on its own.' },
  ];
  return (
    <section className="process-section">
      <div className="container">
        <div className="process-intro">
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>How we work</div>
            <h2>Clear engagements.<br />No surprise retainers.</h2>
          </div>
          <p>Every engagement is structured the same way — so you know what you're getting before a dollar changes hands.</p>
        </div>
        <div className="process-steps">
          {steps.map((s, i) => (
            <div key={i} className="process-step reveal">
              <div className="process-step-num">{s.num}</div>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  return (
    <section className="testimonials">
      <div className="container">
        <div className="testimonials-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>What clients say</div>
            <h2>Trusted by leaders<br />who put their people first.</h2>
          </div>
          <div style={{ color: 'var(--ink-muted)', fontSize: 14 }}>★★★★★ &nbsp;Based on Google Reviews</div>
        </div>
        <div className="testimonials-grid">
          <div className="testimonial feature reveal">
            <div className="testimonial-quote-mark">"</div>
            <div className="testimonial-text">
              Christine turned complex HR questions into practical next steps, tailored everything to the business, and handled each detail with professionalism and care.
            </div>
            <div className="testimonial-attr">
              <div className="testimonial-avatar">B</div>
              <div>
                <div className="testimonial-name">Ben S.</div>
                <div className="testimonial-role">Founder, Client Co.</div>
              </div>
            </div>
          </div>
          <div className="testimonials-aside">
            <div className="testimonial reveal">
              <div className="testimonial-quote-mark">"</div>
              <div className="testimonial-text">
                I would highly recommend Christine if your organization is looking for People and Culture support.
              </div>
              <div className="testimonial-attr">
                <div className="testimonial-avatar">DA</div>
                <div>
                  <div className="testimonial-name">Dennis Alvestad</div>
                  <div className="testimonial-role">CEO, Northern Credit Union</div>
                </div>
              </div>
            </div>
            <div className="testimonial reveal">
              <div className="testimonial-quote-mark">"</div>
              <div className="testimonial-text">
                A trusted partner that supports the needs of companies, executives and leaders that want to put their people first.
              </div>
              <div className="testimonial-attr">
                <div className="testimonial-avatar">SM</div>
                <div>
                  <div className="testimonial-name">Steve Marquis</div>
                  <div className="testimonial-role">SVP Member Experience, Northern Credit Union</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SystemTeaser({ setPage }) {
  const [email, setEmail] = useState('');
  const [joined, setJoined] = useState(false);
  const pillars = [
    'Province-aware policy engine',
    'Compliance training LMS',
    'Performance documentation',
    'WorkStyle behavioural profiling',
  ];
  const submit = (e) => { e.preventDefault(); if (email) { setJoined(true); } };
  return (
    <section className="system-teaser">
      <div className="container">
        <div className="system-teaser-inner">
          <div className="reveal">
            <div className="system-teaser-badge">
              <span className="pulse"></span>
              Coming 2026 · Private beta
            </div>
            <h2>The HR compliance platform<br />built <em style={{color: 'var(--teal)', fontStyle: 'italic'}}>for Canadian SMBs.</em></h2>
            <p>
              CatalystHR is the software side of our practice — a province-aware compliance platform that auto-generates your policy library, runs mandatory training, and keeps a legal-grade paper trail. Everything an Ontario small business needs to run HR without an HR department.
            </p>
            <div className="system-teaser-pillars">
              {pillars.map((p, i) => (
                <div key={i} className="system-pillar">
                  <svg className="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
                  {p}
                </div>
              ))}
            </div>
            {!joined ? (
              <form className="waitlist-form" onSubmit={submit}>
                <input type="email" placeholder="your@work-email.com" value={email} onChange={e => setEmail(e.target.value)} required />
                <button type="submit">Join waitlist</button>
              </form>
            ) : (
              <div style={{ color: 'var(--teal-dark)', fontWeight: 500, fontSize: 15 }}>
                ✓ You're on the list. We'll be in touch as spots open.
              </div>
            )}
            <div style={{ marginTop: 20 }}>
              <button className="btn-link" onClick={() => setPage('system')}>
                Learn more about CatalystHR <ArrowRight />
              </button>
            </div>
          </div>
          <div className="reveal">
            <SystemMockup />
          </div>
        </div>
      </div>
    </section>
  );
}

function SystemMockup() {
  return (
    <div className="system-mockup">
      <div className="mockup-window">
        <div className="mockup-sidebar">
          <div className="mockup-sidebar-logo" style={{ padding: '0 4px' }}>
            <img src="assets/logo-light.png" alt="CatalystHR" style={{ height: 28, width: 'auto', display: 'block' }} />
          </div>
          <div className="mockup-nav-item active"><span className="mockup-nav-dot"></span>Dashboard</div>
          <div className="mockup-nav-item"><span className="mockup-nav-dot"></span>Policies</div>
          <div className="mockup-nav-item"><span className="mockup-nav-dot"></span>Training</div>
          <div className="mockup-nav-item"><span className="mockup-nav-dot"></span>Performance</div>
          <div className="mockup-nav-item"><span className="mockup-nav-dot"></span>WorkStyle</div>
          <div className="mockup-nav-item"><span className="mockup-nav-dot"></span>People</div>
        </div>
        <div className="mockup-body">
          <div className="mockup-header">
            <div className="mockup-title">Compliance overview</div>
            <div style={{ fontSize: 11, color: '#6B7784' }}>Canada · 14 employees</div>
          </div>
          <div className="mockup-score-card">
            <div className="mockup-score-label">Canadian Compliance Score</div>
            <div className="mockup-score-value">78<span className="mockup-score-suffix">/ 100</span></div>
            <div className="mockup-bar-bg"><div className="mockup-bar-fill"></div></div>
          </div>
          <div className="mockup-row">
            <div className="mockup-mini">
              <div className="mockup-mini-label">Policies</div>
              <div className="mockup-mini-val">12<small>signed</small></div>
            </div>
            <div className="mockup-mini">
              <div className="mockup-mini-label">Training</div>
              <div className="mockup-mini-val">94<small>% done</small></div>
            </div>
          </div>
          <div className="mockup-row" style={{ marginTop: 10 }}>
            <div className="mockup-mini">
              <div className="mockup-mini-label">Open reviews</div>
              <div className="mockup-mini-val">3</div>
            </div>
            <div className="mockup-mini">
              <div className="mockup-mini-label">WorkStyle</div>
              <div className="mockup-mini-val">11<small>profiled</small></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CTASection({ setPage }) {
  return (
    <section className="cta-section">
      <div className="container">
        <div className="cta-inner">
          <div className="eyebrow no-rule" style={{ color: 'var(--teal-light)', justifyContent: 'center' }}>Let's talk</div>
          <h2 style={{ marginTop: 20 }}>
            Every good HR decision<br /> starts with a <span className="accent">conversation.</span>
          </h2>
          <p>
            Tell us about your team and what's in the way. We'll respond within one business day to book a 30-minute discovery call. No obligation, no sales script.
          </p>
          <div className="cta-buttons">
            <button className="btn btn-primary" onClick={() => setPage('contact')}>
              Book a discovery call <Arrow />
            </button>
            <button className="btn btn-ghost" onClick={() => setPage('services')}>
              Explore services
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home });