/* Open source / GitHub social proof — big 38.4k star moment, contributor grid,
   recent activity stream. */

const CONTRIBUTORS = [
  'nora','kenji','ruta','tomo','iris','dax','suki','lin',
  'ben','mara','theo','qi','ash','rick','vi','nate',
  'yash','maya','otto','cal','juno','pip','eve','hana',
].map((n, i) => ({
  name: n,
  hue: (i * 41) % 360,
  commits: Math.floor(30 + Math.random() * 700),
}));

const RECENT_ACTIVITY = [
  { type: 'pr',     user: 'nora',  msg: 'Add streaming support for Claude Haiku 4.5', delta: '+142 -8', num: 1287 },
  { type: 'issue',  user: 'kenji', msg: 'Bug: deploy fails when secrets vault empty', delta: '', num: 1286 },
  { type: 'pr',     user: 'ruta',  msg: 'Refactor orchestrator plan depth limit',     delta: '+64 -91', num: 1285 },
  { type: 'star',   user: 'atrium-dev', msg: 'starred autoarchitect/core',                 delta: '', num: null },
  { type: 'pr',     user: 'tomo',  msg: 'Feature: Kubernetes helm chart v2',          delta: '+312 -0', num: 1284 },
  { type: 'release',user: 'autobot', msg: 'release automated · changelog synced',    delta: '', num: null },
  { type: 'star',   user: 'kernel-labs', msg: 'starred autoarchitect/core',           delta: '', num: null },
];

const OSSSection = () => {
  return (
    <section style={{ paddingTop: 120, paddingBottom: 60, position: 'relative' }}>
      <Container wide>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 60,
          alignItems: 'start',
        }} className="oss-grid">
          {/* LEFT */}
          <div>
            <SectionLabel index={4} label="OPEN SOURCE · MIT" />
            <DisplayTitle size={58}>
              Built in the <Italic style={{ color: 'var(--accent-2)' }}>open.</Italic><br/>
              Owned by <Italic style={{ color: 'var(--accent-2)' }}>you.</Italic>
            </DisplayTitle>
            <p style={{
              marginTop: 20, fontSize: 16, color: 'var(--fg-2)',
              maxWidth: 480, lineHeight: 1.55, textWrap: 'pretty',
            }}>
              Fork it, read it, ship patches back upstream. AutoArchitect is MIT-licensed
              from the orchestrator core to the last agent prompt — no telemetry, no
              hidden bits, no "enterprise tier" in the good stuff.
            </p>
            <p style={{
              marginTop: 16, fontSize: 14.5, color: 'var(--fg-3)',
              maxWidth: 480, lineHeight: 1.6, textWrap: 'pretty',
              padding: '14px 16px',
              background: 'var(--bg-1)',
              borderLeft: '2px solid var(--accent-2)',
              borderRadius: 6,
            }}>
              <a href="https://github.com/syedia/autoarchitect-code" style={{ color: 'var(--accent-2)', textDecoration: 'none', fontWeight: 600 }}>
                autoarchitect-code
              </a>{' '}
              is the agentic substrate the platform runs on. When a specialist
              agent stalls, it delegates here for iterate-until-solved
              reasoning. Skills-based extension. Pluggable LLMs. Same MIT
              license. Same governance.
            </p>

            <div style={{
              marginTop: 28,
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
              border: '1px solid var(--line-2)',
              borderRadius: 12,
              overflow: 'hidden',
            }} className="oss-stats">
              {[
                { k: 'LICENSE',       v: 'MIT',         d: 'Fork it, ship it',         c: 'var(--warn)' },
                { k: 'RUNTIME',       v: 'Self-hosted', d: 'Your infra, your keys',    c: 'var(--accent-2)' },
                { k: 'TELEMETRY',     v: 'None',        d: 'Zero phone-home',          c: 'var(--ok)' },
              ].map(({ k, v, d, c }, i) => (
                <div key={k} style={{
                  padding: '18px 20px',
                  background: 'var(--bg-1)',
                  borderLeft: i === 0 ? 'none' : '1px solid var(--line-2)',
                }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.14em' }}>{k}</div>
                  <div style={{ fontSize: 22, fontWeight: 600, color: 'var(--fg-1)', fontFamily: 'var(--font-mono)', marginTop: 6, letterSpacing: '-0.02em' }}>{v}</div>
                  <div style={{ fontSize: 11, color: c, marginTop: 4, fontFamily: 'var(--font-mono)' }}>{d}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <a href="https://github.com/syedia/autoarchitect" style={{ textDecoration: 'none' }}>
                <GhostBtn icon={<I.github size={15} />} trailing={<I.arrowUpRight size={13} />}>
                  github.com/syedia/autoarchitect
                </GhostBtn>
              </a>
              <a href="https://github.com/syedia/autoarchitect-code" style={{ textDecoration: 'none' }}>
                <GhostBtn icon={<I.github size={15} />} trailing={<I.arrowUpRight size={13} />}>
                  autoarchitect-code (NEW)
                </GhostBtn>
              </a>
              <GhostBtn icon={<I.docs size={14} />}>Read the docs</GhostBtn>
            </div>
          </div>

          {/* RIGHT: terminal + activity feed */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {/* Terminal */}
            <div className="force-dark-panel" style={{
              background: 'var(--bg-1)',
              border: '1px solid var(--line-2)',
              borderRadius: 14,
              overflow: 'hidden',
            }}>
              <div style={{
                padding: '10px 14px',
                borderBottom: '1px solid var(--line-2)',
                background: 'var(--bg-2)',
                display: 'flex', alignItems: 'center', gap: 8,
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: 'var(--fg-3)', letterSpacing: '0.08em',
              }}>
                <div style={{ display: 'flex', gap: 5 }}>
                  <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#ef4444' }} />
                  <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#f5b849' }} />
                  <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#34d399' }} />
                </div>
                <span style={{ marginLeft: 8 }}>~/autoarchitect</span>
                <span style={{ marginLeft: 'auto' }}>zsh</span>
              </div>
              <div style={{
                padding: '16px 18px',
                fontFamily: 'var(--font-mono)', fontSize: 12.5,
                lineHeight: 1.75,
              }}>
                <div><span style={{ color: 'var(--accent-2)' }}>➜</span> <span style={{ color: 'var(--ok)' }}>~</span> <span style={{ color: 'var(--fg-1)' }}>curl -fsSL get.autoarchitect.com | sh</span></div>
                <div style={{ color: 'var(--fg-3)' }}>✓ Docker is running</div>
                <div style={{ color: 'var(--fg-3)' }}>✓ Image pulled (ghcr.io/syedia/autoarchitect:latest)</div>
                <div style={{ color: 'var(--fg-3)' }}>✓ aa wrapper installed at ~/.autoarchitect/aa</div>
                <div><span style={{ color: 'var(--accent-2)' }}>➜</span> <span style={{ color: 'var(--ok)' }}>~</span> <span style={{ color: 'var(--fg-1)' }}>aa configure</span> <span style={{ color: 'var(--fg-3)' }}># pick LLM + paste API key</span></div>
                <div><span style={{ color: 'var(--accent-2)' }}>➜</span> <span style={{ color: 'var(--ok)' }}>~</span> <span style={{ color: 'var(--fg-1)' }}>aa start</span></div>
                <div style={{ color: 'var(--fg-3)' }}>→ Starting Architect + substrate…</div>
                <div style={{ color: 'var(--fg-3)' }}>→ Studio: <span style={{ color: 'var(--accent-2)' }}>http://localhost:18802</span></div>
                <div><span style={{ color: 'var(--accent-2)' }}>➜</span> <span style={{ color: 'var(--ok)' }}>~</span> <span style={{
                  display: 'inline-block', width: 7, height: 14, marginLeft: 1,
                  background: 'var(--accent)', verticalAlign: 'middle',
                  animation: 'blink 1.1s steps(2) infinite',
                }} /></div>
              </div>
            </div>

          </div>
        </div>
      </Container>
    </section>
  );
};

const ActivityRow = ({ type, user, msg, delta, num }) => {
  const icons = {
    pr:      { icon: 'branch',  color: 'var(--accent-2)', tag: 'PR' },
    issue:   { icon: 'close',   color: '#f87171',         tag: 'ISSUE' },
    star:    { icon: 'starFill',color: 'var(--warn)',     tag: 'STAR' },
    release: { icon: 'bolt',    color: '#c084fc',         tag: 'RELEASE' },
  };
  const meta = icons[type];
  const Icn = I[meta.icon];
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '10px 14px',
      borderBottom: '1px solid var(--line-1)',
      fontSize: 12.5, color: 'var(--fg-2)',
    }}>
      <div style={{
        width: 24, height: 24, borderRadius: 6,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'var(--bg-3)', border: '1px solid var(--line-2)',
        color: meta.color, flexShrink: 0,
      }}>
        <Icn size={12} />
      </div>
      <span style={{ color: 'var(--fg-1)', fontWeight: 500, fontFamily: 'var(--font-mono)' }}>@{user}</span>
      <span style={{
        flex: 1,
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
      }}>{msg}</span>
      {delta && <span className="activity-delta" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>{delta}</span>}
      {num && <span className="activity-num" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-4)' }}>#{num}</span>}
    </div>
  );
};

window.OSSSection = OSSSection;