/* ===========================================================================
   ArticleClosing.jsx — How we built / Proof / Pattern / What's next / CTA
   ===========================================================================*/

/* ---------- How we built this — friction list ----------------------------*/

const HowWeBuilt = () => {
  const items = [
    {
      friction: '"I can\'t install Claude Code, the Node.js setup is too much"',
      ship: 'Coder-based cloud workspace · log in, environment is wired',
    },
    {
      friction: '"I need a skill that does X, but no one has built it"',
      ship: 'Skills Registry · one person creates, everyone uses',
    },
    {
      friction: '"I have no idea what my team is actually doing with AI"',
      ship: 'Simple LLM analytics over the gateway',
    },
  ];
  return (
    <section style={{padding: '24px 0'}}>
      <Prose>
        <h3>How we built this</h3>
        <p>These principles weren't a strategy. We followed friction.</p>
      </Prose>

      <div className="artifact-frame">
        <div className="artifact-card">
          <div className="artifact-head">
            <span>roadmap = friction list, prioritized</span>
            <span className="live">SHIPPING</span>
          </div>
          <div style={{padding: 0}}>
            {items.map((it, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '40px 1fr 1fr',
                gap: 0,
                borderBottom: i < items.length - 1 ? '1px solid var(--border-subtle)' : 'none',
                alignItems: 'stretch'
              }}>
                <div style={{
                  background: 'var(--bg-tertiary)', borderRight: '1px solid var(--border-subtle)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)'
                }}>0{i + 1}</div>
                <div style={{padding: '20px 22px', background: 'var(--bg-primary)', borderRight: '1px solid var(--border-subtle)'}}>
                  <Eyebrow color="var(--danger-fg)">friction</Eyebrow>
                  <div style={{marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-secondary)', lineHeight: 1.55}}>
                    {it.friction}
                  </div>
                </div>
                <div style={{padding: '20px 22px', background: 'var(--bg-secondary)'}}>
                  <Eyebrow>shipped</Eyebrow>
                  <div style={{marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-primary)', lineHeight: 1.55}}>
                    <span style={{color: 'var(--brand-green)'}}>→ </span>{it.ship}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <Prose>
        <p>When users said <em>"I can't install Claude Code, the Node.js setup is too much"</em>, we shipped a Coder-based cloud workspace. Log in, your environment is already wired to the gateway, MCPs, skills, and internal systems. Zero local setup.</p>
        <p>When users said <em>"I need a skill that does X, but no one has built it"</em>, we shipped a Skills Registry. One person creates, everyone uses.</p>
        <p>When leaders said <em>"I have no idea what my team is actually doing with AI"</em>, we shipped simple LLM analytics over the gateway.</p>
        <p>Each thing was a direct response to friction someone hit yesterday. The roadmap is the friction list, prioritized.</p>
        <p>The deeper version, the one I'd put on a wall: <strong>you rarely need to invent anything. Everything was invented yesterday. Your job is to be the one who shipped the best of it today.</strong></p>
        <p>When Anthropic added <code>/insights</code> to Claude Code (automatic analysis of user sessions, surfacing what people do), I took that pattern and applied it across our entire stack. Now AI summarizes sessions regardless of which client they came in through: portal, IDE, chat bot, cloud workspace. They invented it, we adopted it everywhere.</p>
        <p>This is true for almost every "innovation" on our platform. The principles in this article are mine. Most of the implementations are imported, and that's by design.</p>
        <hr/>
      </Prose>
    </section>
  );
};
window.HowWeBuilt = HowWeBuilt;

/* ---------- The proof — animated stats ----------------------------------*/

const Proof = () => {
  const [ref, seen] = useInView();
  const stats = [
    {v: 1100, suffix: '',     label: 'monthly active users', sub: '~55% of company'},
    {v: 745,  suffix: '',     label: 'weekly active users'},
    {v: 450,  suffix: '+',    label: 'peak DAU'},
    {v: 80,   suffix: '+',    label: 'skills',                sub: '60+ user-built'},
    {v: 50,   suffix: 'B+',   label: 'tokens / month',        sub: 'one gateway'},
  ];
  return (
    <section ref={ref} style={{padding: '24px 0'}}>
      <Prose>
        <h3>The proof</h3>
        <p>Claude.ai with its Computer Use feature is the closest thing to a gold standard for Individual AI right now. It handles office and IT tasks in one place, with a usable surface, and works for non-technical people. That's the bar.</p>
        <p>I rebuilt that experience inside our 2,000-person company. Same low-barrier feel, self-hosted where it matters, connected to internal data and internal authentication.</p>
        <p>Five months in:</p>
      </Prose>

      <div className="artifact-frame">
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12}}>
          {stats.map((s, i) => (
            <ProofStat key={s.label} stat={s} run={seen} delay={i * 120}/>
          ))}
        </div>
      </div>

      <Prose>
        <p>Plus month-over-month retention of 75–86%. No one is forced to use it. They use it because it does what they need.</p>
        <p>This is the foundation Sivulka's Institutional AI gets built on. The institutional layer is starting to emerge on top: agents in n8n workflows, deterministic skills with audit trails, the beginnings of cross-team coordination. But none of that exists without the 1,100 individuals who came first.</p>
        <hr/>
      </Prose>
    </section>
  );
};
window.Proof = Proof;

const ProofStat = ({stat, run, delay}) => {
  const [start, setStart] = React.useState(false);
  React.useEffect(() => {
    if (run) {
      const id = setTimeout(() => setStart(true), delay);
      return () => clearTimeout(id);
    }
  }, [run, delay]);
  const n = useCountUp(stat.v, 1400, start);
  const display = stat.v >= 1000 ? Math.round(n).toLocaleString() : Math.round(n);
  return (
    <div style={{
      background: 'var(--bg-secondary)',
      border: '1px solid var(--border-default)',
      borderRadius: 12,
      padding: '22px 20px',
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: .5, pointerEvents: 'none',
        background: 'radial-gradient(ellipse 200px 100px at 50% 0%, rgba(74,222,128,.08), transparent 70%)'
      }}/>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 38, fontWeight: 600,
        color: 'var(--fg-primary)', letterSpacing: '-.025em', lineHeight: 1
      }}>
        {display}<span style={{color: 'var(--brand-green)'}}>{stat.suffix}</span>
      </div>
      <div style={{
        marginTop: 10, fontFamily: 'var(--font-mono)', fontSize: 11,
        color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '.08em'
      }}>{stat.label}</div>
      {stat.sub && <div style={{marginTop: 4, fontSize: 11.5, color: 'var(--fg-secondary)'}}>{stat.sub}</div>}
    </div>
  );
};

/* ---------- Pattern: 1890s mills → 2026 AI ------------------------------*/

const PatternThenNow = () => {
  return (
    <section style={{padding: '24px 0'}}>
      <Prose>
        <h3>The pattern</h3>
      </Prose>

      <div className="artifact-frame">
        <div className="artifact-card">
          <div className="artifact-head">
            <span>same pattern · 130 years apart</span>
            <span className="live">PARALLEL</span>
          </div>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 60px 1fr', minHeight: 280}}>
            <PatternColumn
              eyebrow="1890s textile mills"
              eyebrowColor="var(--fg-muted)"
              title="Speed up the motors"
              steps={[
                'Install electric motors',
                'Run them in old steam-engine layouts',
                'Gather 30 years of operating experience',
                'Then redesign the factory floor',
              ]}
              tone="muted"
            />
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              borderLeft: '1px solid var(--border-subtle)', borderRight: '1px solid var(--border-subtle)',
              background: 'var(--bg-primary)'
            }}>
              <div style={{fontFamily: 'var(--font-mono)', fontSize: 9, textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--brand-green)', writingMode: 'vertical-rl', transform: 'rotate(180deg)'}}>
                same pattern
              </div>
            </div>
            <PatternColumn
              eyebrow="2026 enterprise AI"
              eyebrowColor="var(--brand-green)"
              title="Speed up the workers"
              steps={[
                'Give individuals AI tools',
                'Run them in existing workflows',
                'Gather lived experience · build skills',
                'Then institutional agents land',
              ]}
              tone="green"
            />
          </div>
        </div>
      </div>

      <Prose>
        <p>The textile mills walked this same path in the 1890s. They didn't redesign the assembly line first. They installed electric motors into the old steam-engine layouts, ran them, and gathered thirty years of operating experience before they could imagine the new factory floor. The redesign followed the experience. It couldn't have come first.</p>
        <p>We're walking the same path now. Speed up the motors first. Gather the experience. Then redesign the processes.</p>
        <p>The mechanism we can already see working in the near term is skills. A skill is a packaged unit of how-to: a real workflow that removes a real pain. Once it works for one person, it transfers effortlessly to the next. Once it transfers to enough people, the best of them can run in the cloud unattended. That's where the institutional layer starts: skills that quietly became processes.</p>
        <p>The loop is simple, almost banal:</p>
      </Prose>

      <LoopDiagram/>

      <Prose>
        <p><strong>For AI to start working for us, we have to transfer our experience to it. Experience is a set of skills. Skills scale through the ecosystem. And the ecosystem is what eventually reshapes the processes.</strong></p>
        <p>There's no other order. Skip a step and the institutional layer never lands.</p>
        <hr/>
      </Prose>
    </section>
  );
};
window.PatternThenNow = PatternThenNow;

const PatternColumn = ({eyebrow, eyebrowColor, title, steps, tone}) => {
  const isGreen = tone === 'green';
  return (
    <div style={{padding: '26px 28px', background: isGreen ? 'var(--bg-secondary)' : 'var(--bg-primary)'}}>
      <Eyebrow color={eyebrowColor}>{eyebrow}</Eyebrow>
      <div style={{fontSize: 19, fontWeight: 600, color: 'var(--fg-primary)', marginTop: 10, letterSpacing: '-.01em'}}>{title}</div>
      <div style={{marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8}}>
        {steps.map((s, i) => (
          <div key={i} style={{display: 'flex', gap: 12, alignItems: 'baseline'}}>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              color: isGreen ? 'var(--brand-green)' : 'var(--fg-muted)',
              minWidth: 22
            }}>0{i + 1}</span>
            <span style={{fontSize: 13.5, color: isGreen ? 'var(--fg-primary)' : 'var(--fg-secondary)', lineHeight: 1.5}}>
              {s}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
};

const LoopDiagram = () => {
  const stages = [
    {label: 'Experience', sub: 'lived, not lectured'},
    {label: 'Skills',     sub: 'packaged how-to'},
    {label: 'Ecosystem',  sub: 'every surface'},
    {label: 'Processes',  sub: 'reshaped'},
  ];
  return (
    <div className="artifact-frame">
      <div className="artifact-card" style={{padding: '32px 28px'}}>
        <div style={{display: 'flex', alignItems: 'stretch', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap'}}>
          {stages.map((s, i) => (
            <React.Fragment key={s.label}>
              <div style={{
                flex: '1 1 180px', minWidth: 0,
                padding: '18px 20px',
                background: 'var(--bg-primary)',
                border: '1px solid var(--border-default)',
                borderRadius: 10
              }}>
                <div style={{fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--brand-green)', textTransform: 'uppercase', letterSpacing: '.1em'}}>
                  step {i + 1}
                </div>
                <div style={{fontSize: 17, fontWeight: 600, color: 'var(--fg-primary)', marginTop: 6, letterSpacing: '-.01em'}}>{s.label}</div>
                <div style={{fontSize: 12, color: 'var(--fg-muted)', marginTop: 4, fontFamily: 'var(--font-mono)'}}>{s.sub}</div>
              </div>
              {i < stages.length - 1 && (
                <div style={{display: 'flex', alignItems: 'center', color: 'var(--brand-green)'}}>
                  <ArrowRight size={20}/>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
        <div style={{marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)'}}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{color: 'var(--brand-green)'}}>
            <polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
          </svg>
          loop · skip a step and the institutional layer never lands
        </div>
      </div>
    </div>
  );
};

/* ---------- What's next ----------------------------------------------------*/

const WhatsNext = () => {
  const cards = [
    {tag: 'LEGAL',     title: 'A single lawyer · hundreds of court claims',  metric: '$1M', sub: 'in accelerated debt recovery, first 2 weeks · ~$5M after 2 months'},
    {tag: 'ACCOUNTING',title: 'Primary-document verification',                metric: '$0.13', sub: 'per check · 37 documents per accountant per day'},
    {tag: 'SKILLS',    title: 'The Skills Factory from the inside',           metric: '60+', sub: 'what makes a skill compound · what kills it'},
  ];
  return (
    <section style={{padding: '24px 0'}}>
      <Prose>
        <h3>What's next</h3>
        <p>I'll be writing here about the practitioner side of what <a href="https://www.a16z.news/p/institutional-ai-vs-individual-ai" target="_blank" rel="noopener noreferrer" style={{color: 'var(--fg-primary)', textDecoration: 'underline', textDecorationColor: 'var(--brand-green)', textUnderlineOffset: 3}}>a16z just outlined</a>. Specifically:</p>
      </Prose>

      <div className="artifact-frame">
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12}}>
          {cards.map((c, i) => (
            <div key={c.tag} style={{
              padding: '22px 24px',
              background: 'var(--bg-secondary)',
              border: '1px solid var(--border-default)',
              borderRadius: 12,
              position: 'relative', overflow: 'hidden',
              transition: 'transform .2s ease, border-color .2s ease',
              cursor: 'pointer'
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.borderColor = 'rgba(74,222,128,.4)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.borderColor = 'var(--border-default)'; }}
            >
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12}}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--accent-fg)',
                  textTransform: 'uppercase', letterSpacing: '.12em',
                  padding: '3px 8px',
                  background: 'var(--accent-subtle)',
                  border: '1px solid rgba(34,197,94,.25)',
                  borderRadius: 4
                }}>{c.tag}</div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 600,
                  color: 'var(--brand-green)', letterSpacing: '-.02em'
                }}>{c.metric}</div>
              </div>
              <div style={{fontSize: 17, fontWeight: 600, color: 'var(--fg-primary)', marginTop: 14, letterSpacing: '-.01em', lineHeight: 1.3}}>
                {c.title}
              </div>
              <div style={{fontSize: 12.5, color: 'var(--fg-secondary)', marginTop: 8, lineHeight: 1.55}}>
                {c.sub}
              </div>
              <div style={{marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)', display: 'flex', alignItems: 'center', gap: 6}}>
                upcoming · part {i + 2}
              </div>
            </div>
          ))}
        </div>
      </div>

      <Prose>
        <ul>
          <li>How a single lawyer generated hundreds of court claims, producing $1M in accelerated debt recovery in the first two weeks and ~$5M after two months</li>
          <li>How accounting got primary-document verification down to $0.13 per check, 37 documents per accountant per day</li>
          <li>What the Skills Factory looks like from the inside: what makes a skill compound, what kills it</li>
        </ul>
        <p>Sivulka drew the map. I'll be sharing the path.</p>
        <p>Follow if you're walking it too.</p>
      </Prose>
    </section>
  );
};
window.WhatsNext = WhatsNext;

/* ---------- Final CTA ------------------------------------------------------*/

const ArticleCTA = () => (
  <section style={{padding: '80px 28px 60px', position: 'relative', overflow: 'hidden'}}>
    <div aria-hidden style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: 'radial-gradient(ellipse 700px 380px at 50% 50%, rgba(74,222,128,.08), transparent 70%)'
    }}/>
    <div style={{
      maxWidth: 920, margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 1,
      padding: '52px 32px',
      background: 'linear-gradient(180deg, var(--bg-secondary), var(--bg-elevated))',
      border: '1px solid var(--border-default)',
      borderRadius: 18,
      boxShadow: '0 24px 60px rgba(0,0,0,.4)'
    }}>
      <Eyebrow>walk with me</Eyebrow>
      <div style={{fontSize: 36, fontWeight: 600, letterSpacing: '-.025em', marginTop: 14, lineHeight: 1.1}}>
        If you're walking this path too —
      </div>
      <div style={{fontSize: 16, color: 'var(--fg-secondary)', marginTop: 14, maxWidth: 600, marginInline: 'auto', lineHeight: 1.6}}>
        I'll keep writing as we move from individual AI to ecosystems to coordinated institutions.
        If any of this resonates, or contradicts your experience, I want to hear it.
      </div>
      <div style={{marginTop: 28, display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap'}}>
        <a href="https://chat.yambr.com" style={{
          padding: '12px 22px', background: 'var(--accent-muted)', color: '#fff',
          borderRadius: 8, fontSize: 14.5, fontWeight: 500, textDecoration: 'none',
          boxShadow: '0 2px 8px rgba(74,222,128,.22)',
          display: 'inline-flex', alignItems: 'center', gap: 8
        }}>Try yambr <ArrowRight/></a>
        <a href="/" style={{
          padding: '12px 18px',
          color: 'var(--fg-secondary)', borderRadius: 8, fontSize: 14.5,
          fontWeight: 500, textDecoration: 'none', fontFamily: 'var(--font-mono)'
        }}>← Back home</a>
      </div>
    </div>
  </section>
);
window.ArticleCTA = ArticleCTA;

const ArticleFooter = () => (
  <footer style={{
    padding: '32px 28px 48px',
    borderTop: '1px solid var(--border-subtle)',
    fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg-muted)'
  }}>
    <div style={{maxWidth: 1240, margin: '0 auto', display: 'flex', flexWrap: 'wrap', gap: 18, alignItems: 'center'}}>
      <div style={{display: 'flex', alignItems: 'center', gap: 10}}>
        <img src="/assets/yambr-glyph.svg" width="20" height="20" alt=""/>
        <span style={{color: 'var(--fg-secondary)'}}>yambr<span style={{color: 'var(--brand-green)'}}>.</span></span>
      </div>
      <span>© 2026 yambr · BSL 1.1</span>
      <span style={{marginLeft: 'auto'}}>Essay · Apr 2026 · ~14 min read</span>
    </div>
  </footer>
);
window.ArticleFooter = ArticleFooter;
