/* Home page — editorial hero, Talent OS demo, salary engine, manifesto */
/* (useState/etc come from chrome.jsx) */

/* ============== HERO ============== */
/* Viewport-aware hero — designed to fit one screen on first paint.
   Uses min-height: calc(100svh - utility/nav) and a tighter type scale. */
function Hero() {
  const [t, setT] = useState(0);
  useEffect(() => {
    let raf, start = performance.now();
    const tick = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <section style={{ position: 'relative', overflow: 'hidden', borderBottom: '2px solid var(--ink)' }} className="hero-section">
      {/* Issue/date strip */}
      <div className="container" style={{ display: 'flex', justifyContent: 'space-between', padding: '12px var(--gut)', borderBottom: '1px solid var(--rule)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
        <span>VOL. 06 · ISSUE №3</span>
        <span className="hide-sm">A QUARTERLY OF TECH & TALENT</span>
        <span>Q1 · 2026</span>
      </div>

      <div className="container hero-inner" style={{ position: 'relative' }}>
        {/* Floating badges (top-right) */}
        <div style={{ position: 'absolute', top: 28, right: 'var(--gut)', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 10, zIndex: 2 }} className="hide-md">
          <div style={{ transform: `rotate(${Math.sin(t * 0.4) * 1.4 - 4}deg)`, transition: 'transform 0.1s linear' }}>
            <div style={{ background: 'var(--ochre)', color: 'var(--ink)', padding: '6px 12px', borderRadius: 999, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.06em', fontWeight: 600, border: '1px solid var(--ink)' }}>
              ★ NASSCOM AWARD '25
            </div>
          </div>
          <div style={{ transform: `rotate(${Math.cos(t * 0.5) * 1.2 + 3}deg)`, transition: 'transform 0.1s linear' }}>
            <div style={{ background: 'var(--rust)', color: 'var(--bone)', padding: '6px 12px', borderRadius: 999, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.06em', fontWeight: 600 }}>
              ● 100+ COMPANIES SHIPPED
            </div>
          </div>
        </div>

        {/* Two-column layout — copy on left, diagram on right */}
        <div className="hero-grid">
          <div className="hero-copy">
            {/* Eyebrow */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <span className="eyebrow eyebrow-rust">★ AI-First Platform</span>
              <span style={{ width: 24, borderTop: '1px solid var(--rust)' }}/>
              <span className="eyebrow">Tech + Talent · One partner</span>
            </div>

            {/* Display headline — responsive, fluid */}
            <h1 className="hero-headline">
              Build the <span className="h-italic" style={{ color: 'var(--rust)' }}>product</span>.<br/>
              Hire the <span className="h-italic" style={{ color: 'var(--rust)' }}>team</span>.<br/>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
                <span>Scale the</span>
                <span className="hero-pill" aria-label="business">
                  <ScrollingPills t={t}/>
                </span>
                <span>.</span>
              </span>
            </h1>

            {/* Lede */}
            <p className="hero-lede">
              An <em style={{ fontFamily: 'var(--serif-italic)', color: 'var(--ink)' }}>AI-first managed platform</em> helping growing companies design, build, and launch digital products — and hire the remote teams behind them. <strong style={{ fontWeight: 500 }}>One partner. One contract.</strong>
            </p>

            {/* Actions */}
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }} className="hero-actions">
              <a href="contact.html" className="btn btn-ink">Book a strategy call <span className="arrow">→</span></a>
              <a href="services.html" className="btn btn-ghost">Explore the platform</a>
            </div>

            {/* Inline stats — compact ticker style */}
            <div className="hero-stats">
              {window.WR.metrics.map((m, i) => (
                <div key={i} className="hero-stat">
                  <div className="hero-stat-v">{m.v}</div>
                  <div className="eyebrow hero-stat-l">{m.l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Hero figure — animated diagram */}
          <div className="hero-figure">
            <HeroDiagram t={t}/>
          </div>
        </div>
      </div>

      <style>{`
        /* ===== Viewport-fit hero =====
           Target: nav (~62px) + utility bar (~32px) + issue strip (~38px) ≈ 132px chrome.
           Hero inner aims to fill the remainder on common laptop heights (>=720px). */
        .hero-section { background: var(--paper); }
        .hero-inner {
          padding: clamp(28px, 4vw, 56px) var(--gut) clamp(28px, 4vw, 48px);
          min-height: calc(100svh - 132px);
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .hero-grid {
          display: grid;
          grid-template-columns: 1.15fr 1fr;
          gap: clamp(28px, 4vw, 64px);
          align-items: center;
          width: 100%;
        }
        .hero-copy { min-width: 0; }
        .hero-headline {
          font-family: var(--serif-display);
          font-size: clamp(40px, 6.6vw, 96px);
          line-height: 0.95;
          letter-spacing: -0.035em;
          font-weight: 400;
          margin: clamp(20px, 2.4vw, 32px) 0 clamp(20px, 2.4vw, 28px);
          text-wrap: balance;
        }
        .hero-pill {
          --pillH: clamp(48px, 6.4vw, 84px);
          display: inline-block;
          width: clamp(180px, 22vw, 320px);
          height: var(--pillH);
          background: var(--ochre);
          border-radius: 999px;
          vertical-align: middle;
          position: relative;
          overflow: hidden;
          border: 1px solid var(--ink);
        }
        .hero-lede {
          font-family: var(--serif-body);
          font-size: clamp(15px, 1.25vw, 19px);
          line-height: 1.5;
          color: var(--ink-soft);
          max-width: 560px;
          margin: 0 0 clamp(20px, 2.4vw, 28px);
          text-wrap: pretty;
        }
        .hero-actions { margin-bottom: clamp(24px, 3vw, 40px); }
        .hero-stats {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
          border-top: 1px solid var(--ink);
          border-bottom: 1px solid var(--rule);
          padding: 14px 0 14px;
        }
        .hero-stat { padding: 0 14px 0 0; border-left: 1px solid var(--rule); padding-left: 14px; }
        .hero-stat:first-child { border-left: 0; padding-left: 0; }
        .hero-stat-v {
          font-family: var(--serif-display);
          font-size: clamp(22px, 2.4vw, 32px);
          line-height: 1;
          letter-spacing: -0.02em;
        }
        .hero-stat-l { margin-top: 6px; font-size: 10px; }
        .hero-figure { min-width: 0; align-self: center; }

        /* Mid-desktop — keep viewport fit, just tighten the figure ratio */
        @media (min-width: 901px) and (max-width: 1180px) {
          .hero-grid { grid-template-columns: 1.3fr 1fr; gap: 32px; }
          .hero-headline { font-size: clamp(36px, 5.4vw, 72px); }
        }
        /* Tablet — drop diagram below */
        @media (max-width: 900px) {
          .hero-inner { min-height: 0; padding-top: 32px; padding-bottom: 32px; }
          .hero-grid { grid-template-columns: 1fr; gap: 28px; }
          .hero-figure { max-width: 520px; margin: 0 auto; width: 100%; display: none; }
        }
        /* Phone — stack stats 2x2, keep tight */
        @media (max-width: 600px) {
          .hero-stats { grid-template-columns: repeat(2, 1fr); padding: 0; border-bottom: 0; }
          .hero-stat { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
          .hero-stat:nth-child(2) { border-left: 1px solid var(--rule); }
          .hero-stat:nth-child(3) { border-left: 0; padding-left: 0; }
          .hero-stat:nth-child(3), .hero-stat:nth-child(4) { padding-bottom: 0; border-bottom: 0; }
        }
        /* Short viewports — release the min-height so content can flow */
        @media (max-height: 700px) and (min-width: 901px) {
          .hero-inner { min-height: 0; padding-top: 28px; padding-bottom: 28px; }
          .hero-headline { font-size: clamp(32px, 4.4vw, 60px); margin: 18px 0 18px; }
          .hero-lede { font-size: 14px; margin-bottom: 18px; }
          .hero-actions { margin-bottom: 20px; }
        }
      `}</style>
    </section>
  );
}

function ScrollingPills({ t }) {
  const words = ['business', 'startup', 'agency', 'platform', 'team'];
  const idx = Math.floor((t * 0.5) % words.length);
  const offset = (t * 0.5) % 1;
  // Each item height = pill height (--pillH). Translate strip by (idx+offset) * pillH.
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      <div style={{ transform: `translateY(calc(-1 * (${idx} + ${offset}) * var(--pillH)))`, transition: 'none', willChange: 'transform' }}>
        {words.concat([words[0]]).map((w, i) => (
          <div key={i} style={{ height: 'var(--pillH)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif-italic)', fontStyle: 'italic', fontSize: 'clamp(26px, 3.6vw, 52px)', color: 'var(--ink)', whiteSpace: 'nowrap', lineHeight: 1 }}>
            {w}
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroDiagram({ t }) {
  // Two columns: TECH left, TALENT right, converging into "withRemote"
  const pulse = Math.sin(t * 1.5) * 0.5 + 0.5;
  return (
    <figure className="editorial" style={{ background: 'var(--milk)', padding: 0 }}>
      <svg viewBox="0 0 520 420" width="100%" style={{ display: 'block' }}>
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#D9CFB8" strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="520" height="420" fill="url(#grid)"/>

        {/* Top labels */}
        <text x="80" y="32" fontFamily="var(--mono)" fontSize="10" letterSpacing="2" fill="#756B61">TECH</text>
        <text x="380" y="32" fontFamily="var(--mono)" fontSize="10" letterSpacing="2" fill="#756B61">TALENT</text>
        <text x="240" y="32" fontFamily="var(--mono)" fontSize="10" letterSpacing="2" fill="#C2440E">CORE</text>

        {/* Left tech bubbles */}
        {['AI', 'Web', 'App', 'eCom', 'SEO'].map((label, i) => {
          const angle = (i / 5) * Math.PI - Math.PI/2;
          const r = 90;
          const cx = 80 + Math.cos(angle) * 0;
          const cy = 80 + i * 56;
          return (
            <g key={label}>
              <circle cx={cx} cy={cy} r={26} fill="#F4EFE6" stroke="#1A1714" strokeWidth="1.2"/>
              <text x={cx} y={cy + 4} fontFamily="var(--serif-display)" fontSize="13" textAnchor="middle" fill="#1A1714">{label}</text>
              <line x1={cx + 26} y1={cy} x2={240} y2={210}
                stroke="#C2440E" strokeWidth="1" strokeDasharray="2 3" opacity={0.3 + pulse * 0.5 * ((i + Math.floor(t * 2)) % 5 === 0 ? 1 : 0.3)}/>
            </g>
          );
        })}

        {/* Right talent bubbles */}
        {['React', 'Go', 'Java', 'QA', 'Design'].map((label, i) => {
          const cx = 440;
          const cy = 80 + i * 56;
          return (
            <g key={label}>
              <circle cx={cx} cy={cy} r={26} fill="#F4EFE6" stroke="#1A1714" strokeWidth="1.2"/>
              <text x={cx} y={cy + 4} fontFamily="var(--serif-display)" fontSize="13" textAnchor="middle" fill="#1A1714">{label}</text>
              <line x1={cx - 26} y1={cy} x2={280} y2={210}
                stroke="#D4A537" strokeWidth="1" strokeDasharray="2 3" opacity={0.3 + pulse * 0.5 * ((i + Math.floor(t * 2 + 1)) % 5 === 0 ? 1 : 0.3)}/>
            </g>
          );
        })}

        {/* Center node */}
        <g transform="translate(260, 210)">
          <circle r={70 + pulse * 4} fill="none" stroke="#C2440E" strokeWidth="0.8" opacity="0.3"/>
          <circle r={56} fill="#1A1714" stroke="#1A1714" strokeWidth="1.2"/>
          <text y={-2} fontFamily="var(--serif-display)" fontSize="17" textAnchor="middle" fill="#FFFCF3">withRemote</text>
          <text y={16} fontFamily="var(--mono)" fontSize="9" letterSpacing="2" textAnchor="middle" fill="#D4A537">.AI</text>
          <text y={32} fontFamily="var(--serif-italic)" fontSize="11" fontStyle="italic" textAnchor="middle" fill="#A39A8C">one platform</text>
        </g>

        {/* Bottom rule + values */}
        <line x1="0" y1="340" x2="520" y2="340" stroke="#C9BFAB" strokeWidth="0.8"/>
        <text x="40" y="372" fontFamily="var(--mono)" fontSize="9" letterSpacing="1.5" fill="#4A413A">→ 72H SHORTLISTS</text>
        <text x="200" y="372" fontFamily="var(--mono)" fontSize="9" letterSpacing="1.5" fill="#4A413A">→ 50–80% COST CUT</text>
        <text x="380" y="372" fontFamily="var(--mono)" fontSize="9" letterSpacing="1.5" fill="#4A413A">→ 150+ COUNTRIES</text>
        <text x="40" y="396" fontFamily="var(--serif-italic)" fontSize="11" fontStyle="italic" fill="#1A1714">Fig. A — The withRemote convergence model</text>
      </svg>
      <figcaption>
        <span>FIG. A · CONVERGENCE</span>
        <span>EXHIBIT 01</span>
      </figcaption>
    </figure>
  );
}

/* ============== WHAT WE DO ============== */
function WhatWeDo() {
  const tech = window.WR.services.filter(s => s.cat !== "Talent Solutions");
  const talent = window.WR.services.filter(s => s.cat === "Talent Solutions");
  return (
    <section className="container" style={{ padding: 'clamp(80px, 10vw, 140px) var(--gut)' }}>
      <div className="section-head">
        <div className="nameplate"><span className="num">§01</span><span>What we do</span></div>
        <div>
          <h2 className="display-l" style={{ margin: 0 }}>
            Tech first. <span className="h-italic" style={{ color: 'var(--rust)' }}>Talent next.</span> Scale always.
          </h2>
          <p className="lede" style={{ marginTop: 24, maxWidth: 720 }}>
            Two arms. One platform. Shared systems, shared accountability, shared results — whether you need a product built or the team to build it.
          </p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--ink)', border: '1px solid var(--ink)' }} className="two-col">
        {/* TECH PANEL */}
        <div style={{ background: 'var(--paper)', padding: 'clamp(28px, 4vw, 48px)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div className="eyebrow eyebrow-rust">01 · TECH</div>
            <div className="eyebrow">Priority</div>
          </div>
          <h3 className="display-s" style={{ margin: '20px 0 16px' }}>Managed Tech Services</h3>
          <p style={{ color: 'var(--ink-soft)', maxWidth: 460 }}>End-to-end product development from a team that's shipped 50+ digital products across the US, Canada, and UAE.</p>
          <div style={{ display: 'flex', flexDirection: 'column', marginTop: 32 }}>
            {tech.map((s, i) => (
              <a key={s.slug} href={`services/${s.slug}.html`} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '18px 0', borderTop: '1px solid var(--rule)' }} className="row-link">
                <div>
                  <div style={{ fontFamily: 'var(--serif-display)', fontSize: 22, lineHeight: 1.1 }}>{s.name}</div>
                  <div className="eyebrow" style={{ marginTop: 4 }}>{s.tagline}</div>
                </div>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-mute)', whiteSpace: 'nowrap' }}>→</span>
              </a>
            ))}
          </div>
          <a href="services.html" className="btn btn-ink" style={{ marginTop: 32 }}>Talk to a tech expert <span className="arrow">→</span></a>
        </div>

        {/* TALENT PANEL */}
        <div style={{ background: 'var(--ink-surface)', color: 'var(--bone)', padding: 'clamp(28px, 4vw, 48px)' }} className="invert">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div className="eyebrow" style={{ color: 'var(--ochre)' }}>02 · TALENT</div>
            <div className="eyebrow" style={{ color: 'var(--ink-faint)' }}>Execution</div>
          </div>
          <h3 className="display-s" style={{ margin: '20px 0 16px', color: 'var(--bone)' }}>Remote Talent Solutions</h3>
          <p style={{ color: '#C9BFAB', maxWidth: 460 }}>AI-vetted engineers, designers, and operators from India — hired on your terms or fully managed by us.</p>
          <div style={{ display: 'flex', flexDirection: 'column', marginTop: 32 }}>
            {[...talent, ...[
              { slug:"#talent-os", name:"AI-Driven Precision Vetting", tagline:"Talent OS · 40,000+ profiles" },
              { slug:"#payroll", name:"Payroll, Compliance & Onboarding", tagline:"EOR in 150+ countries" },
              { slug:"#replacement", name:"Free Talent Replacement", tagline:"No fees. No friction." },
              { slug:"#asm", name:"Dedicated Account Success Manager", tagline:"One throat to choke" },
            ]].map((s, i) => (
              <a key={s.slug + i} href={s.slug.startsWith('#') ? s.slug : `services/${s.slug}.html`}
                 style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '18px 0', borderTop: '1px solid rgba(255,252,243,0.2)' }} className="row-link">
                <div>
                  <div style={{ fontFamily: 'var(--serif-display)', fontSize: 22, lineHeight: 1.1, color: 'var(--bone)' }}>{s.name}</div>
                  <div className="eyebrow" style={{ marginTop: 4, color: 'var(--ochre)' }}>{s.tagline}</div>
                </div>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-faint)' }}>→</span>
              </a>
            ))}
          </div>
          <a href="services/managed-eor.html" className="btn btn-cream" style={{ marginTop: 32 }}>Hire remote talent <span className="arrow">→</span></a>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) { .two-col { grid-template-columns: 1fr !important; } }
        .row-link { transition: padding-left .25s var(--ease); }
        .row-link:hover { padding-left: 8px; }
      `}</style>
    </section>
  );
}

/* ============== TALENT OS DEMO ============== */
function TalentOSDemo() {
  const modules = window.WR.talentOS;
  const [active, setActive] = useState(0);
  const m = modules[active];

  return (
    <section className="invert" style={{ padding: 'clamp(80px, 10vw, 140px) 0' }}>
      <div className="container">
        <div className="section-head">
          <div className="nameplate" style={{ color: 'var(--bone)' }}><span className="num" style={{ color: 'var(--bone)' }}>§02</span><span>An interactive demo</span></div>
          <div>
            <h2 className="display-l" style={{ margin: 0, color: 'var(--bone)' }}>
              Meet <span className="h-italic" style={{ color: 'var(--ochre)' }}>Talent OS</span>.<br/>
              The AI brain behind every hire.
            </h2>
            <p className="lede" style={{ color: 'var(--ink-faint)', marginTop: 24, maxWidth: 720 }}>
              Our internal platform — <em>not a generic ATS</em> — orchestrates the seven moves required to take a candidate from cold lead to onboarded engineer. Click any module to see what it does.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 0, border: '1px solid rgba(255,252,243,0.18)' }} className="osgrid">
          {/* Module list */}
          <div style={{ background: 'rgba(255,252,243,0.03)', borderRight: '1px solid rgba(255,252,243,0.18)' }} className="osnav">
            {modules.map((mod, i) => (
              <button key={mod.id} onClick={() => setActive(i)}
                style={{
                  display: 'block', width: '100%', textAlign: 'left',
                  padding: '20px 24px', borderTop: i ? '1px solid rgba(255,252,243,0.12)' : 0,
                  background: active === i ? 'rgba(212,165,55,0.1)' : 'transparent',
                  borderLeft: active === i ? '3px solid var(--ochre)' : '3px solid transparent',
                  transition: 'all .25s var(--ease)',
                }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', color: active === i ? 'var(--ochre)' : 'var(--ink-faint)' }}>{mod.n}</div>
                <div style={{ fontFamily: 'var(--serif-display)', fontSize: 20, marginTop: 4, color: 'var(--bone)' }}>{mod.t}</div>
              </button>
            ))}
          </div>

          {/* Active panel */}
          <div style={{ padding: 'clamp(24px, 4vw, 48px)', minHeight: 520, position: 'relative' }}>
            <div className="eyebrow" style={{ color: 'var(--ochre)' }}>{m.k} · {m.n}</div>
            <h3 className="display-m" style={{ color: 'var(--bone)', margin: '12px 0 16px' }}>{m.sub}</h3>
            <p style={{ color: '#C9BFAB', maxWidth: 540, fontSize: 18 }}>{m.d}</p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 32 }} className="ospanel-grid">
              <div>
                <div className="eyebrow" style={{ color: 'var(--bone)' }}>What it does</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '16px 0 0' }}>
                  {m.points.map((p, i) => (
                    <li key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderBottom: '1px solid rgba(255,252,243,0.1)', fontSize: 15 }}>
                      <span style={{ color: 'var(--ochre)', fontFamily: 'var(--mono)', fontSize: 12 }}>{String(i+1).padStart(2,'0')}</span>
                      <span style={{ color: 'var(--bone)' }}>{p}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Live mock visual per module */}
              <OSModuleMock module={m.id}/>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .osgrid { grid-template-columns: 1fr !important; }
            .osnav { display: flex; overflow-x: auto; border-right: 0 !important; border-bottom: 1px solid rgba(255,252,243,0.18); }
            .osnav button { min-width: 200px; border-top: 0 !important; border-left: 0 !important; border-bottom: 3px solid transparent; }
            .ospanel-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function OSModuleMock({ module }) {
  const wrap = { background: 'rgba(255,252,243,0.04)', border: '1px solid rgba(255,252,243,0.18)', borderRadius: 4, padding: 16, fontFamily: 'var(--mono)', fontSize: 11 };
  switch (module) {
    case 'jobs':
      return (
        <div style={wrap}>
          {[
            {r:'Senior React · NYC FinTech', s:'Sourced 124 · Screened 18 · Offer 1', c:'#7BC47F'},
            {r:'Senior Golang · Dubai SaaS', s:'Sourced 317 · Screened 12 · Offer 0', c:'#D4A537'},
            {r:'UI/UX Designer · Toronto', s:'Sourced 1,721 · Screened 7', c:'#F4A261'},
          ].map((j,i) => (
            <div key={i} style={{ padding: '12px 0', borderBottom: i < 2 ? '1px solid rgba(255,252,243,0.1)' : 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ color: 'var(--bone)', fontFamily: 'var(--serif-display)', fontSize: 14 }}>{j.r}</span>
                <span style={{ color: j.c, width: 8, height: 8, borderRadius: 50, background: j.c, display: 'inline-block', marginTop: 6 }}/>
              </div>
              <div style={{ color: 'var(--ink-faint)', marginTop: 4 }}>{j.s}</div>
            </div>
          ))}
        </div>
      );
    case 'candidates':
      return (
        <div style={wrap}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'var(--ochre)' }}>SEARCH: react senior</span>
            <span style={{ color: 'var(--ink-faint)' }}>40,761 results</span>
          </div>
          <div style={{ marginTop: 12 }}>
            {['M. Patel · 7y · Bengaluru','S. Iyer · 5y · Mumbai','A. Kumar · 9y · Pune'].map((c,i) => (
              <div key={i} style={{ padding: '10px 0', borderTop: '1px solid rgba(255,252,243,0.1)', display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ color: 'var(--bone)' }}>{c}</span>
                <span style={{ color: 'var(--ochre)' }}>{(94 - i * 3)}/100</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 14, color: 'var(--ink-faint)', fontSize: 10 }}>↑ 100ms full-text · 19 facets active</div>
        </div>
      );
    case 'resume':
      return (
        <div style={wrap}>
          <div style={{ color: 'var(--ochre)' }}>BULK PARSE: resumes_q1.zip</div>
          <div style={{ height: 6, background: 'rgba(255,252,243,0.1)', borderRadius: 3, marginTop: 10, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: '78%', background: 'var(--ochre)' }}/>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, color: 'var(--ink-faint)' }}>
            <span>2,341 / 3,000 parsed</span>
            <span>78%</span>
          </div>
          <div style={{ marginTop: 16, color: 'var(--bone)', fontFamily: 'var(--serif-display)', fontSize: 13 }}>Latest extracted:</div>
          {['skills: [react, ts, node]','exp: 6.5 years','email: ✓ verified'].map((c,i) => (
            <div key={i} style={{ color: 'var(--ink-faint)', padding: '6px 0' }}>→ {c}</div>
          ))}
        </div>
      );
    case 'outbound':
      return (
        <div style={wrap}>
          <div style={{ color: 'var(--ochre)' }}>OUTREACH FUNNEL</div>
          {[['Pending', 32_000, 1.0], ['Sent', 28_400, 0.89], ['Engaged', 4_212, 0.13], ['Acquired', 1_087, 0.034]].map(([l, n, w], i) => (
            <div key={i} style={{ marginTop: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--bone)' }}>
                <span>{l}</span><span>{n.toLocaleString()}</span>
              </div>
              <div style={{ height: 4, background: 'rgba(255,252,243,0.1)', marginTop: 4 }}>
                <div style={{ height: '100%', width: `${w * 100}%`, background: i === 3 ? 'var(--ochre)' : 'var(--bone)' }}/>
              </div>
            </div>
          ))}
        </div>
      );
    case 'automation':
      return (
        <div style={wrap}>
          <div style={{ color: 'var(--ochre)' }}>RULE: when_score_above_85</div>
          <div style={{ marginTop: 12, color: 'var(--bone)' }}>WHEN <span style={{ color: 'var(--ochre)' }}>resume.score &gt; 85</span></div>
          <div style={{ color: 'var(--bone)', marginLeft: 14 }}>THEN <span style={{ color: 'var(--ochre)' }}>move_to_screen</span></div>
          <div style={{ color: 'var(--bone)', marginLeft: 14 }}>AND <span style={{ color: 'var(--ochre)' }}>send_template "screen_invite"</span></div>
          <div style={{ color: 'var(--bone)', marginLeft: 14 }}>AND <span style={{ color: 'var(--ochre)' }}>trigger_ai_call(in: 24h)</span></div>
          <div style={{ marginTop: 18, color: 'var(--ink-faint)' }}>● Active · last fired 2m ago · 412 today</div>
        </div>
      );
    case 'outreach':
      return (
        <div style={wrap}>
          <div style={{ color: 'var(--ochre)' }}>STAGE: SCREEN_INVITE</div>
          <div style={{ marginTop: 10, color: 'var(--bone)' }}>To: {'{{candidate.first_name}}'}</div>
          <div style={{ color: 'var(--bone)' }}>Channel: <span style={{ color: 'var(--ochre)' }}>email + whatsapp</span></div>
          <div style={{ marginTop: 14, padding: 12, background: 'rgba(255,252,243,0.05)', borderRadius: 4, color: 'var(--bone)', fontSize: 11, lineHeight: 1.6 }}>
            Hi {'{{first_name}}'} — quick screen for the {'{{role}}'} at {'{{client.brand}}'}? 15 min, your time. — Mounika
          </div>
          <div style={{ marginTop: 12, color: 'var(--ink-faint)' }}>Open rate · 71% &nbsp;·&nbsp; Reply rate · 38%</div>
        </div>
      );
    case 'admin':
      return (
        <div style={wrap}>
          <div style={{ color: 'var(--ochre)' }}>NEW ENGAGEMENT LETTER</div>
          <div style={{ marginTop: 10 }}>
            {[['Client','Acme Inc.'],['Role','Senior React Engineer'],['Fee','$499 / hire'],['Replacement','30 days']].map(([k,v],i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderTop: i ? '1px solid rgba(255,252,243,0.1)' : 0 }}>
                <span style={{ color: 'var(--ink-faint)' }}>{k}</span>
                <span style={{ color: 'var(--bone)' }}>{v}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16, color: 'var(--ochre)' }}>→ Generated · sent · countersigned</div>
        </div>
      );
  }
}

/* ============== SALARY ENGINE — hero centerpiece ============== */
function SalaryEngine() {
  const roles = window.WR.salaryRoles;
  const [pick, setPick] = useState(0);
  const r = roles[pick];

  const usaMid = (r.usaLow + r.usaHigh) / 2;
  const mrMid = (r.mrLow + r.mrHigh) / 2;
  const annual = (mrMid - usaMid) * 1000 * 12;

  return (
    <section className="container" style={{ padding: 'clamp(80px, 10vw, 140px) var(--gut)' }}>
      <div className="section-head">
        <div className="nameplate"><span className="num">§03</span><span>Pricing intelligence</span></div>
        <div>
          <h2 className="display-l" style={{ margin: 0 }}>
            What does it really cost<br/>
            <span className="h-italic" style={{ color: 'var(--rust)' }}>not</span> to hire remote?
          </h2>
          <p className="lede" style={{ marginTop: 24, maxWidth: 720 }}>
            Live, verified compensation ranges across senior tech roles. Compare what you'd pay in San Francisco against a senior <em>withRemote</em> engineer — fully managed.
          </p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 32 }} className="salary-grid">
        {/* Role picker */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Pick a role</div>
          <div style={{ borderTop: '1px solid var(--rule)' }}>
            {roles.map((rl, i) => (
              <button key={rl.role} onClick={() => setPick(i)}
                style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  width: '100%', textAlign: 'left',
                  padding: '14px 0', borderBottom: '1px solid var(--rule)',
                  fontFamily: 'var(--serif-display)', fontSize: 18,
                  color: pick === i ? 'var(--rust)' : 'var(--ink)',
                }}>
                <span>{rl.role}</span>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: pick === i ? 'var(--rust)' : 'var(--ink-mute)' }}>
                  {pick === i ? '●' : '○'}
                </span>
              </button>
            ))}
          </div>
        </div>

        {/* Comparison panel */}
        <div style={{ background: 'var(--bone)', border: '1px solid var(--rule)', padding: 'clamp(24px, 4vw, 48px)', position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32 }}>
            <h3 className="display-s" style={{ margin: 0 }}>{r.role}</h3>
            <div style={{ background: 'var(--rust)', color: 'var(--bone)', padding: '6px 12px', borderRadius: 999, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.06em' }}>
              SAVE {r.save}
            </div>
          </div>

          {/* Two columns */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }} className="sal-cols">
            <div>
              <div className="eyebrow" style={{ color: 'var(--ink-mute)' }}>San Francisco · Loaded</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 8 }}>
                <span style={{ fontFamily: 'var(--serif-display)', fontSize: 14, color: 'var(--ink-mute)' }}>$</span>
                <span className="display-m" style={{ color: 'var(--ink-mute)' }}>{r.usaLow}–{r.usaHigh}k</span>
              </div>
              <div style={{ marginTop: 16, color: 'var(--ink-mute)', fontSize: 13 }}>per month, fully loaded · benefits, 401k, equity dilution, RSU refresh</div>
              <BarVis value={(r.usaLow + r.usaHigh) / 2} max={250} color="var(--ink-mute)" striped/>
            </div>
            <div>
              <div className="eyebrow eyebrow-rust">withRemote · Managed</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 8 }}>
                <span style={{ fontFamily: 'var(--serif-display)', fontSize: 14, color: 'var(--rust)' }}>$</span>
                <span className="display-m" style={{ color: 'var(--rust)' }}>{r.mrLow}–{r.mrHigh}k</span>
              </div>
              <div style={{ marginTop: 16, color: 'var(--ink-soft)', fontSize: 13 }}>per month, all-in · payroll, hardware, compliance, account success manager</div>
              <BarVis value={(r.mrLow + r.mrHigh) / 2} max={250} color="var(--rust)"/>
            </div>
          </div>

          {/* Annual savings band */}
          <div style={{ marginTop: 40, padding: '20px 24px', background: 'var(--paper-3)', border: '1px solid var(--ink)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--ink)' }}>Estimated annual savings</div>
              <div className="display-m" style={{ color: 'var(--rust)' }}>${Math.round(Math.abs(annual) / 1000)}k</div>
            </div>
            <a href="salary-guide.html" className="btn btn-ink">Open the full guide <span className="arrow">→</span></a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .salary-grid { grid-template-columns: 1fr !important; }
          .sal-cols { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function BarVis({ value, max, color, striped }) {
  return (
    <div style={{ marginTop: 24, height: 36, background: 'var(--paper-2)', position: 'relative', border: '1px solid var(--rule)' }}>
      <div style={{
        height: '100%', width: `${(value / max) * 100}%`, background: color,
        backgroundImage: striped ? 'repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.15) 4px, rgba(255,255,255,0.15) 8px)' : 'none',
        transition: 'width .6s var(--ease)',
      }}/>
      <div style={{ position: 'absolute', right: 8, top: 10, fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-mute)' }}>${value.toFixed(0)}k/mo</div>
    </div>
  );
}

/* ============== STORY / DROP CAP MANIFESTO ============== */
function Manifesto() {
  return (
    <section className="paper-noise" style={{ background: 'var(--paper-2)', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)', padding: 'clamp(80px, 10vw, 140px) 0' }}>
      <div className="container-narrow">
        <div className="asterism" style={{ textAlign: 'center', marginBottom: 32 }}>★ ★ ★</div>
        <div className="eyebrow" style={{ textAlign: 'center', marginBottom: 24 }}>An editorial · By the founders</div>
        <h2 className="display-l" style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
          Why we built<br/>
          <span className="h-italic" style={{ color: 'var(--rust)' }}>withRemote.ai</span>.
        </h2>
        <hr className="rule" style={{ marginTop: 64, marginBottom: 48 }}/>

        <div style={{ columnCount: 1, fontSize: 19, lineHeight: 1.65, color: 'var(--ink-soft)' }}>
          <p className="dropcap" style={{ marginTop: 0 }}>
            <span style={{ fontFamily: 'var(--serif-display)' }}>It</span> started in 2020 with a colleague at Arizona State University who needed a website. We built it — and kept building. Word spread across startups, hospitals, and enterprises who wanted the same precision without the price tag.
          </p>
          <p>
            Five years later, we've shipped <strong>50+ products</strong> across the US, Canada, and UAE — and watched a pattern repeat. Founders kept asking us not just to build the product, but to help them <em>hire the team to keep building it</em>.
          </p>
          <p>
            So we built two things in parallel: a managed tech studio with twenty in-house experts, and an AI-first talent platform sourcing senior engineers from a <strong>40,000+ vetted pool</strong> in India. Same systems. Same accountability. <em>One contract.</em>
          </p>
        </div>

        <div className="pullquote" style={{ margin: '64px 0', textAlign: 'center', maxWidth: 720, marginInline: 'auto' }}>
          "Great technology and great teams shouldn't be locked behind enterprise budgets or 18-month hiring cycles."
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', gap: 14, fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
          <span>— Bhavya Mehta &amp; Neel Mehta</span>
          <span>·</span>
          <span>Co-founders</span>
        </div>
      </div>
    </section>
  );
}

/* ============== PROCESS ============== */
function Process() {
  return (
    <section className="container" style={{ padding: 'clamp(80px, 10vw, 140px) var(--gut)' }}>
      <div className="section-head">
        <div className="nameplate"><span className="num">§04</span><span>How we work</span></div>
        <div>
          <h2 className="display-l" style={{ margin: 0 }}>A precision process,<br/>engineered for <span className="h-italic" style={{ color: 'var(--rust)' }}>speed</span>.</h2>
          <p className="lede" style={{ marginTop: 24, maxWidth: 720 }}>
            Every engagement follows the same four-stage flow — whether you're building a product or scaling a team.
          </p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--ink)' }} className="process-grid">
        {window.WR.process.map((p, i) => (
          <div key={p.n} style={{ padding: 'clamp(24px, 3vw, 36px)', borderRight: i < 3 ? '1px solid var(--ink)' : 0, background: i % 2 ? 'var(--paper-2)' : 'var(--bone)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span className="display-m" style={{ color: 'var(--rust)' }}>{p.n}</span>
              <span className="eyebrow">Stage</span>
            </div>
            <h3 style={{ fontFamily: 'var(--serif-display)', fontSize: 32, margin: '24px 0 12px' }}>{p.t}</h3>
            <p style={{ color: 'var(--ink-soft)', margin: 0 }}>{p.d}</p>
          </div>
        ))}
      </div>

      <style>{`
        @media (max-width: 880px) {
          .process-grid { grid-template-columns: 1fr 1fr !important; }
          .process-grid > div:nth-child(2) { border-right: 0 !important; }
          .process-grid > div:nth-child(1), .process-grid > div:nth-child(2) { border-bottom: 1px solid var(--ink); }
        }
        @media (max-width: 560px) {
          .process-grid { grid-template-columns: 1fr !important; }
          .process-grid > div { border-right: 0 !important; border-bottom: 1px solid var(--ink); }
          .process-grid > div:last-child { border-bottom: 0; }
        }
      `}</style>
    </section>
  );
}

/* ============== CASE STUDIES TEASER ============== */
function CasesTeaser() {
  const cases = window.WR.cases.slice(0, 6);
  return (
    <section className="container" style={{ padding: 'clamp(80px, 10vw, 140px) var(--gut)' }}>
      <div className="section-head">
        <div className="nameplate"><span className="num">§05</span><span>Real clients · real results</span></div>
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24 }}>
            <h2 className="display-l" style={{ margin: 0 }}>Forensic stories.<br/><span className="h-italic" style={{ color: 'var(--rust)' }}>Verified numbers.</span></h2>
            <a href="case-studies.html" className="btn btn-ghost">All 16 case studies <span className="arrow">→</span></a>
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--ink)' }} className="cases-grid">
        {cases.map((c, i) => (
          <a key={c.slug} href={`case-studies/${c.slug}.html`}
             style={{
               padding: 'clamp(20px, 3vw, 32px)',
               borderRight: ((i+1) % 3) ? '1px solid var(--rule)' : 0,
               borderBottom: i < 3 ? '1px solid var(--rule)' : 0,
               background: 'var(--bone)',
               display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
               minHeight: 320,
             }} className="case-card">
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span className="tag" style={{ color: c.track === 'Tech' ? 'var(--rust)' : 'var(--moss)', borderColor: c.track === 'Tech' ? 'var(--rust)' : 'var(--moss)' }}>
                  {c.track === 'Tech' ? '⚡ TECH' : '🎯 TALENT'}
                </span>
                <span className="eyebrow">{c.read}</span>
              </div>
              <div style={{ fontSize: 56, marginTop: 24, marginBottom: 16, lineHeight: 1 }}>{c.icon}</div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>{c.kind}</div>
              <h3 style={{ fontFamily: 'var(--serif-display)', fontSize: 22, lineHeight: 1.15, margin: 0, color: 'var(--ink)' }}>{c.title}</h3>
            </div>
            <div style={{ marginTop: 24, paddingTop: 16, borderTop: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--rust)' }}>{c.headline}</span>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11 }}>READ →</span>
            </div>
          </a>
        ))}
      </div>

      <style>{`
        .case-card { transition: background .25s var(--ease); }
        .case-card:hover { background: var(--paper-2); }
        @media (max-width: 980px) { .cases-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 600px) { .cases-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

/* ============== DIFFERENTIATORS ============== */
function Differentiators() {
  return (
    <section style={{ background: 'var(--paper-3)', padding: 'clamp(80px, 10vw, 140px) 0', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
      <div className="container">
        <div className="section-head" style={{ borderColor: 'var(--ink)' }}>
          <div className="nameplate"><span className="num">§06</span><span>Why withRemote.ai</span></div>
          <div>
            <h2 className="display-l" style={{ margin: 0 }}>Built different.<br/><span className="h-italic" style={{ color: 'var(--rust)' }}>Priced differently.</span></h2>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }} className="diff-grid">
          {window.WR.diff.map((d, i) => (
            <div key={d.t} style={{
              padding: 'clamp(24px, 3vw, 36px)',
              borderTop: '1px solid var(--ink)',
              borderRight: ((i+1) % 3) ? '1px solid var(--ink)' : 0,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--rust)', letterSpacing: '0.18em' }}>0{i+1}</span>
                <span className="asterism" style={{ fontSize: 12 }}>★</span>
              </div>
              <h3 style={{ fontFamily: 'var(--serif-display)', fontSize: 28, margin: '20px 0 12px', lineHeight: 1.1 }}>{d.t}</h3>
              <p style={{ color: 'var(--ink-soft)', margin: 0 }}>{d.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .diff-grid { grid-template-columns: 1fr 1fr !important; } .diff-grid > div { border-right: 1px solid var(--ink) !important; } .diff-grid > div:nth-child(2n) { border-right: 0 !important; } }
        @media (max-width: 600px) { .diff-grid { grid-template-columns: 1fr !important; } .diff-grid > div { border-right: 0 !important; } }
      `}</style>
    </section>
  );
}

/* ============== FINAL CTA ============== */
function FinalCTA() {
  return (
    <section className="invert paper-noise" style={{ padding: 'clamp(100px, 12vw, 180px) 0', position: 'relative', overflow: 'hidden' }}>
      <div className="container" style={{ position: 'relative' }}>
        <div className="eyebrow" style={{ color: 'var(--ochre)', textAlign: 'center' }}>★ Ready when you are ★</div>
        <h2 className="display-xl h-italic" style={{ textAlign: 'center', color: 'var(--bone)', fontStyle: 'italic', marginTop: 24, lineHeight: 0.92 }}>
          Tell us what<br/>
          you're building.
        </h2>
        <p className="lede" style={{ color: 'var(--ink-faint)', textAlign: 'center', maxWidth: 600, margin: '40px auto 0' }}>
          We'll respond within 1–3 hours with a plan — not a pitch. <em>No deposit. No spam. No hard sell.</em>
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginTop: 48, flexWrap: 'wrap' }}>
          <a href="contact.html" className="btn btn-rust">Book a free 30-min call <span className="arrow">→</span></a>
          <a href="case-studies.html" className="btn btn-ghost">See case studies</a>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 32, marginTop: 64, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--ink-faint)', flexWrap: 'wrap' }}>
          <span>NO CREDIT CARD</span>
          <span>·</span>
          <span>30-MINUTE CALL</span>
          <span>·</span>
          <span>TAILORED ROADMAP</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, WhatWeDo, TalentOSDemo, SalaryEngine, Manifesto, Process, CasesTeaser, Differentiators, FinalCTA });