// =============================================================
// Homepage — body sections (global-only voice)
// 1. Pillars (Hire/Pay/Manage/Stay compliant)
// 2. AI agents row
// 3. Live product modules (Payroll, EOR, HRMS)
// 4. Integrations
// 5. Pricing teaser (Coming soon)
// =============================================================

// ----------------- 1. Pillars -----------------
const HomePillars = () => {
  const pillars = [
    { num: '01', title: 'Hire',   amp: '& onboard',   desc: 'EOR in 150+ countries, contractors, and your own entities — one flow, compliant from day one.', tags: ['EOR', 'Contractor', 'Local entity', 'Onboarding'] },
    { num: '02', title: 'Pay',    amp: '& reconcile', desc: 'Multi-currency payroll, statutory deductions, and tax — paid on time, every cycle.',           tags: ['Payroll', 'Multi-currency', 'Tax', 'Pay slips'] },
    { num: '03', title: 'Manage', amp: '& support',   desc: 'Time off, time tracking, assets, expenses, documents, performance, and HR helpdesk in one place.', tags: ['Time off', 'Assets', 'Expenses', 'Helpdesk'] },
    { num: '04', title: 'Stay',   amp: '& sleep',     desc: 'Agents watch labour-law changes, contract expiry, and policy drift — flagged before they bite.', tags: ['Audit log', 'Policy drift', 'Renewals', 'Alerts'] },
  ];
  return (
    <section style={{ background: '#FAFAF7', padding: 'clamp(72px, 10vw, 120px) 0' }}>
      <style>{`
        .rmh-pillars-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:56px; gap:40px; flex-wrap:wrap; }
        .rmh-pillars-h2 { font-size: clamp(34px, 5vw, 64px); line-height: 1.0; letter-spacing: -0.035em; margin:0; font-weight:500; }
        .rmh-pillars-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
        @media (max-width: 900px) { .rmh-pillars-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 560px) { .rmh-pillars-grid { grid-template-columns: 1fr; } }
      `}</style>
      <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
        <div className="rmh-pillars-head">
          <div style={{ maxWidth: 720 }}>
            <Eyebrow>WHAT REMOTE& DOES</Eyebrow>
            <h2 className="rmh-pillars-h2">Four pillars. <Amp /> one operating system.</h2>
          </div>
          <p style={{ fontSize: 17, color: '#4A4D45', maxWidth: 380, lineHeight: 1.55, margin: 0 }}>
            Each pillar is a full product. Together they replace 6+ tools — and the agents glue them together so nothing falls through the cracks.
          </p>
        </div>
        <div className="rmh-pillars-grid">
          {pillars.map((p) => (
            <article key={p.num} style={{
              background: '#FFFFFF',
              border: '1px solid #E3E8DD',
              borderRadius: 20, padding: 28,
              display: 'flex', flexDirection: 'column', minHeight: 320,
              position: 'relative', overflow: 'hidden',
              boxShadow: '0 1px 0 rgba(46,81,25,0.04)',
            }}>
              <span style={{
                position: 'absolute', right: -10, top: -30,
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                fontSize: 220, color: 'rgba(46,81,25,0.04)', lineHeight: 1, pointerEvents: 'none',
              }}>{p.num}</span>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#2E5119', position: 'relative', zIndex: 1, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{p.num}</div>
              <h3 style={{ fontSize: 38, letterSpacing: '-0.025em', margin: '24px 0 10px', fontWeight: 500, lineHeight: 1, position: 'relative', zIndex: 1 }}>
                {p.title}<br/>
                <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: '#5A9233', fontWeight: 400, fontSize: 24, letterSpacing: '-0.01em' }}>{p.amp}</span>
              </h3>
              <p style={{ fontSize: 14, color: '#4A4D45', lineHeight: 1.5, margin: '8px 0 16px', position: 'relative', zIndex: 1 }}>{p.desc}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, position: 'relative', zIndex: 1, marginTop: 'auto' }}>
                {p.tags.map(t => (
                  <span key={t} style={{ fontSize: 10.5, fontFamily: 'var(--font-mono)', padding: '4px 8px', background: '#F6F7F2', border: '1px solid #E3E8DD', borderRadius: 6, color: '#4A4D45' }}>{t}</span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ----------------- 2. Agents row -----------------
const HomeAgents = () => {
  const agents = [
    { name: 'Payla', role: 'Payroll',     desc: 'Drafts payroll, reconciles records, and flags exceptions before close.',                    mood: '#2E5119', emoji: '💸', stat: '12 entities', statL: 'this run' },
    { name: 'Hira',  role: 'Hiring',      desc: 'Drafts compliant offers across countries and kicks off EOR onboarding.',                    mood: '#427025', emoji: '🤝', stat: '38 offers',   statL: 'this quarter' },
    { name: 'Remi',  role: 'Document',    desc: 'Generates contracts, certificates, and letters from your latest data — ready for e-sign.',  mood: '#2E8C7D', emoji: '📜', stat: '1,240',       statL: 'docs YTD' },
    { name: 'Hala',  role: 'Helpdesk',    desc: 'Answers employee questions and escalates the things only humans can do.',                   mood: '#15554B', emoji: '💬', stat: '94%',         statL: 'self-serve' },
    { name: 'Qadi',  role: 'Watcher',     desc: 'Watches labour-law changes, contract expiry, and policy drift — alerts you before they bite.', mood: '#5A9233', emoji: '🛡️', stat: '0',          statL: 'surprises' },
  ];
  return (
    <section style={{ background: '#F26B4A', color: '#FFF4DD', padding: 'clamp(72px, 10vw, 120px) 0', position: 'relative', overflow: 'hidden' }}>
      <style>{`
        .rmh-agents-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:56px; gap:40px; flex-wrap:wrap; }
        .rmh-agents-h2 { font-size: clamp(34px, 5vw, 64px); line-height:1.0; letter-spacing:-0.035em; margin:0; font-weight:500; color:#FFF4DD; }
        .rmh-agents-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:14px; }
        @media (max-width: 1100px) { .rmh-agents-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 720px) { .rmh-agents-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 460px) { .rmh-agents-grid { grid-template-columns: 1fr; } }
      `}</style>
      <span style={{ position: 'absolute', left: -100, bottom: -240, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 820, color: 'rgba(255,255,255,0.12)', lineHeight: 1, pointerEvents: 'none' }}>&amp;</span>
      <svg viewBox="0 0 400 400" style={{ position: 'absolute', right: -80, top: -80, width: 460, height: 460, opacity: 0.55, pointerEvents: 'none' }}>
        <path d="M 280 60 C 360 100 380 220 300 320 C 220 380 110 340 100 240 C 90 140 200 20 280 60 Z" fill="#FFB4A0" />
        <path d="M 320 140 C 360 180 350 260 290 290 C 240 310 200 270 220 220 C 240 170 290 110 320 140 Z" fill="#FFD86B" />
      </svg>
      <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)', position: 'relative' }}>
        <div className="rmh-agents-head">
          <div style={{ maxWidth: 720 }}>
            <Eyebrow color="#FFF4DD">THE AGENTIC LAYER</Eyebrow>
            <h2 className="rmh-agents-h2">Five specialist agents. <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: '#FFD86B', fontWeight: 400 }}>&amp;</span> one chief of staff.</h2>
          </div>
          <p style={{ fontSize: 17, color: '#FFF4DD', maxWidth: 380, lineHeight: 1.55, margin: 0 }}>
            Agents are domain experts — not chatbots. They prepare the work, show their reasoning, and wait for your approval. You stay accountable.
          </p>
        </div>
        <div className="rmh-agents-grid">
          {agents.map(a => (
            <article key={a.name} style={{
              background: '#FFF4DD', borderRadius: 18, padding: 22,
              display: 'flex', flexDirection: 'column', minHeight: 280, color: '#1B3210',
            }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: a.mood, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, marginBottom: 16 }}>{a.emoji}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B83D1F', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4 }}>{a.role} agent</div>
              <h3 style={{ fontSize: 24, fontWeight: 500, margin: '0 0 8px', letterSpacing: '-0.02em', color: '#1B3210' }}>{a.name}</h3>
              <p style={{ fontSize: 13, lineHeight: 1.5, color: '#4A4D45', margin: 0, flex: 1 }}>{a.desc}</p>
              <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid rgba(27,50,16,0.10)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', color: '#2E5119' }}>{a.stat}</div>
                <div style={{ fontSize: 10, color: '#6B6F65', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 2 }}>{a.statL}</div>
              </div>
            </article>
          ))}
        </div>
        <div style={{ marginTop: 36, display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href="ai.html" style={{ color: '#FFF4DD', textDecoration: 'none', fontSize: 14, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6, borderBottom: '1.5px solid #FFF4DD', paddingBottom: 6, paddingTop: 6, minHeight: 36 }}>
            See how the agents work →
          </a>
          <span style={{ fontSize: 12, color: '#FFF4DD', opacity: 0.95 }}>· Every action is logged. Every decision is yours.</span>
        </div>
      </div>
    </section>
  );
};

// HomeGCC removed — global only.
const HomeGCC = () => null;

// ----------------- 3. Three product modules -----------------
const HomeModules = () => {
  const cards = [
    {
      eyebrow: 'PAYROLL', title: "Run payroll like it's air traffic control.",
      desc: 'Net calculation, statutory deductions, multi-currency disbursement, reconciliation — all in one cycle, audit trail per row.',
      bullets: ['Multi-entity, multi-currency', 'Statutory taxes & social charges', 'Audit trail per row, per cycle'],
      href: 'global-workforce-management.html', accent: '#2E5119', visual: 'payroll',
    },
    {
      eyebrow: 'EOR', title: 'Hire anywhere your candidate is.',
      desc: 'Employer of Record in 150+ countries. Compliant offer, payroll, benefits — without standing up an entity.',
      bullets: ['Compliant offers in minutes', 'Local benefits + statutory', 'One contract, one bill'],
      href: 'global-workforce-management.html', accent: '#2E8C7D', visual: 'eor',
    },
    {
      eyebrow: 'HRMS', title: 'The HR system every workflow asked for.',
      desc: 'People directory, time off, time tracking, assets, expenses, documents, performance, helpdesk — every module run by its own AI agent.',
      bullets: ['People, time, assets, docs', 'Self-service in every workflow', 'AI agents per module'],
      href: 'hrms.html', accent: '#5A9233', visual: 'hrms',
    },
  ];
  return (
    <section style={{ background: '#FAFAF7', padding: 'clamp(72px, 10vw, 120px) 0' }}>
      <style>{`
        .rmh-modules-head { margin-bottom:56px; max-width:720px; }
        .rmh-modules-h2 { font-size: clamp(34px, 5vw, 64px); line-height:1.0; letter-spacing:-0.035em; margin:0; font-weight:500; }
        .rmh-modules-list { display:flex; flex-direction:column; gap:24px; }
        .rmh-module-card { background:#FFFFFF; border:1px solid #E3E8DD; border-radius:24px; overflow:hidden; display:grid; box-shadow:0 1px 0 rgba(46,81,25,0.04); }
        .rmh-module-card.left { grid-template-columns: 1fr 1.1fr; }
        .rmh-module-card.right { grid-template-columns: 1.1fr 1fr; }
        .rmh-module-copy { padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 48px); display:flex; flex-direction:column; justify-content:center; }
        .rmh-module-visual { background:#F6F7F2; display:flex; align-items:center; justify-content:center; padding: clamp(24px, 4vw, 40px); }
        @media (max-width: 860px) {
          .rmh-module-card.left, .rmh-module-card.right { grid-template-columns: 1fr; }
          .rmh-module-visual { order: 2 !important; }
          .rmh-module-copy { order: 1 !important; }
        }
      `}</style>
      <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
        <div className="rmh-modules-head">
          <Eyebrow>THE PRODUCTS</Eyebrow>
          <h2 className="rmh-modules-h2">Three flagships. <Amp /> they all talk to each other.</h2>
        </div>
        <div className="rmh-modules-list">
          {cards.map((c, i) => (
            <article key={c.eyebrow} className={`rmh-module-card ${i % 2 === 0 ? 'left' : 'right'}`}>
              <div className="rmh-module-copy" style={{ order: i % 2 === 0 ? 0 : 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 999, background: c.accent }}></span>
                  <Eyebrow color={c.accent}>{c.eyebrow}</Eyebrow>
                </div>
                <h3 style={{ fontSize: 'clamp(28px, 3.8vw, 44px)', lineHeight: 1.05, letterSpacing: '-0.03em', margin: 0, fontWeight: 500, maxWidth: 520 }}>{c.title}</h3>
                <p style={{ fontSize: 17, color: '#4A4D45', lineHeight: 1.55, margin: '20px 0 24px', maxWidth: 480 }}>{c.desc}</p>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {c.bullets.map(b => (
                    <li key={b} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: '#353833' }}>
                      <i data-lucide="check" style={{ width: 14, height: 14, color: c.accent, flexShrink: 0 }}></i>{b}
                    </li>
                  ))}
                </ul>
                <a href={c.href} style={{ marginTop: 32, alignSelf: 'flex-start', color: c.accent, textDecoration: 'none', fontSize: 14, fontWeight: 500, borderBottom: `1px solid ${c.accent}`, paddingBottom: 6, paddingTop: 6, whiteSpace: 'nowrap', minHeight: 36, display: 'inline-flex', alignItems: 'center' }}>
                  Learn more about {c.eyebrow.toLowerCase()} →
                </a>
              </div>
              <div className="rmh-module-visual" style={{ order: i % 2 === 0 ? 1 : 0, borderLeft: i % 2 === 0 ? '1px solid #E3E8DD' : 'none', borderRight: i % 2 === 0 ? 'none' : '1px solid #E3E8DD' }}>
                <ModuleVisual kind={c.visual} accent={c.accent} />
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const ModuleVisual = ({ kind, accent }) => {
  if (kind === 'payroll') {
    return (
      <div style={{ width: '100%', maxWidth: 480, background: '#fff', border: '1px solid #E3E8DD', borderRadius: 14, padding: 22, boxShadow: '0 12px 30px rgba(46,81,25,0.10)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#6B6F65', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10 }}>RUN · APRIL 2026</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 18 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 500, letterSpacing: '-0.02em' }}>$1.24M</span>
          <span style={{ fontSize: 12, color: '#5A9233' }}>+8%</span>
        </div>
        <div style={{ height: 8, background: '#F6F7F2', borderRadius: 999, overflow: 'hidden', marginBottom: 8 }}>
          <div style={{ width: '92%', height: '100%', background: `linear-gradient(90deg, ${accent}, #5A9233)` }}></div>
        </div>
        <div style={{ fontSize: 11, color: '#6B6F65', marginBottom: 16 }}>11 of 12 entities reconciled</div>
        {[
          { l: 'FR · Acme Paris',    v: '342k', s: 'Paid' },
          { l: 'US · Acme New York', v: '218k', s: 'Pending' },
          { l: 'BR · Acme São Paulo', v: '94k',  s: 'Paid' },
        ].map(r => (
          <div key={r.l} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderTop: '1px solid #F2F3F1', fontSize: 12 }}>
            <span>{r.l}</span>
            <span style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <span style={{ fontFamily: 'var(--font-mono)' }}>{r.v}</span>
              <span style={{ fontSize: 10, padding: '1px 7px', borderRadius: 6, background: r.s === 'Paid' ? '#E2F1D2' : '#FDE9B7', color: r.s === 'Paid' ? '#2E5119' : '#8A5800' }}>{r.s}</span>
            </span>
          </div>
        ))}
      </div>
    );
  }
  if (kind === 'eor') {
    return (
      <div style={{ width: '100%', maxWidth: 480, background: '#fff', border: '1px solid #E3E8DD', borderRadius: 14, padding: 24, boxShadow: '0 12px 30px rgba(46,81,25,0.10)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#6B6F65', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14 }}>NEW HIRE · DRAFT</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
          <div style={{ width: 44, height: 44, borderRadius: 999, background: '#2E8C7D', color: '#E2F1D2', fontWeight: 600, fontSize: 14, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>LS</div>
          <div>
            <div style={{ fontWeight: 500, fontSize: 15 }}>Liam Sullivan</div>
            <div style={{ fontSize: 12, color: '#6B6F65', whiteSpace: 'nowrap' }}>Senior Engineer · 🇮🇪 Dublin · EOR</div>
          </div>
        </div>
        {[
          { l: 'Salary',     v: 'EUR 6,200/mo' },
          { l: 'Start date', v: '15 May 2026' },
          { l: 'Contract',   v: 'Local Irish + EOR' },
          { l: 'Benefits',   v: 'Statutory + Private health' },
        ].map((r, i) => (
          <div key={r.l} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderTop: '1px solid #F2F3F1', fontSize: 12 }}>
            <span style={{ color: '#6B6F65' }}>{r.l}</span>
            <span style={{ fontFamily: 'var(--font-mono)' }}>{r.v}</span>
          </div>
        ))}
        <div style={{ marginTop: 16, padding: '10px 12px', background: '#E0F2EE', border: '1px solid #B6E0D7', borderRadius: 10, fontSize: 12, color: '#15554B', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span>✨</span> Hira drafted a compliant offer. <span style={{ marginLeft: 'auto', fontWeight: 600 }}>Review →</span>
        </div>
      </div>
    );
  }
  // hrms
  return (
    <div style={{ width: '100%', maxWidth: 480, background: '#fff', border: '1px solid #E3E8DD', borderRadius: 14, padding: 22, boxShadow: '0 12px 30px rgba(46,81,25,0.10)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#6B6F65', textTransform: 'uppercase', letterSpacing: '0.08em' }}>HRMS · TODAY</div>
        <span style={{ fontSize: 10, padding: '2px 8px', borderRadius: 999, background: '#E2F1D2', color: '#2E5119', fontFamily: 'var(--font-mono)' }}>ON TRACK</span>
      </div>
      {[
        { l: 'Time-off requests',      v: '4 to approve',   s: 'Time-off Agent · pre-checked vs policy', good: true },
        { l: 'New laptops to ship',    v: '2 starters Mon', s: 'Assets Agent · ordered + tracked', good: true },
        { l: 'Document expiry watch',  v: '5 next 30d',     s: 'Doc Agent · auto-renew drafted', good: true },
        { l: 'Helpdesk tickets open',  v: '12 active',      s: 'Helpdesk Agent · 94% self-served', good: true },
      ].map((r) => (
        <div key={r.l} style={{ padding: '10px 0', borderTop: '1px solid #F2F3F1' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 3 }}>
            <span>{r.l}</span>
            <span style={{ fontFamily: 'var(--font-mono)', color: '#2E5119' }}>{r.v}</span>
          </div>
          <div style={{ fontSize: 10, color: '#6B6F65' }}>{r.s}</div>
        </div>
      ))}
    </div>
  );
};

// ----------------- 4. Integrations (no security badges) -----------------
const HomeIntegrationsSecurity = () => {
  const integrations = [
    { name: 'Slack',            slug: 'slack' },
    { name: 'Microsoft 365',    slug: 'microsoft365' },
    { name: 'Google Workspace', slug: 'googleworkspace' },
    { name: 'NetSuite',         slug: 'oracle' },
    { name: 'QuickBooks',       slug: 'intuitquickbooks' },
    { name: 'Xero',             slug: 'xero' },
    { name: 'BambooHR',         slug: 'bamboohr' },
    { name: 'Workday',          slug: 'workday' },
    { name: 'Greenhouse',       slug: 'greenhouse' },
    { name: 'Notion',           slug: 'notion' },
    { name: 'Okta',             slug: 'okta' },
    { name: 'Linear',           slug: 'linear' },
  ];
  return (
    <section style={{ background: '#FAFAF7', padding: 'clamp(72px, 10vw, 120px) 0', borderTop: '1px solid #E3E8DD' }}>
      <style>{`
        .rmh-int-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
        @media (max-width: 720px) { .rmh-int-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 460px) { .rmh-int-grid { grid-template-columns: 1fr 1fr; } }
        .rmh-int-h3 { font-size: clamp(28px, 4vw, 44px); line-height:1.05; letter-spacing:-0.03em; margin: 0 0 16px; font-weight: 500; }
      `}</style>
      <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
        <Eyebrow>INTEGRATIONS</Eyebrow>
        <h3 className="rmh-int-h3">Plays nice with the tools you already use.</h3>
        <p style={{ fontSize: 16, color: '#4A4D45', lineHeight: 1.55, margin: '0 0 28px', maxWidth: 620 }}>
          Bi-directional sync with finance, HRIS, ATS, identity, and chat. Plus a clean REST API for everything else.
        </p>
        <div className="rmh-int-grid">
          {integrations.map(i => <LogoTile key={i.name} name={i.name} slug={i.slug} />)}
        </div>
      </div>
    </section>
  );
};

// HomeTestimonial removed (fake quote).
const HomeTestimonial = () => null;

// ----------------- 5. Pricing teaser -----------------
const HomePricingTeaser = () => {
  const tiers = [
    { name: 'Contractor', from: '$19',       unit: 'per contractor / mo', desc: 'Pay global contractors in 100+ currencies — compliant docs, auto-invoices, tax forms.',  tags: ['Multi-currency', 'Auto-invoice', 'Tax forms'] },
    { name: 'Payroll',    from: '$29',       unit: 'per employee / mo',   desc: 'Run payroll across your own entities — Payla drafts each cycle and flags exceptions.',  tags: ['Multi-entity', 'Gross-to-net', 'GL sync'] },
    { name: 'EOR',        from: '$199',      unit: 'per employee / mo',   desc: 'Hire in 150+ countries without an entity — local contracts, benefits, and statutory.',   tags: ['Local benefits', 'Statutory', 'IP transfer'], featured: true, badge: 'Most popular' },
    { name: 'Custom',     from: 'Talk to us', unit: 'volume & enterprise',  desc: 'Multi-entity rollouts, custom workflows, dedicated success, procurement-friendly.',     tags: ['SSO/SCIM', 'API', 'White-glove'] },
  ];
  return (
    <section style={{ background: '#FAFAF7', padding: '0 0 clamp(72px, 10vw, 120px)' }}>
      <style>{`
        .rmh-price-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 16px; gap:32px; flex-wrap:wrap; }
        .rmh-price-h2 { font-size: clamp(30px, 4.6vw, 56px); line-height:1.02; letter-spacing:-0.035em; margin:0; font-weight:500; }
        .rmh-price-banner { background:#E2F1D2; border:1px solid #CDE8B0; border-radius:18px; padding: 20px 24px; margin: 24px 0 36px; font-size: clamp(14px, 1.2vw, 17px); line-height:1.5; color:#1B3210; }
        .rmh-price-banner strong { color:#2E5119; }
        .rmh-price-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
        @media (max-width: 1100px) { .rmh-price-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 560px)  { .rmh-price-grid { grid-template-columns: 1fr; } }
      `}</style>
      <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
        <div className="rmh-price-head">
          <div>
            <Eyebrow>PRICING</Eyebrow>
            <h2 className="rmh-price-h2">One platform. <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: '#2E5119', fontWeight: 400 }}>Pay only for who you employ.</span></h2>
          </div>
          <a href="pricing.html" style={{ color: '#2E5119', textDecoration: 'none', fontSize: 14, fontWeight: 500, borderBottom: '1px solid #2E5119', paddingBottom: 6, paddingTop: 6, display: 'inline-flex', alignItems: 'center', minHeight: 36 }}>
            See full pricing →
          </a>
        </div>
        <p style={{ fontSize: 17, color: '#4A4D45', lineHeight: 1.55, margin: 0, maxWidth: 720 }}>
          Four ways to engage people — contractors, payroll, EOR, or custom. Each priced per person, per month. No setup fees, no minimums, AI agents and HRIS included on every plan.
        </p>
        <div className="rmh-price-banner">
          🎁 <strong>Free for under 100 employees</strong> <em style={{ fontStyle: 'italic', fontWeight: 400 }}>(limited time offer)</em>. Direct-employee plan, full HRIS, every AI agent — no card needed.
        </div>
        <div className="rmh-price-grid">
          {tiers.map(t => (
            <article key={t.name} style={{
              position: 'relative',
              background: t.featured ? '#2E5119' : '#FFFFFF',
              color: t.featured ? '#FAFAF7' : '#111210',
              border: t.featured ? 'none' : '1px solid #E3E8DD',
              borderRadius: 18, padding: 24,
              display: 'flex', flexDirection: 'column',
              boxShadow: t.featured ? '0 18px 40px rgba(46,81,25,0.28)' : 'none',
            }}>
              {t.badge && (
                <span style={{ position: 'absolute', top: -10, left: 24, background: '#F26B4A', color: '#FFF4DD', fontFamily: 'var(--font-mono)', fontSize: 10, padding: '4px 10px', borderRadius: 999, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{t.badge}</span>
              )}
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: t.featured ? '#A4CC7C' : '#2E5119', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 10 }}>{t.name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                {t.from.startsWith('$') && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: t.featured ? 'rgba(255,255,255,0.75)' : '#6B6F65' }}>from</span>}
                <span style={{ fontFamily: 'var(--font-display)', fontSize: t.from.startsWith('$') ? 38 : 24, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1 }}>{t.from}</span>
              </div>
              <div style={{ fontSize: 11.5, color: t.featured ? 'rgba(255,255,255,0.75)' : '#6B6F65', marginTop: 4, marginBottom: 12 }}>{t.unit}</div>
              <p style={{ fontSize: 13, lineHeight: 1.5, color: t.featured ? 'rgba(255,255,255,0.88)' : '#4A4D45', margin: '0 0 14px' }}>{t.desc}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginTop: 'auto' }}>
                {t.tags.map(tg => (
                  <span key={tg} style={{ fontSize: 10, fontFamily: 'var(--font-mono)', padding: '3px 7px', background: t.featured ? 'rgba(255,255,255,0.14)' : '#F6F7F2', border: t.featured ? '1px solid rgba(255,255,255,0.22)' : '1px solid #E3E8DD', borderRadius: 5, color: t.featured ? '#E2F1D2' : '#4A4D45' }}>{tg}</span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ----------------- Launch offer banner (homepage) -----------------
const HomeLaunchOffer = () => (
  <section style={{ background: '#FAFAF7', padding: 'clamp(48px, 7vw, 88px) 0 clamp(24px, 4vw, 48px)' }}>
    <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
      <div style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(120deg, #2E5119 0%, #15554B 60%, #2E8C7D 100%)', color: '#FAFAF7', borderRadius: 24, padding: 'clamp(28px, 4vw, 44px)' }}>
        <span aria-hidden="true" style={{ position: 'absolute', right: -60, bottom: -200, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 540, color: 'rgba(255,255,255,0.06)', lineHeight: 1, pointerEvents: 'none', userSelect: 'none' }}>&amp;</span>
        <style>{`
          .rmh-launch-grid { display:grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap:32px; align-items:center; position:relative; }
          @media (max-width: 760px) { .rmh-launch-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }
        `}</style>
        <div className="rmh-launch-grid">
          <div className="rmh-launch-grid-col">
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
              <span style={{ background: '#F26B4A', color: '#FFF4DD', fontFamily: 'var(--font-mono)', fontSize: 10, padding: '4px 10px', borderRadius: 999, letterSpacing: '0.1em', fontWeight: 600 }}>EXCLUSIVE LAUNCH OFFER</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#FFD86B', letterSpacing: '0.06em' }}>⏳ Ending soon</span>
            </div>
            <h2 style={{ fontSize: 'clamp(28px, 3.8vw, 46px)', lineHeight: 1.04, letterSpacing: '-0.035em', margin: 0, fontWeight: 500, fontFamily: 'var(--font-display)', color: '#FFFFFF' }}>
              Free for your first 30 users.<br />
              <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: '#FFFFFF', fontWeight: 400 }}>The whole HRMS &amp; every agent.</span>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: '#E2F1D2', margin: '16px 0 0', maxWidth: 540 }}>
              Run your team on Remote& with no cost up to your 30th user — full HRMS, all eleven AI agents, every integration. Stay free until you scale. No card, no commitment.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
              <a href="/book-a-demo" style={{ background: '#FAFAF7', color: '#2E5119', textDecoration: 'none', padding: '12px 22px', borderRadius: 14, fontWeight: 500, fontSize: 15 }}>Claim launch offer</a>
            </div>
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              { t: 'All 11 modules', d: 'People, time, assets, docs, performance, helpdesk, reporting — nothing gated.' },
              { t: 'All 11 AI agents', d: 'Every workflow agent active from day one.' },
              { t: 'Every integration', d: 'Slack, Teams, Google, Microsoft, accounting — no add-on fees.' },
              { t: 'No card. No lock-in.', d: 'Pay only after you grow past 30 users.' },
            ].map(b => (
              <li key={b.t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 12, padding: '12px 14px' }}>
                <i data-lucide="check" style={{ width: 16, height: 16, color: '#FFD86B', flexShrink: 0, marginTop: 2 }}></i>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: '#FFFFFF', marginBottom: 2 }}>{b.t}</div>
                  <div style={{ fontSize: 12.5, lineHeight: 1.5, color: '#E2F1D2', opacity: 0.9 }}>{b.d}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { HomePillars, HomeAgents, HomeGCC, HomeModules, HomeTestimonial, HomeIntegrationsSecurity, HomePricingTeaser, HomeLaunchOffer });
