// The human in the loop landing page

const cs = {
  // ===== Hero =====
  hero: { position: 'relative', padding: '72px 32px 64px', overflow: 'hidden' },
  heroBg: { position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(60% 50% at 80% 20%, rgba(29,78,137,0.07) 0%, transparent 60%), radial-gradient(40% 40% at 5% 90%, rgba(232,220,196,0.32) 0%, transparent 70%)' },
  heroInner: { maxWidth: 1280, margin: '0 auto', position: 'relative', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 72, alignItems: 'center' },
  eyebrow: { display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--blue)', fontWeight: 500, padding: '6px 12px', borderRadius: 999, background: 'var(--blue-soft)', border: '1px solid rgba(29,78,137,0.12)', marginBottom: 24 },
  eyebrowDot: { width: 6, height: 6, borderRadius: 3, background: 'var(--blue)' },
  h1: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 72, lineHeight: 0.99, letterSpacing: '-0.035em', fontWeight: 600, color: 'var(--ink)', marginBottom: 24 },
  italic: { color: 'var(--blue)' },
  heroSub: { fontSize: 19, lineHeight: 1.55, color: 'var(--ink-muted)', maxWidth: 560, marginBottom: 32 },
  heroCtas: { display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' },
  primary: { background: 'var(--ink)', color: '#fff', padding: '14px 22px', borderRadius: 12, fontSize: 15, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 8, transition: 'background .2s' },
  ghost: { background: 'transparent', color: 'var(--ink)', padding: '14px 20px', borderRadius: 12, fontSize: 15, fontWeight: 500, border: '1px solid var(--line)', display: 'inline-flex', alignItems: 'center', gap: 8 },

  // ===== Hero visual: loop card =====
  visualWrap: { position: 'relative' },
  loopCard: { background: '#fff', border: '1px solid var(--line-soft)', borderRadius: 20, boxShadow: 'var(--shadow-lg)', padding: 22, display: 'flex', flexDirection: 'column', gap: 14 },
  loopHead: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 14, borderBottom: '1px dashed var(--line)' },
  loopTaskLabel: { fontSize: 11, fontFamily: "'Outfit', system-ui, sans-serif", letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-muted)' },
  loopTaskTitle: { fontSize: 14, fontWeight: 600, color: 'var(--ink)', marginTop: 2 },
  loopStatus: { fontSize: 11, fontFamily: "'Outfit', system-ui, sans-serif", letterSpacing: '0.04em', color: 'var(--green-ok)', display: 'inline-flex', alignItems: 'center', gap: 6 },
  loopRow: { display: 'grid', gridTemplateColumns: '92px 1fr', gap: 14, alignItems: 'start' },
  loopActorCol: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, paddingTop: 4 },
  loopActorTag: { fontSize: 10, fontFamily: "'Outfit', system-ui, sans-serif", letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-muted)' },
  loopActorIcon: (bg, fg) => ({ width: 36, height: 36, borderRadius: 10, background: bg, color: fg, display: 'grid', placeItems: 'center' }),
  loopBubble: { background: 'var(--paper-deep)', border: '1px solid var(--line-soft)', borderRadius: 12, padding: '12px 14px', fontSize: 13, lineHeight: 1.5, color: 'var(--ink-soft)' },
  loopBubbleHuman: { background: '#fff', border: '1px dashed rgba(29,78,137,0.35)' },
  loopBubbleYou: { background: 'var(--ink)', color: '#fff', border: 'none' },
  loopMeta: { fontSize: 11, color: 'var(--ink-muted)', fontFamily: "'Outfit', system-ui, sans-serif", letterSpacing: '0.04em', marginTop: 6 },

  floatChip: { position: 'absolute', background: '#fff', border: '1px solid var(--line-soft)', borderRadius: 12, padding: '10px 14px', boxShadow: 'var(--shadow-md)', fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 8 },

  // ===== Section base =====
  section: { padding: '96px 32px' },
  sectionInner: { maxWidth: 1280, margin: '0 auto' },
  sectionEyebrow: { fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', fontSize: 12, color: 'var(--blue)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14 },
  sectionH: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 600, marginBottom: 18 },
  sectionSub: { fontSize: 18, color: 'var(--ink-muted)', maxWidth: 660, lineHeight: 1.55 },

  // ===== Problem section =====
  problemHead: { display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'end', marginBottom: 48 },
  problemGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 },
  problemCard: { background: '#fff', border: '1px solid var(--line)', borderRadius: 16, padding: 32, display: 'flex', flexDirection: 'column', gap: 12, minHeight: 240 },
  problemHeadline: { fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', color: 'var(--ink)' },
  problemBody: { fontSize: 14.5, color: 'var(--ink-muted)', lineHeight: 1.6 },
  problemKicker: { fontSize: 11, fontFamily: "'Outfit', system-ui, sans-serif", letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--coral-ink)', fontWeight: 600 },
  problemSummary: { marginTop: 36, padding: '28px 32px', background: 'var(--paper-deep)', borderRadius: 16, border: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center', gap: 20, fontSize: 17, color: 'var(--ink)', lineHeight: 1.5 },

  // ===== Pillars (the role) =====
  pillarHead: { display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'end', marginBottom: 48 },
  pillarGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 },
  pillar: { background: '#fff', border: '1px solid var(--line-soft)', borderRadius: 18, padding: 32, position: 'relative', overflow: 'hidden', minHeight: 280, display: 'flex', flexDirection: 'column' },
  pillarNum: { fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', fontSize: 11, color: 'var(--ink-muted)', letterSpacing: '0.08em', marginBottom: 14 },
  pillarIcon: { width: 44, height: 44, borderRadius: 11, background: 'var(--blue-soft)', color: 'var(--blue-deep)', display: 'grid', placeItems: 'center', marginBottom: 18 },
  pillarTitle: { fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 10 },
  pillarDesc: { fontSize: 14.5, color: 'var(--ink-muted)', lineHeight: 1.55, marginBottom: 16 },
  pillarFootList: { marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 6, paddingTop: 14, borderTop: '1px dashed var(--line)' },
  pillarFootItem: { fontSize: 13, color: 'var(--ink-soft)', display: 'flex', alignItems: 'center', gap: 8 },

  // ===== Loop diagram (3 columns) =====
  hitlHead: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end', marginBottom: 56 },
  hitlPanel: { background: 'var(--ink)', color: '#fff', borderRadius: 24, padding: 56, position: 'relative', overflow: 'hidden' },
  hitlBg: { position: 'absolute', inset: 0, pointerEvents: 'none', backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 24px)' },
  hitlGrid: { position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, alignItems: 'stretch' },
  hitlCol: { background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 16, padding: 26, display: 'flex', flexDirection: 'column', gap: 10 },
  hitlColCentered: { background: 'rgba(85,166,229,0.10)', border: '1px solid rgba(85,166,229,0.35)' },
  hitlLabel: { fontSize: 11, fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--blue-mid)' },
  hitlTitle: { fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' },
  hitlDesc: { fontSize: 14, color: 'rgba(255,255,255,0.92)', lineHeight: 1.55 },
  hitlList: { display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13, color: 'rgba(255,255,255,0.85)' },
  hitlFlow: { position: 'relative', marginTop: 36, padding: '20px 24px', background: 'rgba(255,255,255,0.04)', borderRadius: 12, fontSize: 13.5, color: 'rgba(255,255,255,0.85)', lineHeight: 1.55, display: 'flex', alignItems: 'center', gap: 14 },

  // ===== Examples =====
  exBand: { background: 'var(--paper-deep)', borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)' },
  exGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginTop: 40 },
  exCard: { background: '#fff', border: '1px solid var(--line)', borderRadius: 16, padding: 28, display: 'flex', flexDirection: 'column', gap: 14 },
  exTag: { fontSize: 11, fontFamily: "'Outfit', system-ui, sans-serif", letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-muted)' },
  exRowAi: { padding: '12px 14px', borderRadius: 10, background: 'var(--paper-deep)', borderLeft: '2px solid var(--ink-muted)', fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.55 },
  exRowHuman: { padding: '12px 14px', borderRadius: 10, background: '#fff', border: '1px solid var(--line)', borderLeft: '2px solid var(--blue)', fontSize: 13.5, color: 'var(--ink)', lineHeight: 1.55, display: 'flex', alignItems: 'flex-start', gap: 10 },
  exMicroLabel: { fontSize: 10, fontFamily: "'Outfit', system-ui, sans-serif", letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--ink-muted)', marginBottom: 4 },
  exMicroLabelHuman: { color: 'var(--blue-deep)' },

  // ===== What you get back =====
  ybGrid: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 40 },
  ybCard: { padding: '28px 4px', borderTop: '1px solid var(--ink)' },
  ybLabel: { fontSize: 11, fontFamily: "'Outfit', system-ui, sans-serif", letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-muted)', marginBottom: 14 },
  ybNumber: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 56, color: 'var(--blue)', lineHeight: 1, marginBottom: 14, letterSpacing: '-0.02em' },
  ybTitle: { fontSize: 19, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 8 },
  ybDesc: { fontSize: 14, color: 'var(--ink-muted)', lineHeight: 1.55 },

  // ===== BlueMoso version =====
  bmBand: { padding: '96px 32px', background: 'var(--ink)', color: '#fff' },
  bmInner: { maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' },
  bmEyebrow: { fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', fontSize: 12, color: 'var(--blue-mid)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14 },
  bmH: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 600, marginBottom: 18 },
  bmSub: { fontSize: 17, color: 'rgba(255,255,255,0.92)', lineHeight: 1.6, marginBottom: 24 },
  bmList: { display: 'flex', flexDirection: 'column', gap: 14, marginTop: 8 },
  bmListItem: { display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 14.5, color: 'rgba(255,255,255,0.9)', lineHeight: 1.5 },
  bmCheckDot: { width: 22, height: 22, borderRadius: 11, background: 'rgba(85,166,229,0.18)', color: 'var(--blue-mid)', display: 'grid', placeItems: 'center', flex: 'none', marginTop: 1 },

  // ===== FAQ =====
  faqList: { display: 'flex', flexDirection: 'column', gap: 0, marginTop: 40, borderTop: '1px solid var(--line)' },
  faqRow: { borderBottom: '1px solid var(--line)' },
  faqQ: { width: '100%', padding: '24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, fontSize: 17, fontWeight: 500, color: 'var(--ink)', textAlign: 'left' },
  faqA: { fontSize: 15, color: 'var(--ink-muted)', lineHeight: 1.6, paddingBottom: 24, maxWidth: 760 },
};

// ============= Hero loop card =============
function LoopCard() {
  return (
    <div style={cs.loopCard}>
      <div style={cs.loopHead}>
        <div>
          <div style={cs.loopTaskLabel}>One task · Monday 8:42am</div>
          <div style={cs.loopTaskTitle}>Reply to 14 webinar leads</div>
        </div>
        <div style={cs.loopStatus}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--green-ok)' }} />
          shipped
        </div>
      </div>

      <div style={cs.loopRow}>
        <div style={cs.loopActorCol}>
          <div style={cs.loopActorIcon('var(--paper-deep)', 'var(--ink-muted)')}>
            <Icon name="sparkle" size={18} />
          </div>
          <div style={cs.loopActorTag}>AI</div>
        </div>
        <div>
          <div style={cs.exMicroLabel}>Draft</div>
          <div style={cs.loopBubble}>
            Generated 14 personalised follow-ups. Referenced each lead's Q&amp;A question. Linked the resource you mentioned.
          </div>
        </div>
      </div>

      <div style={cs.loopRow}>
        <div style={cs.loopActorCol}>
          <div style={cs.loopActorIcon('var(--blue-soft)', 'var(--blue-deep)')}>
            <Icon name="users" size={18} />
          </div>
          <div style={cs.loopActorTag}>Human</div>
        </div>
        <div>
          <div style={{ ...cs.exMicroLabel, ...cs.exMicroLabelHuman }}>Review · Maya R.</div>
          <div style={{ ...cs.loopBubble, ...cs.loopBubbleHuman }}>
            Edited 3 drafts for tone. Flagged one lead. Already a customer, routed to support instead. Sent the other 13.
          </div>
        </div>
      </div>

      <div style={cs.loopRow}>
        <div style={cs.loopActorCol}>
          <div style={cs.loopActorIcon('var(--ink)', '#fff')}>
            <Icon name="check" size={18} />
          </div>
          <div style={cs.loopActorTag}>You</div>
        </div>
        <div>
          <div style={cs.exMicroLabel}>Inbox</div>
          <div style={{ ...cs.loopBubble, ...cs.loopBubbleYou }}>
            <strong style={{ fontWeight: 600 }}>14 leads followed up.</strong> One needs a call from you (existing customer asking to expand).
          </div>
        </div>
      </div>
    </div>
  );
}

// ============= Hero =============
function HeroSection() {
  return (
    <section style={cs.hero}>
      <div style={cs.heroBg} />
      <div style={cs.heroInner} className="bm-hero-grid">
        <div>
          <div style={cs.eyebrow}>
            <span style={cs.eyebrowDot}></span>
            The human in the loop
          </div>
          <h1 className="serif bm-hero-title" style={cs.h1}>
            AI gave you efficiency.<br/>
            <span style={cs.italic}>A human</span> gives you your time back.
          </h1>
          <p style={cs.heroSub}>
            AI is creating new jobs. The human in the loop is one of them. A real person running the tools every day, checking the work, and making sure what goes out is right.
          </p>
          <div style={cs.heroCtas}>
            <a href="#cta" style={cs.primary}
               onMouseEnter={e => e.currentTarget.style.background = 'var(--blue)'}
               onMouseLeave={e => e.currentTarget.style.background = 'var(--ink)'}>
              Talk to us about the role <Icon name="arrow" size={16} />
            </a>
            <a href="#role" style={cs.ghost}>See what the role does</a>
          </div>
        </div>

        <div style={cs.visualWrap}>
          <HumanLoopCycle outputDesc="Drafts, research, and summaries generated at scale." />
        </div>
      </div>
    </section>
  );
}

// ============= Problem: why AI alone doesn't give you time back =============
function ProblemSection() {
  const problems = [
    {
      kicker: 'Without a human',
      title: 'You become the editor.',
      body: 'AI generates 10× more output. Now someone has to read it, fix the tone, catch the wrong link, and decide what actually goes out. Without a person in that seat, that someone is you.',
    },
    {
      kicker: 'Without a human',
      title: 'Your systems quietly drift.',
      body: 'The workflow you set up six weeks ago no longer matches how your business runs today. Nobody is watching, nobody is tuning. The AI keeps confidently doing the old thing.',
    },
    {
      kicker: 'Without a human',
      title: 'Edge cases find you anyway.',
      body: 'AI doesn\'t know that this lead is already a customer, that this complaint is the third from the same account, or that this draft uses a phrase you would never say out loud.',
    },
  ];
  return (
    <section style={cs.section}>
      <div style={cs.sectionInner}>
        <div style={cs.problemHead} className="bm-matching-grid">
          <div>
            <div className="mono" style={cs.sectionEyebrow}>The problem nobody warns you about</div>
            <h2 style={cs.sectionH}>AI alone doesn't give you your <span style={cs.italic}>time back.</span></h2>
          </div>
          <p style={cs.sectionSub}>
            It saves you typing, and quietly hands you a new full-time job: prompting, reviewing, editing, and watching for the things AI won't catch on its own. The work shifts shape; it doesn't disappear.
          </p>
        </div>

        <div style={cs.problemGrid} className="bm-problem-grid">
          {problems.map(p => (
            <div key={p.title} style={cs.problemCard}>
              <div style={cs.problemKicker}>{p.kicker}</div>
              <div style={cs.problemHeadline}>{p.title}</div>
              <div style={cs.problemBody}>{p.body}</div>
            </div>
          ))}
        </div>

        <div style={cs.problemSummary} className="bm-problem-summary">
          <div style={{ width: 36, height: 36, borderRadius: 18, background: 'var(--blue-soft)', color: 'var(--blue-deep)', display: 'grid', placeItems: 'center', flex: 'none' }}>
            <Icon name="users" size={18} />
          </div>
          <div>
            That gap is the role. The human in the loop is the person who fills it, so the systems you built actually do what you intended, and you actually get the time back you were promised.
          </div>
        </div>
      </div>
    </section>
  );
}

// ============= What the role actually does =============
function RoleSection() {
  const pillars = [
    {
      n: '01', icon: 'settings', title: 'Runs the workflows',
      desc: 'Your VA keeps the AI tools moving every day, not when you remember to log in. Inbox triage runs in the morning. Reports go out on Friday. Drafts are waiting before your first meeting.',
      bullets: ['Triggers the right workflows on the right cadence', 'Knows which tool to reach for', 'Owns the daily rhythm so you don\'t'],
    },
    {
      n: '02', icon: 'shield', title: 'Reviews every output',
      desc: 'Nothing AI produces goes out unread. Your VA checks tone, accuracy, links, and context, then ships, edits, or escalates. You stop reviewing first drafts and start reviewing decisions.',
      bullets: ['Catches the off-brand sentence', 'Verifies the fact, link, or attachment', 'Decides: send, fix, or escalate'],
    },
    {
      n: '03', icon: 'target', title: 'Keeps systems aligned with intent',
      desc: 'AI drifts. Business changes. Your VA notices when the system stops matching the way you actually work and tunes it: new examples, updated prompts, refreshed knowledge, so output stays on-brief.',
      bullets: ['Spots drift before you do', 'Updates prompts and reference docs', 'Folds new SOPs back into the system'],
    },
    {
      n: '04', icon: 'chat', title: 'Catches edge cases and makes the call',
      desc: 'The judgment AI doesn\'t have. Your VA recognises the unhappy customer, the urgent thread, the request that needs you specifically, and routes it cleanly, with context, before it becomes a problem.',
      bullets: ['Knows what only you can answer', 'Brings you context, not a forwarded thread', 'Owns the small calls so you make the big ones'],
    },
  ];
  return (
    <section id="role" style={cs.section}>
      <div style={cs.sectionInner}>
        <div style={cs.pillarHead} className="bm-matching-grid">
          <div>
            <div className="mono" style={cs.sectionEyebrow}>What your VA actually does</div>
            <h2 style={cs.sectionH}>Four jobs your <span style={cs.italic}>VA picks up.</span></h2>
          </div>
          <p style={cs.sectionSub}>
            Not "AI operator." Not "prompt engineer." The same VA role you'd hire anyway, now trained on AI tools and accountable for what they produce. These are the four jobs they take on, so AI shows up in your business as finished work instead of unfinished drafts.
          </p>
        </div>

        <div style={cs.pillarGrid} className="bm-services-grid">
          {pillars.map(p => (
            <div key={p.n} style={cs.pillar}>
              <div style={cs.pillarNum}>{p.n} / 04</div>
              <div style={cs.pillarIcon}><Icon name={p.icon} size={20} /></div>
              <div style={cs.pillarTitle}>{p.title}</div>
              <div style={cs.pillarDesc}>{p.desc}</div>
              <div style={cs.pillarFootList}>
                {p.bullets.map(b => (
                  <div key={b} style={cs.pillarFootItem}>
                    <span style={{ width: 4, height: 4, borderRadius: 2, background: 'var(--blue)' }} />
                    {b}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============= The loop: how the human interacts with AI =============
function TheLoop() {
  return (
    <section style={cs.section}>
      <div style={cs.sectionInner}>
        <div style={cs.hitlHead} className="bm-matching-grid">
          <div>
            <div className="mono" style={{ ...cs.sectionEyebrow, color: 'var(--blue)' }}>How the loop works</div>
            <h2 style={cs.sectionH}>AI runs the volume. <span style={cs.italic}>A human</span> runs the judgment.</h2>
          </div>
          <p style={cs.sectionSub}>
            Three roles working together, not one tool doing it all. AI handles speed and scale. A human handles accountability and judgment. You handle the decisions only you can make. The loop is what holds it together.
          </p>
        </div>

        <div style={cs.hitlPanel}>
          <div style={cs.hitlBg} />
          <div style={cs.hitlGrid} className="bm-hitl-grid">
            <div style={cs.hitlCol}>
              <div style={cs.hitlLabel}>AI</div>
              <div style={cs.hitlTitle}>Speed and volume</div>
              <div style={cs.hitlDesc}>Drafts, summaries, lookups, first passes. The repeatable work that used to eat your week, done in minutes.</div>
              <div style={cs.hitlList}>
                <div>· Drafts at scale</div>
                <div>· Searches your knowledge</div>
                <div>· Sorts, summarises, triages</div>
                <div>· Runs the repeatable steps</div>
              </div>
            </div>
            <div style={{ ...cs.hitlCol, ...cs.hitlColCentered }}>
              <div style={cs.hitlLabel}>The human in the loop</div>
              <div style={cs.hitlTitle}>Judgment and accountability</div>
              <div style={cs.hitlDesc}>The seat between AI and you. Reviews every output, edits what's off, escalates what isn't theirs to decide, and tunes the system so it gets better over time.</div>
              <div style={cs.hitlList}>
                <div>· Reviews every output before it ships</div>
                <div>· Edits drafts, fixes drift</div>
                <div>· Applies taste and judgment</div>
                <div>· Escalates what only you can decide</div>
              </div>
            </div>
            <div style={cs.hitlCol}>
              <div style={cs.hitlLabel}>You</div>
              <div style={cs.hitlTitle}>The calls that matter</div>
              <div style={cs.hitlDesc}>The decisions that need an owner: pricing, hiring, strategy, the unhappy customer. Everything else is handled before it lands on your plate.</div>
              <div style={cs.hitlList}>
                <div>· See finished work, not first drafts</div>
                <div>· Decide on the few things flagged for you</div>
                <div>· Skip the tooling, the prompting, the babysitting</div>
                <div>· Get a weekly summary of what shipped</div>
              </div>
            </div>
          </div>

          <div style={cs.hitlFlow} className="bm-hitl-flow">
            <Icon name="sparkle" size={16} color="var(--blue-mid)" />
            <span>AI drafts</span>
            <Icon name="arrow" size={14} color="rgba(255,255,255,0.4)" />
            <span>Human reviews, edits, decides</span>
            <Icon name="arrow" size={14} color="rgba(255,255,255,0.4)" />
            <span>You see what shipped + what needs you</span>
            <Icon name="arrow" size={14} color="rgba(255,255,255,0.4)" />
            <span>Human tunes the system. The loop gets sharper.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============= What you get back =============
function GetBackSection() {
  const items = [
    { n: '01', kicker: 'Time', t: 'Your time, back.', d: 'Not "AI saved you 12 minutes." Whole afternoons you weren\'t expecting to have, because someone else is running the loop.' },
    { n: '02', kicker: 'Systems', t: 'Systems that hold.', d: 'The AI workflows you set up keep doing what you intended six months in, twelve months in. Drift gets caught and tuned, not ignored.' },
    { n: '03', kicker: 'One seat', t: 'One point of contact.', d: 'Not a stack of tools, dashboards, and prompts to manage. One person who owns the operational layer end-to-end.' },
    { n: '04', kicker: 'Decisions', t: 'Decisions, not drafts.', d: 'You stop reading first passes. You see what shipped and the small list of calls only you can make, with context attached.' },
  ];
  return (
    <section style={{ ...cs.section, background: 'var(--paper-deep)', borderTop: '1px solid var(--line-soft)' }}>
      <div style={cs.sectionInner}>
        <div className="mono" style={cs.sectionEyebrow}>What you get back</div>
        <h2 style={cs.sectionH}>The point of all of this is <span style={cs.italic}>not the AI.</span></h2>
        <p style={cs.sectionSub}>
          The point is what's on the other side of it: your time, your focus, and a business that runs on systems you can actually trust.
        </p>

        <div style={cs.ybGrid} className="bm-yb-grid">
          {items.map(i => (
            <div key={i.n} style={cs.ybCard}>
              <div style={cs.ybLabel}>{i.n}</div>
              <div className="serif" style={cs.ybNumber}>{i.kicker}</div>
              <div style={cs.ybTitle}>{i.t}</div>
              <div style={cs.ybDesc}>{i.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============= BlueMoso version =============
function BlueMosoVersion() {
  const points = [
    'Vetted VAs who already know modern AI tools and the integrations around them',
    'Trained on your stack and your voice before they start running anything',
    'Backed by a manager and a backup VA. The role keeps running even when one person doesn\'t',
    'Accountable to outcomes, not hours: you get a weekly summary of what shipped and what needs you',
  ];
  return (
    <section style={cs.bmBand}>
      <div style={cs.bmInner} className="bm-matching-grid">
        <div>
          <div className="mono" style={cs.bmEyebrow}>The BlueMoso version of this role</div>
          <h2 style={cs.bmH}>We've been training this role for years. <span style={{ color: 'var(--blue-mid)' }}>AI is the new toolkit.</span></h2>
          <p style={cs.bmSub}>
            The point of all of this isn't the AI. It's your time, your focus, and a business that runs on systems you can actually trust. The human in the loop is the role that makes that real.
          </p>
          <p style={cs.bmSub}>
            It isn't a brand new job. It's the managed VA role we've always offered: running your systems, owning your operational layer, accountable to the outcome. Now trained on AI tooling and embedded in your AI stack.
          </p>
          <p style={cs.bmSub}>
            We'll help you set up the AI side if you need it. But the part you're actually hiring for is the human.
          </p>
        </div>
        <div style={cs.bmList}>
          {points.map(p => (
            <div key={p} style={cs.bmListItem}>
              <div style={cs.bmCheckDot}><Icon name="check" size={12} /></div>
              <div>{p}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============= FAQ =============
function FAQItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={cs.faqRow}>
      <button style={cs.faqQ} onClick={() => setOpen(!open)}>
        {q}
        <span style={{ width: 28, height: 28, borderRadius: 14, border: '1px solid ' + (open ? 'var(--ink)' : 'var(--line)'), background: open ? 'var(--ink)' : 'transparent', color: open ? 'var(--paper)' : 'var(--ink)', display: 'grid', placeItems: 'center', flex: 'none', transform: open ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform .25s, background .2s, border-color .2s' }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><polyline points="5 9.5 12 15.5 19 9.5" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </span>
      </button>
      {open && <div style={cs.faqA}>{a}</div>}
    </div>
  );
}

function FAQ() {
  const items = [
    { q: 'Is "the human in the loop" just a VA?', a: 'It\'s an evolution of the role. A traditional VA executes tasks. A human in the loop runs AI-augmented systems, reviews AI output, keeps the systems aligned with how your business actually works, and is accountable for the outcome. Same kind of person, sharper toolset, more leverage.' },
    { q: 'How is this different from just hiring a regular AI consultant?', a: 'A consultant builds a setup and leaves. The human in the loop is the person who runs the setup every day after that. Most AI projects die at the handoff. This is the seat that catches them.' },
    { q: 'Do I need this if I\'m already using AI tools myself?', a: 'If you have time to review every AI output, tune prompts when they drift, and catch edge cases, no. If you set up an AI workflow six weeks ago and have only half-checked it since, this is the role you\'re missing.' },
    { q: 'What if AI gets something wrong?', a: 'That\'s the entire point of the role. Nothing AI produces ships without a human review. Drafts get edited, weird answers get flagged, and anomalies escalate to you before they reach a customer or a teammate.' },
    { q: 'Will I lose visibility into what\'s happening?', a: 'No, you gain it. Today the AI output is scattered across tabs and tools. The role gives you a single weekly summary: what shipped, what got caught, what needs a decision from you.' },
    { q: 'What does it cost?', a: 'It\'s a monthly subscription, custom scoped on the discovery call. A managed option is also available if you\'d like us to run weekly check-ins, QA the work, own SOPs, and cover when your VA is out. Pay by credit card or bank transfer, collected before service starts and automatically charged at the start of each month after that. Month-to-month, no long contracts.' },
    { q: 'What tools does the person work in?', a: 'Whatever you already use. We match you with a VA whose experience fits your setup: your CRM, your project tools, your AI workspace, your files. They\'ll work in your stack, not ask you to switch to theirs.' },
    { q: 'What does the security setup look like?', a: 'You own the security stack, and we help you set it up. The setup we recommend includes dedicated residential proxies and VPNs for VA account access, an encrypted password manager like 1Password, and role-based access scoped only to what your VA needs. Credentials are never shared in plain text, and your VA\'s access is revoked immediately on any transition. We work inside your own AI workspace under your own data settings, so your conversations and files are not used to train models.' },
  ];
  return (
    <section style={cs.section}>
      <div style={{ ...cs.sectionInner, maxWidth: 920 }}>
        <div className="mono" style={cs.sectionEyebrow}>FAQ</div>
        <h2 style={cs.sectionH}>Things people <span style={cs.italic}>actually ask.</span></h2>

        <div style={cs.faqList}>
          {items.map(i => <FAQItem key={i.q} q={i.q} a={i.a} />)}
        </div>
      </div>
    </section>
  );
}

// ============= Page shell =============
function ClaudeApp() {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div>
      <Nav baseHref="index.html" />
      <main>
        <HeroSection />
        <RoleSection />
        <BlueMosoVersion />
        <FAQ />
        <CTA />
      </main>
      {/* baseHref="index.html" — this page has only FAQ + CTA from the
          homepage's shared section flow, so footer links to #matching /
          #packages / #story must route back to the homepage. The two local
          anchors (#cta, #faq) are passed via `localHashes` so they stay
          same-page jumps. */}
      <Footer baseHref="index.html" localHashes={['#cta', '#faq']} />
      <style>{`
        @media (max-width: 1024px) {
          .bm-hero-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
          .bm-matching-grid { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; }
          .bm-services-grid { grid-template-columns: 1fr !important; }
          .bm-problem-grid { grid-template-columns: 1fr !important; }
          .bm-ex-grid { grid-template-columns: 1fr !important; }
          .bm-yb-grid { grid-template-columns: 1fr 1fr !important; }
          .bm-hitl-grid { grid-template-columns: 1fr !important; }
          .bm-hitl-flow { flex-wrap: wrap !important; }
        }
        @media (max-width: 640px) {
          .bm-yb-grid { grid-template-columns: 1fr !important; }
          .bm-problem-summary { flex-direction: column !important; align-items: flex-start !important; }
        }
      `}</style>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ClaudeApp />);
